Перейти к основному содержанию

Обзор

InlineBanner объединяет Баннер со скруглённой встроенной компоновкой и декоративным значком информации. Он использует независимые контракты Banner для status, variant, color, icon и action. Его внешний вид по умолчанию — soft, а статус по умолчанию — info.

Использование

Компоновка standard заполняет доступную ширину. Дочерние элементы в виде простых строк усекаются; при фокусе с клавиатуры, наведении указателя или касании полная строка отображается во всплывающей подсказке. Дочерние элементы в виде расширенных узлов отображаются напрямую, поэтому встроенные ссылки и элементы управления сохраняют собственную семантику. Если расширенный контент нужно усечь, задайте явные параметры типографики. Используйте layout="compact" для переноса контента, более плотных интервалов и максимальной ширины контента 512px. Добавьте fullWidth, чтобы снять это ограничение и заполнить доступную ширину родительского элемента, включая отступы и границы. По умолчанию установлено значение false, и это не изменяет стандартную компоновку, которая уже заполняет родительский элемент. У него нет нижнего внешнего отступа. Макет не зависит от оформления solid или soft. embedded удаляет нижний внешний отступ стандартного макета.
InlineBanner.Action предоставляет небольшую контурную кнопку, которая наследует отображаемый цвет баннера, включая явные переопределения палитры и сплошное оформление. Он поддерживает взаимодействия Button, ссылки, refs и пользовательский рендеринг. Слот action также принимает произвольные элементы управления. Корневой целевой элемент — div. Нативные props, className, style и ref применяются к этому корневому элементу; Base UI render может скомпоновать другой элемент и получает разрешённое состояние Banner. action принимает любой ReactNode, включая несколько элементов управления с их полными API Button или ссылок. icon={null} удаляет значок по умолчанию. Вызывающая сторона определяет, отображается ли баннер и следует ли объявлять об изменениях. При необходимости укажите role="status" и aria-live="polite" либо подходящую обёртку для динамической области. Status не назначает семантику динамической области. Задавайте имена элементам управления действиями и отмечайте декоративные пользовательские значки с помощью aria-hidden.

Миграция

Замените message на children, LeftIcon={Icon} на icon={<Icon />}, а конфигурацию button — на узел action. Используйте InlineBanner.Action, чтобы стилизация действия соответствовала баннеру. Замените variant="compact" на layout="compact"; стандартный макет теперь используется по умолчанию. Используйте status="error" для обозначения ошибки или color="red" для переопределения палитры.

Свойства

ReactNode
Optional trailing ReactNode. InlineBanner.Action supplies the shared banner action preset and inherits the resolved banner color; arbitrary controls are also accepted.
ReactNode
Caller-provided content. Standard plain strings truncate with a focusable tooltip; rich nodes render directly. Compact content wraps.
string
Class merged onto the root div or composed element.
"blue" | "gray" | "green" | "orange" | "red"
по умолчанию:"status palette"
Gray, blue, green, orange or red palette override. An omitted color follows status.
boolean
по умолчанию:"false"
Removes the standard bottom margin. Compact layouts have no bottom margin.
boolean
по умолчанию:"false"
Fills the available parent width, including padding and borders, and removes the compact layout’s 512px maximum. Defaults to false; standard layout already fills its parent.
ReactNode
по умолчанию:"decorative information icon"
Leading ReactNode. Defaults to a decorative information icon. Pass null to omit it.
"compact" | "standard"
по умолчанию:"standard"
Standard full-width layout or compact wrapping layout with a 512px maximum content width. Defaults to standard.
Ref<HTMLDivElement>
Ref to the root div, or to the DOM element supplied through render.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, BannerState>
Base UI root element or render callback, receiving native props/ref and resolved Banner state.
"error" | "info" | "neutral" | "success" | "warning"
по умолчанию:"info"
Feedback meaning: neutral, info, success, warning or error. Defaults to info. Roles and announcements remain caller-owned.
CSSProperties
Inline styles applied to the root div or composed element.
"soft" | "solid"
по умолчанию:"soft"
Solid or soft appearance, independently of status and layout. Defaults to soft.

InlineBanner.Action

string | ((state: ButtonState) => string | undefined)
CSS class applied to the element, or a function that returns a class based on the component’s state.
boolean
Adds a shadow and backdrop blur. Neutral outline buttons also use elevated surface colors.
ReactNode
Decorative content displayed after the label.
boolean
по умолчанию:"false"
Whether the button should be focusable when disabled.
boolean
Expands the button to fill its container width.
string
Destination URL. Renders a native anchor when render is omitted unless nativeButton is explicitly true. Custom renderers retain their own element contract.
boolean
Shows a loading indicator and disables activation.
"center" | "end" | "start"
Where the loading indicator appears. center hides the content while preserving its layout space; start and end keep children and the opposite icon visible and replace the corresponding icon with the spinner.
boolean
по умолчанию:"true"
Whether the rendered root is a native button. Defaults to true for custom renderers. The built-in href anchor defaults to false; an explicit value takes precedence.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>
Caller-supplied root element or renderer. Native attributes, handlers, event details, and refs reach the rendered root. Use nativeButton={false} and role="link" for a custom navigation anchor. Router integration belongs to the caller.
AriaRole
Role of the root element. Use link for custom navigation renderers.
ShortcutDefinition
Flat key array for simultaneous keys, or nested key arrays for an ordered sequence. Displayed on non-mobile screens.
string
Localized text between sequence steps. Defaults to then.
ReactNode
Decorative content displayed before the label.
CSSProperties | ((state: ButtonState) => CSSProperties | undefined)
Style applied to the element, or a function that returns a style object based on the component’s state.