mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
Alignment with Carbon version 10.30 (#559)
* feat(toolbar): forward "clear" event in ToolbarSearch
* docs(search): add on:clear example
* fix(ui-shell): set aria-hidden in SideNav
Ref c2b4f1f00
* chore(deps-dev): upgrade carbon-components to v10.30.0
* fix(text-input): use bx--text-input class for TextInputSkeleton
* fix(radio-button): only render span if labelText is truthy
* docs(password-input): add custom tooltip example
* feat(button): add isSelected prop for icon-only, ghost buttons
* feat(radio-button): add legendText prop to RadioButtonGroup
* docs(tag): add filterable (disabled) variant
* feat(tag): add interactive prop
* chore(number-input): deprecate the mobile variant
Mobile variant styles will no longer work.
* feat(button): set aria-pressed attribute if icon-only, ghost button is selected
* fix(multi-select): type dispatched select event
* fix(button): remove redundant "button" role
* feat(icon): deprecate Icon, IconSkeleton
* feat(ui-shell): make SideNavMenuItem text slottable
* fix(list-box): update styles for ListBoxSelection
* fix(list-box): temporarily apply override styles to ListBoxMenuIcon for chevron
* fix(tag): set disabled prop on interactive tag
* docs(button): extract selected, icon-only button example
* feat(tooltip): elevate z-index of tooltip when open
* feat: forward restProps to input element
* fix(types): fix TimePicker test to pass svelte-check
* feat: add ImageLoader component
* test: add ImageLoader
* feat: add LocalStorage component
* test(local-storage): fix invalid file
* chore(docs): use green tag type
This commit is contained in:
Eric Liu
GitHub
parent
08249d6764
commit
1b234ca2e3
68 changed files with 1079 additions and 217 deletions
|
|
@ -13,11 +13,15 @@
|
|||
SideNavItems,
|
||||
SideNavMenu,
|
||||
SideNavMenuItem,
|
||||
Tag,
|
||||
} from "carbon-components-svelte";
|
||||
import LogoGithub20 from "carbon-icons-svelte/lib/LogoGithub20";
|
||||
import Theme from "../components/Theme.svelte";
|
||||
import Footer from "../components/Footer.svelte";
|
||||
|
||||
const deprecated = ["ToggleSmall", "Icon"];
|
||||
const new_components = ["ImageLoader", "LocalStorage"];
|
||||
|
||||
let isOpen = false;
|
||||
let isSideNavOpen = true;
|
||||
let innerWidth = 2048;
|
||||
|
|
@ -98,16 +102,25 @@
|
|||
text="{child.title}"
|
||||
href="{$url(child.path)}"
|
||||
isSelected="{$isActive($url(child.path))}"
|
||||
/>
|
||||
>
|
||||
{child.title}
|
||||
{#if deprecated.includes(child.title)}
|
||||
<Tag size="sm" type="red">Deprecated</Tag>
|
||||
{/if}
|
||||
{#if new_components.includes(child.title)}
|
||||
<Tag size="sm" type="green">New</Tag>
|
||||
{/if}
|
||||
</SideNavMenuItem>
|
||||
{/each}
|
||||
</SideNavMenu>
|
||||
<SideNavMenu expanded="{$isActive($url('/recipes'))}" text="Recipes">
|
||||
{#each recipes.children as child, i (child.path)}
|
||||
<SideNavMenuItem
|
||||
text="{child.title}"
|
||||
href="{$url(child.path)}"
|
||||
isSelected="{$isActive($url(child.path))}"
|
||||
/>
|
||||
>
|
||||
{child.title}
|
||||
</SideNavMenuItem>
|
||||
{/each}
|
||||
</SideNavMenu>
|
||||
</SideNavItems>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
The `AspectRatio` component is useful for constraining fluid content within an aspect ratio. To demo this, resize your browser for the examples below.
|
||||
|
||||
Supported aspect ratios: `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"9x16"`, `"1x2"`
|
||||
Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"9x16"` and `"1x2"`.
|
||||
|
||||
### Default (2x1)
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,12 @@
|
|||
import { Button } from "carbon-components-svelte";
|
||||
import Add16 from "carbon-icons-svelte/lib/Add16";
|
||||
import TrashCan16 from "carbon-icons-svelte/lib/TrashCan16";
|
||||
import TextBold16 from "carbon-icons-svelte/lib/TextBold16";
|
||||
import TextItalic16 from "carbon-icons-svelte/lib/TextItalic16";
|
||||
import TextUnderline16 from "carbon-icons-svelte/lib/TextUnderline16";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
|
||||
let index = 1;
|
||||
</script>
|
||||
|
||||
### Primary button
|
||||
|
|
@ -55,6 +60,12 @@ The tooltip position and alignment can be controlled by `tooltipPosition` and `t
|
|||
|
||||
<Button tooltipPosition="right" tooltipAlignment="end" iconDescription="Tooltip text" icon={Add16} />
|
||||
|
||||
### Selected icon-only, ghost button
|
||||
|
||||
Set `isSelected` to `true` to enable the selected state for an icon-only, ghost button.
|
||||
|
||||
<FileSource src="/framed/Button/SelectedIconOnlyButton" />
|
||||
|
||||
### Link button
|
||||
|
||||
If an `href` value is specified, the component will render an [anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) with a "button" role.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { Icon } from "carbon-components-svelte";
|
||||
import { Icon, InlineNotification, OutboundLink } from "carbon-components-svelte";
|
||||
import Add16 from "carbon-icons-svelte/lib/Add16";
|
||||
import Add20 from "carbon-icons-svelte/lib/Add20";
|
||||
import Add24 from "carbon-icons-svelte/lib/Add24";
|
||||
|
|
@ -7,6 +7,12 @@
|
|||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
<InlineNotification svx-ignore title="Deprecation warning" kind="warning" hideCloseButton>
|
||||
<div>
|
||||
This component will be removed in the next major release. Use icons from <OutboundLink href="https://github.com/IBM/carbon-icons-svelte">carbon-icons-svelte</OutboundLink> instead.
|
||||
</div>
|
||||
</InlineNotification>
|
||||
|
||||
### Default
|
||||
|
||||
<Icon render={Add16} />
|
||||
|
|
|
|||
46
docs/src/pages/components/ImageLoader.svx
Normal file
46
docs/src/pages/components/ImageLoader.svx
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<script>
|
||||
import { ImageLoader, Button, InlineLoading } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
|
||||
let key = 0;
|
||||
</script>
|
||||
|
||||
This utility component uses the [Image API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image) to programmatically load an image with slottable loading and error states.
|
||||
|
||||
### Default
|
||||
|
||||
<ImageLoader src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />
|
||||
|
||||
### Slots
|
||||
|
||||
Use the "loading" and "error" named slots to render an element when the image is loading or has an error.
|
||||
|
||||
<ImageLoader src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg">
|
||||
<div slot="loading">
|
||||
<InlineLoading />
|
||||
</div>
|
||||
<div slot="error">
|
||||
An error occurred.
|
||||
</div>
|
||||
</ImageLoader>
|
||||
|
||||
### With aspect ratio
|
||||
|
||||
If `ratio` is set, this component uses the [AspectRatio](/components/AspectRatio) to constrain the image.
|
||||
|
||||
Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"9x16"` and `"1x2"`.
|
||||
|
||||
<ImageLoader ratio="16x9" src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />
|
||||
|
||||
### Fade in
|
||||
|
||||
Set `fadeIn` to `true` to fade in the image if successfully loaded.
|
||||
|
||||
<Button kind="ghost" on:click="{() => { key++;}}">Reload image</Button>
|
||||
{#key key}<ImageLoader fadeIn ratio="16x9" src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />{/key}
|
||||
|
||||
### Programmatic usage
|
||||
|
||||
In this example, a component reference is obtained to programmatically trigger the `loadImage` method.
|
||||
|
||||
<FileSource src="/framed/ImageLoader/ProgrammaticImageLoader" />
|
||||
9
docs/src/pages/components/LocalStorage.svx
Normal file
9
docs/src/pages/components/LocalStorage.svx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<script>
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
This utility component wraps the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and is useful for persisting ephemeral data (e.g., color theme) at the browser level.
|
||||
|
||||
### Reactive example
|
||||
|
||||
<FileSource src="/framed/LocalStorage/LocalStorage" />
|
||||
|
|
@ -24,6 +24,16 @@ To prevent alphabetical item ordering, pass an empty function to the `sortItem`
|
|||
sortItem="{() => {}}"
|
||||
/>
|
||||
|
||||
### Filterable
|
||||
|
||||
`$$restProps` are spread to the underlying input element.
|
||||
|
||||
<MultiSelect spellcheck="false" filterable titleText="Contact" placeholder="Filter contact methods..."
|
||||
items="{[{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}]}"
|
||||
/>
|
||||
|
||||
### Initial selected items
|
||||
|
||||
To select (or bind) items, pass an array of item ids to `selectedIds`.
|
||||
|
|
@ -93,13 +103,7 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
|
|||
{id: "2", text: "Fax"}]}"
|
||||
/>
|
||||
|
||||
### Filterable
|
||||
|
||||
<MultiSelect filterable titleText="Contact" placeholder="Filter contact methods..."
|
||||
items="{[{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}]}"
|
||||
/>
|
||||
|
||||
### Invalid state
|
||||
|
||||
|
|
|
|||
|
|
@ -27,10 +27,6 @@ components: ["NumberInput", "NumberInputSkeleton"]
|
|||
|
||||
<NumberInput light label="Clusters" />
|
||||
|
||||
### Mobile variant
|
||||
|
||||
<NumberInput mobile label="Clusters" />
|
||||
|
||||
### Extra-large size
|
||||
|
||||
<NumberInput size="xl" label="Clusters" />
|
||||
|
|
|
|||
|
|
@ -7,6 +7,12 @@
|
|||
|
||||
<PasswordInput labelText="Password" placeholder="Enter password..." />
|
||||
|
||||
### Custom tooltip alignment
|
||||
|
||||
Customize the tooltip alignment and position of the visibility toggle through the `tooltipAlignment` and `tooltipPosition` props.
|
||||
|
||||
<PasswordInput tooltipAlignment="start" tooltipPosition="left" labelText="Password" placeholder="Enter password..." />
|
||||
|
||||
### Password is visible
|
||||
|
||||
Set prop `type` to `"text"` to toggle password visibility.
|
||||
|
|
|
|||
|
|
@ -3,19 +3,43 @@ components: ["RadioButtonGroup", "RadioButton", "RadioButtonSkeleton"]
|
|||
---
|
||||
|
||||
<script>
|
||||
import { FormGroup, RadioButton, RadioButtonSkeleton, RadioButtonGroup } from "carbon-components-svelte";
|
||||
import { RadioButton, RadioButtonSkeleton, RadioButtonGroup, Tooltip } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
||||
<FormGroup legendText="Storage tier (disk)">
|
||||
<RadioButtonGroup selected="standard">
|
||||
<RadioButton labelText="Free (1 GB)" value="free" />
|
||||
<RadioButton labelText="Standard (10 GB)" value="standard" />
|
||||
<RadioButton labelText="Pro (128 GB)" value="pro" />
|
||||
</RadioButtonGroup>
|
||||
</FormGroup>
|
||||
<RadioButtonGroup selected="standard">
|
||||
<RadioButton labelText="Free (1 GB)" value="free" />
|
||||
<RadioButton labelText="Standard (10 GB)" value="standard" />
|
||||
<RadioButton labelText="Pro (128 GB)" value="pro" />
|
||||
</RadioButtonGroup>
|
||||
|
||||
### With legend text
|
||||
|
||||
<RadioButtonGroup legendText="Storage tier (disk)" selected="standard">
|
||||
<RadioButton labelText="Free (1 GB)" value="free" />
|
||||
<RadioButton labelText="Standard (10 GB)" value="standard" />
|
||||
<RadioButton labelText="Pro (128 GB)" value="pro" />
|
||||
</RadioButtonGroup>
|
||||
|
||||
### Legend text slot
|
||||
|
||||
Use the named "legendText" slot to customize the legend text.
|
||||
|
||||
<RadioButtonGroup selected="standard">
|
||||
<div slot="legendText" style="display: flex">
|
||||
Storage tier (disk)
|
||||
<Tooltip tooltipBodyId="tooltip-body">
|
||||
<p id="tooltip-body">
|
||||
Storage tiers may vary based on geolocation.
|
||||
</p>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<RadioButton labelText="Free (1 GB)" value="free" />
|
||||
<RadioButton labelText="Standard (10 GB)" value="standard" />
|
||||
<RadioButton labelText="Pro (128 GB)" value="pro" />
|
||||
</RadioButtonGroup>
|
||||
|
||||
### Programmatic usage
|
||||
|
||||
|
|
@ -25,40 +49,32 @@ Bind the selected value using the `selected` prop.
|
|||
|
||||
### Label text aligned left
|
||||
|
||||
<FormGroup legendText="Storage tier (disk)">
|
||||
<RadioButtonGroup labelPosition="left" selected="standard">
|
||||
<RadioButton labelText="Free (1 GB)" value="free" />
|
||||
<RadioButton labelText="Standard (10 GB)" value="standard" />
|
||||
<RadioButton labelText="Pro (128 GB)" value="pro" />
|
||||
</RadioButtonGroup>
|
||||
</FormGroup>
|
||||
<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" selected="standard">
|
||||
<RadioButton labelText="Free (1 GB)" value="free" />
|
||||
<RadioButton labelText="Standard (10 GB)" value="standard" />
|
||||
<RadioButton labelText="Pro (128 GB)" value="pro" />
|
||||
</RadioButtonGroup>
|
||||
|
||||
### Vertical orientation
|
||||
|
||||
<FormGroup legendText="Storage tier (disk)">
|
||||
<RadioButtonGroup orientation="vertical" selected="standard">
|
||||
<RadioButton labelText="Free (1 GB)" value="free" />
|
||||
<RadioButton labelText="Standard (10 GB)" value="standard" />
|
||||
<RadioButton labelText="Pro (128 GB)" value="pro" />
|
||||
</RadioButtonGroup>
|
||||
</FormGroup>
|
||||
<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)" selected="standard">
|
||||
<RadioButton labelText="Free (1 GB)" value="free" />
|
||||
<RadioButton labelText="Standard (10 GB)" value="standard" />
|
||||
<RadioButton labelText="Pro (128 GB)" value="pro" />
|
||||
</RadioButtonGroup>
|
||||
|
||||
### Skeleton
|
||||
|
||||
<FormGroup legendText="Storage tier (disk)">
|
||||
<RadioButtonGroup>
|
||||
<RadioButtonSkeleton />
|
||||
<RadioButtonSkeleton />
|
||||
<RadioButtonSkeleton />
|
||||
</RadioButtonGroup>
|
||||
</FormGroup>
|
||||
<RadioButtonGroup legendText="Storage tier (disk)">
|
||||
<RadioButtonSkeleton />
|
||||
<RadioButtonSkeleton />
|
||||
<RadioButtonSkeleton />
|
||||
</RadioButtonGroup>
|
||||
|
||||
### Skeleton (vertical orientation)
|
||||
|
||||
<FormGroup legendText="Storage tier (disk)">
|
||||
<RadioButtonGroup orientation="vertical">
|
||||
<RadioButtonSkeleton />
|
||||
<RadioButtonSkeleton />
|
||||
<RadioButtonSkeleton />
|
||||
</RadioButtonGroup>
|
||||
</FormGroup>
|
||||
<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)">
|
||||
<RadioButtonSkeleton />
|
||||
<RadioButtonSkeleton />
|
||||
<RadioButtonSkeleton />
|
||||
</RadioButtonGroup>
|
||||
|
|
@ -17,6 +17,12 @@ The `Search` component size is extra-large by default. There are [large](#large-
|
|||
|
||||
<FileSource src="/framed/Search/SearchReactive" />
|
||||
|
||||
### on:clear
|
||||
|
||||
The "clear" event is dispatched when clicking the "X" button in the search input element.
|
||||
|
||||
<Search value="Cloud functions" on:clear={() => console.log('clear')}/>
|
||||
|
||||
### Light variant
|
||||
|
||||
<Search light />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script>
|
||||
import { Tag } from "carbon-components-svelte";
|
||||
import IbmCloud16 from "carbon-icons-svelte/lib/IbmCloud16";
|
||||
import Document16 from "carbon-icons-svelte/lib/Document16";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
|
|
@ -31,6 +30,10 @@
|
|||
|
||||
<Tag filter on:close>carbon-components</Tag>
|
||||
|
||||
### Filterable (disabled)
|
||||
|
||||
<Tag filter disabled on:close>carbon-components</Tag>
|
||||
|
||||
### Filterable (small)
|
||||
|
||||
<Tag size="sm" filter on:close>carbon-components</Tag>
|
||||
|
|
@ -41,6 +44,13 @@ Note: rendering a custom icon cannnot be used with the filterable variant.
|
|||
|
||||
<Tag icon={IbmCloud16}>IBM Cloud</Tag>
|
||||
|
||||
### Interactive variant
|
||||
|
||||
Set `interactive` to `true` to render a `button` element instead of a `div`.
|
||||
|
||||
<Tag interactive>Machine learning</Tag>
|
||||
<Tag interactive disabled>Machine learning</Tag>
|
||||
|
||||
### Skeleton
|
||||
|
||||
<Tag skeleton />
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ components: ["ToggleSmall", "ToggleSmallSkeleton"]
|
|||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
<InlineNotification svx-ignore title="Deprecation warning:" kind="warning" hideCloseButton>
|
||||
<InlineNotification svx-ignore title="Deprecation warning" kind="warning" hideCloseButton>
|
||||
<div>
|
||||
This component will be removed in the next major release. Use the <Link href="/components/Toggle#small-size">Toggle small variant</Link> instead.
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@
|
|||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default (icon-only, "bottom" direction)
|
||||
### Default
|
||||
|
||||
By default, the tooltip is triggered by an information icon.
|
||||
|
||||
<Tooltip tooltipBodyId="tooltip-body">
|
||||
<p id="tooltip-body">
|
||||
|
|
|
|||
30
docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte
Normal file
30
docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte
Normal 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)}"
|
||||
/>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<script>
|
||||
import { ImageLoader, Button } from "carbon-components-svelte";
|
||||
|
||||
const src =
|
||||
"https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg";
|
||||
const srcError = src + "1";
|
||||
|
||||
let imageLoader;
|
||||
let error;
|
||||
</script>
|
||||
|
||||
<Button
|
||||
kind="ghost"
|
||||
disabled="{!imageLoader || error}"
|
||||
on:click="{() => imageLoader.loadImage(srcError)}"
|
||||
>
|
||||
Simulate error
|
||||
</Button>
|
||||
|
||||
<ImageLoader bind:this="{imageLoader}" bind:error fadeIn src="{src}">
|
||||
<div slot="error">
|
||||
<Button kind="ghost" on:click="{() => imageLoader.loadImage(src)}">
|
||||
Error. Try again
|
||||
</Button>
|
||||
</div>
|
||||
</ImageLoader>
|
||||
29
docs/src/pages/framed/LocalStorage/LocalStorage.svelte
Normal file
29
docs/src/pages/framed/LocalStorage/LocalStorage.svelte
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<script>
|
||||
import { LocalStorage, Toggle, Button } from "carbon-components-svelte";
|
||||
|
||||
let storage;
|
||||
let toggled = false;
|
||||
let events = [];
|
||||
|
||||
$: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
|
||||
</script>
|
||||
|
||||
<LocalStorage
|
||||
bind:this="{storage}"
|
||||
key="dark-mode"
|
||||
bind:value="{toggled}"
|
||||
on:save="{() => {
|
||||
events = [...events, { event: 'on:save' }];
|
||||
}}"
|
||||
on:update="{({ detail }) => {
|
||||
events = [...events, { event: 'on:update', detail }];
|
||||
}}"
|
||||
/>
|
||||
|
||||
<Toggle size="sm" labelText="Dark mode" bind:toggled />
|
||||
|
||||
<br />
|
||||
|
||||
<pre>
|
||||
{JSON.stringify(events, null, 2)}
|
||||
</pre>
|
||||
|
|
@ -2,7 +2,6 @@
|
|||
import {
|
||||
ButtonSet,
|
||||
Button,
|
||||
FormGroup,
|
||||
RadioButtonGroup,
|
||||
RadioButton,
|
||||
} from "carbon-components-svelte";
|
||||
|
|
@ -10,17 +9,17 @@
|
|||
let plan = "standard";
|
||||
</script>
|
||||
|
||||
<FormGroup legendText="Storage tier (disk)">
|
||||
<RadioButtonGroup bind:selected="{plan}">
|
||||
<RadioButton labelText="Free (1 GB)" value="free" />
|
||||
<RadioButton labelText="Standard (10 GB)" value="standard" />
|
||||
<RadioButton labelText="Pro (128 GB)" value="pro" />
|
||||
</RadioButtonGroup>
|
||||
</FormGroup>
|
||||
<RadioButtonGroup legendText="Storage tier (disk)" bind:selected="{plan}">
|
||||
<RadioButton labelText="Free (1 GB)" value="free" />
|
||||
<RadioButton labelText="Standard (10 GB)" value="standard" />
|
||||
<RadioButton labelText="Pro (128 GB)" value="pro" />
|
||||
</RadioButtonGroup>
|
||||
|
||||
<ButtonSet>
|
||||
<ButtonSet style="margin-top: var(--cds-layout-03)">
|
||||
{#each ["free", "standard", "pro"] as value}
|
||||
<Button
|
||||
disabled="{plan === value}"
|
||||
kind="secondary"
|
||||
on:click="{() => {
|
||||
plan = value;
|
||||
}}"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue