List
@stellaria/nebula-webListPropsPreview
Props
8| Prop | Type | Default |
|---|---|---|
children | ReactNode | — |
className Composes with the classes `Box` computes instead of replacing them. | string | — |
component The element it paints. Left alone it follows `type`, so set it only to keep the list styling on another tag — and remember that a list that is not `ul` or `ol` stops being announced as one. | (ElementType & C) | "ul" |
icon One glyph to replace the native markers across the list, laying every item out as icon beside content. It reaches items by cloning the direct children, so an item that brings its own `icon` keeps it and an item wrapped in another component never receives one. | ReactNode | — |
reveal Animates the element in when it first scrolls into view. `true` takes the catalogue entrance; an object tunes it — `preset`, `distance`, `spring`, `duration`, `once`, `amount`, `rootMargin` and `index` for a stagger. It lives here rather than on each surface so that `Card`, `Paper`, `GradientBorder`, `Section` and anything else built on `Box` inherit one implementation. Without it `Box` stays a server component; with it the root swaps for a client shell and the children keep rendering on the server. The entrance is a CSS transition, not a JavaScript animation: it is the only motion in the catalogue that fires WHILE the user scrolls, and the compositor should own it. | boolean | UseRevealOptions | — |
spacing Gap under each item, applied to the direct `li` children only and cleared on the last one, so a nested list keeps its own rhythm instead of inheriting this one. | SpacingValue | "xs" |
type Whether the list is numbered, which is what picks `ol` over `ul`. It changes the semantics, not the look: use it when the order carries meaning, not to get numbers. | ListType | "unordered" |
withPadding Restores the indent the component strips, and with it hangs the markers outside the text block so wrapped lines line up under each other. Prose wants it on; a list used as layout does not. | boolean | false |
Parts
1List.ItemAlso accepts
On top of its own props, this component forwards these groups.