Panel
Panel component is to hold layout's Panel data and provide automatic fold-in/out functionality on mobile resolutions.
| Example | Code |
|---|---|
Panel heading Vivamus risus nunc, tempus vel tempus vitae, rhoncus vitae dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus a erat pulvinar, consectetur velit et, scelerisque erat. Curabitur ligula nunc, consequat vitae nisl sit amet, hendrerit varius quam. Integer gravida cursus lacinia. Aenean mauris mi, vestibulum ac sodales et, posuere a mi. Suspendisse sodales lectus quis faucibus tincidunt. Vivamus risus nunc, tempus vel tempus vitae, rhoncus vitae dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus a erat pulvinar, consectetur velit et, scelerisque erat. Curabitur ligula nunc, consequat vitae nisl sit amet, hendrerit varius quam. Integer gravida cursus lacinia. Aenean mauris mi, vestibulum ac sodales et, posuere a mi. Suspendisse sodales lectus quis faucibus tincidunt. |
<as-panel>[content]</as-panel> |
| Property name | Description | Type |
|---|---|---|
| breakpoint | Optional: Defines mobile breakpoint in pixels, defaults to 520. | number |
| heading-class | Optional: Panel to work should contain minimum two elements inside, one for panel heading and one for panel body. Defaults to panel-heading. | string |
| body-class | Optional: Panel to work should contain minimum two elements inside, one for panel heading and one for panel body. Defaults to panel-body. | string |
| icon-name | Optional: When present icon name is passed to <as-icon> component within panel structure. Default icon view is defined for folded-in layout of the component. Defaults to --as-icon-plus. | string |
| rotate | Optional: When present defines direction and angle of the icon rotation when component is toggled between states (fold-in & fold out). Defaults to -45deg. | direction+value+unit |
| Event name | Description | Example value |
|---|---|---|
| as-panel:created | Fired when component is rendered. Has detail object. | {id: "79d95b10-ecc4-42ca-b893-8e23b01f17da"} |
| as-panel:toggle | Fired when component has toggled. Has detail object. | {id: "79d95b10-ecc4-42ca-b893-8e23b01f17da", state: 'open'} |
| as-panel:toggle | Fired when component has toggled. Has detail object. | {id: "79d95b10-ecc4-42ca-b893-8e23b01f17da", state: 'closed'} |