MediaCard
@stellaria/nebula-webMediaCardPropsPreview
Props
24| Prop | Type | Default |
|---|---|---|
action A button over the image, top right: save, the menu. | ReactNode | — |
actionStart The other button, top left. With it, `cornerStart` moves down beside the clock. | ReactNode | — |
avatar The portrait beside the title. `name` draws the initial without `src`. | { src?: string | null | undefined; name: string; } | — |
ceiling The chip at the bottom right: the tier. | string | null | — |
ceilingLabel | string | — |
className | string | — |
clip A muted preview clip that plays on hover, or — with `playable` — the clip the card IS a player of. | string | null | — |
clock The clip's length already written («0:05»), the label at the bottom-left. | string | null | — |
component The link element when there is an `href`: `Link` of the router. | ElementType | "a" |
cornerEnd | MediaCardCorner | null | — |
cornerStart | MediaCardCorner | null | — |
count A figure with its icon at the bottom left, over the foot. | MediaCardCount | null | — |
fallback What the frame shows without frames or player. | ReactNode | — |
frames requiredWhat fills the frame, in order, already resolved. With more than one they cycle on hover. | readonly string[] | — |
href Where pressing it leads. With it the whole card is a link (`component` picks the router's element); without it, `onOpen` opens something here — a viewer — through a hit layer the size of the frame, not a `button` around the card, which would put the menu inside a button. | string | — |
index Its place in the grid, for the staggered reveal. | number | — |
onOpen | (() => void) | — |
openLabel The name of the hit layer. Required with `onOpen`. | string | — |
playable The card is a player: `VideoPlayer` takes the frame and hides corners and foot while it runs. | boolean | — |
poster The still frame of the clip. Falls back to the first frame. | string | null | — |
seconds The clip's seconds, already known, for the player. | number | null | — |
sheet The first frame is a cell of a six-view sheet: show the face cell, not the whole sheet, and do not cycle. | boolean | — |
subtitle | string | — |
title required | string | — |
Slot props
3Each one spreads over an inner element, so you can restyle a region without forking the component.
| Prop | Type | Default |
|---|---|---|
footProps The glass foot with avatar, title and subtitle, a `GlassSurface`. | Omit<BoxSlotProps, "shadow" | "component"> | — |
frameProps The 3/4 frame. | BoxSlotProps | — |
imageProps Every frame image. | Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> | — |
Also accepts
On top of its own props, this component forwards these groups.