carbon-components-svelte/docs/src/pages/framed/Search/SearchReactive.svelte

35 lines
603 B
Svelte

<script>
import { Search, ButtonSet, Button } from "carbon-components-svelte";
let value = "";
</script>
<Search bind:value />
<div>
<ButtonSet>
<Button
size="small"
disabled="{value === 'Cloud functions'}"
on:click="{() => (value = 'Cloud functions')}"
>
Set value
</Button>
<Button
kind="ghost"
size="small"
disabled="{value.length === 0}"
on:click="{() => (value = '')}"
>
Clear value
</Button>
</ButtonSet>
</div>
<div>Value: {value}</div>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>