VISOMI / FRONTEND UI

Componentes sobre HTML nativo.

Clases Tailwind compartidas y controles nativos de Angular y Astro. Un mismo lenguaje visual que aprovecha el comportamiento del navegador.

37 familias de componentes

Los ejemplos usan datos ficticios. No se envía ni guarda información.

Acciones

Botones

button.classes()

Ver uso

Angular

<button appUI variant="secondary" size="sm">Cancel</button>
<button appUI size="icon" aria-label="Edit">…</button>

Astro

<Button variant="secondary" size="sm">Cancel</Button>
<Button size="icon" aria-label="Edit">…</Button>

Estilos compartidos

import { button } from '@visomi-stack/web-frontend-ui';

button.classes();

Enlaces con apariencia de botón

linkButton.classes()

Continuar Campos de texto

Ver uso

Angular

<a appUI="button" href="#example" variant="secondary">Continue</a>

Astro

<LinkButton href="#example" variant="secondary">Continue</LinkButton>

Estilos compartidos

import { linkButton } from '@visomi-stack/web-frontend-ui';

linkButton.classes();

Tipografía

Encabezados

heading.classes()

Una jerarquía clara

Ver uso

Angular

<h2 appUI uiSize="lg">A clear hierarchy</h2>

Astro

<Heading as="h2" uiSize="lg">A clear hierarchy</Heading>

Estilos compartidos

import { heading } from '@visomi-stack/web-frontend-ui';

heading.classes();

Texto

text.classes()

Una buena base deja espacio para tu contenido.

El texto de apoyo sigue siendo legible en ambos temas.

Una buena base deja espacio para tu contenido.

Ver uso

Angular

<p appUI uiSize="md">Good defaults.</p>
<p appUI tone="muted" uiSize="sm">Supporting text.</p>

Astro

<Text uiSize="md">Good defaults.</Text>
<Text tone="muted" uiSize="sm">Supporting text.</Text>

Estilos compartidos

import { text } from '@visomi-stack/web-frontend-ui';

text.classes();

Código

code.classes()

button.classes()

const ready = true;
button.classes({ variant: 'primary', size: 'md' });

Ver uso

Angular

<code appUI>button.classes()</code>
<pre><code appUI block>const ready = true;</code></pre>

Astro

<Code>button.classes()</Code>
<pre><Code block>const ready = true;</Code></pre>

Estilos compartidos

import { code } from '@visomi-stack/web-frontend-ui';

code.classes();

Enlaces de texto

link.classes()

Saber más Saber más

Saber más

Ver uso

Angular

<a appUI href="#forms">Learn more</a>
<a appUI variant="muted" underline="hover" href="#forms">Learn more</a>
<a appUI variant="inverse" href="#forms">Learn more</a>

Astro

<Link href="#forms">Learn more</Link>
<Link variant="muted" underline="hover" href="#forms">Learn more</Link>
<Link variant="inverse" href="#forms">Learn more</Link>

Estilos compartidos

import { link } from '@visomi-stack/web-frontend-ui';

link.classes();

Separadores

divider.classes()

Ver uso

Angular

<hr appUI />
<hr appUI soft />

Astro

<Divider />
<Divider soft />

Estilos compartidos

import { divider } from '@visomi-stack/web-frontend-ui';

divider.classes();

Composición

Contenedores

container.classes()

El contenido se centra con un ancho estándar de Tailwind.

Ver uso

Angular

<div appUI="container" width="sm">Content</div>

Astro

<Container width="sm">Content</Container>

Estilos compartidos

import { container } from '@visomi-stack/web-frontend-ui';

container.classes();

Tarjetas

card.classes()

Un espacio para concentrarte

Las superficies y el espaciado crean una jerarquía clara.

Superficie elevada

Las superficies y el espaciado crean una jerarquía clara.

Superficie transparente

Ver uso

Angular

<article appUI tone="raised" padding="md">Content</article>

Astro

<Card tone="raised" padding="md">Content</Card>

Estilos compartidos

import { card } from '@visomi-stack/web-frontend-ui';

card.classes();

Cabeceras de página

pageHeader.classes()

Ajustes del espacio

Una cabecera reutilizable con acciones.

Ver uso

Angular

<header appUI><h2>Workspace settings</h2><button appUI>Save</button></header>

Astro

<PageHeader><Heading>Workspace settings</Heading><Button>Save</Button></PageHeader>

Estilos compartidos

import { pageHeader } from '@visomi-stack/web-frontend-ui';

pageHeader.classes();

Estructura de aplicación

Estructuras de aplicación

appShell.classes()

Barra lateral en escritorio e inferior en móvil. Enlaces nativos, estilos compartidos y sin runtime de layout.

Abrir el layout completo

Ver uso

Angular

<app-shell contentId="main" skipLabel="Skip to content">
  <app-sidebar label="Primary">...</app-sidebar>
  <header app-topbar>...</header>
  <h1>Workspace</h1>
  <nav appUI="navbar" aria-label="Primary">...</nav>
</app-shell>

Astro

<AppShell contentId="main" skipLabel="Skip to content">
  <Sidebar slot="sidebar" label="Primary">...</Sidebar>
  <Topbar slot="header">...</Topbar>
  <h1>Workspace</h1>
  <Navbar slot="mobile" aria-label="Primary">...</Navbar>
</AppShell>

Estilos compartidos

import { appShell } from '@visomi-stack/web-frontend-ui';

appShell.classes();

Barras laterales

sidebar.classes()

Ver uso

Angular

<app-sidebar label="Primary">
  <strong data-slot="brand">VISOMI</strong>
  <a appUI="nav-item" href="/app/en/" aria-current="page">Overview</a>
  <a data-slot="footer" href="/help">Help</a>
</app-sidebar>

Astro

<Sidebar label="Primary">
  <strong slot="brand">VISOMI</strong>
  <NavItem href="/en/" aria-current="page">Overview</NavItem>
  <a slot="footer" href="/help">Help</a>
</Sidebar>

Estilos compartidos

import { sidebar } from '@visomi-stack/web-frontend-ui';

sidebar.classes();

Cabeceras de aplicación

topbar.classes()

Espacio

Abrir el layout completo

Ver uso

Angular

<header app-topbar>
  <span data-slot="title">Workspace</span>
  <button appUI>Save</button>
</header>

Astro

<Topbar>
  <span slot="title">Workspace</span>
  <Button>Save</Button>
</Topbar>

Estilos compartidos

import { topbar } from '@visomi-stack/web-frontend-ui';

topbar.classes();

Navegación móvil

navbar.classes()

Ver uso

Angular

<nav appUI="navbar" aria-label="Primary">
  <a appUI="nav-item" placement="navbar" href="/app/en/" aria-current="page">Overview</a>
  <a appUI="nav-item" placement="navbar" href="/app/en/settings/">Settings</a>
</nav>

Astro

<Navbar aria-label="Primary">
  <NavItem placement="navbar" href="/en/" aria-current="page">Overview</NavItem>
  <NavItem placement="navbar" href="/en/settings/">Settings</NavItem>
</Navbar>

Estilos compartidos

import { navbar } from '@visomi-stack/web-frontend-ui';

navbar.classes();

Elementos de navegación

navItem.classes()

Ver uso

Angular

<a appUI="nav-item" routerLink="/settings" routerLinkActive ariaCurrentWhenActive="page">Settings</a>
<button appUI="nav-item" type="button" (click)="openHelp()">Help</button>

Astro

<NavItem href="/en/settings/" aria-current="page">Settings</NavItem>
<button type="button" class={navItem.classes()}>Help</button>

Estilos compartidos

import { navItem } from '@visomi-stack/web-frontend-ui';

navItem.classes();

Datos

Insignias

badge.classes()

BorradorEn cursoListoRequiere atenciónNo disponible

Ver uso

Angular

<span appUI="badge" tone="success">Ready</span>

Astro

<Badge tone="success">Ready</Badge>

Estilos compartidos

import { badge } from '@visomi-stack/web-frontend-ui';

badge.classes();

Avatares

avatar.classes()

ML ML ML

Ver uso

Angular

<span appUI="avatar" uiSize="md" role="img" aria-label="Morgan Lee">ML</span>
<img appUI src="/favicon.svg" alt="Demo workspace" />

Astro

<Avatar label="Morgan Lee" uiSize="md">ML</Avatar>
<Avatar src="/favicon.svg" label="Demo workspace" />

Estilos compartidos

import { avatar } from '@visomi-stack/web-frontend-ui';

avatar.classes();

Tablas

table.classes()

Las filas se convierten en tarjetas con etiquetas antes de md. Las cabeceras siguen disponibles para tecnologías de asistencia.

Espacios de ejemplo
Espacio	Estado
Estudio	Listo
Pruebas	Borrador

Ver uso

Angular

<table appUI mobileCards stickyHeaders role="table"><caption>Workspaces</caption>…</table>
<!-- Keep native header associations and explicit row/cell roles. Cell labels use <span data-slot="label" aria-hidden="true">…</span>. -->

Astro

<Table mobileCards stickyHeaders role="table"><caption>Workspaces</caption>…</Table>
<!-- Keep native header associations and explicit row/cell roles. Cell labels use <span data-slot="label" aria-hidden="true">…</span>. -->

Estilos compartidos

import { table } from '@visomi-stack/web-frontend-ui';

table.classes();

Listas descriptivas

descriptionList.classes()

Plan: Equipo
Integrantes: 8
Estado: Listo

Ver uso

Angular

<dl appUI><dt>Plan</dt><dd>Team</dd></dl>

Astro

<DescriptionList><dt>Plan</dt><dd>Team</dd></DescriptionList>

Estilos compartidos

import { descriptionList } from '@visomi-stack/web-frontend-ui';

descriptionList.classes();

Paginación

pagination.classes()

Ver uso

Angular

<nav appUI="pagination" aria-label="Pages"><a appUI="button" href="?page=2" aria-current="page">2</a></nav>

Astro

<Pagination aria-label="Pages"><LinkButton href="?page=2" aria-current="page">2</LinkButton></Pagination>

Estilos compartidos

import { pagination } from '@visomi-stack/web-frontend-ui';

pagination.classes();

Formularios

Grupos de campos

fieldset.classes()

Preferencias de ejemploRecibir novedades de ejemplo

Ver uso

Angular

<fieldset appUI><legend appUI>Preferences</legend><label appUI inline><input appUI type="checkbox" /> Updates</label></fieldset>

Astro

<Fieldset><Label as="legend">Preferences</Label><Label inline><Checkbox /> Updates</Label></Fieldset>

Estilos compartidos

import { fieldset } from '@visomi-stack/web-frontend-ui';

fieldset.classes();

Campos

field.classes()

Nombre visible

Visible en tu espacio de ejemplo.

Ver uso

Angular

<app-field #nameField="appField" controlId="name" label="Name" description="Visible name."><input appUI [id]="nameField.controlId()" [attr.aria-describedby]="nameField.describedBy()" /></app-field>

Astro

<Field controlId="name" label="Name" description="Visible name."><Input id="name" aria-describedby="name-help" /></Field>

Estilos compartidos

import { field } from '@visomi-stack/web-frontend-ui';

field.classes();

Etiquetas

label.classes()

Nombre visible

Ver uso

Angular

<label appUI for="label-example">Name</label><input appUI id="label-example" />

Astro

<Label for="label-example">Name</Label><Input id="label-example" />

Estilos compartidos

import { label } from '@visomi-stack/web-frontend-ui';

label.classes();

Descripciones

description.classes()

Correo electrónico

Usa una dirección ficticia para este ejemplo.

Ver uso

Angular

<input appUI id="email" aria-label="Email" aria-describedby="email-help" /><p appUI="description" id="email-help">Use an example address.</p>

Astro

<Input id="email" aria-label="Email" aria-describedby="email-help" /><Description id="email-help">Use an example address.</Description>

Estilos compartidos

import { description } from '@visomi-stack/web-frontend-ui';

description.classes();

Mensajes de error

errorMessage.classes()

Correo electrónico

Escribe una dirección de correo válida.

Ver uso

Angular

<input appUI id="email" aria-label="Email" aria-invalid="true" aria-describedby="email-error" /><p app-error id="email-error">Enter a valid address.</p>

Astro

<Input id="email" aria-label="Email" aria-invalid="true" aria-describedby="email-error" /><ErrorMessage id="email-error">Enter a valid address.</ErrorMessage>

Estilos compartidos

import { errorMessage } from '@visomi-stack/web-frontend-ui';

errorMessage.classes();

Campos de texto

input.classes()

Los errores se expanden al salir de un campo inválido o comprobar el formulario. Se ocultan al editar y cuando el campo es válido.

Correo electrónico

Usa una dirección ficticia para este ejemplo.

Escribe una dirección de correo válida.

Ver uso

Angular

<input appUI type="email" uiSize="sm" [size]="24" required />

Astro

<Input type="email" uiSize="sm" size={24} required />

Estilos compartidos

import { input } from '@visomi-stack/web-frontend-ui';

input.classes();

Áreas de texto

textarea.classes()

Mensaje

Escribe un mensaje breve de ejemplo.

Ver uso

Angular

<textarea appUI uiSize="md" id="message" rows="3" aria-label="Message"></textarea>

Astro

<Textarea uiSize="md" id="message" rows={3} aria-label="Message">Example text.</Textarea>

Estilos compartidos

import { textarea } from '@visomi-stack/web-frontend-ui';

textarea.classes();

Selectores

select.classes()

Región

Ver uso

Angular

<select appUI uiSize="md" aria-label="Region"><option value="am">Americas</option></select>

Astro

<Select uiSize="md" aria-label="Region"><option value="am" selected>Americas</option></Select>

Estilos compartidos

import { select } from '@visomi-stack/web-frontend-ui';

select.classes();

Casillas de verificación

checkbox.classes()

Recibir novedades de ejemploEjemplo deshabilitado

Ver uso

Angular

<label appUI inline><input appUI type="checkbox" name="updates" /> Receive updates</label>

Astro

<Label inline><Checkbox name="updates" /> Receive updates</Label>

Estilos compartidos

import { checkbox } from '@visomi-stack/web-frontend-ui';

checkbox.classes();

Opciones exclusivas

radio.classes()

Elige un tipo de espacio

PersonalCompartido

Ver uso

Angular

<fieldset appUI><legend>Workspace type</legend><label appUI inline><input appUI type="radio" name="kind" value="personal" /> Personal</label></fieldset>

Astro

<Fieldset><legend>Workspace type</legend><Label inline><Radio name="kind" value="personal" /> Personal</Label></Fieldset>

Estilos compartidos

import { radio } from '@visomi-stack/web-frontend-ui';

radio.classes();

Interruptores

toggle.classes()

Activar notificaciones de ejemplo

Ver uso

Angular

<label appUI inline><input appUI="switch" type="checkbox" /> Enable notifications</label>

Astro

<Label inline><Toggle /> Enable notifications</Label>

Estilos compartidos

import { toggle } from '@visomi-stack/web-frontend-ui';

toggle.classes();

Tarjetas de selección

radioCard.classes()

EstándarUna selección clara con controles nativos.CompartidoUna selección clara con controles nativos.

Ver uso

Angular

<label appUI="radio-card"><input appUI type="radio" name="plan" value="standard" /><span>Standard</span></label>

Astro

<RadioCard><Radio name="plan" value="standard" /><span>Standard</span></RadioCard>

Estilos compartidos

import { radioCard } from '@visomi-stack/web-frontend-ui';

radioCard.classes();

Campos con adornos

inputGroup.classes()

Importe de ejemplo

Ver uso

Angular

<div appUI="input-group"><span data-slot="prefix" aria-hidden="true">$</span><input appUI aria-label="Amount" /></div>

Astro

<InputGroup><span data-slot="prefix" aria-hidden="true">$</span><Input aria-label="Amount" /></InputGroup>

Estilos compartidos

import { inputGroup } from '@visomi-stack/web-frontend-ui';

inputGroup.classes();

Estados y contenido nativo

Avisos en línea

alert.classes()

Tu ejemplo está listo

El estado tiene una etiqueta visible y no depende solo del color.

Requiere atención

El estado tiene una etiqueta visible y no depende solo del color.

No disponible

El estado tiene una etiqueta visible y no depende solo del color.

Ver uso

Angular

<div appUI="alert" tone="success" role="status"><strong>Ready</strong><p>Visible feedback.</p></div>

Astro

<Alert tone="success" role="status"><strong>Ready</strong><p>Visible feedback.</p></Alert>

Estilos compartidos

import { alert } from '@visomi-stack/web-frontend-ui';

alert.classes();

Indicadores de carga

loader.classes()

Cargando ejemplo

Ver uso

Angular

<span role="status"><span appUI="loader" aria-hidden="true"></span><span class="sr-only">Loading</span></span>

Astro

<Loader label="Loading example" />

Estilos compartidos

import { loader } from '@visomi-stack/web-frontend-ui';

loader.classes();

Contenido expandible

disclosure.classes()

¿Qué comparten las aplicaciones?

Comparten las clases tipadas. Cada aplicación conserva su HTML nativo, sus eventos y el comportamiento de los formularios.

Ver uso

Angular

<details appUI><summary>What is shared?</summary><p>The class recipes.</p></details>

Astro

<Disclosure summary="What is shared?"><p>The class recipes.</p></Disclosure>

Estilos compartidos

import { disclosure } from '@visomi-stack/web-frontend-ui';

disclosure.classes();

Diálogos

dialog.classes()

Ver uso

Angular

<button appUI (click)="example.showModal()">Open dialog</button>
<dialog appUI #example="appUIDialog" aria-labelledby="dialog-title"><h2 id="dialog-title">Review</h2><form method="dialog"><button appUI type="submit">Close</button></form></dialog>

Astro

<Button disabled data-ui-dialog-open="example-dialog">Open dialog</Button>
<Dialog id="example-dialog" aria-labelledby="dialog-title"><h2 id="dialog-title">Review</h2><form method="dialog"><Button type="submit">Close</Button></form></Dialog>
<!-- The docs enhancement script calls showModal(). -->

Estilos compartidos

import { dialog } from '@visomi-stack/web-frontend-ui';

dialog.classes();