Quantity Input
<gstock-quantity-input>
|
GstockQuantityInput
Ejemplos
Tamaño
Utilice el atributo de size para cambiar el tamaño del componente.
<gstock-quantity-input size="small"></gstock-quantity-input>
<gstock-quantity-input size="medium"></gstock-quantity-input>
<gstock-quantity-input size="large"></gstock-quantity-input>Marcador de posición
Utilice el atributo placeholder para agregar un marcador de posición.
<gstock-quantity-input placeholder="Enter value..."></gstock-quantity-input>Deshabilitado
Utilice el atributo disabled para deshabilitar el componente.
<gstock-quantity-input disabled="disabled" value="10"></gstock-quantity-input>Solo lectura
Utilice el atributo readonly para permitir leer el valor y no modificarlo.
<gstock-quantity-input readonly="readonly" value="10"></gstock-quantity-input>Etiqueta y texto de ayuda
Utilice el atributo label y help-text para añadir una etiqueta y texto de ayuda al componente y sea más accesible.
<gstock-quantity-input label="Label:" help-text="This is a test help-text."></gstock-quantity-input>Para utilizar HTML personalizado en las etiquetas y textos de ayuda, utilice los slots label y help-text.
<gstock-quantity-input>
<label slot="label" class="quantity-input-custom-label">
<gstock-icon name="edit" size="small"></gstock-icon>
Custom label:
</label>
<span slot="help-text">
Custom help-text with a
<a href="#label-and-help-text">link</a>
.
</span>
</gstock-quantity-input>
<style>
.quantity-input-custom-label {
display: inline-flex;
gap: 4px;
}
</style>Formato numérico
Utilice el atributo number-format para cambiar el formato del número. De forma predeterminada, el formato del número es #,###.## y este atributo acepta los siguientes formatos:
<gstock-quantity-input number-format="#.###,##" value="1234.56"></gstock-quantity-input>
<gstock-quantity-input number-format="#,###.##" value="1234.56"></gstock-quantity-input>
<gstock-quantity-input number-format="# ###.##" value="1234.56"></gstock-quantity-input>
<gstock-quantity-input number-format="# ###,##" value="1234.56"></gstock-quantity-input>Mínimo / Máximo
Utilice los atributos min y max para definir el valor mínimo y máximo.
<gstock-quantity-input placeholder="Min 5 / Max 10" min="5" max="10"></gstock-quantity-input>Ocultar botones de steps
Utilice el atributo hide-step-buttons para ocultar los botones de incrementar y decrementar. Por defecto, el componente muetra esos botones.
<gstock-quantity-input label="Hide step buttons" hide-step-buttons></gstock-quantity-input>Valores negativos
Utilice el atributo allow-negative para permitir valores negativos. Por defecto, el componente acepta solo valores positivos.
<gstock-quantity-input allow-negative="allow-negative"></gstock-quantity-input>Decimales
Utilice el atributo decimals para definir el número de decimales.
<gstock-quantity-input value="1.23456789" decimals="5"></gstock-quantity-input>Incrementar / Decrementar
Utiliza el atributo step para definir el valor que se incrementa o decrementa cuando se presiona el botón correspondiente.
<gstock-quantity-input step="10"></gstock-quantity-input>Eventos
Evento Change
Utilice el evento gstock-change-event para observar cuándo se modificó el valor. Para emitir este evento, cambie un valor en el componente.
-
Value:
-
Display Label:
-
Emitted Events:
-
Validity:
-
Validation Message:
-
Check Validity:
-
Report Validity:
<gstock-quantity-input label="Change Event"></gstock-quantity-input>
<ul class="output">
<li>
<span class="output__key">Value:</span>
<code class="output__value value"></code>
</li>
<li>
<span class="output__key">Display Label:</span>
<code class="output__value display-label"></code>
</li>
<li>
<span class="output__key">Emitted Events:</span>
<code class="output__value emitted-events"></code>
</li>
<li>
<span class="output__key">Validity:</span>
<code class="output__value validity"></code>
</li>
<li>
<span class="output__key">Validation Message:</span>
<code class="output__value validation-message"></code>
</li>
<li>
<span class="output__key">Check Validity:</span>
<code class="output__value check-validity"></code>
</li>
<li>
<span class="output__key">Report Validity:</span>
<code class="output__value report-validity"></code>
</li>
</ul>
<script type="module">
const quantityInput = document.querySelector('gstock-quantity-input');
const value = document.querySelector('.output__value.value');
const displayLabel = document.querySelector('.output__value.display-label');
const emittedEvents = document.querySelector('.output__value.emitted-events');
const validity = document.querySelector('.output__value.validity');
const validationMessage = document.querySelector('.output__value.validation-message');
const checkValidity = document.querySelector('.output__value.check-validity');
const reportValidity = document.querySelector('.output__value.report-validity');
await Promise.all([
customElements.whenDefined('gstock-button'),
customElements.whenDefined('gstock-quantity-input'),
]).then(() => {
const emittedEventsList = [];
value.innerText = quantityInput.value;
displayLabel.innerText = quantityInput.displayLabel;
validity.innerText = JSON.stringify(quantityInput.validity, undefined, 2);
validationMessage.innerText = quantityInput.validationMessage;
checkValidity.innerText = quantityInput.checkValidity();
reportValidity.innerText = quantityInput.reportValidity();
quantityInput.addEventListener('gstock-change-event', event => {
console.info('Emitted event', event);
const target = event.target;
value.innerText = target.value;
displayLabel.innerText = target.displayLabel;
emittedEvents.innerText = emittedEventsList.length;
validity.innerText = JSON.stringify(target.validity, undefined, 2);
validationMessage.innerText = target.validationMessage;
checkValidity.innerText = target.checkValidity();
reportValidity.innerText = target.reportValidity();
});
});
</script>Evento Input
Utilice el evento gstock-input-event para observar cuándo se ingresó el valor. Para emitir este evento, introduce un valor en el componente.
-
Value:
-
Display Label:
-
Emitted Events:
-
Validity:
-
Validation Message:
-
Check Validity:
-
Report Validity:
<gstock-quantity-input label="Input Event" number-format="#.###,##"></gstock-quantity-input>
<ul class="output">
<li>
<span class="output__key">Value:</span>
<code class="output__value value"></code>
</li>
<li>
<span class="output__key">Display Label:</span>
<code class="output__value display-label"></code>
</li>
<li>
<span class="output__key">Emitted Events:</span>
<code class="output__value emitted-events"></code>
</li>
<li>
<span class="output__key">Validity:</span>
<code class="output__value validity"></code>
</li>
<li>
<span class="output__key">Validation Message:</span>
<code class="output__value validation-message"></code>
</li>
<li>
<span class="output__key">Check Validity:</span>
<code class="output__value check-validity"></code>
</li>
<li>
<span class="output__key">Report Validity:</span>
<code class="output__value report-validity"></code>
</li>
</ul>
<script type="module">
const quantityInput = document.querySelector('gstock-quantity-input');
const value = document.querySelector('.output__value.value');
const displayLabel = document.querySelector('.output__value.display-label');
const emittedEvents = document.querySelector('.output__value.emitted-events');
const validity = document.querySelector('.output__value.validity');
const validationMessage = document.querySelector('.output__value.validation-message');
const checkValidity = document.querySelector('.output__value.check-validity');
const reportValidity = document.querySelector('.output__value.report-validity');
await Promise.all([
customElements.whenDefined('gstock-button'),
customElements.whenDefined('gstock-quantity-input'),
]).then(() => {
const emittedEventsList = [];
value.innerText = quantityInput.value;
displayLabel.innerText = quantityInput.displayLabel;
validity.innerText = JSON.stringify(quantityInput.validity, undefined, 2);
validationMessage.innerText = quantityInput.validationMessage;
checkValidity.innerText = quantityInput.checkValidity();
reportValidity.innerText = quantityInput.reportValidity();
quantityInput.addEventListener('gstock-input-event', async event => {
console.info('Emitted event', event);
emittedEventsList.push({
...event,
});
const target = event.target;
value.innerText = target.value;
displayLabel.innerText = target.displayLabel;
emittedEvents.innerText = emittedEventsList.length;
validity.innerText = JSON.stringify(target.validity, undefined, 2);
validationMessage.innerText = target.validationMessage;
checkValidity.innerText = target.checkValidity();
reportValidity.innerText = target.reportValidity();
});
});
</script>Control de formulario
Este componente funciona con elementos estándar <form>. Consulta la sección sobre controles de formulario para obtener más información sobre el envío de formularios y la validación del lado del cliente.
Campo obligatorio
Utilice el atributo required para que el valor del componente sea obligatorio.
<form>
<gstock-quantity-input number-format="#.###,##" name="test" label="Required field:" required="required" help-text="The form will not be submitted if a required field is incomplete."></gstock-quantity-input>
<gstock-button size="small" type="submit">Submit</gstock-button>
<gstock-button size="small" variant="outlined" type="reset">Reset</gstock-button>
</form>
<script type="module">
const form = document.querySelector('form');
await Promise.all([
customElements.whenDefined('gstock-button'),
customElements.whenDefined('gstock-quantity-input'),
]).then(() => {
form.addEventListener('submit', event => {
event.preventDefault();
const data = Object.fromEntries(new FormData(event.target));
alert(`The field are valid!\n\n${JSON.stringify(data, undefined, 2)}`);
});
});
</script>
<style>
gstock-button {
margin-top: var(--gstock-legacy-spacing-8);
}
</style>Errores de validación personalizados
Para crear un error de validación personalizado, pase un string que no esté vacío al método setCustomValidity().
Esto anulará cualquier restricción de validación existente. Para que el componente vuelva a ser válido, vuelva a llamar a setCustomValidity() con un string vacío.
<form>
<gstock-quantity-input name="test" label="Value:" required="required" help-text="Type the number '123' to make the component valid"></gstock-quantity-input>
<gstock-button size="small" type="submit">Submit</gstock-button>
<gstock-button size="small" variant="outlined" type="reset">Reset</gstock-button>
</form>
<script type="module">
const form = document.querySelector('form');
const quantityInput = form.querySelector('gstock-quantity-input');
await Promise.all([
customElements.whenDefined('gstock-button'),
customElements.whenDefined('gstock-quantity-input'),
]).then(() => {
form.addEventListener('submit', event => {
event.preventDefault();
const data = Object.fromEntries(new FormData(event.target));
alert(`The field are valid!\n\n${JSON.stringify(data, undefined, 2)}`);
});
quantityInput.addEventListener('gstock-input-event', event => {
const target = event.target;
if (target.value === '123') {
target.setCustomValidity('');
} else {
target.setCustomValidity("You must type '123' before sending!");
}
});
});
</script>
<style>
gstock-button {
margin-top: var(--gstock-legacy-spacing-8);
}
</style>Estilos de validación
Utilice el atributo validity-styles para aplicar estilos de validación. Estos estilos se aplican únicamente después de una interacción del usuario.
<form>
<gstock-quantity-input name="test" label="Value:" help-text="This field is required." autocomplete="off" thousandsseparator="," decimalseparator="." required="required" validity-styles="validity-styles"></gstock-quantity-input>
<gstock-button size="small" type="submit">Submit</gstock-button>
<gstock-button size="small" variant="outlined" type="reset">Reset</gstock-button>
</form>
<script type="module">
const form = document.querySelector('form');
await Promise.all([
customElements.whenDefined('gstock-button'),
customElements.whenDefined('gstock-quantity-input'),
]).then(() => {
form.addEventListener('submit', event => {
event.preventDefault();
const data = Object.fromEntries(new FormData(event.target));
alert(`The field are valid!\n\n${JSON.stringify(data, undefined, 2)}`);
});
});
</script>
<style>
gstock-button {
margin-top: var(--gstock-legacy-spacing-8);
}
</style>Validación en línea
Para desactivar los mensajes de error de los navegadores, debe cancelar el evento gstock-invalid-event. Luego, puede aplicar sus propios errores de validación en línea.
<form>
<gstock-quantity-input name="test" label="Value:" help-text="This field is required." autocomplete="off" required="required" validity-styles="validity-styles"></gstock-quantity-input>
<div id="error-message" aria-live="polite" hidden="hidden"></div>
<gstock-button size="small" type="submit">Submit</gstock-button>
<gstock-button size="small" variant="outlined" type="reset">Reset</gstock-button>
</form>
<script type="module">
const form = document.querySelector('form');
const errorMessage = document.querySelector('#error-message');
await Promise.all([
customElements.whenDefined('gstock-button'),
customElements.whenDefined('gstock-quantity-input'),
]).then(() => {
form.addEventListener(
'gstock-invalid-event',
event => {
event.preventDefault();
errorMessage.textContent = `Error: ${event.target.validationMessage}`;
errorMessage.hidden = false;
event.target.focus();
},
{
capture: true,
},
);
form.addEventListener('submit', event => {
event.preventDefault();
errorMessage.hidden = true;
errorMessage.textContent = '';
setTimeout(() => {
const data = Object.fromEntries(new FormData(event.target));
alert(`The field are valid!\n\n${JSON.stringify(data, undefined, 2)}`);
}, 50);
});
form.addEventListener('reset', () => {
errorMessage.hidden = true;
errorMessage.textContent = '';
});
});
</script>
<style>
#error-message {
margin-block: var(--gstock-legacy-spacing-4);
}
gstock-button {
margin-top: var(--gstock-legacy-spacing-8);
}
</style>