Update docs (#1001)

* docs(tree-view): avoid redundant copy

* docs(search): "clear" is dispatched when pressing "Escape"

* docs(search): refactor "Expandable variant" to demonstrate reactivity
This commit is contained in:
Eric Liu 2022-01-12 16:12:14 -10:00 committed by GitHub
commit d4dd33e28c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 3 deletions

View file

@ -20,13 +20,15 @@ The `Search` component size is extra-large by default. There are [large](#large-
### on:clear ### on:clear
The "clear" event is dispatched when clicking the "X" button in the search input element. The "clear" event is dispatched when clicking the "X" button or when pressing the "Escape" key.
<Search value="Cloud functions" on:clear={() => console.log('clear')}/> <Search value="Cloud functions" on:clear={() => console.log('clear')}/>
### Expandable variant ### Expandable variant
<Search expandable on:expand on:collapse /> Set `expandable` to `true` to use the expandable variant.
<FileSource src="/framed/Search/SearchExpandableReactive" />
### Light variant ### Light variant

View file

@ -49,7 +49,7 @@ Initial multiple selected nodes can be set using `selectedIds`.
### Expand all nodes ### Expand all nodes
To programmatically expand all nodes, access the component instance using the [bind:this](https://svelte.dev/docs#bind_element) directive and invoke the `TreeView.expandAll()` method to expand all nodes. To programmatically expand all nodes, access the component instance using the [bind:this](https://svelte.dev/docs#bind_element) directive and invoke the `TreeView.expandAll()` accessor.
<FileSource src="/framed/TreeView/TreeViewExpandAll" /> <FileSource src="/framed/TreeView/TreeViewExpandAll" />

View file

@ -0,0 +1,12 @@
<script>
import { Search } from "carbon-components-svelte";
let expanded = false;
</script>
<Search expandable bind:expanded on:expand on:collapse />
<br />
<strong>Expanded:</strong>
{expanded}