vidstack
Version:
Build awesome media experiences on the web.
47 lines (46 loc) • 1.58 kB
TypeScript
import { Component, ComponentInstance, type HTMLCustomElement } from 'maverick.js/element';
import { type MenuContext } from './menu-context';
declare global {
interface MaverickElements {
'media-menu-button': MediaMenuButtonElement;
}
}
/**
* A button that controls the opening and closing of a menu component. The button will become a
* menuitem when used inside a submenu.
*
* @docs {@link https://www.vidstack.io/docs/player/components/menu/menu}
* @slot - Used to pass in button content.
* @slot open - Used to display content when menu is open.
* @slot close - Used to display content when menu is closed.
* @example
* ```html
* <media-menu>
* <media-menu-button aria-label="Settings">
* <media-icon type="settings"></media-icon>
* </media-menu-button>
* <media-menu-items>
* <!-- ... -->
* </media-menu-items>
* </media-menu>
* ```
*/
export declare class MenuButton<T extends MenuButtonAPI = MenuButtonAPI> extends Component<T> {
static el: import("maverick.js/element").CustomElementDefinition<MenuButtonAPI>;
protected _menu: MenuContext;
constructor(instance: ComponentInstance<T>);
protected onAttach(el: HTMLElement): void;
protected onConnect(el: HTMLElement): void;
protected _watchDisabled(): void;
}
export interface MenuButtonAPI {
props: MenuButtonProps;
}
export interface MenuButtonProps {
/**
* Whether the button should be disabled (non-interactive).
*/
disabled: boolean;
}
export interface MediaMenuButtonElement extends HTMLCustomElement<MenuButton> {
}