mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 19:46:36 +00:00
feat: add LocalStorage component
This commit is contained in:
parent
b5161b6b9e
commit
1f7fe60695
11 changed files with 199 additions and 3 deletions
29
docs/src/pages/framed/LocalStorage/LocalStorage.svelte
Normal file
29
docs/src/pages/framed/LocalStorage/LocalStorage.svelte
Normal file
|
@ -0,0 +1,29 @@
|
|||
<script>
|
||||
import { LocalStorage, Toggle, Button } from "carbon-components-svelte";
|
||||
|
||||
let storage;
|
||||
let toggled = false;
|
||||
let events = [];
|
||||
|
||||
$: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
|
||||
</script>
|
||||
|
||||
<LocalStorage
|
||||
bind:this="{storage}"
|
||||
key="dark-mode"
|
||||
bind:value="{toggled}"
|
||||
on:save="{() => {
|
||||
events = [...events, { event: 'on:save' }];
|
||||
}}"
|
||||
on:update="{({ detail }) => {
|
||||
events = [...events, { event: 'on:update', detail }];
|
||||
}}"
|
||||
/>
|
||||
|
||||
<Toggle size="sm" labelText="Dark mode" bind:toggled />
|
||||
|
||||
<br />
|
||||
|
||||
<pre>
|
||||
{JSON.stringify(events, null, 2)}
|
||||
</pre>
|
Loading…
Add table
Add a link
Reference in a new issue