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

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

125
docs/src/COMPONENT_API.json
View file

@ -1,5 +1,5 @@
{
"total": 155,
"total": 157,
"components": [
{
"moduleName": "SkeletonText",
@ -8534,7 +8534,7 @@
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
"reactive": true
},
{
"name": "title",
@ -8640,7 +8640,7 @@
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
"reactive": true
},
{
"name": "value",
@ -8652,6 +8652,16 @@
"constant": false,
"reactive": false
},
{
"name": "title",
"kind": "let",
"description": "Specify the title of the selectable tile",
"type": "string",
"value": "\"title\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "tabindex",
"kind": "let",
@ -8691,6 +8701,16 @@
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "ref",
"kind": "let",
"description": "Obtain a reference to the input HTML element",
"type": "null | HTMLInputElement",
"value": "null",
"isFunction": false,
"constant": false,
"reactive": true
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
@ -8744,6 +8764,105 @@
"typedefs": [],
"rest_props": { "type": "Element", "name": "fieldset" }
},
{
"moduleName": "RadioTileGroup",
"filePath": "/src/Tile/RadioTileGroup.svelte",
"props": [
{
"name": "selectedValue",
"kind": "let",
"description": "Specify the selected tile value",
"type": "string",
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "disabled",
"kind": "let",
"description": "Set to `true` to disable the tile group",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "light",
"kind": "let",
"description": "Set to `true` to enable the light variant",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "legend",
"kind": "let",
"description": "Specify the legend text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [{ "type": "dispatched", "name": "select" }],
"typedefs": [],
"rest_props": { "type": "Element", "name": "fieldset" }
},
{
"moduleName": "SelectableTileGroup",
"filePath": "/src/Tile/SelectableTileGroup.svelte",
"props": [
{
"name": "selectedValues",
"kind": "let",
"description": "Specify the selected tile's",
"type": "string",
"value": "[]",
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "disabled",
"kind": "let",
"description": "Set to `true` to disable the tile group",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "light",
"kind": "let",
"description": "Set to `true` to enable the light variant",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "legend",
"kind": "let",
"description": "Specify the legend text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [{ "type": "dispatched", "name": "select" }],
"typedefs": [],
"rest_props": { "type": "Element", "name": "fieldset" }
},
{
"moduleName": "TimePicker",
"filePath": "/src/TimePicker/TimePicker.svelte",

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>