UI components · Navigation
Steps
An ordered list of steps with their status. Group: Navigation · component 10 of 17, new in silverpoint 0.3.
States
The 2 reference states silverpoint declares for Steps, live on both grounds, with their code. As in upstream's documentation the examples are uncontrolled: the state's value is the default value. Pick a framework once and every example on the site follows it.
current
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpSteps } from '@silverpoint/react/ui/steps';
<SpSteps
label="Release"
items={[{ key: 'install', title: 'Install' }, { key: 'import', title: 'Import' }, { key: 'configure', title: 'Configure' }, { key: 'publish', title: 'Publish' }]}
current={2}
/><script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpSteps } from '@silverpoint/vue/ui/steps';
</script>
<template>
<SpSteps
label="Release"
:items="[{ key: 'install', title: 'Install' }, { key: 'import', title: 'Import' }, { key: 'configure', title: 'Configure' }, { key: 'publish', title: 'Publish' }]"
:current="2"
/>
</template>// src/styles.css:
// @import '@silverpoint/fonts/fonts.css';
// @import '@silverpoint/grounds/styles.css';
// @import '@silverpoint/grounds/ui.css';
import { Component } from '@angular/core';
import { SpSteps } from '@silverpoint/angular/ui/steps';
@Component({
selector: 'app-root',
imports: [SpSteps],
template: `
<sp-steps
label="Release"
[items]="[{ key: 'install', title: 'Install' }, { key: 'import', title: 'Import' }, { key: 'configure', title: 'Configure' }, { key: 'publish', title: 'Publish' }]"
[current]="2"
/>
`,
})
export class App {}from reflex_silverpoint_react import sp_steps, step_item
sp_steps(
label="Release",
items=[
step_item("install", "Install"),
step_item("import", "Import"),
step_item("configure", "Configure"),
step_item("publish", "Publish"),
],
current=2,
)error
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpSteps } from '@silverpoint/react/ui/steps';
<SpSteps
label="Release"
items={[{ key: 'install', title: 'Install' }, { key: 'import', title: 'Import' }, { key: 'configure', title: 'Configure', status: 'error' }, { key: 'publish', title: 'Publish' }]}
current={2}
/><script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpSteps } from '@silverpoint/vue/ui/steps';
</script>
<template>
<SpSteps
label="Release"
:items="[{ key: 'install', title: 'Install' }, { key: 'import', title: 'Import' }, { key: 'configure', title: 'Configure', status: 'error' }, { key: 'publish', title: 'Publish' }]"
:current="2"
/>
</template>// src/styles.css:
// @import '@silverpoint/fonts/fonts.css';
// @import '@silverpoint/grounds/styles.css';
// @import '@silverpoint/grounds/ui.css';
import { Component } from '@angular/core';
import { SpSteps } from '@silverpoint/angular/ui/steps';
@Component({
selector: 'app-root',
imports: [SpSteps],
template: `
<sp-steps
label="Release"
[items]="[{ key: 'install', title: 'Install' }, { key: 'import', title: 'Import' }, { key: 'configure', title: 'Configure', status: 'error' }, { key: 'publish', title: 'Publish' }]"
[current]="2"
/>
`,
})
export class App {}from reflex_silverpoint_react import sp_steps, step_item
sp_steps(
label="Release",
items=[
step_item("install", "Install"),
step_item("import", "Import"),
step_item("configure", "Configure", status="error"),
step_item("publish", "Publish"),
],
current=2,
)Import
Each component has its own subpath under ui/, and every adapter exports them all from ui. Import @silverpoint/grounds/ui.css once, beside styles.css; Reflex adds it for you.
| Framework | Import |
|---|---|
| React | import { SpSteps } from '@silverpoint/react/ui/steps'; |
| Vue | import { SpSteps } from '@silverpoint/vue/ui/steps'; |
| Angular | import { SpSteps } from '@silverpoint/angular/ui/steps'; // <sp-steps> |
| Reflex | from reflex_silverpoint_react import sp_steps |
Props
The props Steps adds to the ones every UI component takes.
| React / Angular | Vue | Reflex | Type | Description |
|---|---|---|---|---|
items | items | items | list[dict[str, Any]] | The steps, [{key, title, description?, status?}]; build them with step_item(). |
current | current | current | int | The current step, 0-based. Required. |
orientation | orientation | orientation | Literal['horizontal', 'vertical'] | horizontal (default) or vertical. |
label | label | label | str | Accessible name of the list. |
Common props
Every UI component also takes these. Like a chart's, they fall back to the dashboard the component sits in, then to the provider. Read more about the UI components.
| React / Angular | Vue | Reflex | Type | Description |
|---|---|---|---|---|
id | id | id | str | The frame variant and every related id derive from it. |
ground | ground | ground | Literal['silverpoint', 'cyanotype'] | str | dict[str, Any] | Style ground: "silverpoint" or "cyanotype", or a ground object. Defaults to the dashboard's, then the provider's, or silverpoint. |
substrate | substrate | substrate | Literal['cream', 'green', 'blue', 'ochre', 'prussian'] | Prepared substrate within the ground. |
mode | mode | mode | Literal['ink', 'precision'] | ink by default; precision disables inking. |
seed | seed | seed | str | int | Seed of the frame's hand; overrides id for the frame variant only. |
size | size | size | Literal['sm', 'md', 'lg'] | Control size: sm, md (default) or lg. |
palette | palette | palette | dict[str, str] | Colours over the ground's (set with palette=), merged over the dashboard's and the provider's. |
className | class-name | class_name | str | Added to the component's root element, after its own classes. |
Report it
Found something wrong with SpSteps? Open an issue on GitHub — the form comes pre-filled with the component and the version.