mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 19:46:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(button): extract selected, icon-only button example

Browse source
This commit is contained in:
Eric Y Liu 2021-03-13 05:14:20 -08:00
commit c11fa9465c
2 changed files with 31 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -64,9 +64,7 @@ The tooltip position and alignment can be controlled by `tooltipPosition` and `t
Set `isSelected` to `true` to enable the selected state for an icon-only, ghost button.
<Button isSelected={index === 0} kind="ghost" iconDescription="Bold" icon={TextBold16} on:click={() => (index = 0)} />
<Button isSelected={index === 1} kind="ghost" iconDescription="Italicize" icon={TextItalic16} on:click={() => (index = 1)} />
<Button isSelected={index === 2} kind="ghost" iconDescription="Underline" icon={TextUnderline16} on:click={() => (index = 2)} />
<FileSource src="/framed/Button/SelectedIconOnlyButton" />
### Link button

30
docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte Normal file
View file

@ -0,0 +1,30 @@
<script>
import { Button } from "carbon-components-svelte";
import TextBold16 from "carbon-icons-svelte/lib/TextBold16";
import TextItalic16 from "carbon-icons-svelte/lib/TextItalic16";
import TextUnderline16 from "carbon-icons-svelte/lib/TextUnderline16";
let index = 1;
</script>
<Button
isSelected="{index === 0}"
kind="ghost"
iconDescription="Bold"
icon="{TextBold16}"
on:click="{() => (index = 0)}"
/>
<Button
isSelected="{index === 1}"
kind="ghost"
iconDescription="Italicize"
icon="{TextItalic16}"
on:click="{() => (index = 1)}"
/>
<Button
isSelected="{index === 2}"
kind="ghost"
iconDescription="Underline"
icon="{TextUnderline16}"
on:click="{() => (index = 2)}"
/>