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

refactor: use $$restProps API

Browse source 
- add ref prop for applicable components (#196)
- add slot to Content Switcher `Switch` component (#183)
- remove fillArray, css utilities
This commit is contained in:
Eric Liu 2020-07-18 20:00:20 -07:00
commit e886d772c7
288 changed files with 4681 additions and 4498 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/components/Tile/Tile.Story.svelte
View file

@ -1,23 +1,22 @@
<script>
export let story = undefined;
import Layout from '../../internal/ui/Layout.svelte';
import ClickableTile from './ClickableTile.svelte';
import ExpandableTile from './ExpandableTile.svelte';
import RadioTile from './RadioTile.svelte';
import SelectableTile from './SelectableTile.svelte';
import Tile from './Tile.svelte';
import TileGroup from './TileGroup.svelte';
import Layout from "../../internal/ui/Layout.svelte";
import ClickableTile from "./ClickableTile.svelte";
import ExpandableTile from "./ExpandableTile.svelte";
import RadioTile from "./RadioTile.svelte";
import SelectableTile from "./SelectableTile.svelte";
import Tile from "./Tile.svelte";
import TileGroup from "./TileGroup.svelte";
const radioTiles = [
{ value: 'standard', id: 'tile-1', labelText: 'Selectable Tile' },
{ value: 'default-selected', id: 'tile-2', labelText: 'Selectable Tile' },
{ value: 'selected', id: 'tile-3', labelText: 'Selectable Tile' }
{ value: "standard", id: "tile-1", labelText: "Selectable Tile" },
{ value: "default-selected", id: "tile-2", labelText: "Selectable Tile" },
{ value: "selected", id: "tile-3", labelText: "Selectable Tile" }
];
let selected = radioTiles[1].value;
let selectedTile1 = false;
$: selected = radioTiles[1].value;
$: selectedTile1 = false;
</script>
<Layout>
@ -41,19 +40,29 @@
}}>
Multi-select Tile
</SelectableTile>
<SelectableTile {...$$props} id="tile-2" name="tiles">Multi-select Tile</SelectableTile>
<SelectableTile {...$$props} id="tile-3" name="tiles">Multi-select Tile</SelectableTile>
<SelectableTile {...$$props} id="tile-2" name="tiles">
Multi-select Tile
</SelectableTile>
<SelectableTile {...$$props} id="tile-3" name="tiles">
Multi-select Tile
</SelectableTile>
</div>
{:else if story === 'selectable'}
<TileGroup legend="Selectable Tile Group" bind:selected>
{#each radioTiles as { value, id, labelText }, i (id)}
<RadioTile {...$$props} {value} {id} {labelText}>Selectable Tile</RadioTile>
<RadioTile {...$$props} {value} {id} {labelText}>
Selectable Tile
</RadioTile>
{/each}
</TileGroup>
{:else if story === 'expandable'}
<ExpandableTile {...$$props}>
<div slot="above" style="height: 200px">Above the fold content here</div>
<div slot="below" style="height: 400px">Below the fold content here</div>
<div slot="above" style="height: 200px">
Above the fold content here
</div>
<div slot="below" style="height: 400px">
Below the fold content here
</div>
</ExpandableTile>
{:else}
<Tile {...$$props}>Default Tile</Tile>