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

Docs built

Browse source
This commit is contained in:
militant_gnome 2024-01-15 18:23:03 +02:00 • committed by Eric Liu
commit 18130e0f75
4 changed files with 18 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

9
COMPONENT_INDEX.md
View file

@ -379,7 +379,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
| size | No | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small" &#124; "lg" &#124; "xl"</code> | <code>"default"</code> | Specify the size of button | | size | No | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small" &#124; "lg" &#124; "xl"</code> | <code>"default"</code> | Specify the size of button |
| expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting | | expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
| isSelected | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button | | isSelected | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render | | icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render<br />Alternatively, use the named slot "icon" (e.g., `&lt;Icon slot="icon" size="{20}" /&gt;`) |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the button icon | | iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the button icon |
| tooltipAlignment | No | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon.<br />Only applies to icon-only buttons | | tooltipAlignment | No | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon.<br />Only applies to icon-only buttons |
| tooltipPosition | No | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the position of the tooltip relative to the icon | | tooltipPosition | No | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the position of the tooltip relative to the icon |
@ -395,6 +395,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------- | :------- | | :-------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------- | :------- |
| -- | Yes | <code>{ props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } } </code> | -- | | -- | Yes | <code>{ props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } } </code> | -- |
| icon | No | -- | -- |
### Events ### Events
@ -1666,15 +1667,13 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- | | :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element | | ref | No | <code>let</code> | Yes | -- | <code>null</code> | Obtain a reference to the HTML button element |
| isActive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active variant | | isActive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active variant |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render | | icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
### Slots ### Slots
| Slot name | Default | Props | Fallback | None.
| :-------- | :------ | :---- | :---------------------------------------------------------------- |
| -- | Yes | -- | <code>&lt;svelte:component this="{icon}" size="{20}" /&gt;</code> |
### Events ### Events

23
docs/src/COMPONENT_API.json
View file

@ -500,7 +500,7 @@
{ {
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon to render", "description": "Specify the icon to render\nAlternatively, use the named slot \"icon\" (e.g., `<Icon slot=\"icon\" size=\"{20}\" />`)",
"type": "typeof import(\"svelte\").SvelteComponent<any>", "type": "typeof import(\"svelte\").SvelteComponent<any>",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -633,7 +633,8 @@
"name": "__default__", "name": "__default__",
"default": true, "default": true,
"slot_props": "{ props: { role: \"button\"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }" "slot_props": "{ props: { role: \"button\"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }"
} },
{ "name": "icon", "default": false, "slot_props": "{}" }
], ],
"events": [ "events": [
{ "type": "forwarded", "name": "click", "element": "ButtonSkeleton" }, { "type": "forwarded", "name": "click", "element": "ButtonSkeleton" },
@ -5103,7 +5104,6 @@
"name": "ref", "name": "ref",
"kind": "let", "kind": "let",
"description": "Obtain a reference to the HTML button element", "description": "Obtain a reference to the HTML button element",
"type": "null | HTMLButtonElement",
"value": "null", "value": "null",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -5113,17 +5113,14 @@
} }
], ],
"moduleExports": [], "moduleExports": [],
"slots": [ "slots": [],
{ "events": [{ "type": "forwarded", "name": "click", "element": "Button" }],
"name": "__default__",
"default": true,
"fallback": "<svelte:component this=\"{icon}\" size=\"{20}\" />",
"slot_props": "{}"
}
],
"events": [{ "type": "forwarded", "name": "click", "element": "button" }],
"typedefs": [], "typedefs": [],
"rest_props": { "type": "Element", "name": "button" } "rest_props": { "type": "InlineComponent", "name": "Button" },
"extends": {
"interface": "ButtonProps",
"import": "\"../Button/Button.svelte\""
}
}, },
{ {
"moduleName": "HeaderNav", "moduleName": "HeaderNav",

2
types/Button/Button.svelte.d.ts vendored
View file

@ -41,6 +41,7 @@ export interface ButtonProps extends ButtonSkeletonProps, RestProps {
/** /**
* Specify the icon to render * Specify the icon to render
* Alternatively, use the named slot "icon" (e.g., `<Icon slot="icon" size="{20}" />`)
* @default undefined * @default undefined
*/ */
icon?: typeof import("svelte").SvelteComponent<any>; icon?: typeof import("svelte").SvelteComponent<any>;
@ -132,5 +133,6 @@ export default class Button extends SvelteComponentTyped<
[key: string]: any; [key: string]: any;
}; };
}; };
icon: {};
} }
> {} > {}

6
types/UIShell/HeaderGlobalAction.svelte.d.ts vendored
View file

@ -18,13 +18,11 @@ export interface HeaderGlobalActionProps extends ButtonProps {
* Obtain a reference to the HTML button element * Obtain a reference to the HTML button element
* @default null * @default null
*/ */
ref?: null | HTMLButtonElement; ref?: undefined;
[key: `data-${string}`]: any;
} }
export default class HeaderGlobalAction extends SvelteComponentTyped< export default class HeaderGlobalAction extends SvelteComponentTyped<
HeaderGlobalActionProps, HeaderGlobalActionProps,
{ click: WindowEventMap["click"] }, { click: WindowEventMap["click"] },
{ default: {} } {}
> {} > {}