Components
AnnouncementBar
Unstable: one short site-wide message above the navigation, with a link and an optional close button. Import it from @nizivo/react/unstable/announcement-bar.
Examples
Basic
The bar: one message, a link and a close button.
import type { JSX } from 'react';
import { AnnouncementBar } from '@nizivo/react/unstable/announcement-bar';
export function AnnouncementBarExample(): JSX.Element {
return (
<AnnouncementBar dismissible action={<a href="/changelog">Read the changelog →</a>}>
Nizivo 0.5 is in review.
</AnnouncementBar>
);
}
Import
import { AnnouncementBar } from '@nizivo/react/unstable/announcement-bar';
// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/announcement-bar.css';Static or interactive
Server. No client JavaScript: the close button calls onDismiss.
How to choose.
Use
One message at a time, in children, with a link in action (drawn in text/inverse-accent and
underlined). It is a region named "Announcement". dismissible adds a close button named
"Dismiss announcement"; remembering the choice across visits is the app's.
Props
Server component Renders data-slot="announcement-bar" with the class nz-announcement-bar. Props: AnnouncementBarProps. Source: src/unstable/announcement-bar/announcement-bar.tsx.
| Name | Type | Default | Description |
|---|---|---|---|
action | ReactNode | – | After the message: a link, such as "Read the changelog". |
childrenrequired | ReactNode | – | The message: "Nizivo 0.5 is out." |
dismissible | boolean | false | Adds the close button. |
labels | Partial<AnnouncementBarLabels> | – | |
onDismiss | () => void | – | |
render | RenderProp<Record<string, never>> | – | Must render a |
- Also takes every attribute of
<div>exceptchildren. (Omit<ComponentPropsWithRef<"div">, "children">)
render takes an element, or, in client code, a function of the props and no state.
Other exports
AnnouncementBarLabelstypeimport type { AnnouncementBarLabels } from '@nizivo/react/unstable/announcement-bar'AnnouncementBar's own strings (§16.4): serialisable, English defaults.
Name Type Default Description dismissrequiredstring'Dismiss announcement'The close button's name.
labelrequiredstring'Announcement'The region's name.
AnnouncementBarPropstypeimport type { AnnouncementBarProps } from '@nizivo/react/unstable/announcement-bar'The props of
AnnouncementBar, listed above.
Data attributes and slots
Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.
| Slot | Rendered by | Data attributes |
|---|---|---|
announcement-bar.nz-announcement-bar | AnnouncementBarroot (takes render) | none |
announcement-bar-dismiss.nz-announcement-bar-dismiss | AnnouncementBarinner element (CSS only); interactive, focus: self | none |
announcement-bar-message.nz-announcement-bar-message | AnnouncementBarinner element (CSS only) | none |
CSS hooks
Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.
This stylesheet reads no public hook.
Layers: nz.components. Classes: .nz-announcement-bar, .nz-announcement-bar-action, .nz-announcement-bar-dismiss, .nz-announcement-bar-message.
Tokens this stylesheet reads (10)
--nz-bg-inverse, --nz-font-label-m, --nz-radius-full, --nz-size-icon-sm, --nz-space-10, --nz-space-2, --nz-space-3, --nz-space-6, --nz-text-inverse, --nz-text-inverse-accent
Accessibility
These parts are interactive. Each gets the focus outline and touch-action rule from @nizivo/react/css/base.css (the nz.base layer), so the floor survives a restyle:
announcement-bar-dismiss: draws the focus outline itself on keyboard focus.
Keyboard
To be written.
Alert
A tinted message with a title, an optional action and an optional dismiss button. Static and server-rendered unless you add the dismiss leaf.
AppShell
The page's frame. The Sidebar and the TopBar on screens 640 px and wider, the MobileTopBar and the MobileTabBar below that, around the page's main content, switched by CSS with no script.