mirror of
https://github.com/tabler/tabler.git
synced 2026-08-07 20:02:23 +04:00
Paweł Kuna
50 lines
1.6 KiB
Plaintext
50 lines
1.6 KiB
Plaintext
---
|
|
// Port of preview/pages/sortable.html (layout: default, page-libs: [sortablejs]).
|
|
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
|
---
|
|
|
|
<DefaultLayout title="Sortable" pageHeader="SortableJS" pageMenu="plugins.sortable" pageLibs={['sortablejs']}>
|
|
<div class="row row-cards">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Podstawowe użycie</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="list-group" data-sortable='{"animation":150}'>
|
|
<li class="list-group-item">Element A</li>
|
|
<li class="list-group-item">Element B</li>
|
|
<li class="list-group-item">Element C</li>
|
|
<li class="list-group-item">Element D</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Dwie listy z przenoszeniem</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-sm-6">
|
|
<ul class="list-group" data-sortable='{"group":"shared","animation":150}'>
|
|
<li class="list-group-item">Item 1</li>
|
|
<li class="list-group-item">Item 2</li>
|
|
<li class="list-group-item">Item 3</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<ul class="list-group" data-sortable='{"group":"shared","animation":150}'>
|
|
<li class="list-group-item">Item A</li>
|
|
<li class="list-group-item">Item B</li>
|
|
<li class="list-group-item">Item C</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DefaultLayout>
|