Marquee

Data display component. This page is the API reference, generated from the source code. Usage guidance and live examples are on the Chinese page.

HeadlessStylesVueReactWeb Components

Anatomy

Parts in bold are required.

data-scope="marquee": root · content · autoplay-trigger

API reference

Descriptions of individual props, events and slots are written in Chinese and appear on the Chinese page.

Artifacts

Layer	Value
Custom element	<xh-marquee>
Vue components	XhMarqueeAutoplayTrigger XhMarqueeContent XhMarqueeRoot
State machine	marqueeMachine
Skin	@xihan-ui/styles/marquee.css

Props

Prop	Type	Required
direction	MarqueeDirection
speed	number
pauseOnHover	boolean
paused	boolean
defaultPaused	boolean
autoFill	boolean
fade	boolean
translations	Partial<MarqueeTranslations>
onPausedChange	(details: MarqueePausedChangeDetails) => void

Events

Custom elements put the payload in detail; Vue emits an event of the same name.

Event	Payload
paused-change	MarqueePausedChangeDetails

Slots

Only slots with a payload are listed.

Vue component	Slot	Payload
XhMarqueeRoot	default	—

State

Public state is written to data-state.

Part	Values
autoplay-trigger	'paused' | 'running'

The following names are internal to the state machine.

States: idle

Events: PAUSED.SET · PAUSED.TOGGLE · PRESS.START · PRESS.END · SPAN.MEASURE

connect API

getXxxProps() returns the host attributes of the matching part.

Member	Type
copies	number
paused	boolean
setPaused	(paused: boolean) => void
getRootProps	() => T['element']
getContentProps	() => T['element']
getAutoplayTriggerProps	() => T['button']

Accessibility

Keyboard

Specification: W3C APG. Each row is a stable behavior id that the conformance tests cover; the conditions and effects are described on the Chinese page.

Keys	Behavior
Enter / Space	marquee.kbd.activate
Enter / Space	marquee.kbd.press

ARIA

These attributes are produced by connect.

Part	Attribute	Value
autoplay-trigger	aria-controls	scope.partId('marquee', 'content')
autoplay-trigger	aria-label	label.autoplayTriggerPlay | label.autoplayTriggerPause

Style reference

Skin

@xihan-ui/styles/marquee.css is written against [data-scope="marquee"][data-part="root"] part selectors; the published build uses the mount class .xh-scope-marquee in place of data-scope (same specificity) and sits in the xihan.components and xihan.motion layers. Put overrides in xihan.overrides; the part selectors work as usual.

Data attributes

Produced by connect; valueless attributes are omitted while their condition does not hold.

Part	Attribute	Value
autoplay-trigger	data-pressed	'' (present only while the condition holds)
autoplay-trigger	data-state	'paused' | 'running'
autoplay-trigger	data-xh-action-control	''
autoplay-trigger	data-xh-action-display	'always'
autoplay-trigger	data-xh-action-profile	'icon'
autoplay-trigger	data-xh-action-size	'md'
autoplay-trigger	data-xh-action-variant	'outline'

CSS variables

The public override slots, generated from what the standalone skin actually consumes.

Variable	Part	CSS property	State	Default from
--xh-marquee-block-size	root	block-size	orientation=vertical	10rem
--xh-marquee-fade-size	root	-webkit-mask-image mask-image	fade	--xh-space-6
--xh-marquee-gap	content root	padding-block-end padding-inline-end	orientation=vertical xh-copy	--xh-space-6
--xh-marquee-icon-size	autoplay-trigger	--xh-icon-size	default	--xh-_action-profile-glyph-size
--xh-marquee-span	content root	animation-duration	auto-fill default	--xh-_marquee-measured-span
--xh-marquee-speed	content root	animation-duration	auto-fill default	60
--xh-marquee-trigger-bg	autoplay-trigger	--xh-ink-surface background-color	default focus-visible xh-ink-surface	--xh-bg-surface
--xh-marquee-trigger-bg-active	autoplay-trigger	background-color	disabled is(:active, [data-pressed]) loading not([data-disabled]) not([data-loading]) pressed	--xh-bg-subtle-hover-opaque
--xh-marquee-trigger-bg-hover	autoplay-trigger	background-color	disabled hover loading not([data-disabled]) not([data-loading])	--xh-bg-subtle-opaque
--xh-marquee-trigger-inset	autoplay-trigger root	-webkit-mask-image -webkit-mask-size inset-block-end inset-inline-end mask-image mask-size	default fade has(> [data-scope='marquee'][data-part='autoplay-trigger']:not([hidden]) orientation=vertical	--xh-space-1