English Español Claro Oscuro Sistema

Step

<gstock-step> | GstockStep

Ejemplos

<gstock-step>Paso de Ejemplo</gstock-step>

Colores

Use el atributo color para establecer el color del paso.

Primario Secundario Contenido del panel primario. Contenido del panel secundario. 
<gstock-step-group>
  <gstock-step slot="nav" panel="panel-1" color="primary">Primario</gstock-step>
  <gstock-step slot="nav" panel="panel-2" color="secondary">Secundario</gstock-step>

  <gstock-step-panel name="panel-1">Contenido del panel primario.</gstock-step-panel>
  <gstock-step-panel name="panel-2">Contenido del panel secundario.</gstock-step-panel>
</gstock-step-group>

Tamaños

Use el atributo size para establecer el tamaño del paso.

Pequeño Mediano Grande Contenido del paso pequeño. Contenido del paso mediano. Contenido del paso grande. 
<gstock-step-group>
  <gstock-step slot="nav" panel="panel-1" size="small">Pequeño</gstock-step>
  <gstock-step slot="nav" panel="panel-2" size="medium">Mediano</gstock-step>
  <gstock-step slot="nav" panel="panel-3" size="large">Grande</gstock-step>

  <gstock-step-panel name="panel-1">Contenido del paso pequeño.</gstock-step-panel>
  <gstock-step-panel name="panel-2">Contenido del paso mediano.</gstock-step-panel>
  <gstock-step-panel name="panel-3">Contenido del paso grande.</gstock-step-panel>
</gstock-step-group>

Activo

Use el atributo active para activar el elemento del paso.

Inactivo Activo Inactivo Contenido del paso 1. Contenido del paso 2. Contenido del paso 3. 
<gstock-step-group>
  <gstock-step slot="nav" panel="panel-1">Inactivo</gstock-step>
  <gstock-step slot="nav" panel="panel-2" active>Activo</gstock-step>
  <gstock-step slot="nav" panel="panel-3">Inactivo</gstock-step>

  <gstock-step-panel name="panel-1">Contenido del paso 1.</gstock-step-panel>
  <gstock-step-panel name="panel-2">Contenido del paso 2.</gstock-step-panel>
  <gstock-step-panel name="panel-3">Contenido del paso 3.</gstock-step-panel>
</gstock-step-group>

Deshabilitado

Use el atributo disabled para deshabilitar el paso.

Habilitado Deshabilitado Habilitado Contenido del paso 1. Contenido del paso 2. Contenido del paso 3. 
<gstock-step-group>
  <gstock-step slot="nav" panel="panel-1">Habilitado</gstock-step>
  <gstock-step slot="nav" panel="panel-2" disabled>Deshabilitado</gstock-step>
  <gstock-step slot="nav" panel="panel-3">Habilitado</gstock-step>

  <gstock-step-panel name="panel-1">Contenido del paso 1.</gstock-step-panel>
  <gstock-step-panel name="panel-2">Contenido del paso 2.</gstock-step-panel>
  <gstock-step-panel name="panel-3">Contenido del paso 3.</gstock-step-panel>
</gstock-step-group>

Ubicación

Utilice el atributo placement para posicionar la etiqueta del paso.

Arriba Abajo Inicio Final 
<gstock-step placement="top">Arriba</gstock-step>
<gstock-step placement="bottom">Abajo</gstock-step>
<gstock-step placement="start">Inicio</gstock-step>
<gstock-step placement="end">Final</gstock-step>

Iconos

Use el atributo icon en cada paso para mostrar un icono que represente el estado correspondiente.

Detalles Básicos Detalles de Empresa Plan de Suscripción Detalles de Pago Contenido de detalles básicos. Contenido de detalles de empresa. Contenido del plan de suscripción. Contenido de detalles de pago. 
<gstock-step-group>
  <gstock-step slot="nav" panel="panel-1" icon="home" active>Detalles Básicos</gstock-step>
  <gstock-step slot="nav" panel="panel-2" icon="sliders">Detalles de Empresa</gstock-step>
  <gstock-step slot="nav" panel="panel-3" icon="music">Plan de Suscripción</gstock-step>
  <gstock-step slot="nav" panel="panel-4" icon="credit-card">Detalles de Pago</gstock-step>

  <gstock-step-panel name="panel-1">Contenido de detalles básicos.</gstock-step-panel>
  <gstock-step-panel name="panel-2">Contenido de detalles de empresa.</gstock-step-panel>
  <gstock-step-panel name="panel-3">Contenido del plan de suscripción.</gstock-step-panel>
  <gstock-step-panel name="panel-4">Contenido de detalles de pago.</gstock-step-panel>
</gstock-step-group>

Enlaces

Use el atributo href para hacer que el componente renderice un <a> internamente. Esto le proporciona todo el comportamiento de enlace predeterminado del navegador y expone los atributos target y download.

Enlace Nueva Ventana Descargar Deshabilitado Contenido del enlace. Contenido de nueva ventana. Contenido de descarga. Contenido deshabilitado. 
<gstock-step-group>
  <gstock-step slot="nav" panel="panel-1" icon="link" href="https://example.com/">
    Enlace
  </gstock-step>
  <gstock-step slot="nav" panel="panel-2" icon="external-link" href="https://example.com/" target="_blank">
    Nueva Ventana
  </gstock-step>
  <gstock-step slot="nav" panel="panel-3" icon="download" href="/assets/images/wordmark.svg" download="gstock.svg">
    Descargar
  </gstock-step>
  <gstock-step slot="nav" panel="panel-4" icon="x-circle" href="https://example.com/" disabled>
    Deshabilitado
  </gstock-step>

  <gstock-step-panel name="panel-1">Contenido del enlace.</gstock-step-panel>
  <gstock-step-panel name="panel-2">Contenido de nueva ventana.</gstock-step-panel>
  <gstock-step-panel name="panel-3">Contenido de descarga.</gstock-step-panel>
  <gstock-step-panel name="panel-4">Contenido deshabilitado.</gstock-step-panel>
</gstock-step-group>