Drawer

Drawer allow to show any content within component overlaying page content.

Examples (5)

Example	Code
Content	`<as-drawer><p>Content</p></as-drawer>`
Content	`<as-drawer position="left" button-text="Open from left"><p>Content</p></as-drawer>`
Content	`<as-drawer position="top" button-text="Open from top"><p>Content</p></as-drawer>`
Content	`<as-drawer position="right" button-text="Open from right"><p>Content</p></as-drawer>`
Content	`<as-drawer position="center" button-text="Open at center"><p>Content</p></as-drawer>`

Properties (3)

Property name	Description	Type
position	Optional: value that marks the position from which drawer will show. defaults to 'bottom'	string
button-text	Optional: text on the button that opens up drawer	string
transition-time	Optional: defines drawer opening/close transition time, defaults to 400ms	number

Events (5)

Event name	Description	Example value
as-drawer:created	Fired when component is instantiated, has detail object.	{id: "b69f4038-c222-401c-927d-5f1e0e3101bc", position: "bottom"}
as-drawer:before-open	Fired when component is about to be opened, has detail object.	{id: "b69f4038-c222-401c-927d-5f1e0e3101bc", position: "bottom"}
as-drawer:after-open	Fired when component has finished opening and transition time has elapsed, has detail object.	{id: "b69f4038-c222-401c-927d-5f1e0e3101bc", position: "bottom"}
as-drawer:before-close	Fired when component is about to be closed, has detail object.	{id: "b69f4038-c222-401c-927d-5f1e0e3101bc", position: "bottom"}
as-drawer:after-close	Fired when component has finished closing and transition time has elapsed, has detail object.	{id: "b69f4038-c222-401c-927d-5f1e0e3101bc", position: "bottom"}

Files