NoticeBar
A notice bar for the top of a page or inside a section: icon + text + closable + an action link. Extra-long text can scroll seamlessly horizontally (embedding oas-marquee and reusing its scroll engine); multiple notices rotate vertically via items (crossfade; no auto-rotation under prefers-reduced-motion). Colors derive from semantic tokens and adapt to dark mode automatically.
Basic Usage
Default notice (info)
Notice Types
type accepts info (default, primary palette) / success / warning / error; the background and icon colors derive from semantic tokens. The icon defaults per type (icon="none" hides it; the icon attribute accepts any icon name).
Four types
Closable
closable shows a close button: clicking dispatches oas-close and hides the bar (fade-out exit). Setting the open attribute again restores it (the component removes open itself when closed).
Closable + restore
Vertical Rotation (items)
Pass a JSON string array to items to rotate multiple notices vertically (fade out → swap text → fade in) every interval ms (default 4000). Under prefers-reduced-motion rotation is disabled and the first item shows statically; while auto-rotating the content area is aria-live="off" so screen readers are not interrupted. Invalid JSON / empty arrays fall back to the default slot.
items rotation (interval=2500)
Action
action-text renders an action label on the right; with href present it renders as an <a> (native navigation), otherwise as a <button> (clicking dispatches oas-action-click).
Action: link and button variants
Extra-long Scrolling (scrollable)
With scrollable, extra-long single content scrolls seamlessly horizontally — the oas-marquee engine is reused via embedding (seamless loop, auto-fill when content is shorter than the container, and prefers-reduced-motion static fallback are all handled by marquee). Note: the scrolling duplicates live inside the component's shadow, so page stylesheet class selectors do not reach them (inline styles survive); prefer plain text or inline styles for scrolling content; clones do not carry event listeners, so interactive elements inside the replica are visible but inert.
scrollable: extra-long notice scrolling horizontally
Icon Customization
The icon attribute takes an icon name from the oas-icon system; icon="none" hides the icon; slot="icon" rich content takes priority.
icon customization and hiding
API
oas-notice-bar
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
action-text | Action label text; the action area is not rendered when absent | — | — |
closable | Show the close button; clicking dispatches oas-close and hides the bar (set open to restore) | boolean | — |
href | Action link URL: when present the action renders as an <a> (native navigation), otherwise as a <button> (dispatching oas-action-click); adding/removing it at runtime switches the variant | — | — |
icon | Icon name (oas-icon system); defaults per type, icon="none" hides it, invalid names fall back to the type default; slot="icon" rich content takes priority | — | — |
interval | items rotation interval (ms, default 4000); invalid/non-positive values fall back to the default | string | — |
items | JSON string array of multiple notices: vertical rotation (crossfade); invalid JSON/empty arrays fall back to the default slot; items take priority over the slot; no auto-rotation under prefers-reduced-motion | — | — |
open | Restore switch: setting it after close shows the bar again (the component removes this attribute when closed; presence forces visibility) | boolean | — |
scrollable | Scroll extra-long single content seamlessly horizontally (embedded marquee engine); only effective in the single-notice slot mode (items take priority) | boolean | — |
type | Notice type: info (default, primary palette) / success / warning / error; background and icon colors derive from semantic tokens and adapt to dark mode; invalid values fall back to info | string | info |
Events
| Event | Description |
|---|---|
oas-action-click | Dispatched when the action is clicked in its button variant (no href) |
oas-close | Dispatched after the close button is clicked; the bar then hides itself (fade-out exit). Set open to restore |
Slots
| Name | Description |
|---|---|
| default | Single notice content (shown when items is absent; materialized as scrolling content in scrollable mode) |
icon | Icon slot, overrides the default/type icon |
Parts
| Part | Description |
|---|---|
bar | Notice bar container |
icon | Icon area |
content | Content area (slot projection / rotation / marquee shared container) |
carousel | items vertical rotation area |
marquee | Embedded marquee (scrollable mode) |
action | Right-side action area (shared by a / button variants) |
close | Close button |