Usage
Wrap your headings with the Steps component to display a list of steps.
Use the level prop to define which heading will be used for the steps.
Add the Bitrix24 UI module in your nuxt.config.ts
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@bitrix24/b24ui-nuxt']
})
Import Tailwind CSS in your CSS
app/assets/css/main.css
@import "tailwindcss";
Start your development server
npm run dev
::steps{level="4"}
#### Add the Bitrix24 UI module in your `nuxt.config.ts`
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@bitrix24/b24ui-nuxt']
})
```
#### Import Tailwind CSS in your CSS
```css [app/assets/css/main.css]
@import "tailwindcss";
```
#### Start your development server
```bash
npm run dev
```
::
API
Props
Slots
Theme
https://github.com/bitrix24/b24ui/tree/main/src/theme/steps.ts
export default {
base: 'ms-4 my-4 border-s border-(--ui-color-design-tinted-na-bg) ps-8 [counter-reset:step]',
variants: {
level: {
'2': '[&>h2]:[counter-increment:step] [&>h2]:relative [&>h2]:before:absolute [&>h2]:before:size-7 [&>h2]:before:bg-(--ui-color-design-tinted-na-bg) [&>h2]:before:rounded-full [&>h2]:before:font-semibold [&>h2]:before:text-md [&>h2]:before:tabular-nums [&>h2]:before:inline-flex [&>h2]:before:items-center [&>h2]:before:justify-center [&>h2]:before:ring-4 [&>h2]:before:ring-(--ui-color-design-tinted-na-bg) [&>h2]:before:-ms-[48.5px] [&>h2]:before:-mt-0 [&>h2]:before:content-[counter(step)] [&>h2>a>span.absolute]:hidden',
'3': '[&>h3]:[counter-increment:step] [&>h3]:relative [&>h3]:before:absolute [&>h3]:before:size-6 [&>h3]:before:inset-x-0.5 [&>h3]:before:bg-(--ui-color-design-tinted-na-bg) [&>h3]:before:rounded-full [&>h3]:before:font-semibold [&>h3]:before:text-md [&>h3]:before:tabular-nums [&>h3]:before:inline-flex [&>h3]:before:items-center [&>h3]:before:justify-center [&>h3]:before:ring-4 [&>h3]:before:ring-(--ui-color-design-tinted-na-bg) [&>h3]:before:-ms-[48.5px] [&>h3]:before:content-[counter(step)] [&>h3>a>span.absolute]:hidden',
'4': '[&>h4]:[counter-increment:step] [&>h4]:relative [&>h4]:before:absolute [&>h4]:before:size-6 [&>h4]:before:inset-x-0.5 [&>h4]:before:bg-(--ui-color-design-tinted-na-bg) [&>h4]:before:rounded-full [&>h4]:before:font-semibold [&>h4]:before:text-md [&>h4]:before:tabular-nums [&>h4]:before:inline-flex [&>h4]:before:items-center [&>h4]:before:justify-center [&>h4]:before:ring-4 [&>h4]:before:ring-(--ui-color-design-tinted-na-bg) [&>h4]:before:-ms-[48.5px] [&>h4]:before:content-[counter(step)] [&>h4>a>span.absolute]:hidden'
}
},
defaultVariants: {
level: '3'
}
}