Todo enlace de una lista acepta
href
(cualquier URL) o
to
(una ruta con
params
y
search
tipados), además de
target,
rel,
download,
hreflang,
lang
y
title. Con
to
navega sin recargar, se localiza con
@meekojs/i18n
y
aria-current
lo decide la ruta activa. Con
href, es el actual si coincide con la prop
current.
UINavigationTree
La navegación lateral de esta guía. Cada grupo se pliega con un
details, y en el grupo actual siempre se ve el enlace actual.
<UINavigationTree label="Guía" current="/install" bind:groups="[
{ title: 'Primeros pasos', items: [
{ label: 'Instalación', href: '/install' },
{ label: 'UIButton', href: '/buttons', code: true, featured: true },
] },
]" />| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
groups
|
readonly UINavigationTreeGroup[]
| Obligatoria. title, icon, open e items; cada enlace admite icon, code, featured y aliases. |
current
|
string
| El enlace actual, cuando van con href. |
label
|
string
| Nombre de la navegación. |
collapsible
|
boolean
true
| Los grupos se pliegan. |
featuredLabel / emptyText
|
string
| Etiqueta de un destacado y texto sin enlaces. |
class
|
string
| Clases adicionales. |
Admite los snippets
item(item, current),
icon(entry)
y
empty.
UINavigationTabs y UITabs
UINavigationTabs
son enlaces entre páginas, no un
tablist: el indicador sigue al actual con posicionamiento por ancla.
UITabs
son paneles de una misma página, con el patrón ARIA de pestañas: las flechas cambian de panel, y el elegido se ve antes de hidratar.
<!-- Enlaces entre páginas -->
<UINavigationTabs label="Secciones" current="/metrics"
bind:items="[{ label: 'Métricas', href: '/metrics' }, { label: 'Moderación', href: '/moderation' }]" />
<!-- Paneles de una misma página -->
<UITabs model="tab" label="Ajustes"
bind:items="[{ value: 'account', label: 'Cuenta' }, { value: 'team', label: 'Equipo' }]">
<snippet name="panel-account">Tu cuenta</snippet>
<snippet name="panel-team">Tu equipo</snippet>
</UITabs>| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
items
|
readonly UINavigationLink[]
| Obligatoria. Los enlaces. |
current / label / class
|
string
| Enlace actual, nombre de la navegación y clases. |
| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
items
|
readonly UITabsItem[]
| Obligatoria. value, label y disabled. |
model
|
Signal<Value | undefined>
| La pestaña elegida; por defecto, la primera. |
label / labelledBy
|
string
| Nombre accesible de la lista de pestañas. |
id / class
|
string
| Identidad y clases de la raíz. |
Admite los snippets
panel-<valor>,
panel(item)
y
tab(item), y el evento
change.
UIBreadcrumb, UIPageNavigation y UIPagination
El último elemento de
UIBreadcrumb
es la página actual, y sin destino es texto.
UIPageNavigation
enlaza la página anterior y la siguiente.
UIPagination
cuenta lo mostrado y carga más: con
moreLink
es un enlace que funciona sin JavaScript.
<UIBreadcrumb bind:items="[{ label: 'Inicio', href: '/' }, { label: 'Guías', href: '/guides' }, { label: 'Tablas' }]" />
<UIPageNavigation bind:previous="{ label: 'Modal', to: '/modals' }" bind:next="{ label: 'Popover', to: '/popover' }" />
<UIPagination bind:shown="rows.value.length" bind:total="total" bind:hasMore="more.value"
bind:busy="loading.value" on:loadMore="load" />| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
items
|
readonly UIBreadcrumbItem[]
| UIBreadcrumb. Obligatoria. El último es la página actual. |
previous / next
|
UINavigationLink
| UIPageNavigation. Las páginas vecinas. |
previousLabel / nextLabel
|
string
| UIPageNavigation. El texto sobre cada enlace. |
label / class
|
string
| Nombre de la navegación y clases. |
| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
shown / total
|
number
| Cuántos se muestran y cuántos hay. |
countText
|
string
| Sustituye la cuenta. |
hasMore / busy
|
boolean
false
| Si queda más y si está cargando. |
moreLink
|
UILinkTarget
| Un enlace en lugar del botón: funciona sin JavaScript. |
loadMoreLabel / loadingLabel
|
string
| Textos del botón. |
label / class
|
string
| Nombre de la navegación y clases. |
Admite el snippet
default
y el evento
loadMore.
UITableOfContents
Pinta la entrada activa con
scroll-target-group, sin script, donde existe. Un
IntersectionObserver
mínimo mantiene
aria-current="location"
en todos los navegadores. Usa
variant="aside"
en la columna y
variant="collapsible"
en el contenido:
UIPage
muestra cada uno sólo cuando corresponde.
<UITableOfContents variant="collapsible"
bind:entries="[{ id: 'usage', text: 'Uso', level: 2 }, { id: 'api', text: 'API', level: 2 }]" />| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
entries
|
readonly UITableOfContentsEntry[]
| Obligatoria. id, text y level. |
active
|
string
| Entrega a la aplicación el control de la entrada activa. |
variant
|
aside | collapsible
aside
| En la columna o plegable en el contenido. |
label / class
|
string
| Nombre de la navegación y clases. |
UILocaleSwitcher y UILocaleSuggestion
Son presentación: reciben los destinos ya calculados y no leen rutas ni cookies. Con menos de dos idiomas, el selector no pinta nada. La sugerencia va escrita en el idioma que ofrece y el botón
stay, en el actual; la aplicación decide cuándo mostrarla, tras montar, y qué guarda.
<UILocaleSwitcher bind:items="[
{ code: 'es', label: 'Español', href: '/guide', current: true },
{ code: 'en', label: 'English', href: '/en/guide' },
]" />
<UILocaleSuggestion bind:items="items" suggested="en" on:stay="remember" />| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
items
|
readonly UILocaleItem[]
| Obligatoria. code, label, href o to, y current. |
suggested
|
string
| UILocaleSuggestion. El código que ofrece. |
message / goLabel / stayLabel
|
string
| UILocaleSuggestion. Sus textos. |
label / class
|
string
| Nombre accesible y clases. |
Los tipos
UINavigationTreeProps,
UINavigationTabsProps,
UITabsProps,
UIBreadcrumbProps,
UIPageNavigationProps,
UIPaginationProps,
UITableOfContentsProps,
UILocaleSwitcherProps
y
UILocaleSuggestionProps
se exportan desde
@meekojs/ui/runtime.