mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(button): add "Programmatic focus" example (#1834)

Browse source 
Related #1830
This commit is contained in:
Eric Liu 2023-10-23 09:55:00 -07:00 • committed by GitHub
commit a828625c66
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

10
docs/src/pages/components/Button.svx
View file

@ -159,4 +159,12 @@ Set `expressive` to `true` to use Carbon's expressive typesetting.
<Button size="lg" skeleton />
<Button skeleton />
<Button skeleton size="field" />
<Button skeleton size="small" />
<Button skeleton size="small" />
## Programmatic focus
Bind to the `ref` prop to access a reference to the underlying button element.
You can use this reference to programmatically focus the button.
<FileSource src="/framed/Button/ProgrammaticFocus" />

15
docs/src/pages/framed/Button/ProgrammaticFocus.svelte Normal file
View file

@ -0,0 +1,15 @@
<script>
import { Button } from "carbon-components-svelte";
let ref;
</script>
<Button bind:ref>Primary button</Button>
<Button
kind="ghost"
on:click="{() => {
ref?.focus();
}}"
>
Click to focus the Primary button
</Button>