UIStat y UIDescriptionList
Una cifra con su etiqueta, o varios pares etiqueta y valor. Las dos son una lista de definición (dl).
UIDescriptionList
se queda en una columna en móvil.
- Visitas
- 1280
- Últimos 7 días
- Búsquedas
- 96
- Respuestas útiles
- 92 %
- Estado
- Publicado
- Hoy
- Autor
- Equipo Meeko
- Idiomas
- 2
- es, en
<UIStat label="Visitas" bind:value="1280" detail="Últimos 7 días" />
<UIDescriptionList bind:columns="2" bind:items="[
{ label: 'Estado', value: 'Publicado', detail: 'Hoy' },
{ label: 'Autor', value: 'Equipo Meeko' },
]" />
<UIDisclosure summary="Detalles técnicos"><p>Se abre sin JavaScript.</p></UIDisclosure>| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
label
|
string
| Obligatoria. Qué se mide. |
value
|
string | number
| Obligatoria. La cifra. |
detail
|
string
| Periodo o comparación. |
class
|
string
| Clases adicionales. |
| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
items
|
readonly UIDescriptionItem[]
| Obligatoria. label, value y detail. |
columns
|
1 | 2 | 3
1
| Columnas a partir del ancho de móvil. |
class
|
string
| Clases adicionales. |
UIDisclosure
Un
details
nativo: se abre con el teclado y sin JavaScript.
Detalles técnicos
El contenido ya está en el HTML, así que el buscador de la página lo encuentra.
| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
summary
|
string
| Obligatoria. El texto que abre y cierra. |
open
|
boolean
false
| Abierto desde el principio. |
class
|
string
| Clases adicionales. |
UIDiff
Recibe un diff unificado y marca cada línea con
data-kind
(add,
remove,
hunk,
file,
context) y un texto para lectores de pantalla: el color no es el único significado.
--- a/guide.md +++ b/guide.md @@ -1,3 +1,3 @@ # Guía Eliminado:-Instala con npm. Añadido:+Instala con pnpm. Después, registra el módulo.
<UIDiff label="Cambios en la guía" bind:diff="patch" />| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
diff
|
string
| Obligatoria. El diff unificado. |
label
|
string
| Obligatoria. Nombre de la región. |
emptyText
|
string
| Lo que se muestra sin cambios. |
lineLabels
|
Partial<Record<UIDiffLineKind, string>>
| El texto que anuncia cada tipo de línea. |
class
|
string
| Clases adicionales. |
UICodeBlock
Código con su botón de copiar, oculto hasta hidratar porque es el único script. En
html
recibe un
pre
ya resaltado (Shiki con
--shiki-light
y
--shiki-dark) y en
code, lo que se copia.
mode="log"
usa
role="log"
y parte las líneas.
pnpm add @meekojs/uiconst count = signal(0)let count = 0build: 47 módulos
build: listo en 1,2 s| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
code / html
|
string / TrustedHtml
| Lo que se copia y, si lo hay, su versión resaltada. |
label / lang
|
string
| Nombre del bloque y lenguaje. |
verdict / verdictLabel
|
good | bad / string
| Marca un ejemplo como bueno o malo, con texto. |
mode
|
code | log
code
| Con log, role=log y sin botón de copiar salvo con copy. |
copy
|
boolean
true con code
| Muestra el botón de copiar. |
copyLabel / copyAriaLabel / copiedLabel / copyFailedLabel
|
string
| Textos del botón. |
uiLang / labelLang
|
string
| Idioma de los textos de la interfaz y de la etiqueta. |
class
|
string
| Clases adicionales. |
UIProse
Viste Markdown renderizado o tu propio HTML. El texto mantiene una medida de lectura, mientras el código y las tablas pueden ocupar toda la columna. Un componente de UI dentro del texto conserva su aspecto. Todas estas guías van dentro de un
UIProse.
Un título de sección
Un párrafo con
un enlace,
énfasis
y
código.
- Una lista
- con dos elementos
| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
as
|
div | article | section
div
| Etiqueta de la raíz. |
html
|
TrustedHtml
| HTML ya renderizado y de confianza; sin él, el snippet default. |
class
|
string
| Clases adicionales. La clase meeko-ui-prose también sirve en cualquier elemento. |
<UICodeBlock label="Terminal" code="pnpm add @meekojs/ui" />
<UICodeBlock verdict="good" verdictLabel="Bien" lang="ts" bind:code="good" />
<UICodeBlock mode="log" label="Registro" bind:code="log" />
<UIProse as="article" bind:html="doc.html" />
Los tipos
UIStatProps,
UIDescriptionListProps,
UIDisclosureProps,
UIDiffProps,
UICodeBlockProps
y
UIProseProps
se exportan desde
@meekojs/ui/runtime.