zidanecomponents/MediaNav
import { … } from 'zidane-ui'ui/src/components/MediaNav.tsx
Components#
MediaNavComponent#
Renders the previous / next chips (and the counter) over a set of media of two or more.
function MediaNav(props: MediaNavProps): Element | nullParameters
| Name | Type | Description |
|---|---|---|
| props | MediaNavProps | Component props: |
Returns
Element | nullProps
| Name | Type | Default | Description |
|---|---|---|---|
| className? | string | Extra classes on each control. | |
| count | number | How many items there are. With fewer than two, nothing renders. | |
| counter? | boolean | false | Also show the "n / N" chip, centred at the bottom. |
| index | number | Position of the item on show, from 0. | |
| onStep | (delta: -1 | 1) => void | Steps to the previous ( | |
| style? | CSSProperties | Inline styles on each control. |
Constants#
MEDIA_CHIPConstant#
A round chip over media: the raised chip, which reads on a dark backdrop (IconButton's transparent look would not), at 40px, a larger target than IconButton's largest size. The lightbox's close button is one too.
const MEDIA_CHIP: 'zg-raised border absolute w-10 h-10 rounded-full text-[var(--zg-text)] flex items-center justify-center cursor-pointer p-0'Interfaces#
MediaNavPropsInterface#
Props for MediaNav.
interface MediaNavPropsProperties
| Name | Type | Default | Description |
|---|---|---|---|
| className? | string | Extra classes on each control. | |
| count | number | How many items there are. With fewer than two, nothing renders. | |
| counter? | boolean | false | Also show the "n / N" chip, centred at the bottom. |
| index | number | Position of the item on show, from 0. | |
| onStep | (delta: -1 | 1) => void | Steps to the previous ( | |
| style? | CSSProperties | Inline styles on each control. |