@wix/design-system
Version:
@wix/design-system
76 lines (47 loc) • 1.9 kB
Markdown
## Feature Examples
### Structure
- description: Create timeline content by using `items` prop. Each item has props to control `label`, `width`, `icon` and `state`.
- example:
```jsx
```
### Align Label
- description:
Control text horizontal alignment with alignLabel prop. It has two options:<br/>
 - center (default) - use it in all common cases. <br/>
 - start - use it to align text to the left. <br/>
- example:
```jsx
```
### Skin
- description:
Control the style with skin prop. It supports 2 options:<br/>
 - dark (default) - use it on colored backgrounds, for example inside SectionHelper.<br/>
 - standard - use it on light backgrounds, for example inside a card.<br/>
- example:
```jsx
```
### Line Type
- description:
Control the line type with line prop. It supports 2 options:<br/>
 - dashed (default) - use it on colored backgrounds, for example inside SectionHelper.<br/>
 - filled - use it to show that this timeline is past.<br/>
- example:
```jsx
```
### Item Icons
- description:
Specify item status by using icon prop for items:<br/>
 - DefaultIcon - indicates incomplete steps.<br/>
 - ActiveIcon - highlights currently active step.<br/>
 - CompleteIcon - indicates complete steps.<br/>
 - DestructiveIcon - indicates a step that failed to complete.<br/>
 - BoundaryIcon - indicates a milestone that doesn’t have status, but should be reflected in the timeline.<br/>
- example:
```jsx
```
## Common Use Case Examples
### Connect Domain
- description: One of the applications where this component is helpful — it shows the status of domain connection that was requested by a user.
- example:
```jsx
```