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(tooltip-icon): add icon prop

Browse source 
This allows consumers to pass a Carbon icon as a prop instead of using the default slot.
This commit is contained in:
Eric Y Liu 2021-06-26 05:48:46 -07:00
commit 278d906509
5 changed files with 40 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

9
COMPONENT_INDEX.md
View file

@ -4517,16 +4517,17 @@ None.
| :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| tooltipText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tooltip text.<br />Alternatively, use the "tooltipText" slot |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| align | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
| direction | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the icon |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the span element |
### Slots
| Slot name | Default | Props | Fallback |
| :---------- | :------ | :---- | :------------------------- |
| -- | Yes | -- | -- |
| tooltipText | No | -- | <code>{tooltipText}</code> |
| Slot name | Default | Props | Fallback |
| :---------- | :------ | :---- | :---------------------------------------------------- |
| -- | Yes | -- | <code>&lt;svelte:component this="{icon}" /&gt;</code> |
| tooltipText | No | -- | <code>{tooltipText}</code> |
### Events