Step
<gstock-step>
|
GstockStep
Examples
<gstock-step>Paso de Ejemplo</gstock-step>
Colores
Use el atributo color para establecer el color del paso.
<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.
<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.
<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.
<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.
<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.
<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.
<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>