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";
import { sineIn } from "svelte/easing";
let hidden = true;
let transitionParams = {
x: -320,
duration: 200,
easing: sineIn
};
const handleCancel = () => {
hidden = true;
};
</script>
<Section sectionClass="h-96">
<div class="text-center pt-8">
<Button on:click={() => (hidden = false)}>Update user</Button>
</div>
<Drawer transitionType="fly" {transitionParams} bind:hidden id="sidebar4">
<div class="flex items-center">
<h5 id="drawer-label" class="inline-flex items-center mb-6 text-base font-semibold text-gray-500 uppercase dark:text-gray-400">UPDATE USER</h5>
<CloseButton on:click={() => (hidden = true)} class="mb-4 dark:text-white" />
</div>
<form action="#" class="mb-6">
<div class="mb-6">
<Label for="name" class="block mb-2">Username</Label>
<Input id="name" name="name" required placeholder="bonnie.green" />
</div>
<div class="mb-6">
<Label for="email" class="block mb-2">Email</Label>
<Input id="email" name="email" required placeholder="bonnie.green@company.com" />
</div>
<div class="mb-6">
<Label for="password" class="block mb-2">Password</Label>
<Input id="password" name="password" required placeholder="*********" />
</div>
<div class="mb-6">
<Label for="confirm-password" class="block mb-2">Password</Label>
<Input id="confirm-password" name="confirm-password" required placeholder="*********" />
</div>
<div class="bottom-0 left-0 flex justify-center w-full pb-4 space-x-4 md:px-4 md:absolute">
<Button type="submit" class="w-full">Update user</Button>
<Button class="w-full" outline color="red" on:click={handleCancel}>
<svg aria-hidden="true" class="w-5 h-5 mr-1.5 -ml-1" 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>