Step

<gstock-step> | GstockStep 
<gstock-step>Example Step</gstock-step>

Colors

Use the color attribute attribute to set the step color.

Primary Secondary 
<gstock-step-group>
  <gstock-step slot="nav" panel="panel-1" color="primary">Primary</gstock-step>
  <gstock-step slot="nav" panel="panel-2" color="secondary">Secondary</gstock-step>

  <gstock-step-panel name="step-1"></gstock-step-panel>
  <gstock-step-panel name="step-2"></gstock-step-panel>
</gstock-step-group>

Sizes

Use the size attribute attribute to set the step color.

Small Medium Large 
<gstock-step-group>
  <gstock-step slot="nav" panel="panel-1" size="small">Small</gstock-step>
  <gstock-step slot="nav" panel="panel-2" size="medium">Medium</gstock-step>
  <gstock-step slot="nav" panel="panel-3" size="large">Large</gstock-step>

  <gstock-step-panel name="step-1"></gstock-step-panel>
  <gstock-step-panel name="step-2"></gstock-step-panel>
  <gstock-step-panel name="step-3"></gstock-step-panel>
</gstock-step-group>

Active

Use the active attribute to active the step item.

Inactive Active Inactive 
<gstock-step-group>
  <gstock-step slot="nav" panel="panel-1">Inactive</gstock-step>
  <gstock-step slot="nav" panel="panel-2" active>Active</gstock-step>
  <gstock-step slot="nav" panel="panel-3">Inactive</gstock-step>

  <gstock-step-panel name="step-1"></gstock-step-panel>
  <gstock-step-panel name="step-2"></gstock-step-panel>
  <gstock-step-panel name="step-3"></gstock-step-panel>
</gstock-step-group>

Disabled

Use the disabled attribute to disable the step.

Enabled Disabled Enabled 
<gstock-step-group>
  <gstock-step slot="nav" panel="panel-1">Enabled</gstock-step>
  <gstock-step slot="nav" panel="panel-2" disabled>Disabled</gstock-step>
  <gstock-step slot="nav" panel="panel-3">Enabled</gstock-step>

  <gstock-step-panel name="step-1"></gstock-step-panel>
  <gstock-step-panel name="step-2"></gstock-step-panel>
  <gstock-step-panel name="step-3"></gstock-step-panel>
</gstock-step-group>

Placement

Utilice el atributo placement para posicionar el label del step.

Top Bottom Start End 
<gstock-step placement="top">Top</gstock-step>
<gstock-step placement="bottom">Bottom</gstock-step>
<gstock-step placement="start">Start</gstock-step>
<gstock-step placement="end">End</gstock-step>

Icons

Use the icon attribute on each step to display an icon representing the corresponding state.

Basic Details Company Details Subscription plan Payment details 
<gstock-step-group>
  <gstock-step slot="nav" panel="panel-1" icon="home" active>Basic Details</gstock-step>
  <gstock-step slot="nav" panel="panel-2" icon="sliders">Company Details</gstock-step>
  <gstock-step slot="nav" panel="panel-3" icon="music">Subscription plan</gstock-step>
  <gstock-step slot="nav" panel="panel-4" icon="credit-card">Payment details</gstock-step>

  <gstock-step-panel name="step-1"></gstock-step-panel>
  <gstock-step-panel name="step-2"></gstock-step-panel>
  <gstock-step-panel name="step-3"></gstock-step-panel>
  <gstock-step-panel name="step-4"></gstock-step-panel>
</gstock-step-group>

Use the href attribute to make the component render an <a> under the hood. This gives you all the default link behavior the browser provides and exposes the target and download attributes.

Link New Window Download Disabled 
<gstock-step-group>
  <gstock-step slot="nav" panel="panel-1" icon="link" href="https://example.com/">
    Link
  </gstock-step>
  <gstock-step slot="nav" panel="panel-2" icon="external-link" href="https://example.com/" target="_blank">
    New Window
  </gstock-step>
  <gstock-step slot="nav" panel="panel-3" icon="download" href="/assets/images/wordmark.svg" download="gstock.svg">
    Download
  </gstock-step>
  <gstock-step slot="nav" panel="panel-4" icon="x-circle" href="https://example.com/" disabled>
    Disabled
  </gstock-step>

  <gstock-step-panel name="step-1"></gstock-step-panel>
  <gstock-step-panel name="step-2"></gstock-step-panel>
  <gstock-step-panel name="step-3"></gstock-step-panel>
  <gstock-step-panel name="step-4"></gstock-step-panel>
</gstock-step-group>