Typography

Vista previa

Typography es un conjunto de primitivos de texto semántico para encabezados, párrafos y texto en línea. No existe una parte Root; cada primitivo se usa directamente: Heading renderiza un elemento de encabezado, Text un párrafo, Lead un párrafo introductorio, Small texto pequeño, Muted texto atenuado, InlineCode código en línea y Blockquote una cita.

#Uso

Usa las partes directamente; no hay un Root envolvente. Importa y compón Heading, Text, Lead, Small, Muted, InlineCode y Blockquote según sea necesario.

import * as Typography from "@solidiom/typography"

;<>
  <Typography.Heading>Primeros pasos</Typography.Heading>
  <Typography.Lead>Una breve introducción al tema.</Typography.Lead>
  <Typography.Text>
    Texto de cuerpo con <Typography.InlineCode>código en línea</Typography.InlineCode> y{" "}
    <Typography.Muted>texto atenuado</Typography.Muted>.
  </Typography.Text>
  <Typography.Blockquote>Una cita memorable.</Typography.Blockquote>
  <Typography.Small>Texto en letra pequeña.</Typography.Small>
</>

#Instalación

Instala el paquete con pnpm add @solidiom/typography. El paquete requiere dependencias pares compatibles de solid-js y @solidjs/web.

#Partes

typography expone 7 partes:

• Heading — renderiza un elemento de encabezado.
• Text — renderiza un párrafo.
• Lead — renderiza un párrafo introductorio.
• Small — renderiza texto pequeño.
• Muted — renderiza texto atenuado.
• InlineCode — renderiza código en línea.
• Blockquote — renderiza una cita.

#Estilos

typography incluye los atributos data-scope="typography" y data-part en cada parte para seleccionar estilos CSS o recetas.

#Teclado y comportamiento

Este primitivo no tiene interacción de teclado propia.

#Composición

Usa estos primitivos de texto dentro de cualquier diseño o composición de contenido para aplicar una tipografía semántica coherente.

#SSR e hidratación

Typography renderiza HTML estático y no requiere hidratación.

solidiom add typography