Slot
Slot merges its props and classes into its only child — the engine of asChild — and VisuallyHidden names things for screen readers only.
Web uniquement — React, depuis @krizaka/ui/slot. Stable : son API ne change qu’à une version majeure.
Quand l’utiliser
- To give your own component an
asChildprop. VisuallyHiddenfor words that only assistive technology needs: an icon button's name, a table caption.
Quand ne pas l’utiliser
- To style a link like a button:
asChildon the button does it.À la place : Button - To hide something from everyone: use
hidden.
Installation
Installer
npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { Slot, VisuallyHidden } from "@krizaka/ui/slot";Exemples
Slot
The link is rendered, styled by the Slot.
import { Slot, VisuallyHidden } from "@krizaka/ui/slot";
export default function SlotAsChild() {
// Slot merges its props and classes into its only child: the link is rendered, styled by the Slot.
return (
<Slot className="text-sm font-semibold text-fg underline underline-offset-4">
<a href="#docs">
Read the docs
<VisuallyHidden> about Slot</VisuallyHidden>
</a>
</Slot>
);
}VisuallyHidden
An icon button named for screen readers.
import { VisuallyHidden } from "@krizaka/ui/slot";
// A name for assistive technology only: the icon is seen, the words are read.
export default function SlotVisuallyHidden() {
return (
<button type="button" className="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-border-default text-fg">
<svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden>
<path d="M18 6 6 18M6 6l12 12" />
</svg>
<VisuallyHidden>Close</VisuallyHidden>
</button>
);
}Props
Ce module n'a pas de props de composant : voir l'import et l'aperçu ci-dessus.
Accessibilité
VisuallyHiddenis read by screen readers and not shown.Slotkeeps the child's element: a link stays a link, with its role and keyboard.
Bonnes pratiques
Slottakes exactly one child element.- Prefer a visible label to
VisuallyHiddenwhen there is room for one.
Composants liés
Générée depuis le code de @krizaka/ui 2.0.0-beta.6 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub