mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 10:51:06 +00:00
Make UI Shell HeaderAction panel transition configurable (#419)
* fix(ui-shell): remove fly transition from hamburger menu * feat(header-action): make panel transition configurable * chore: rebuild types, docs * docs(ui-shell): document transition prop in Header app switcher example
This commit is contained in:
Eric Liu
GitHub
parent
1e72ea9942
commit
f4c940d5ee
31 changed files with 244 additions and 160 deletions
|
|
@ -192,12 +192,12 @@
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :--------------- | :------- | :------------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| disabled | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to disable the accordion item |
|
||||
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the first accordion item |
|
||||
| title | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the accordion item heading<br />Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>) |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Expand/Collapse"</code> | Specify the ARIA label for the accordion item chevron icon |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :--------------- | :------- | :------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| disabled | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to disable the accordion item |
|
||||
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the first accordion item |
|
||||
| title | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the accordion item heading<br />Alternatively, use the named slot "title" (e.g., <div slot="title">...</div>) |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Expand/Collapse"</code> | Specify the ARIA label for the accordion item chevron icon |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -333,22 +333,22 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element |
|
||||
| kind | <code>let</code> | No | <code>"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button |
|
||||
| size | <code>let</code> | No | <code>"default" | "field" | "small"</code> | <code>"default"</code> | Specify the size of button |
|
||||
| hasIconOnly | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the icon-only variant |
|
||||
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the button icon |
|
||||
| tooltipAlignment | <code>let</code> | No | <code>"start" | "center" | "end"</code> | -- | Set the alignment of the tooltip relative to the icon<br />`hasIconOnly` must be set to `true` |
|
||||
| tooltipPosition | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | -- | Set the position of the tooltip relative to the icon |
|
||||
| as | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>) |
|
||||
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the button |
|
||||
| href | <code>let</code> | No | <code>string</code> | -- | Set the `href` to use an anchor link |
|
||||
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
|
||||
| type | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `type` attribute for the button element |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element |
|
||||
| kind | <code>let</code> | No | <code>"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button |
|
||||
| size | <code>let</code> | No | <code>"default" | "field" | "small"</code> | <code>"default"</code> | Specify the size of button |
|
||||
| hasIconOnly | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the icon-only variant |
|
||||
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the button icon |
|
||||
| tooltipAlignment | <code>let</code> | No | <code>"start" | "center" | "end"</code> | -- | Set the alignment of the tooltip relative to the icon<br />`hasIconOnly` must be set to `true` |
|
||||
| tooltipPosition | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | -- | Set the position of the tooltip relative to the icon |
|
||||
| as | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>) |
|
||||
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the button |
|
||||
| href | <code>let</code> | No | <code>string</code> | -- | Set the `href` to use an anchor link |
|
||||
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
|
||||
| type | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `type` attribute for the button element |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -488,24 +488,24 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLPreElement</code> | <code>null</code> | Obtain a reference to the pre HTML element |
|
||||
| showMoreLess | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the show more/less button |
|
||||
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand a multi-line code snippet (type="multi") |
|
||||
| type | <code>let</code> | No | <code>"single" | "inline" | "multi"</code> | <code>"single"</code> | Set the type of code snippet |
|
||||
| code | <code>let</code> | No | <code>string</code> | -- | Set the code snippet text<br />Alternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>) |
|
||||
| hideCopyButton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the copy button |
|
||||
| wrapText | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to wrap the text<br />Note that `type` must be "multi" |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
| copyButtonDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the copy button icon |
|
||||
| copyLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label of the copy button |
|
||||
| feedback | <code>let</code> | No | <code>string</code> | <code>"Copied!"</code> | Specify the feedback text displayed when clicking the snippet |
|
||||
| feedbackTimeout | <code>let</code> | No | <code>number</code> | <code>2000</code> | Set the timeout duration (ms) to display feedback text |
|
||||
| showLessText | <code>let</code> | No | <code>string</code> | <code>"Show less"</code> | Specify the show less text<br />`type` must be "multi" |
|
||||
| showMoreText | <code>let</code> | No | <code>string</code> | <code>"Show more"</code> | Specify the show more text<br />`type` must be "multi" |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the code element |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLPreElement</code> | <code>null</code> | Obtain a reference to the pre HTML element |
|
||||
| showMoreLess | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the show more/less button |
|
||||
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand a multi-line code snippet (type="multi") |
|
||||
| type | <code>let</code> | No | <code>"single" | "inline" | "multi"</code> | <code>"single"</code> | Set the type of code snippet |
|
||||
| code | <code>let</code> | No | <code>string</code> | -- | Set the code snippet text<br />Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>) |
|
||||
| hideCopyButton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the copy button |
|
||||
| wrapText | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to wrap the text<br />Note that `type` must be "multi" |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
| copyButtonDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the copy button icon |
|
||||
| copyLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label of the copy button |
|
||||
| feedback | <code>let</code> | No | <code>string</code> | <code>"Copied!"</code> | Specify the feedback text displayed when clicking the snippet |
|
||||
| feedbackTimeout | <code>let</code> | No | <code>number</code> | <code>2000</code> | Set the timeout duration (ms) to display feedback text |
|
||||
| showLessText | <code>let</code> | No | <code>string</code> | <code>"Show less"</code> | Specify the show less text<br />`type` must be "multi" |
|
||||
| showMoreText | <code>let</code> | No | <code>string</code> | <code>"Show more"</code> | Specify the show more text<br />`type` must be "multi" |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the code element |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -561,18 +561,18 @@ export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------ | :--------------- | :------- | :------------------------------------------------------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| as | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g. <Column let:props><article {...props}>...</article></Column>) |
|
||||
| noGutter | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter |
|
||||
| noGutterLeft | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter |
|
||||
| noGutterRight | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter |
|
||||
| aspectRatio | <code>let</code> | No | <code>"2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"</code> | -- | Specify the aspect ratio of the column |
|
||||
| sm | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the small breakpoint |
|
||||
| md | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the medium breakpoint |
|
||||
| lg | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the large breakpoint |
|
||||
| xlg | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the extra large breakpoint |
|
||||
| max | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the maximum breakpoint |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------ | :--------------- | :------- | :------------------------------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| as | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>) |
|
||||
| noGutter | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter |
|
||||
| noGutterLeft | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter |
|
||||
| noGutterRight | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter |
|
||||
| aspectRatio | <code>let</code> | No | <code>"2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"</code> | -- | Specify the aspect ratio of the column |
|
||||
| sm | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the small breakpoint |
|
||||
| md | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the medium breakpoint |
|
||||
| lg | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the large breakpoint |
|
||||
| xlg | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the extra large breakpoint |
|
||||
| max | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the maximum breakpoint |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -1346,15 +1346,15 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------ | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| as | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g. <Grid let:props><header {...props}>...</header></Grid>) |
|
||||
| condensed | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant |
|
||||
| narrow | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the narrow variant |
|
||||
| fullWidth | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the fullWidth variant |
|
||||
| noGutter | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter |
|
||||
| noGutterLeft | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter |
|
||||
| noGutterRight | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| as | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>) |
|
||||
| condensed | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant |
|
||||
| narrow | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the narrow variant |
|
||||
| fullWidth | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the fullWidth variant |
|
||||
| noGutter | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter |
|
||||
| noGutterLeft | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter |
|
||||
| noGutterRight | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -1370,16 +1370,16 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------------------- | :--------------- | :------- | :----------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
||||
| isSideNavOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the side nav |
|
||||
| expandedByDefault | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
|
||||
| uiShellAriaLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the header |
|
||||
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
|
||||
| company | <code>let</code> | No | <code>string</code> | -- | Specify the company name |
|
||||
| platformName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name<br />Alternatively, use the named slot "platform" (e.g. <span slot="platform">...</span>) |
|
||||
| persistentHamburgerMenu | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------------------- | :--------------- | :------- | :----------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
||||
| isSideNavOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the side nav |
|
||||
| expandedByDefault | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
|
||||
| uiShellAriaLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the header |
|
||||
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
|
||||
| company | <code>let</code> | No | <code>string</code> | -- | Specify the company name |
|
||||
| platformName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name<br />Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>) |
|
||||
| persistentHamburgerMenu | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -1397,14 +1397,25 @@ None.
|
|||
|
||||
## `HeaderAction`
|
||||
|
||||
### Types
|
||||
|
||||
```ts
|
||||
export interface HeaderActionSlideTransition {
|
||||
delay?: number;
|
||||
duration?: number;
|
||||
easing?: (t: number) => number;
|
||||
}
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------ |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
|
||||
| isOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the panel |
|
||||
| icon | <code>let</code> | No | <code>{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }</code> | -- | Specify the icon props |
|
||||
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text<br />Alternatively, use the named slot "text" (e.g. <div slot="text">...</div>) |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------- | :--------------- | :------- | :------------------------------------------------------------------------------------ | ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
|
||||
| isOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the panel |
|
||||
| icon | <code>let</code> | No | <code>{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }</code> | -- | Specify the icon props |
|
||||
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text<br />Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>) |
|
||||
| transition | <code>let</code> | No | <code>false | HeaderActionSlideTransition</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`)<br />Set to `false` to disable the transition |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -2728,14 +2739,14 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------ | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| as | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g. <Row let:props><section {...props}>...</section></Row>) |
|
||||
| condensed | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant |
|
||||
| narrow | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the narrow variant |
|
||||
| noGutter | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter |
|
||||
| noGutterLeft | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter |
|
||||
| noGutterRight | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| as | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>) |
|
||||
| condensed | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant |
|
||||
| narrow | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the narrow variant |
|
||||
| noGutter | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter |
|
||||
| noGutterLeft | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter |
|
||||
| noGutterRight | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -3323,13 +3334,13 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
|
||||
| selected | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the switch to be selected |
|
||||
| text | <code>let</code> | No | <code>string</code> | <code>"Provide text"</code> | Specify the switch text<br />Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>) |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the switch |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
|
||||
| selected | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the switch to be selected |
|
||||
| text | <code>let</code> | No | <code>string</code> | <code>"Provide text"</code> | Specify the switch text<br />Alternatively, use the named slot "text" (e.g., <span slot="text">...</span>) |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the switch |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -3351,14 +3362,14 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the anchor HTML element |
|
||||
| label | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tab label<br />Alternatively, use the default slot (e.g. <Tab><span>Label</span></Tab>) |
|
||||
| href | <code>let</code> | No | <code>string</code> | <code>"#"</code> | Specify the href attribute |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tab |
|
||||
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the anchor HTML element |
|
||||
| label | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tab label<br />Alternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>) |
|
||||
| href | <code>let</code> | No | <code>string</code> | <code>"#"</code> | Specify the href attribute |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tab |
|
||||
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -4129,21 +4140,21 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| refIcon | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the icon HTML element |
|
||||
| refTooltip | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the tooltip HTML element |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the trigger text HTML element |
|
||||
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the tooltip |
|
||||
| direction | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the button |
|
||||
| hideIcon | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon |
|
||||
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render for the tooltip button<br />Icon size must be 16px (e.g. `Add16`, `Task16`) |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button |
|
||||
| iconName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute |
|
||||
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex |
|
||||
| tooltipId | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip |
|
||||
| triggerId | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip button |
|
||||
| triggerText | <code>let</code> | No | <code>string</code> | <code>""</code> | Set the tooltip button text |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| refIcon | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the icon HTML element |
|
||||
| refTooltip | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the tooltip HTML element |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the trigger text HTML element |
|
||||
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the tooltip |
|
||||
| direction | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the button |
|
||||
| hideIcon | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon |
|
||||
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render for the tooltip button<br />Icon size must be 16px (e.g., `Add16`, `Task16`) |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button |
|
||||
| iconName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute |
|
||||
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex |
|
||||
| tooltipId | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip |
|
||||
| triggerId | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip button |
|
||||
| triggerText | <code>let</code> | No | <code>string</code> | <code>""</code> | Set the tooltip button text |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue