Svelte Update Drawers (CRUD) - Flowbite Svelte Blocks
Get started with a collection of drawer components that you can use to update existing data sets from your database inside your dashboard.
Default drawer #
Use this free and responsive example of a drawer component to update an existing data set featuring text input fields, select boxes, and textareas.
- Svelte
<script lang="ts">
import { Section } from 'flowbite-svelte-blocks';
import { Label, Input, Button, Drawer, CloseButton } from 'flowbite-svelte';
let hidden = true;
const handleCancel = () => {
hidden = true;
};
</script>
<Section sectionClass="h-96">
<div class="pt-8 text-center">
<Button onclick={() => (hidden = false)}>Update user</Button>
</div>
<Drawer bind:hidden id="sidebar4">
<div class="flex items-center justify-between">
<h5 id="drawer-label" class="mb-6 inline-flex items-center text-base font-semibold text-gray-500 uppercase dark:text-gray-400">UPDATE USER</h5>
<CloseButton onclick={() => (hidden = true)} class="mb-4 dark:text-white" />
</div>
<form action="#" class="mb-6">
<div class="mb-6">
<Label for="name" class="mb-2 block">Username</Label>
<Input id="name" name="name" required placeholder="bonnie.green" />
</div>
<div class="mb-6">
<Label for="email" class="mb-2 block">Email</Label>
<Input id="email" name="email" required placeholder="bonnie.green@company.com" />
</div>
<div class="mb-6">
<Label for="password" class="mb-2 block">Password</Label>
<Input id="password" name="password" required placeholder="*********" />
</div>
<div class="mb-6">
<Label for="confirm-password" class="mb-2 block">Password</Label>
<Input id="confirm-password" name="confirm-password" required placeholder="*********" />
</div>
<div class="bottom-0 left-0 flex w-full justify-center space-x-4 pb-4 md:absolute md:px-4">
<Button type="submit" class="w-full">Update user</Button>
<Button class="w-full" outline color="red" onclick={handleCancel}>
<svg aria-hidden="true" class="mr-1.5 -ml-1 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
clip-rule="evenodd"
/></svg
>
Delete
</Button>
</div>
</form>
</Drawer>
</Section>