Step Group
<gstock-step-group>
|
GstockStepGroup
Examples
Color
Use el atributo color para cambiar el color de cada paso en el grupo de pasos.
<gstock-step-group color="primary">
<gstock-step slot="nav" panel="paso-1" active>Paso 1</gstock-step>
<gstock-step slot="nav" panel="paso-2">Paso 2</gstock-step>
<gstock-step slot="nav" panel="paso-3">Paso 3</gstock-step>
<gstock-step slot="nav" panel="paso-4">Paso 4</gstock-step>
<gstock-step-panel name="paso-1">Este es el contenido del panel del paso 1.</gstock-step-panel>
<gstock-step-panel name="paso-2">Este es el contenido del panel del paso 2.</gstock-step-panel>
<gstock-step-panel name="paso-3">Este es el contenido del panel del paso 3.</gstock-step-panel>
<gstock-step-panel name="paso-4">Este es el contenido del panel del paso 4.</gstock-step-panel>
</gstock-step-group>
<br>
<gstock-step-group color="secondary">
<gstock-step slot="nav" panel="paso-1" active>Paso 1</gstock-step>
<gstock-step slot="nav" panel="paso-2">Paso 2</gstock-step>
<gstock-step slot="nav" panel="paso-3">Paso 3</gstock-step>
<gstock-step slot="nav" panel="paso-4">Paso 4</gstock-step>
<gstock-step-panel name="paso-1">Este es el contenido del panel del paso 1.</gstock-step-panel>
<gstock-step-panel name="paso-2">Este es el contenido del panel del paso 2.</gstock-step-panel>
<gstock-step-panel name="paso-3">Este es el contenido del panel del paso 3.</gstock-step-panel>
<gstock-step-panel name="paso-4">Este es el contenido del panel del paso 4.</gstock-step-panel>
</gstock-step-group>Size
Use el atributo size para cambiar el tamaño de cada paso en el grupo de pasos.
Use size="small" para mostrar pasos de tamaño pequeño.
<gstock-step-group size="small">
<gstock-step slot="nav" panel="paso-1" active>Paso 1</gstock-step>
<gstock-step slot="nav" panel="paso-2">Paso 2</gstock-step>
<gstock-step slot="nav" panel="paso-3">Paso 3</gstock-step>
<gstock-step slot="nav" panel="paso-4">Paso 4</gstock-step>
<gstock-step-panel name="paso-1">Este es el contenido del panel del paso 1.</gstock-step-panel>
<gstock-step-panel name="paso-2">Este es el contenido del panel del paso 2.</gstock-step-panel>
<gstock-step-panel name="paso-3">Este es el contenido del panel del paso 3.</gstock-step-panel>
<gstock-step-panel name="paso-4">Este es el contenido del panel del paso 4.</gstock-step-panel>
</gstock-step-group>Use size="medium" para mostrar pasos de tamaño mediano. Este es el tamaño predeterminado.
<gstock-step-group size="medium">
<gstock-step slot="nav" panel="paso-1" active>Paso 1</gstock-step>
<gstock-step slot="nav" panel="paso-2">Paso 2</gstock-step>
<gstock-step slot="nav" panel="paso-3">Paso 3</gstock-step>
<gstock-step slot="nav" panel="paso-4">Paso 4</gstock-step>
<gstock-step-panel name="paso-1">Este es el contenido del panel del paso 1.</gstock-step-panel>
<gstock-step-panel name="paso-2">Este es el contenido del panel del paso 2.</gstock-step-panel>
<gstock-step-panel name="paso-3">Este es el contenido del panel del paso 3.</gstock-step-panel>
<gstock-step-panel name="paso-4">Este es el contenido del panel del paso 4.</gstock-step-panel>
</gstock-step-group>Use size="large" para mostrar pasos de tamaño grande.
<gstock-step-group size="large">
<gstock-step slot="nav" panel="paso-1" active>Paso 1</gstock-step>
<gstock-step slot="nav" panel="paso-2">Paso 2</gstock-step>
<gstock-step slot="nav" panel="paso-3">Paso 3</gstock-step>
<gstock-step slot="nav" panel="paso-4">Paso 4</gstock-step>
<gstock-step-panel name="paso-1">Este es el contenido del panel del paso 1.</gstock-step-panel>
<gstock-step-panel name="paso-2">Este es el contenido del panel del paso 2.</gstock-step-panel>
<gstock-step-panel name="paso-3">Este es el contenido del panel del paso 3.</gstock-step-panel>
<gstock-step-panel name="paso-4">Este es el contenido del panel del paso 4.</gstock-step-panel>
</gstock-step-group>Placement
Use el atributo placement para mostrar el grupo de pasos de forma horizontal o vertical. Los valores soportados son top, bottom, start o end.
Use placement="top" para posicionar los pasos encima del contenido. Esta es la posición predeterminada.
<gstock-step-group placement="top">
<gstock-step slot="nav" panel="paso-1" active>Paso 1</gstock-step>
<gstock-step slot="nav" panel="paso-2">Paso 2</gstock-step>
<gstock-step slot="nav" panel="paso-3">Paso 3</gstock-step>
<gstock-step slot="nav" panel="paso-4">Paso 4</gstock-step>
<gstock-step-panel name="paso-1">Este es el contenido del panel del paso 1.</gstock-step-panel>
<gstock-step-panel name="paso-2">Este es el contenido del panel del paso 2.</gstock-step-panel>
<gstock-step-panel name="paso-3">Este es el contenido del panel del paso 3.</gstock-step-panel>
<gstock-step-panel name="paso-4">Este es el contenido del panel del paso 4.</gstock-step-panel>
</gstock-step-group>Use placement="bottom" para posicionar los pasos debajo del contenido.
<gstock-step-group placement="bottom">
<gstock-step slot="nav" panel="paso-1" active>Paso 1</gstock-step>
<gstock-step slot="nav" panel="paso-2">Paso 2</gstock-step>
<gstock-step slot="nav" panel="paso-3">Paso 3</gstock-step>
<gstock-step slot="nav" panel="paso-4">Paso 4</gstock-step>
<gstock-step-panel name="paso-1">Este es el contenido del panel del paso 1.</gstock-step-panel>
<gstock-step-panel name="paso-2">Este es el contenido del panel del paso 2.</gstock-step-panel>
<gstock-step-panel name="paso-3">Este es el contenido del panel del paso 3.</gstock-step-panel>
<gstock-step-panel name="paso-4">Este es el contenido del panel del paso 4.</gstock-step-panel>
</gstock-step-group>Use placement="start" para posicionar los pasos al inicio de la línea.
<gstock-step-group placement="start">
<gstock-step slot="nav" panel="paso-1" active>Paso 1</gstock-step>
<gstock-step slot="nav" panel="paso-2">Paso 2</gstock-step>
<gstock-step slot="nav" panel="paso-3">Paso 3</gstock-step>
<gstock-step slot="nav" panel="paso-4">Paso 4</gstock-step>
<gstock-step-panel name="paso-1">Este es el contenido del panel del paso 1.</gstock-step-panel>
<gstock-step-panel name="paso-2">Este es el contenido del panel del paso 2.</gstock-step-panel>
<gstock-step-panel name="paso-3">Este es el contenido del panel del paso 3.</gstock-step-panel>
<gstock-step-panel name="paso-4">Este es el contenido del panel del paso 4.</gstock-step-panel>
</gstock-step-group>Use placement="end" para posicionar los pasos al final de la línea.
<gstock-step-group placement="end">
<gstock-step slot="nav" panel="paso-1" active>Paso 1</gstock-step>
<gstock-step slot="nav" panel="paso-2">Paso 2</gstock-step>
<gstock-step slot="nav" panel="paso-3">Paso 3</gstock-step>
<gstock-step slot="nav" panel="paso-4">Paso 4</gstock-step>
<gstock-step-panel name="paso-1">Este es el contenido del panel del paso 1.</gstock-step-panel>
<gstock-step-panel name="paso-2">Este es el contenido del panel del paso 2.</gstock-step-panel>
<gstock-step-panel name="paso-3">Este es el contenido del panel del paso 3.</gstock-step-panel>
<gstock-step-panel name="paso-4">Este es el contenido del panel del paso 4.</gstock-step-panel>
</gstock-step-group>Scroll controls
Use el atributo scroll-controls para mostrar botones de navegación en las posiciones de inicio y final cuando hay más pasos de los que el espacio permite. La navegación será desplazable.
<gstock-step-group scroll-controls>
<gstock-step slot="nav" panel="paso-1" active>Paso 1</gstock-step>
<gstock-step slot="nav" panel="paso-2">Paso 2</gstock-step>
<gstock-step slot="nav" panel="paso-3">Paso 3</gstock-step>
<gstock-step slot="nav" panel="paso-4">Paso 4</gstock-step>
<gstock-step slot="nav" panel="paso-5">Paso 5</gstock-step>
<gstock-step slot="nav" panel="paso-6">Paso 6</gstock-step>
<gstock-step slot="nav" panel="paso-7">Paso 7</gstock-step>
<gstock-step slot="nav" panel="paso-8">Paso 8</gstock-step>
<gstock-step-panel name="paso-1">Este es el contenido del panel del paso 1.</gstock-step-panel>
<gstock-step-panel name="paso-2">Este es el contenido del panel del paso 2.</gstock-step-panel>
<gstock-step-panel name="paso-3">Este es el contenido del panel del paso 3.</gstock-step-panel>
<gstock-step-panel name="paso-4">Este es el contenido del panel del paso 4.</gstock-step-panel>
<gstock-step-panel name="paso-5">Este es el contenido del panel del paso 5.</gstock-step-panel>
<gstock-step-panel name="paso-6">Este es el contenido del panel del paso 6.</gstock-step-panel>
<gstock-step-panel name="paso-7">Este es el contenido del panel del paso 7.</gstock-step-panel>
<gstock-step-panel name="paso-8">Este es el contenido del panel del paso 8.</gstock-step-panel>
</gstock-step-group>
<style>
gstock-step-group::part(base) {
max-width: 500px;
}
</style>Navegación
Use los métodos next y previous para navegar programáticamente deslizándose a través de los pasos.
<gstock-step-group>
<gstock-step slot="nav" panel="paso-1" active>Paso 1</gstock-step>
<gstock-step slot="nav" panel="paso-2">Paso 2</gstock-step>
<gstock-step slot="nav" panel="paso-3" disabled>Paso 3</gstock-step>
<gstock-step slot="nav" panel="paso-4">Paso 4</gstock-step>
<gstock-step-panel name="paso-1">Este es el contenido del panel del paso 1.</gstock-step-panel>
<gstock-step-panel name="paso-2">Este es el contenido del panel del paso 2.</gstock-step-panel>
<gstock-step-panel name="paso-3">Este es el contenido del panel del paso 3.</gstock-step-panel>
<gstock-step-panel name="paso-4">Este es el contenido del panel del paso 4.</gstock-step-panel>
</gstock-step-group>
<gstock-icon-button icon="chevron-left" variant="outlined" size="small"></gstock-icon-button>
<gstock-icon-button icon="chevron-right" variant="outlined" size="small"></gstock-icon-button>
<div class="paso-actual"></div>
<script type="module">
const stepGroup = document.querySelector('gstock-step-group');
const previousButton = document.querySelector('gstock-icon-button[icon=chevron-left]');
const nextButton = document.querySelector('gstock-icon-button[icon=chevron-right]');
const currentStep = document.querySelector('.paso-actual');
function changeNavigationStatus(stepGroupEl) {
const activeStep = stepGroupEl.getActiveStep();
currentStep.innerHTML = `<span>Paso Actual: ${activeStep?.panel}<span>`;
if (activeStep.panel === "paso-1") {
previousButton.disabled = true;
nextButton.disabled = false;
}
if (activeStep.panel === "paso-4") {
previousButton.disabled = false;
nextButton.disabled = true;
}
if (activeStep.panel !== "paso-1" && activeStep.panel !== "paso-4") {
previousButton.disabled = false;
nextButton.disabled = false;
}
}
const whenAllDefined = Promise.all([
customElements.whenDefined('gstock-step'),
customElements.whenDefined('gstock-step-group'),
customElements.whenDefined('gstock-step-panel'),
]).then(() => {
changeNavigationStatus(stepGroup);
stepGroup.addEventListener('gstock-step-show-event', (event) => {
changeNavigationStatus(event.target);
});
previousButton.addEventListener('click', () => {
stepGroup.previous();
});
nextButton.addEventListener('click', () => {
stepGroup.next();
});
});
</script>