mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 21:27:06 +04:00
54 lines
2.4 KiB
Plaintext
54 lines
2.4 KiB
Plaintext
---
|
|
// Stepper where it is used most: a quantity per line of a small cart. Three
|
|
// lines, each with its own stepper; the cursor rests on the increase button of
|
|
// the middle one, and the last line sits at its stock limit so its increase
|
|
// button is disabled - the state the plugin sets, not a faked one.
|
|
//
|
|
// The capture never hovers, so the middle line is written by hand (the
|
|
// custom-buttons markup) and its increase button gets the hover background
|
|
// through the `--btn-bg` token, the same colour a real hover paints.
|
|
import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
|
|
import Card from '@ui/Card.astro'
|
|
import Stepper from '@ui/Stepper.astro'
|
|
|
|
const cart = [
|
|
{ name: 'Hex nut M8 DIN 934', code: 'Zinc plated', price: '$12.40', quantity: 2, max: 50 },
|
|
{ name: 'Lock nut M8 DIN 985', code: 'Stainless A2', price: '$28.90', quantity: 1, max: 20 },
|
|
{ name: 'Cap nut M8 DIN 1587', code: 'Brass', price: '$41.00', quantity: 3, max: 3 },
|
|
]
|
|
---
|
|
|
|
<ScreenshotLayout title="Stepper" columns={2}>
|
|
<Card>
|
|
<table class="table table-vcenter card-table">
|
|
<tbody>
|
|
{
|
|
cart.map((item, index) => (
|
|
<tr>
|
|
<td>
|
|
<div class="fw-medium">{item.name}</div>
|
|
<div class="text-secondary">{item.code}</div>
|
|
</td>
|
|
<td class="text-secondary text-nowrap">{item.price}</td>
|
|
<td class="w-1">
|
|
<div class="position-relative">
|
|
{index === 1 ? (
|
|
<div class="stepper" data-bs-toggle="stepper">
|
|
<button type="button" class="btn btn-icon" data-bs-stepper-action="decrement" aria-label="Decrease" />
|
|
<input type="text" class="form-control" value={item.quantity} min="1" max={item.max} aria-label={`Quantity of ${item.name}`} />
|
|
<button type="button" class="btn btn-icon" data-bs-stepper-action="increment" aria-label="Increase" style="--tblr-btn-bg: var(--tblr-hover-bg)" />
|
|
<span class="cursor" style="top: 55%; left: 82%" />
|
|
</div>
|
|
) : (
|
|
<Stepper value={item.quantity} min={1} max={item.max} ariaLabel={`Quantity of ${item.name}`} />
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</Card>
|
|
</ScreenshotLayout>
|