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

feat(tile): add optional expand/collapse icon labels to ExpandableTile

Browse source
This commit is contained in:
Eric Liu 2021-01-22 13:39:44 -08:00
commit 524b5080a6
6 changed files with 83 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

34
docs/src/COMPONENT_API.json
View file

@ -8492,6 +8492,26 @@
"constant": false,
"reactive": false
},
{
"name": "tileExpandedLabel",
"kind": "let",
"description": "Specify the icon label of the expanded tile",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "tileCollapsedLabel",
"kind": "let",
"description": "Specify the icon label of the collapsed tile",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "tabindex",
"kind": "let",
@ -8516,7 +8536,7 @@
"name": "ref",
"kind": "let",
"description": "Obtain a reference to the top-level element",
"type": "null | HTMLDivElement",
"type": "null | HTMLButtonElement",
"value": "null",
"isFunction": false,
"constant": false,
@ -8528,14 +8548,14 @@
{ "name": "below", "default": false, "slot_props": "{}" }
],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "keypress", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" }
{ "type": "forwarded", "name": "click", "element": "button" },
{ "type": "forwarded", "name": "keypress", "element": "button" },
{ "type": "forwarded", "name": "mouseover", "element": "button" },
{ "type": "forwarded", "name": "mouseenter", "element": "button" },
{ "type": "forwarded", "name": "mouseleave", "element": "button" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
"rest_props": { "type": "Element", "name": "button" }
},
{
"moduleName": "SelectableTile",

7
docs/src/pages/components/ExpandableTile.svx
View file

@ -26,4 +26,11 @@ source: Tile/ExpandableTile.svelte
<ExpandableTile light>
<div slot="above" style="height: 10rem">Above the fold content here</div>
<div slot="below" style="height: 10rem">Below the fold content here</div>
</ExpandableTile>
### With icon labels
<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
<div slot="above" style="height: 10rem">Above the fold content here</div>
<div slot="below" style="height: 10rem">Below the fold content here</div>
</ExpandableTile>