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

WIP: SelectableTileGroup

Browse source
This commit is contained in:
Richard O'flynn 2020-11-30 20:22:11 +00:00
commit fe5c571b13
17 changed files with 33036 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

18
docs/src/pages/components/RadioTile.svx
View file

@ -1,29 +1,35 @@
---
components: ["TileGroup", "RadioTile"]
components: ["RadioTileGroup", "RadioTile"]
---
<script>
import { TileGroup, RadioTile } from "carbon-components-svelte";
import { RadioTileGroup, RadioTile, InlineNotification } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
<InlineNotification svx-ignore title="Deprecation warning:" kind="warning" hideCloseButton>
<div>
The TileGroup component will be removed in favour of the RadioTileGroup component in the next major release.
</div>
</InlineNotification>
### Default
<TileGroup legend="Service pricing tiers">
<RadioTileGroup legend="Service pricing tiers">
<RadioTile value="0" checked>
Lite plan
</RadioTile>
<RadioTile value="1">
Standard plan
</RadioTile>
<RadioTile value="2">
Plus plan
<RadioTile light value="2">
Plus plan (light variant)
</RadioTile>
</TileGroup>
### Light variant
<TileGroup legend="Service pricing tiers">
<RadioTileGroup light legend="Service pricing tiers">
<RadioTile value="0" checked>
Lite plan
</RadioTile>

42
docs/src/pages/components/SelectableTile.svx
View file

@ -1,36 +1,42 @@
---
components: ["SelectableTile"]
components: ["SelectableTile", "SelectableTileGroup"]
---
<script>
import { SelectableTile } from "carbon-components-svelte";
import { SelectableTile, SelectableTileGroup } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Multi-selectable tiles
<div role="group" aria-label="selectable tiles">
<SelectableTile selected>
Multi-select Tile
<SelectableTileGroup legend="Select the options you require" light>
<SelectableTile title="Option 1" selected>
Option 1
</SelectableTile>
<SelectableTile selected>
Multi-select Tile
<SelectableTile title="Option 2" selected>
Option 2
</SelectableTile>
<SelectableTile>
Multi-select Tile
<SelectableTile title="Option 3£>
Option 3
</SelectableTile>
<SelectableTile light title="Option 4£>
Option 4 (light variant)
</SelectableTile>
</div>
### Light variant
### Multi-selectable tiles with light variant
<div role="group" aria-label="selectable tiles">
<SelectableTile light selected>
Multi-select Tile
<SelectableTileGroup light legend="Select the options you require" light>
<SelectableTile title="Option 1" selected>
Option 1
</SelectableTile>
<SelectableTile light selected>
Multi-select Tile
<SelectableTile title="Option 2" selected>
Option 2
</SelectableTile>
<SelectableTile light>
Multi-select Tile
<SelectableTile title="Option 3£>
Option 3
</SelectableTile>
</div>
<SelectableTile title="Option 4£>
Option 4
</SelectableTile>
</div>