Paragraph
O componente Paragraph é usado para renderizar texto e parágrafos dentro de uma interface. Por padrão ele renderiza uma tag <p>.
Importação
import { Paragraph } from '@escaletech/delta'
Utilização
Alterando a cor
Use a propriedade color para renderizar o Paragraph com uma cor diferente.
Alterando o peso
Para alterar o peso do parágrafo, você pode usar a propriedade weight.
Alterando a altura da linha
Para alterar a altura da linha do parágrafo, você pode usar a propriedade lineHeight.
Alterando o tamanho
Altere o font-size do Paragraph com a propriedade size.
CMS (Content Management System)
Quando utilizamos ferramentas de CMS (Content Management System) como Prismic, Strapi, Ghost entres outros para gerenciar e publicar conteúdos em nossas páginas, é muito comum terem um editor WYSIWYG (What You See Is What You Get), onde podemos definir o texto como um título ou parágrafo, torná-lo em negrito, adicionar links, etc. Fazendo com que suas API retornem como resultado um HTML dinamico para consumirmos em nossos projetos. Para resolvermos esse problema, o componente Paragraph faz com que seus filhos erdem seus estilos mantendo assim suas caractericas como a de seu pai.
Aqui está alguns exemplos:
Obs: recomendamos fortemente que passe div como argumento da propriedade as do componente Paragraph para obter um melhor resultado em SEO (Search Engine Optimizatio).
Prismic
import { RichText } from 'prismic-reactjs'
function Component({ description }){
return (
<Paragraph as="div">
<RichText render={description} />
</Paragraph>
)
}
dangerouslySetInnerHTML
Customização
Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de tema.
import { extendsTheme } from '@escaletech/delta'
export const theme = extendsTheme({
fonts: {
paragraphFontFamily: '$secondary'
},
fontWeights: {
paragraphFontWeight: '$regular'
}
})
Tokens
| Token | Descrição |
|---|---|
| fonts.paragraphFontFamily | Font-family do parágrafo |
| fontWeights.paragraphFontWeight | Peso da fonte do parágrafo |
Props
| Propriedade | Descrição | Tipo | Padrão | Obrigatório |
|---|---|---|---|---|
| size | Define o tamanho do Paragraph | 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' | - | ❌ |
| color | Define a cor do Paragraph | string | - | ❌ |
| weight | Define o peso do Paragraph | 'light', 'regular', 'medium', 'semibold', 'bold' | - | ❌ |
| lineHeight | Define a altura da linha do Paragraph | 'tight', 'md', 'distant', 'superDistant' | - | ❌ |
Aceita todos as propriedades suportados por paragrafos nativos.