Text

Apresentação

O componente Text é um elemento fundamental para exibição de conteúdo textual na interface. Ele oferece suporte a formatação através de BBCode e possui diversas opções de estilização e layout.

Quando usar

• Para exibir qualquer tipo de conteúdo textual
• Quando precisar de formatação básica de texto
• Para criar blocos de texto com diferentes estilos
• Quando precisar de texto com suporte a BBCode
• Para exibir código formatado

Forma básica de uso

import { Text } from 'eitri-luminus';

// Texto básico
<Text>
  Este é um texto simples
</Text>

// Texto com BBCode
<Text>
  Este é um texto com [b]negrito[/b] e [i]itálico[/i]
</Text>

// Texto como código
<Text code>
  const hello = "world";
  console.log(hello);
</Text>

// Texto com quebras de linha
<Text transformBreakLines>
  Primeira linha
  Segunda linha
  Terceira linha
</Text>

Propriedades

Propriedade	Tipo	Descrição
wide	boolean	Define o texto como bloco, ocupando toda a largura disponível
inline	boolean	Define o texto como elemento inline
block	boolean	Alias para wide (mantido por compatibilidade)
code	boolean	Renderiza o texto como código formatado
ignoreBBCode	boolean	Ignora a formatação BBCode no texto
customFontSize	string	Define um tamanho de fonte personalizado
transformBreakLines	boolean	Converte quebras de linha (\n) em elementos <br/>

BBCode Suportado

O componente suporta as seguintes tags BBCode:

• [b]texto[/b] - Texto em negrito
• [i]texto[/i] - Texto em itálico
• [u]texto[/u] - Texto sublinhado
• [s]texto[/s] - Texto riscado
• [Ucase]texto[/Ucase] - Texto em maiúsculas
• [Lcase]texto[/Lcase] - Texto em minúsculas
• [color=cor]texto[/color] - Texto colorido

Heranças

O componente Text herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Métodos via Ref

O componente Text expõe os seguintes métodos públicos que podem ser acessados através de uma ref:

import { useRef } from 'react';
import { Text } from 'eitri-luminus';

const MyComponent = () => {
  const textRef = useRef<Text>(null);

  const handleGetText = () => {
    const content = textRef.current?.getTextContent();
    console.log('Conteúdo:', content);
  };

  const handleSetText = () => {
    textRef.current?.setTextContent('Novo texto');
  };

  return (
    <div>
      <Text ref={textRef}>Texto inicial</Text>
      <button onClick={handleGetText}>Obter texto</button>
      <button onClick={handleSetText}>Definir novo texto</button>
    </div>
  );
};

Método	Tipo de Retorno	Descrição
getTextContent()	string	Retorna o conteúdo de texto do elemento
setTextContent(text: string)	void	Define o conteúdo de texto do elemento

Observações

• Quando usado como código, o texto é exibido em um container com scroll
• O BBCode é processado de forma segura, evitando injeção de HTML malicioso
• O componente suporta aninhamento de outros componentes Text
• Por padrão, o texto é renderizado como um elemento de bloco
• Métodos via ref disponíveis para controle programático do conteúdo de texto