mirror of
https://github.com/lingble/twenty.git
synced 2025-11-25 18:34:56 +00:00
6e09ae61f9
* remaining UI docs * completed ui component docs --------- Co-authored-by: Charles Bochet <charles@twenty.com>
47 lines
1.0 KiB
Plaintext
47 lines
1.0 KiB
Plaintext
---
|
|
title: Step Bar
|
|
sidebar_position: 5
|
|
sidebar_custom_props:
|
|
icon: TbCircleCheckFilled
|
|
---
|
|
|
|
import Tabs from '@theme/Tabs';
|
|
import TabItem from '@theme/TabItem';
|
|
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
|
|
import stepBarCode from '!!raw-loader!@site/src/ui/navigation/stepBarCode.js'
|
|
|
|
Displays progress through a sequence of numbered steps by highlighting the active step. It renders a container with steps, each represented by the `Step` component.
|
|
|
|
<Tabs>
|
|
<TabItem value="usage" label="Usage" default>
|
|
|
|
<SandpackEditor
|
|
availableComponentPaths={['@/ui/navigation/step-bar/components/StepBar']}
|
|
componentCode={stepBarCode}
|
|
/>
|
|
</TabItem>
|
|
|
|
<TabItem value="props" label="Props">
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Props</th>
|
|
<th>Type</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>activeStep</td>
|
|
<td>number</td>
|
|
<td>The index of the currently active step. This determines which step should be visually highlighted</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
</TabItem>
|
|
|
|
</Tabs> |