mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +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
|
|
@ -310,7 +310,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|||
|
||||
- FluidForm: add `FluidForm` component and support fluid variants for `TextInput`, `PasswordInput` ([PR #293](https://github.com/IBM/carbon-components-svelte/pull/293), thanks [@josefaidt](https://github.com/josefaidt))
|
||||
|
||||
- UI Shell: add `ref` prop to interactive (i.e. anchor links, buttons) UI Shell elements ([PR #297](https://github.com/IBM/carbon-components-svelte/pull/297), thanks [@josefaidt](https://github.com/josefaidt))
|
||||
- UI Shell: add `ref` prop to interactive (i.e., anchor links, buttons) UI Shell elements ([PR #297](https://github.com/IBM/carbon-components-svelte/pull/297), thanks [@josefaidt](https://github.com/josefaidt))
|
||||
|
||||
**Fixes**
|
||||
|
||||
|
|
@ -474,7 +474,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|||
## [0.9.2](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.9.2) - 2020-08-01
|
||||
|
||||
- add "skip-to-main-content" slot to `Header`
|
||||
- make `platformName` prop in UI Shell `Header` slottable (i.e. <span slot="platform">...</span>)
|
||||
- make `platformName` prop in UI Shell `Header` slottable (i.e., <span slot="platform">...</span>)
|
||||
- make `company` prop `Header` optional
|
||||
- fix UI Shell `Header` to add space between company and platform name for ARIA label
|
||||
- fix UI Shell `HeaderAction` bug where panel would not open
|
||||
|
|
|
|||
|
|
@ -193,10 +193,10 @@
|
|||
### 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>) |
|
||||
| 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
|
||||
|
|
@ -334,7 +334,7 @@ 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 |
|
||||
|
|
@ -343,7 +343,7 @@ None.
|
|||
| 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>) |
|
||||
| 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 |
|
||||
|
|
@ -489,12 +489,12 @@ 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>) |
|
||||
| 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 |
|
||||
|
|
@ -562,8 +562,8 @@ 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>) |
|
||||
| :------------ | :--------------- | :------- | :------------------------------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| 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 |
|
||||
|
|
@ -1347,8 +1347,8 @@ 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>) |
|
||||
| :------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| 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 |
|
||||
|
|
@ -1371,14 +1371,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 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>) |
|
||||
| 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>) |
|
||||
| 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
|
||||
|
||||
|
|
@ -2729,8 +2740,8 @@ 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>) |
|
||||
| :------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| 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 |
|
||||
|
|
@ -3324,10 +3335,10 @@ 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>) |
|
||||
| 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 |
|
||||
|
||||
|
|
@ -3352,9 +3363,9 @@ 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>) |
|
||||
| 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 |
|
||||
|
|
@ -4130,14 +4141,14 @@ 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`) |
|
||||
| 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 |
|
||||
|
|
|
|||
|
|
@ -191,7 +191,7 @@
|
|||
{
|
||||
"name": "title",
|
||||
"kind": "let",
|
||||
"description": "Specify the title of the accordion item heading\nAlternatively, use the named slot \"title\" (e.g. <div slot=\"title\">...</div>)",
|
||||
"description": "Specify the title of the accordion item heading\nAlternatively, use the named slot \"title\" (e.g., <div slot=\"title\">...</div>)",
|
||||
"type": "string",
|
||||
"value": "\"title\"",
|
||||
"isFunction": false,
|
||||
|
|
@ -583,7 +583,7 @@
|
|||
{
|
||||
"name": "as",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>)",
|
||||
"description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>)",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
|
|
@ -906,7 +906,7 @@
|
|||
{
|
||||
"name": "text",
|
||||
"kind": "let",
|
||||
"description": "Specify the switch text\nAlternatively, use the named slot \"text\" (e.g. <span slot=\"text\">...</span>)",
|
||||
"description": "Specify the switch text\nAlternatively, use the named slot \"text\" (e.g., <span slot=\"text\">...</span>)",
|
||||
"type": "string",
|
||||
"value": "\"Provide text\"",
|
||||
"isFunction": false,
|
||||
|
|
@ -1918,7 +1918,7 @@
|
|||
{
|
||||
"name": "code",
|
||||
"kind": "let",
|
||||
"description": "Set the code snippet text\nAlternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>)",
|
||||
"description": "Set the code snippet text\nAlternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)",
|
||||
"type": "string",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
|
|
@ -4595,7 +4595,7 @@
|
|||
{
|
||||
"name": "as",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g. <Grid let:props><header {...props}>...</header></Grid>)",
|
||||
"description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>)",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
|
|
@ -4681,7 +4681,7 @@
|
|||
{
|
||||
"name": "as",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g. <Row let:props><section {...props}>...</section></Row>)",
|
||||
"description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>)",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
|
|
@ -4757,7 +4757,7 @@
|
|||
{
|
||||
"name": "as",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g. <Column let:props><article {...props}>...</article></Column>)",
|
||||
"description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>)",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
|
|
@ -7494,7 +7494,7 @@
|
|||
{
|
||||
"name": "label",
|
||||
"kind": "let",
|
||||
"description": "Specify the tab label\nAlternatively, use the default slot (e.g. <Tab><span>Label</span></Tab>)",
|
||||
"description": "Specify the tab label\nAlternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>)",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
|
|
@ -9283,7 +9283,7 @@
|
|||
{
|
||||
"name": "icon",
|
||||
"kind": "let",
|
||||
"description": "Specify the icon from `carbon-icons-svelte` to render for the tooltip button\nIcon size must be 16px (e.g. `Add16`, `Task16`)",
|
||||
"description": "Specify the icon from `carbon-icons-svelte` to render for the tooltip button\nIcon size must be 16px (e.g., `Add16`, `Task16`)",
|
||||
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
|
|
@ -9593,7 +9593,7 @@
|
|||
{
|
||||
"name": "platformName",
|
||||
"kind": "let",
|
||||
"description": "Specify the platform name\nAlternatively, use the named slot \"platform\" (e.g. <span slot=\"platform\">...</span>)",
|
||||
"description": "Specify the platform name\nAlternatively, use the named slot \"platform\" (e.g., <span slot=\"platform\">...</span>)",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
|
|
@ -9661,7 +9661,7 @@
|
|||
{
|
||||
"name": "text",
|
||||
"kind": "let",
|
||||
"description": "Specify the text\nAlternatively, use the named slot \"text\" (e.g. <div slot=\"text\">...</div>)",
|
||||
"description": "Specify the text\nAlternatively, use the named slot \"text\" (e.g., <div slot=\"text\">...</div>)",
|
||||
"type": "string",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
|
|
@ -9676,6 +9676,16 @@
|
|||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "transition",
|
||||
"kind": "let",
|
||||
"description": "Customize the panel transition (i.e., `transition:slide`)\nSet to `false` to disable the transition",
|
||||
"type": "false | HeaderActionSlideTransition",
|
||||
"value": "{ duration: 200 }",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"slots": [
|
||||
|
|
@ -9691,7 +9701,13 @@
|
|||
{ "type": "forwarded", "name": "click", "element": "button" },
|
||||
{ "type": "dispatched", "name": "close" }
|
||||
],
|
||||
"typedefs": [],
|
||||
"typedefs": [
|
||||
{
|
||||
"type": "{ delay?: number; duration?: number; easing?: (t: number) => number; }",
|
||||
"name": "HeaderActionSlideTransition",
|
||||
"ts": "interface HeaderActionSlideTransition { delay?: number; duration?: number; easing?: (t: number) => number; }"
|
||||
}
|
||||
],
|
||||
"rest_props": { "type": "Element", "name": "button" }
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -186,7 +186,7 @@
|
|||
href="https://github.com/IBM/carbon-components-svelte"
|
||||
target="_blank"
|
||||
/>
|
||||
<HeaderAction bind:isOpen>
|
||||
<HeaderAction transition="{false}" bind:isOpen>
|
||||
<HeaderPanelLinks>
|
||||
<HeaderPanelDivider>Carbon Svelte portfolio</HeaderPanelDivider>
|
||||
<HeaderPanelLink href="https://github.com/IBM/carbon-icons-svelte">
|
||||
|
|
|
|||
|
|
@ -32,6 +32,10 @@ components: ["Header",
|
|||
|
||||
### Header with app switcher
|
||||
|
||||
The `HeaderAction` component uses the [transition:slide API](https://svelte.dev/docs#slide); you can customize the transition duration, delay, and easing with the `transition` prop.
|
||||
|
||||
You can disable the `transition` by setting it to `false`.
|
||||
|
||||
<FileSource src="/framed/UIShell/HeaderSwitcher" />
|
||||
|
||||
### Header with global search
|
||||
|
|
|
|||
|
|
@ -16,10 +16,28 @@
|
|||
Grid,
|
||||
Row,
|
||||
Column,
|
||||
TileGroup,
|
||||
RadioTile,
|
||||
} from "carbon-components-svelte";
|
||||
import { expoIn } from "svelte/easing";
|
||||
|
||||
let isSideNavOpen = false;
|
||||
let isOpen = false;
|
||||
let selected = "0";
|
||||
let transitions = {
|
||||
"0": {
|
||||
text: "Default (duration: 200ms)",
|
||||
value: { duration: 200 },
|
||||
},
|
||||
"1": {
|
||||
text: "Custom (duration: 600ms, delay: 50ms, easing: expoIn)",
|
||||
value: { duration: 600, delay: 50, easing: expoIn },
|
||||
},
|
||||
"2": {
|
||||
text: "Disabled",
|
||||
value: false,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
|
||||
|
|
@ -27,7 +45,7 @@
|
|||
<SkipToContent />
|
||||
</div>
|
||||
<HeaderUtilities>
|
||||
<HeaderAction bind:isOpen>
|
||||
<HeaderAction bind:isOpen transition="{transitions[selected].value}">
|
||||
<HeaderPanelLinks>
|
||||
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
|
||||
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
|
||||
|
|
@ -59,7 +77,16 @@
|
|||
<Grid>
|
||||
<Row>
|
||||
<Column>
|
||||
<h1>Welcome</h1>
|
||||
<h1>HeaderSwitcher</h1>
|
||||
<p>
|
||||
Select a transition option below and click on the App Switcher icon in
|
||||
the top right.
|
||||
</p>
|
||||
<TileGroup legend="App switcher transitions" bind:selected>
|
||||
{#each Object.keys(transitions) as key}
|
||||
<RadioTile value="{key}">{transitions[key].text}</RadioTile>
|
||||
{/each}
|
||||
</TileGroup>
|
||||
</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script>
|
||||
/**
|
||||
* Specify the title of the accordion item heading
|
||||
* Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>)
|
||||
* Alternatively, use the named slot "title" (e.g., <div slot="title">...</div>)
|
||||
*/
|
||||
export let title = "title";
|
||||
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
|
||||
/**
|
||||
* Set to `true` to render a custom HTML element
|
||||
* Props are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>)
|
||||
* Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>)
|
||||
*/
|
||||
export let as = false;
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
/**
|
||||
* Set the code snippet text
|
||||
* Alternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>)
|
||||
* Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)
|
||||
* @type {string}
|
||||
*/
|
||||
export let code = undefined;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script>
|
||||
/**
|
||||
* Specify the switch text
|
||||
* Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>)
|
||||
* Alternatively, use the named slot "text" (e.g., <span slot="text">...</span>)
|
||||
*/
|
||||
export let text = "Provide text";
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
/**
|
||||
* Set to `true` to render a custom HTML element
|
||||
* Props are destructured as `props` in the default slot (e.g. <Column let:props><article {...props}>...</article></Column>)
|
||||
* Props are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>)
|
||||
*/
|
||||
export let as = false;
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
/**
|
||||
* Set to `true` to render a custom HTML element
|
||||
* Props are destructured as `props` in the default slot (e.g. <Grid let:props><header {...props}>...</header></Grid>)
|
||||
* Props are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>)
|
||||
*/
|
||||
export let as = false;
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
/**
|
||||
* Set to `true` to render a custom HTML element
|
||||
* Props are destructured as `props` in the default slot (e.g. <Row let:props><section {...props}>...</section></Row>)
|
||||
* Props are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>)
|
||||
*/
|
||||
export let as = false;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script>
|
||||
/**
|
||||
* Specify the tab label
|
||||
* Alternatively, use the default slot (e.g. <Tab><span>Label</span></Tab>)
|
||||
* Alternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>)
|
||||
*/
|
||||
export let label = "";
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
/**
|
||||
* Specify the icon from `carbon-icons-svelte` to render for the tooltip button
|
||||
* Icon size must be 16px (e.g. `Add16`, `Task16`)
|
||||
* Icon size must be 16px (e.g., `Add16`, `Task16`)
|
||||
* @type {typeof import("carbon-icons-svelte").CarbonIcon}
|
||||
*/
|
||||
export let icon = Information16;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
/**
|
||||
* Specify the platform name
|
||||
* Alternatively, use the named slot "platform" (e.g. <span slot="platform">...</span>)
|
||||
* Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>)
|
||||
*/
|
||||
export let platformName = "";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script>
|
||||
/**
|
||||
* @typedef {{ delay?: number; duration?: number; easing?: (t: number) => number; }} HeaderActionSlideTransition
|
||||
*/
|
||||
|
||||
/** Set to `true` to open the panel */
|
||||
export let isOpen = false;
|
||||
|
||||
|
|
@ -10,7 +14,7 @@
|
|||
|
||||
/**
|
||||
* Specify the text
|
||||
* Alternatively, use the named slot "text" (e.g. <div slot="text">...</div>)
|
||||
* Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>)
|
||||
* @type {string}
|
||||
*/
|
||||
export let text = undefined;
|
||||
|
|
@ -18,6 +22,13 @@
|
|||
/** Obtain a reference to the button HTML element */
|
||||
export let ref = null;
|
||||
|
||||
/**
|
||||
* Customize the panel transition (i.e., `transition:slide`)
|
||||
* Set to `false` to disable the transition
|
||||
* @type {false | HeaderActionSlideTransition}
|
||||
*/
|
||||
export let transition = { duration: 200 };
|
||||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import { slide } from "svelte/transition";
|
||||
import Close20 from "carbon-icons-svelte/lib/Close20";
|
||||
|
|
@ -78,7 +89,7 @@
|
|||
bind:this="{refPanel}"
|
||||
class:bx--header-panel="{true}"
|
||||
class:bx--header-panel--expanded="{true}"
|
||||
transition:slide="{{ duration: 200 }}"
|
||||
transition:slide="{{ ...transition, duration: transition === false ? 0 : transition.duration }}"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,22 +11,20 @@
|
|||
/** Obtain a reference to the HTML button element */
|
||||
export let ref = null;
|
||||
|
||||
import { fly } from "svelte/transition";
|
||||
import Close20 from "carbon-icons-svelte/lib/Close20";
|
||||
import Menu20 from "carbon-icons-svelte/lib/Menu20";
|
||||
import { Icon } from "../../Icon";
|
||||
</script>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
bind:this="{ref}"
|
||||
type="button"
|
||||
title="Open menu"
|
||||
aria-label="{ariaLabel}"
|
||||
class:bx--header__action="{true}"
|
||||
class:bx--header__menu-trigger="{true}"
|
||||
class:bx--header__menu-toggle="{true}"
|
||||
{...$$restProps}
|
||||
transition:fly="{{ x: -200, delay: 50, duration: 250 }}"
|
||||
on:click
|
||||
on:click="{() => (isOpen = !isOpen)}"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<SkipToContent />
|
||||
</div>
|
||||
<HeaderUtilities>
|
||||
<HeaderAction bind:isOpen>
|
||||
<HeaderAction bind:isOpen transition="{false}">
|
||||
<HeaderPanelLinks>
|
||||
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
|
||||
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
Column,
|
||||
} from "../types";
|
||||
import SettingsAdjust20 from "carbon-icons-svelte/lib/SettingsAdjust20";
|
||||
import { quintOut } from "svelte/easing";
|
||||
|
||||
let isSideNavOpen = false;
|
||||
let isOpen = false;
|
||||
|
|
@ -32,7 +33,10 @@
|
|||
<HeaderUtilities>
|
||||
<HeaderActionSearch />
|
||||
<HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust20}" />
|
||||
<HeaderAction bind:isOpen>
|
||||
<HeaderAction
|
||||
bind:isOpen
|
||||
transition="{{ duration: 400, easing: quintOut }}"
|
||||
>
|
||||
<HeaderPanelLinks>
|
||||
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
|
||||
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
|
||||
|
|
|
|||
2
types/Accordion/AccordionItem.d.ts
vendored
2
types/Accordion/AccordionItem.d.ts
vendored
|
|
@ -3,7 +3,7 @@
|
|||
export interface AccordionItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
|
||||
/**
|
||||
* Specify the title of the accordion item heading
|
||||
* Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>)
|
||||
* Alternatively, use the named slot "title" (e.g., <div slot="title">...</div>)
|
||||
* @default "title"
|
||||
*/
|
||||
title?: string;
|
||||
|
|
|
|||
2
types/Button/Button.d.ts
vendored
2
types/Button/Button.d.ts
vendored
|
|
@ -47,7 +47,7 @@ export interface ButtonProps
|
|||
|
||||
/**
|
||||
* Set to `true` to render a custom HTML element
|
||||
* Props are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>)
|
||||
* Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>)
|
||||
* @default false
|
||||
*/
|
||||
as?: boolean;
|
||||
|
|
|
|||
2
types/CodeSnippet/CodeSnippet.d.ts
vendored
2
types/CodeSnippet/CodeSnippet.d.ts
vendored
|
|
@ -9,7 +9,7 @@ export interface CodeSnippetProps {
|
|||
|
||||
/**
|
||||
* Set the code snippet text
|
||||
* Alternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>)
|
||||
* Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)
|
||||
*/
|
||||
code?: string;
|
||||
|
||||
|
|
|
|||
2
types/ContentSwitcher/Switch.d.ts
vendored
2
types/ContentSwitcher/Switch.d.ts
vendored
|
|
@ -3,7 +3,7 @@
|
|||
export interface SwitchProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
|
||||
/**
|
||||
* Specify the switch text
|
||||
* Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>)
|
||||
* Alternatively, use the named slot "text" (e.g., <span slot="text">...</span>)
|
||||
* @default "Provide text"
|
||||
*/
|
||||
text?: string;
|
||||
|
|
|
|||
2
types/Grid/Column.d.ts
vendored
2
types/Grid/Column.d.ts
vendored
|
|
@ -12,7 +12,7 @@ export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
|
|||
export interface ColumnProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
|
||||
/**
|
||||
* Set to `true` to render a custom HTML element
|
||||
* Props are destructured as `props` in the default slot (e.g. <Column let:props><article {...props}>...</article></Column>)
|
||||
* Props are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>)
|
||||
* @default false
|
||||
*/
|
||||
as?: boolean;
|
||||
|
|
|
|||
2
types/Grid/Grid.d.ts
vendored
2
types/Grid/Grid.d.ts
vendored
|
|
@ -3,7 +3,7 @@
|
|||
export interface GridProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
|
||||
/**
|
||||
* Set to `true` to render a custom HTML element
|
||||
* Props are destructured as `props` in the default slot (e.g. <Grid let:props><header {...props}>...</header></Grid>)
|
||||
* Props are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>)
|
||||
* @default false
|
||||
*/
|
||||
as?: boolean;
|
||||
|
|
|
|||
2
types/Grid/Row.d.ts
vendored
2
types/Grid/Row.d.ts
vendored
|
|
@ -3,7 +3,7 @@
|
|||
export interface RowProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
|
||||
/**
|
||||
* Set to `true` to render a custom HTML element
|
||||
* Props are destructured as `props` in the default slot (e.g. <Row let:props><section {...props}>...</section></Row>)
|
||||
* Props are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>)
|
||||
* @default false
|
||||
*/
|
||||
as?: boolean;
|
||||
|
|
|
|||
2
types/Tabs/Tab.d.ts
vendored
2
types/Tabs/Tab.d.ts
vendored
|
|
@ -3,7 +3,7 @@
|
|||
export interface TabProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
|
||||
/**
|
||||
* Specify the tab label
|
||||
* Alternatively, use the default slot (e.g. <Tab><span>Label</span></Tab>)
|
||||
* Alternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>)
|
||||
* @default ""
|
||||
*/
|
||||
label?: string;
|
||||
|
|
|
|||
2
types/Tooltip/Tooltip.d.ts
vendored
2
types/Tooltip/Tooltip.d.ts
vendored
|
|
@ -21,7 +21,7 @@ export interface TooltipProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNa
|
|||
|
||||
/**
|
||||
* Specify the icon from `carbon-icons-svelte` to render for the tooltip button
|
||||
* Icon size must be 16px (e.g. `Add16`, `Task16`)
|
||||
* Icon size must be 16px (e.g., `Add16`, `Task16`)
|
||||
*/
|
||||
icon?: typeof import("carbon-icons-svelte").CarbonIcon;
|
||||
|
||||
|
|
|
|||
2
types/UIShell/GlobalHeader/Header.d.ts
vendored
2
types/UIShell/GlobalHeader/Header.d.ts
vendored
|
|
@ -30,7 +30,7 @@ export interface HeaderProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNam
|
|||
|
||||
/**
|
||||
* Specify the platform name
|
||||
* Alternatively, use the named slot "platform" (e.g. <span slot="platform">...</span>)
|
||||
* Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>)
|
||||
* @default ""
|
||||
*/
|
||||
platformName?: string;
|
||||
|
|
|
|||
15
types/UIShell/GlobalHeader/HeaderAction.d.ts
vendored
15
types/UIShell/GlobalHeader/HeaderAction.d.ts
vendored
|
|
@ -1,5 +1,11 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export interface HeaderActionSlideTransition {
|
||||
delay?: number;
|
||||
duration?: number;
|
||||
easing?: (t: number) => number;
|
||||
}
|
||||
|
||||
export interface HeaderActionProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
|
||||
/**
|
||||
* Set to `true` to open the panel
|
||||
|
|
@ -14,7 +20,7 @@ export interface HeaderActionProps extends svelte.JSX.HTMLAttributes<HTMLElement
|
|||
|
||||
/**
|
||||
* Specify the text
|
||||
* Alternatively, use the named slot "text" (e.g. <div slot="text">...</div>)
|
||||
* Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>)
|
||||
*/
|
||||
text?: string;
|
||||
|
||||
|
|
@ -23,6 +29,13 @@ export interface HeaderActionProps extends svelte.JSX.HTMLAttributes<HTMLElement
|
|||
* @default null
|
||||
*/
|
||||
ref?: null | HTMLButtonElement;
|
||||
|
||||
/**
|
||||
* Customize the panel transition (i.e., `transition:slide`)
|
||||
* Set to `false` to disable the transition
|
||||
* @default { duration: 200 }
|
||||
*/
|
||||
transition?: false | HeaderActionSlideTransition;
|
||||
}
|
||||
|
||||
export default class HeaderAction {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue