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 2020-11-26 17:14:07 -08:00 committed by GitHub
commit f4c940d5ee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 244 additions and 160 deletions

View file

@ -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;

View file

@ -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 {