{currentStep}
{lastStep}
--bs-primary
, --bs-secondary
,
243 | --bs-danger
244 | --bs-light
, and --bs-dark
css variables if they are
245 | defined. These css vars are defined in bootstrap css:
246 | steps
:
265 | text
: The text displayed below each steps.icon
: A svelte component displayed inside each steps.
274 | iconProps
: An object that will be passed as props to
277 | the icon
component.
278 | current
: current step index. Number. Default 0
285 | size
: size of the step buttons. String. Default
288 | "3rem"
("2rem"
for vertical steps)
289 | line
: thickness of the connecting lines between the step
292 | buttons. String. Default "0.3rem"
("0.15rem"
for
293 | vertical steps)
294 | primary
: Primary color of passed and current steps. String.
297 | Default 'var(--bs-primary, #3a86ff)'
298 | secondary
: Secondary color of future steps. String. Default
301 | 'var(--bs-secondary, #bbbbc0)'
302 | light
: Primary color of text color in passed anc current
305 | steps. String. Default 'var(--bs-light, white)'
306 | dark
: Secondary color of text color in future steps. String.
309 | Default 'var(--bs-dark, black)'
310 | borderRadius
: Border radius of the step buttons. String.
313 | Default '50%'
(circle)
314 | fontFamily
: Font family of the component. String. Default
317 | "'Helvetica Neue', Helvetica, Arial, sans-serif"
318 | vertical
: Vertical steps. Default: false
321 | reverse
: For horizontal steps, reverse the step from right to
324 | the left; for vertical steps, reverse puts text labels to the left.
325 | Default: false
326 | clickable
: When set to false
, Clicking icons and
329 | labels will not change step. You have to change current
to
330 | change step. Default true
331 | checkIcon
: User defined check icon for passed steps. If not
334 | specified, use the default check mark. Set to null
if you don't
335 | want a check icon.
336 | alertIcon
: User defined alert icon for passed steps that has
339 | truthful alert
property. If not specified, use the default
340 | alert icon. Set to null
if you don't want an alert icon.
341 | alertColor
: User defined bg color for passed steps that has
344 | truthful alert
property. Default
345 | 'var(--bs-danger, #dc3545)'
346 | on:click(e)
: click event. Event detail object has two keys:
353 | e.detail.current
: the index of current step
356 | e.detail.last
: the index of last step
359 |