CardView
The props declared for CardView, generated from the types @proyecto-viviana/ui ships.
Import
import { CardView } from "@proyecto-viviana/ui";Props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | (item: T) => JSX.Element | — | The cards contained within the CardView. |
layout | 'grid' | 'waterfall' | 'grid' | The layout of the cards. |
size | 'S' | 'M' | 'L' | 'XL' | 'XS' | 'M' | The size of the cards. |
density | 'compact' | 'regular' | 'spacious' | 'regular' | The amount of space between cards. |
variant | 'primary' | 'secondary' | 'quiet' | 'tertiary' | 'primary' | The visual style of the cards. |
selectionStyle | 'checkbox' | 'highlight' | 'checkbox' | How selection should be displayed. |
loadingState | 'idle' | 'loading' | 'loadingMore' | 'sorting' | 'filtering' | — | The loading state of the CardView. |
styles | StyleString | — | Spectrum-defined generated classes. |
renderActionBar | (selectedKeys: "all" | Set<Key>) => JSX.Element | — | Provides an action bar when cards are selected. |
UNSAFE_className | string | UnsafeClassName | — | Additional CSS class name. Use only as a last resort. |
UNSAFE_style | JSX.CSSProperties | — | Additional inline styles. Use only as a last resort. |
class | string | — | Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. |
ref | HTMLDivElement | ((el: HTMLDivElement) => void) | { current?: HTMLDivElement | null | undefined; } | — | Ref for the grid list root element. |
slot | string | false | — | A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components |
id | string | — | ID for the grid list element. solidaria |
onSelectionChange | (keys: "all" | Set<Key>) => void | — | Handler called when selection changes. solidaria-components |
aria-describedby | string | — | ARIA describedby for the grid list. solidaria |
aria-label | string | — | ARIA label for the grid list. solidaria |
aria-labelledby | string | — | ARIA labelledby for the grid list. solidaria |
isDisabled | false | true | — | Whether the grid list is disabled. solidaria |
selectionMode | 'none' | 'single' | 'multiple' | — | The selection mode. solidaria-components |
selectedKeys | "all" | Iterable<Key> | — | Currently selected keys (controlled). solidaria-components |
defaultSelectedKeys | "all" | Iterable<Key> | — | Default selected keys (uncontrolled). solidaria-components |
orientation | 'horizontal' | 'vertical' | 'vertical' | The primary orientation of the items. Usually this is the direction that the collection scrolls. solidaria-components |
items* | T[] | — | The items to render in the grid list. solidaria-components |
onAction | (key: Key) => void | — | Handler for item actions. solidaria |
getKey | (item: T) => Key | — | Function to get the key from an item. solidaria-components |
getTextValue | (item: T) => string | — | Function to get the text value from an item. solidaria-components |
getDisabled | (item: T) => boolean | — | Function to check if an item is disabled. solidaria-components |
disabledKeys | Iterable<Key> | — | Keys of disabled items. solidaria-components |
disabledBehavior | 'all' | 'selection' | — | Whether disabled items can still receive focus. solidaria-components |
renderEmptyState | () => JSX.Element | — | A function to render when the grid list is empty. solidaria-components |
dragAndDropHooks | DragAndDropHooks<T> | — | Drag and drop hooks from `useDragAndDrop`. solidaria-components |
isVirtualized | false | true | — | Whether the grid list uses virtual scrolling. solidaria |
keyboardDelegate | KeyboardDelegate | — | An optional keyboard delegate implementation for type to select, to override the default. solidaria |
layoutDelegate | LayoutDelegate | — | A delegate object that provides layout information for items in the collection. By default this uses the DOM, but this can be overridden to implement things like virtualized scrolling. solidaria |
shouldSelectOnPressUp | false | true | — | Whether selection should occur on press up. solidaria |
keyboardNavigationBehavior | 'tab' | 'arrow' | "arrow" | How keyboard navigation should behave within rows. `"arrow"` treats the collection as a single tab stop and uses arrow keys to move through row children. `"tab"` lets tabbable row children participate in normal tab order and stops child key events before collection navigation. solidaria |
direction | 'ltr' | 'rtl' | "ltr" | The text direction, used to flip the inline navigation axis in a horizontal orientation. solidaria |
columnCount | number | — | Column count for `layout="grid"` Down/Up. When omitted, Down/Up walk document order. solidaria |
hasMore | false | true | — | Whether there are more items to load. solidaria-components |
onLoadMore | () => void | Promise<void> | — | Called when the load more sentinel becomes visible. solidaria-components |
Declared in packages/viviana-ui/src/cardview/index.tsx.
Props marked solidaria or solidaria-components come from the headless layer underneath and behave the same in both registers. Components that wrap a DOM element also accept that element's standard attributes, which are left out here on purpose — listing them would bury the props that are actually ours.