mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31: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:
parent
1e72ea9942
commit
f4c940d5ee
31 changed files with 244 additions and 160 deletions
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