Todos los componentes (204)
Cita
Tipografía · Blockquote · .amset-quote
Qué es y cuándo usarlo
Una cita en bloque, con una raya a su lado y, si se dice quién lo dijo, la atribución debajo precedida de una raya larga.
Cuándo usarlo
- Lo que dijo un cliente en una reseña, un párrafo de un contrato que se comenta, una frase de alguien con nombre.
citees quién lo dijo, y puede llevar formato o un enlace.sourcees la dirección de donde sale el texto y va al atributocitedel elemento.
Cuándo no
- Un aviso o una nota destacada:
Alert. - Las valoraciones de un producto, con sus estrellas:
RatingSummary. - Un bloque de código:
CodeBlock.
Teclado: no participa. Si cite lleva un enlace, ese enlace se enfoca como cualquier otro.
Accesibilidad: sin cite es un <blockquote> y nada más. Con cite, la raíz pasa a ser un <figure> con la cita dentro y la atribución en su <figcaption>: es la única forma de que el nombre quede unido a la cita sin formar parte de lo citado, que es lo que pasaría dentro del <blockquote>. Los atributos que se le pasen van siempre a la raíz, sea cual sea. El atributo cite que escribe source no lo enseña ningún navegador ni lo lee ningún lector: si la fuente importa a quien lee, va también a la vista, en cite.
Aspecto fino: --amset-quote-rule (el color de la raya; por defecto, el acento) y --amset-quote-color (el del texto).
Cómo se ve
Ningun componente obliga a usar el raton.
<Blockquote cite="Informe de accesibilidad" source="Auditoria de octubre">
Ningun componente obliga a usar el raton.
</Blockquote>Props
Se importa con import { Blockquote } from '@amset/ui'. Las obligatorias van marcadas.
| Prop | Tipo | Para qué sirve |
|---|---|---|
childrenobligatoria | ReactNode | — |
cite | ReactNode | Quien lo dijo. Se pinta debajo, precedido de una raya. |
className | string | Se une a las clases de la biblioteca, no las sustituye. |
source | string | La direccion de la fuente. Va al atributo `cite` del elemento. |
Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.
Mandos
Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.
| Variable | Por defecto |
|---|---|
--amset-quote-rule | var(--amset-accent) |
--amset-quote-color | var(--amset-ink) |
Cómo se cambia
.amset-quote {
--amset-quote-rule: ...;
--amset-quote-color: ...;
}En el banco de pruebas
Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: