mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11: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
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue