mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 10:51:06 +00:00
chore: v11 ExpandableTile
Note that state labels `tileCollapsedLabel` and `tileExpandedLabel` are no longer supported.
This commit is contained in:
parent
6be8d3f7d9
commit
ee55f2ba36
5 changed files with 2 additions and 44 deletions
|
@ -1224,8 +1224,6 @@ None.
|
||||||
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||||
| tileCollapsedIconText | No | <code>let</code> | No | <code>string</code> | <code>"Interact to expand Tile"</code> | Specify the icon text of the collapsed tile |
|
| tileCollapsedIconText | No | <code>let</code> | No | <code>string</code> | <code>"Interact to expand Tile"</code> | Specify the icon text of the collapsed tile |
|
||||||
| tileExpandedIconText | No | <code>let</code> | No | <code>string</code> | <code>"Interact to collapse Tile"</code> | Specify the icon text of the expanded tile |
|
| tileExpandedIconText | No | <code>let</code> | No | <code>string</code> | <code>"Interact to collapse Tile"</code> | Specify the icon text of the expanded tile |
|
||||||
| tileExpandedLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon label of the expanded tile |
|
|
||||||
| tileCollapsedLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon label of the collapsed tile |
|
|
||||||
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
|
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
|
||||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level div element |
|
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level div element |
|
||||||
|
|
||||||
|
|
|
@ -3642,30 +3642,6 @@
|
||||||
"constant": false,
|
"constant": false,
|
||||||
"reactive": false
|
"reactive": false
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "tileExpandedLabel",
|
|
||||||
"kind": "let",
|
|
||||||
"description": "Specify the icon label of the expanded tile",
|
|
||||||
"type": "string",
|
|
||||||
"value": "\"\"",
|
|
||||||
"isFunction": false,
|
|
||||||
"isFunctionDeclaration": false,
|
|
||||||
"isRequired": false,
|
|
||||||
"constant": false,
|
|
||||||
"reactive": false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "tileCollapsedLabel",
|
|
||||||
"kind": "let",
|
|
||||||
"description": "Specify the icon label of the collapsed tile",
|
|
||||||
"type": "string",
|
|
||||||
"value": "\"\"",
|
|
||||||
"isFunction": false,
|
|
||||||
"isFunctionDeclaration": false,
|
|
||||||
"isRequired": false,
|
|
||||||
"constant": false,
|
|
||||||
"reactive": false
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"name": "tabindex",
|
"name": "tabindex",
|
||||||
"kind": "let",
|
"kind": "let",
|
||||||
|
|
|
@ -58,7 +58,7 @@ Set a custom height for the tiles on the "above" and "below" slots.
|
||||||
For tiles containing interactive content, use `stopPropagation` to prevent the tile from toggling.
|
For tiles containing interactive content, use `stopPropagation` to prevent the tile from toggling.
|
||||||
|
|
||||||
<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
|
<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
|
||||||
<div slot="above">
|
<div slot="above" height="10rem">
|
||||||
<a href="/" on:click|preventDefault|stopPropagation={() => console.log("Hello world")}>
|
<a href="/" on:click|preventDefault|stopPropagation={() => console.log("Hello world")}>
|
||||||
Native element
|
Native element
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -12,11 +12,7 @@
|
||||||
<div slot="below" style="height: 10rem">Below the fold content here</div>
|
<div slot="below" style="height: 10rem">Below the fold content here</div>
|
||||||
</ExpandableTile>
|
</ExpandableTile>
|
||||||
|
|
||||||
<ExpandableTile
|
<ExpandableTile light>
|
||||||
light
|
|
||||||
tileExpandedLabel="View less"
|
|
||||||
tileCollapsedLabel="View more"
|
|
||||||
>
|
|
||||||
<div slot="above" style="height: 10rem">Above the fold content here</div>
|
<div slot="above" style="height: 10rem">Above the fold content here</div>
|
||||||
<div slot="below" style="height: 10rem">Below the fold content here</div>
|
<div slot="below" style="height: 10rem">Below the fold content here</div>
|
||||||
</ExpandableTile>
|
</ExpandableTile>
|
||||||
|
|
12
types/Tile/ExpandableTile.svelte.d.ts
vendored
12
types/Tile/ExpandableTile.svelte.d.ts
vendored
|
@ -40,18 +40,6 @@ export interface ExpandableTileProps extends RestProps {
|
||||||
*/
|
*/
|
||||||
tileExpandedIconText?: string;
|
tileExpandedIconText?: string;
|
||||||
|
|
||||||
/**
|
|
||||||
* Specify the icon label of the expanded tile
|
|
||||||
* @default ""
|
|
||||||
*/
|
|
||||||
tileExpandedLabel?: string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Specify the icon label of the collapsed tile
|
|
||||||
* @default ""
|
|
||||||
*/
|
|
||||||
tileCollapsedLabel?: string;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Specify the tabindex
|
* Specify the tabindex
|
||||||
* @default "0"
|
* @default "0"
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue