mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
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:
parent
1a470cb331
commit
d4dd33e28c
3 changed files with 17 additions and 3 deletions
|
@ -20,13 +20,15 @@ The `Search` component size is extra-large by default. There are [large](#large-
|
|||
|
||||
### 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')}/>
|
||||
|
||||
### Expandable variant
|
||||
|
||||
<Search expandable on:expand on:collapse />
|
||||
Set `expandable` to `true` to use the expandable variant.
|
||||
|
||||
<FileSource src="/framed/Search/SearchExpandableReactive" />
|
||||
|
||||
### Light variant
|
||||
|
||||
|
|
|
@ -49,7 +49,7 @@ Initial multiple selected nodes can be set using `selectedIds`.
|
|||
|
||||
### 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" />
|
||||
|
||||
|
|
12
docs/src/pages/framed/Search/SearchExpandableReactive.svelte
Normal file
12
docs/src/pages/framed/Search/SearchExpandableReactive.svelte
Normal 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}
|
Loading…
Add table
Add a link
Reference in a new issue