Pular para o conteúdo principal

Steps

Import​

import { Steps } from '@resultadosdigitais/tangram-components'

Properties​

children 📍​

Concerns
📍 Required
Typearray | node

Description​

Three or more <Step /> components.

activeStep​

Typenumber
Default0

Description​

Set the active step using index number. Set to -1 to clear all steps.

connector​

Typeelement
Default

Description​

An element to be placed between each step.

direction​

Type
Enum of:
  • Steps.directions.horizontal
  • Steps.directions.vertical
DefaultSteps.directions.vertical

Description​

Sets the component direction.

onChange​

Typefunc
ParamactiveStep number - The new active step

Description​

Callback fired when the step is changed.

onCompleted​

Typefunc
ParamactiveStep number - The active step.

Description​

Callback fired when the steps is completed.

<Step />​

Import​

import { Step } from '@resultadosdigitais/tangram-components'

Properties​

id 📍​

Concerns
📍 Required
Typestring | number
Description​

Sets id for each Step.

active​

Typebool
Description​

Sets the step as active.

completed​

Typebool
Description​

Sets the step as completed.

children 📍​

Concerns
📍 Required
Typestring | node
Description​

Set sa string containing a title for the label.

direction​

Type
Enum of:
  • directions.horizontal
  • directions.vertical
Defaultdirections.vertical
Description​

Sets the component direction.

<StepConnector />​

Import​

import { StepConnector } from '@resultadosdigitais/tangram-components'

Properties​

stepId​

Typestring | number
Description​

The id property of the related Step.

direction​

Type
Enum of:
  • directions.horizontal
  • directions.vertical
Description​

The Steps component direction.

<StepsContent />​

Import​

import { StepsContent } from '@resultadosdigitais/tangram-components'

Properties​

activeStep​

Typenumber
Default0
Description​

Sets the active step using index number. Must have the same number passed in <Steps />.

children 📍​

Concerns
📍 Required
Typeelement | array | node
Description​

Sets three or more <Steps.Panel /> components.

<StepsPanel />​

Import​

import { StepsPanel } from '@resultadosdigitais/tangram-components'

Properties​

children 📍​

Concerns
📍 Required
Typenode
Description​

Sets the content to be shown when the relative Step index is active.

<StepsProvider />​

Import​

import { StepsProvider } from '@resultadosdigitais/tangram-components'

Properties​

onCompleted​

Typefunc
Defaultnull
ParamactiveStep number - The active step.
Description​

Callback fired when the steps is completed.

activeStep​

Typenumber
Default0
Description​

Set the active step using index number. Set to -1 to clear all steps.

children 📍​

Concerns
📍 Required
Typenode
Description​

Sets the children element.

<StepsTrigger />​

Import​

import { StepsTrigger } from '@resultadosdigitais/tangram-components'

Properties​

href​

Typestring
Defaultnull
Description​

Set link target.

disabled​

Typebool
Defaultfalse
Description​

Set boolean value to disable trigger event.

onClick​

Typefunc
Default() => {}
Paramevent React.SyntheticEvent - The event source of the callback.
Paramindex number - The index of the step.
Description​

Callback fired when is clicked.

active​

Typebool
Description​

Sets the step as active. Is passed to child components.

children 📍​

Concerns
📍 Required
Typestring | node
Description​

Sets a string containing a title for the label.

direction​

Type
Enum of:
  • directions.horizontal
  • directions.vertical
Description​

Sets the component direction.

Feedback​

Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.