mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 13:21:29 +04:00
5c0a612127
Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
50 lines
1.8 KiB
Plaintext
50 lines
1.8 KiB
Plaintext
---
|
|
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>
|