preview/pages/sortable.astro - dev - githubmirror/tabler

preview/pages/sortable.astro

49 строк2 KB

Bartosz-Do

Fix broken links, aria attributes, and demo data mismatches (#2831)

08 авг 2026, 01:02

08 авг 2026, 01:025c0a612

---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Card from '@ui/Card.astro'
import CardHeader from '@ui/CardHeader.astro'
import CardBody from '@ui/CardBody.astro'
import ListGroup from '@ui/ListGroup.astro'
import ListGroupItem from '@ui/ListGroupItem.astro'
---

<DefaultLayout title="Sortable" pageHeader="SortableJS" pageMenu="plugins.sortable" pageLibs={['sortablejs']}>
  <div class="row row-cards">
    <div class="col-md-6">
      <Card>
        <CardHeader title="Basic usage" />
        <CardBody>
          <ListGroup as="ul" data-sortable='{"animation":150}'>
            <ListGroupItem as="li">Element A</ListGroupItem>
            <ListGroupItem as="li">Element B</ListGroupItem>
            <ListGroupItem as="li">Element C</ListGroupItem>
            <ListGroupItem as="li">Element D</ListGroupItem>
          </ListGroup>
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6">
      <Card>
        <CardHeader title="Two lists with drag and drop" />
        <CardBody>
          <div class="row g-3">
            <div class="col-sm-6">
              <ListGroup as="ul" data-sortable='{"group":"shared","animation":150}'>
                <ListGroupItem as="li">Item 1</ListGroupItem>
                <ListGroupItem as="li">Item 2</ListGroupItem>
                <ListGroupItem as="li">Item 3</ListGroupItem>
              </ListGroup>
            </div>
            <div class="col-sm-6">
              <ListGroup as="ul" data-sortable='{"group":"shared","animation":150}'>
                <ListGroupItem as="li">Item A</ListGroupItem>
                <ListGroupItem as="li">Item B</ListGroupItem>
                <ListGroupItem as="li">Item C</ListGroupItem>
              </ListGroup>
            </div>
          </div>
        </CardBody>
      </Card>
    </div>
  </div>
</DefaultLayout>