mirror of
https://github.com/apache/superset.git
synced 2026-08-04 13:02:41 +00:00
255 lines
9.5 KiB
Plaintext
255 lines
9.5 KiB
Plaintext
---
|
|
title: Steps
|
|
sidebar_label: Steps
|
|
---
|
|
|
|
<!--
|
|
Licensed to the Apache Software Foundation (ASF) under one
|
|
or more contributor license agreements. See the NOTICE file
|
|
distributed with this work for additional information
|
|
regarding copyright ownership. The ASF licenses this file
|
|
to you under the Apache License, Version 2.0 (the
|
|
"License"); you may not use this file except in compliance
|
|
with the License. You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing,
|
|
software distributed under the License is distributed on an
|
|
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
KIND, either express or implied. See the License for the
|
|
specific language governing permissions and limitations
|
|
under the License.
|
|
-->
|
|
|
|
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
|
|
|
# Steps
|
|
|
|
A navigation component for guiding users through multi-step workflows. Supports horizontal, vertical, and inline layouts with progress tracking.
|
|
|
|
## Live Example
|
|
|
|
<StoryWithControls
|
|
component="Steps"
|
|
props={{
|
|
direction: 'horizontal',
|
|
current: 1,
|
|
labelPlacement: 'horizontal',
|
|
progressDot: false,
|
|
size: 'default',
|
|
status: 'process',
|
|
type: 'default',
|
|
title: 'Step 3',
|
|
description: 'Description 3',
|
|
items: [
|
|
{
|
|
title: 'Connect Database',
|
|
description: 'Configure the connection',
|
|
},
|
|
{
|
|
title: 'Create Dataset',
|
|
description: 'Select tables and columns',
|
|
},
|
|
{
|
|
title: 'Build Chart',
|
|
description: 'Choose visualization type',
|
|
},
|
|
],
|
|
}}
|
|
controls={[
|
|
{
|
|
name: 'direction',
|
|
label: 'Direction',
|
|
type: 'select',
|
|
options: ['horizontal', 'vertical'],
|
|
description: 'Layout direction of the steps.',
|
|
},
|
|
{
|
|
name: 'current',
|
|
label: 'Current',
|
|
type: 'number',
|
|
description: 'Index of the current step (zero-based).',
|
|
},
|
|
{
|
|
name: 'labelPlacement',
|
|
label: 'Label Placement',
|
|
type: 'select',
|
|
options: ['horizontal', 'vertical'],
|
|
description: 'Position of step labels relative to the step icon.',
|
|
},
|
|
{
|
|
name: 'progressDot',
|
|
label: 'Progress Dot',
|
|
type: 'boolean',
|
|
description: 'Whether to use a dot style instead of numbered icons.',
|
|
},
|
|
{
|
|
name: 'size',
|
|
label: 'Size',
|
|
type: 'select',
|
|
options: ['default', 'small'],
|
|
description: 'Size of the step icons and text.',
|
|
},
|
|
{
|
|
name: 'status',
|
|
label: 'Status',
|
|
type: 'select',
|
|
options: ['wait', 'process', 'finish', 'error'],
|
|
description: 'Status of the current step.',
|
|
},
|
|
{
|
|
name: 'type',
|
|
label: 'Type',
|
|
type: 'select',
|
|
options: ['default', 'navigation', 'inline'],
|
|
description:
|
|
'Visual style: default numbered, navigation breadcrumb, or inline compact.',
|
|
},
|
|
{
|
|
name: 'title',
|
|
label: 'Title',
|
|
type: 'text',
|
|
},
|
|
{
|
|
name: 'description',
|
|
label: 'Description',
|
|
type: 'text',
|
|
},
|
|
]}
|
|
/>
|
|
|
|
## Try It
|
|
|
|
Edit the code below to experiment with the component:
|
|
|
|
```tsx live
|
|
function Demo() {
|
|
return (
|
|
<Steps
|
|
current={1}
|
|
items={[
|
|
{ title: 'Connect Database', description: 'Configure the connection' },
|
|
{ title: 'Create Dataset', description: 'Select tables and columns' },
|
|
{ title: 'Build Chart', description: 'Choose visualization type' },
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Vertical Steps
|
|
|
|
```tsx live
|
|
function VerticalSteps() {
|
|
return (
|
|
<Steps
|
|
direction="vertical"
|
|
current={1}
|
|
items={[
|
|
{
|
|
title: 'Upload CSV',
|
|
description: 'Select a file from your computer',
|
|
},
|
|
{ title: 'Configure Columns', description: 'Set data types and names' },
|
|
{ title: 'Review', description: 'Verify the data looks correct' },
|
|
{ title: 'Import', description: 'Save the dataset' },
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Status Indicators
|
|
|
|
```tsx live
|
|
function StatusSteps() {
|
|
return (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
|
|
<div>
|
|
<h4>Error on Step 2</h4>
|
|
<Steps
|
|
current={1}
|
|
status="error"
|
|
items={[
|
|
{ title: 'Connection', description: 'Configured' },
|
|
{ title: 'Validation', description: 'Failed to validate' },
|
|
{ title: 'Complete' },
|
|
]}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h4>All Complete</h4>
|
|
<Steps
|
|
current={3}
|
|
items={[
|
|
{ title: 'Step 1' },
|
|
{ title: 'Step 2' },
|
|
{ title: 'Step 3' },
|
|
]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Dot Style and Small Size
|
|
|
|
```tsx live
|
|
function DotAndSmall() {
|
|
return (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
|
|
<div>
|
|
<h4>Progress Dots</h4>
|
|
<Steps
|
|
progressDot
|
|
current={1}
|
|
items={[
|
|
{ title: 'Create', description: 'Define the resource' },
|
|
{ title: 'Configure', description: 'Set parameters' },
|
|
{ title: 'Deploy', description: 'Go live' },
|
|
]}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h4>Small Size</h4>
|
|
<Steps
|
|
size="small"
|
|
current={2}
|
|
items={[{ title: 'Login' }, { title: 'Verify' }, { title: 'Done' }]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Props
|
|
|
|
| Prop | Type | Default | Description |
|
|
| ---------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
|
|
| `direction` | `string` | `"horizontal"` | Layout direction of the steps. |
|
|
| `current` | `number` | `1` | Index of the current step (zero-based). |
|
|
| `labelPlacement` | `string` | `"horizontal"` | Position of step labels relative to the step icon. |
|
|
| `progressDot` | `boolean` | `false` | Whether to use a dot style instead of numbered icons. |
|
|
| `size` | `string` | `"default"` | Size of the step icons and text. |
|
|
| `status` | `string` | `"process"` | Status of the current step. |
|
|
| `type` | `string` | `"default"` | Visual style: default numbered, navigation breadcrumb, or inline compact. |
|
|
| `title` | `string` | `"Step 3"` | - |
|
|
| `description` | `string` | `"Description 3"` | - |
|
|
| `items` | `any` | `[{"title":"Connect Database","description":"Configure the connection"},{"title":"Create Dataset","description":"Select tables and columns"},{"title":"Build Chart","description":"Choose visualization type"}]` | - |
|
|
|
|
## Import
|
|
|
|
```tsx
|
|
import { Steps } from '@superset-ui/core/components';
|
|
```
|
|
|
|
---
|
|
|
|
:::tip[Improve this page]
|
|
This documentation is auto-generated from the component's Storybook story.
|
|
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Steps/Steps.stories.tsx).
|
|
:::
|