ProseTabs - Bitrix24 UI

Usage

Use the tabs and tabs-item components to display Tabs in your content.

::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::

::tabs

:::tabs-item{label="Code"}

```mdc
::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::
```

:::

:::tabs-item{label="Preview"}

::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::

:::

::

API

Props

Prop	Default	Type
`defaultValue`	`'0'`	`string` The default tab to select.
`sync`		`string` Sync the selected tab with a local storage key.
`hash`		`string` The hash to scroll to when the tab is selected.
`modelValue`		`string`
`b24ui`		`{ root?: SlotClass; } & { root?: SlotClass; list?: SlotClass; indicator?: SlotClass; trigger?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; label?: SlotClass; trailingBadge?: SlotClass; trailingBadgeSize?: SlotClass; content?: SlotClass; }`

Slots

Slot	Type
`default`	`{}`

Theme

https://github.com/bitrix24/b24ui/tree/main/src/theme/tabs.ts

export default {
  slots: {
    root: 'my-5 gap-4'
  }
}

Steps

Turn your headings into clear, sequential instructions.