mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
73 lines
3.1 KiB
Plaintext
73 lines
3.1 KiB
Plaintext
---
|
|
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
|
|
import Dropzone from '@ui/Dropzone.astro'
|
|
import DropzoneItem from '@ui/DropzoneItem.astro'
|
|
import Card from '@ui/Card.astro'
|
|
import CardBody from '@ui/CardBody.astro'
|
|
import CardTitle from '@ui/CardTitle.astro'
|
|
import CardSubtitle from '@ui/CardSubtitle.astro'
|
|
import DocsLink from '@ui/DocsLink.astro'
|
|
---
|
|
|
|
<DefaultLayout title="Dropzone" pageMenu="plugins.dropzone" description="A dropzone is a file field users can drop files onto, with a list of the chosen files below it.">
|
|
<DocsLink slot="page-header-actions" path="/ui/forms/dropzone" />
|
|
|
|
<div class="row row-cards">
|
|
<div class="col-md-6">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle>Basic</CardTitle>
|
|
<CardSubtitle>Add <code>data-bs-toggle="dropzone"</code> to a <code>.dropzone</code> with a file input inside. A new file replaces the old one.</CardSubtitle>
|
|
<Dropzone id="dropzone-basic" title="Drop a file here or click to upload" />
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle>Multiple files</CardTitle>
|
|
<CardSubtitle>Add <code>multiple</code> to the input to collect several files in the list.</CardSubtitle>
|
|
<Dropzone id="dropzone-multiple" name="files" multiple />
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle>Restrictions</CardTitle>
|
|
<CardSubtitle>Limit the files with <code>accept</code>, <code>data-bs-max-size</code> and <code>data-bs-max-files</code>. A file that breaks a rule is listed with the reason.</CardSubtitle>
|
|
<Dropzone id="dropzone-restrictions" name="images" multiple accept="image/*" maxSize={2097152} maxFiles={3} icon="photo" title="Drop images here or click to upload" description="Up to 3 images, 2 MB each" />
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle>Disabled</CardTitle>
|
|
<CardSubtitle>Add <code>disabled</code> to the input. The area is dimmed and takes no clicks or drops.</CardSubtitle>
|
|
<Dropzone id="dropzone-disabled" title="Drop a file here or click to upload" disabled />
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle>File list states</CardTitle>
|
|
<CardSubtitle>
|
|
Static <code>.dropzone-item</code> rows show an upload in progress (<code>.dropzone-item-uploading</code>), a finished one (<code>.dropzone-item-success</code>) and a failed one (<code>.dropzone-item-error</code>).
|
|
</CardSubtitle>
|
|
<Dropzone id="dropzone-states" name="documents" multiple description="PNG, JPG or PDF, up to 5 MB">
|
|
<DropzoneItem title="annual-report-2025.pdf" description="3.4 MB" status="uploading" value={62} />
|
|
<DropzoneItem title="team-photo.jpg" description="1.2 MB" status="success" />
|
|
<DropzoneItem title="product-demo.mp4" description="Upload failed" status="error" />
|
|
</Dropzone>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</DefaultLayout>
|