ConfigProvider

The injection entry point for global configuration, centrally managing locale / size / theme / config / direction / z-index / disabled for the wrapped subtree. Component resolution order: own attribute > config-provider > global default.

Locale injection

The config-provider's locale takes precedence over the global setLocale(): components inside use the injected locale for built-in copy.

Switching locale

中文English可关闭标签这是一条警告提示

Example

Size injection

Components inside use the injected size unless they set it explicitly; explicitly set size always wins. size supports five tiers: xs / small / medium (default) / large / xl.

Size injection

XSSmallMediumLargeXLInjected buttonSmall by itselfInjected tag

Example

Theme injection

The config-provider's theme writes data-theme onto itself, and the wrapped subtree (including Shadow DOM) inherits the corresponding theme tokens.

Theme injection

LightDarkTheme buttonFollows theme

Example

Config JSON component-level defaults

config is a generic channel for component-level default attributes: declare any component's default attribute as JSON (e.g. {"oas-button":{"variant":"outlined"}}); components read the injected value unless they set it explicitly. Keys follow the tag + attribute name format, resolved from the nearest provider, with explicitly set own attributes taking precedence.

Config JSON injecting button variant

Inject outlinedInject filledClearInjectedInjectedExplicit override

Example

Direction injection

direction writes the host dir attribute: CSS direction inherits through light/shadow subtrees, and components (e.g. scroll-area's RTL horizontal wheel translation) consume it via the injected value. Floating-layer positioning mirrors with direction too: start/end alignment for select / combobox / auto-complete / tree-select / date-picker / time-picker / mentions flips to the writing-start side under RTL. Direction is resolved as config-provider > nearest ancestor dir > document.dir > current locale — the ar pack is tagged dir: 'rtl', so switching to ar enables RTL automatically.

Direction injection

RTLLTRDirection follows injectionButton

Horizontally scrollable content: under RTL the wheel direction flips and the horizontal scrollbar mirrors (negative `scrollLeft` range).

Example

z-index floating layer base

z-index writes --oas-z-index-base on the host: every floating layer in the subtree (messages / notifications / dropdowns / overlays, etc.) stacks its own layer offset on top of that base via calc(var(--oas-z-index-base, 0) + var(--oas-z-X, <layer default>)) — lifting everything while preserving the layer order (tooltip stays above modal).

z-index floating layer base

Base 5000ResetMessageHover for tooltip

Example

Global disabled

When disabled is on, form-family controls inside the subtree that consume the injection (button / input / select / checkbox / switch, etc.) are disabled unless they set disabled explicitly; an explicit disabled always wins (no conflict). Two exemption channels:

• disabled-skip (component-level): a single control escapes the global disable (e.g. a help link / reset button that must stay clickable in a disabled form section) — exempting means "do not read the injection"
• disabledExempt (provider-level): declare a top-level {"disabledExempt":["oas-button"]} key in the config JSON to exempt a whole tag class

Priority: explicit disabled > disabled-skip exemption > disabledExempt whole-class exemption > provider-injected disabled. disabled-skip is a global convention attribute (not part of a component's own API, so it doesn't appear in attribute tables). Navigation/link components (link / menu / breadcrumb, etc.) do not consume the injection — they are naturally exempt from the global disable; hosts can declare other whole-class exemptions via disabledExempt as needed.

Global disabled

DisableEnableSubmitI agree to the terms

Example

disabled-skip single escape

DisableEnableStill clickable (disabled-skip)Follows the global disable

Example

disabledExempt whole-class exemption

DisableEnableButtons exempted

Example

Nearest provider wins

An inner config-provider overrides an outer one: components wrapped by the inner provider use its config, while components under the outer provider (not nested further) use the outer config.

Nearest provider wins

Outer enInner zh-CN

Example

API

oas-config-provider

Attributes

Attribute	Description	Type	Default
config	Component-level default config JSON (e.g. {"oas-button":{"variant":"outlined"}}); components read [tag][key] from the nearest provider, own explicit attributes win; the top-level disabledExempt key (tag array) exempts whole classes from the global disable; invalid JSON is ignored with a dev warning	string	—
direction	Global direction injection (ltr/rtl); writes the host dir attribute (CSS direction inheritance pierces light/shadow subtrees); components can consume it via injectValue('direction'); invalid values fall back to ltr with a dev warning	string	—
disabled	Global disable: form-family controls inside the subtree that consume the injection are disabled unless they set disabled explicitly; escape a single component with the disabled-skip attribute, or escape a whole class with the disabledExempt top-level config JSON key	—	—
locale	Language for built-in copy in the wrapped subtree (must be registered); takes precedence over global setLocale()	—	—
size	Default size for wrapped components, applied when a component doesn't set it explicitly	—	—
theme	Theme for the wrapped subtree, written to data-theme	—	—
z-index	Global starting value for floating layers (positive integer); writes --oas-z-index-base on the host, lifting all floating layers in the subtree; invalid values are ignored with a dev warning	string	—

Slots

Name	Description
default	Subtree content that receives the provided config

• Component resolution order: own attribute > config-provider > global default.
• locale requires the language pack to be registered via registerLocale(); falls back to the global translator when unregistered.