Panel
Examples
Appearance
Prefix & Suffix
Footer
HTML in Header
No Header
Singular Accordion Style Panel
Disabled Accordion Panel
Toggle Trigger & Toggle Icon Placement
Hide Suffix on Collapse
Accordion Group
Importing
Slots
Properties
Events
Methods
Custom Properties
Parts
Animations
Dependencies

Panel

<lynk-panel> | LynkPanel

stable

Since 1.0

Panels are lightweight content containers that function like a native detail HTML element with a collapsable body. They can either stand alone or be grouped together to form an Accordion.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<lynk-panel heading="Panel Heading">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</lynk-panel>

Examples

Appearance

Use the appearance attribute to change the panel’s visual appearance.

<lynk-stack>
  <lynk-panel heading="Outlined" appearance="outlined">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </lynk-panel>
  <lynk-panel heading="Filled (default)">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </lynk-panel>
  <lynk-panel heading="Filled + Outlined" appearance="filled outlined">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </lynk-panel>

  <lynk-panel heading="Plain" appearance="plain">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </lynk-panel>
</lynk-stack>

Prefix & Suffix

Use the prefix and suffix slots to add additional controls to the panel header.

<lynk-panel heading="Encoding Profile">
  <lynk-checkbox slot="prefix" checked></lynk-checkbox>
  <lynk-button slot="suffix" square size="small"><lynk-icon name="three-dots-vertical"></lynk-icon></lynk-button>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</lynk-panel>

Use the footer slots to add additional controls fixed to the end of the panel body that are hidden if the panel is collapsed.

<lynk-panel heading="Encoding Profile">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  <lynk-button color="primary" slot="footer">Save</lynk-button>
</lynk-panel>

HTML in Header

To use HTML in the header, use the header slot. Links and other interactive elements will still retain their behavior.

Some text a link more text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<lynk-panel accordion expanded>
  <span slot="heading">
    Some text
    <a href="https://lynk.design" target="_blank">a link</a>
    more text
  </span>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</lynk-panel>

No Header

Use the no-header attribute to remove the panel header. This will also remove the default toggle icon and controls, so please ensure you provide an easy, accessible way for users to toggle the panel if used within an accordion.

<lynk-panel no-header>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  <lynk-button color="primary" slot="footer">Save</lynk-button>
</lynk-panel>

Singular Accordion Style Panel

Use the accordion attribute to enable the Panel’s expand/contract controls so that the Panel can function like an single accordion panel. When embedded within an <lynk-accordion> component the Panel’s accordion attribute is automatically enabled.

<lynk-panel heading="Accordion Panel" accordion>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</lynk-panel>

Disabled Accordion Panel

Use the disabled and accordion attributes in combination to prevent the Panel from expanding/collapsing from it’s initial render state.

<lynk-panel heading="Disabled" accordion disabled>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</lynk-panel>

Toggle Trigger & Toggle Icon Placement

Use the toggle-trigger property to determine which header elements will trigger the expand/collapse of the content. In this example, setting toggle-trigger="icon" will toggle the panel contents only for clicks on the expand/collapse icon.

<lynk-panel accordion heading="Heading Trigger" toggle-trigger="icon" toggle-icon-placement="start">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</lynk-panel>

Hide Suffix on Collapse

Add the toggle-suffix attribute to also hide the contents of the suffix slot when the panel is collapsed.

<lynk-panel accordion heading="Toggle Suffix" toggle-icon-placement="start" toggle-suffix>
  <lynk-button slot="suffix" square size="small"><lynk-icon name="three-dots-vertical"></lynk-icon></lynk-button>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</lynk-panel>

Accordion Group

Panels are designed to function independently, but you can group multiple Panel components where only one is shown at a time by wrapping the panels in an <lynk-accordion> component.

<lynk-accordion>
  <lynk-panel heading="First" expanded>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </lynk-panel>

  <lynk-panel heading="Second">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </lynk-panel>

  <lynk-panel heading="Third">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </lynk-panel>
</lynk-accordion>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler

To import this component using a bundler:

import '@uplynk/lynk-design/dist/components/panel/panel.js';

Slots

Name	Description
(default)	The panels’ main content.
`heading`	The panels’ heading. Alternatively, you can use the `heading` attribute.
`prefix`	The panels’ summary prefix `<slot>`.
`suffix`	The panels’ summary suffix `<slot>`.
`expand-icon`	The expand icon’s `<slot>`.
`collapse-icon`	The collapse icon’s `<slot>`.
`footer`	The panels’ footer `<slot>`.

Learn more about using slots.

Properties

Name	Description	Type	Default
`expanded`	Indicates whether or not the panel contents are visible. You can use this in lieu of the expand/collapse methods.	`boolean`	`false`
`accordion`	Allow the panel contents to be toggled and enable supporting toggle controls	`boolean`	`false`
`disabled`	Disables an accordion panel so it can’t be toggled.	`boolean`	`false`
`appearance`	The element’s visual appearance.	`'filled' \| 'outlined' \| 'plain'`	`'filled'`
`heading`	The heading to show in the panel header. If you need to display HTML, use the `heading` slot instead.	`string`	-
`toggleTrigger` `toggle-trigger`	The trigger that will expand/collapse an accordion panel.	`'header' \| 'heading' \| 'icon' \| 'none'`	`'header'`
`toggleSuffix` `toggle-suffix`	Hide suffix when accordion is collapsed.	`boolean`	`false`
`toggleIconPlacement` `toggle-icon-placement`	The placement of the toggle icon in the header.	`'start' \| 'end' \| 'hidden'`	`'end'`
`noHeader` `no-header`	Disables the header. This will also remove the default toggle-icon, so please ensure you provide an easy, accessible way for users to toggle the panel if using as part of an accordion.	`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name	React Event	Description	Event Detail
`ev-expand`	`EvExpand`	Emitted when the panel expands.	-
`ev-after-expand`	`EvAfterExpand`	Emitted after the panel expands and all animations are complete.	-
`ev-collapse`	`EvCollapse`	Emitted when the panel closes.	-
`ev-after-collapse`	`EvAfterCollapse`	Emitted after the panel closes and all animations are complete.	-

Learn more about events.

Methods

Name	Description	Arguments
`expand()`	Shows the panel.	-
`collapse()`	Hides the panel	-

Learn more about methods.

Custom Properties

Name	Description	Default
`--background-color`	The panels background color
`--spacing`	The amount of padding to use for the header, body, and footer.
`--border-color`	Apply a panel border of your choosing.
`--border-radius`	The panels border radius.

Learn more about customizing CSS custom properties.

Parts

Name	Description
`base`	The component’s internal wrapper.
`header`	The panel header area.
`heading`	The panel heading.
`prefix`	The panel header prefix area.
`suffix`	The panel header suffix area.
`toggle-icon`	The expand/collapse toggle icon in the header.
`content`	The panel content.
`footer`	The panel footer.

Learn more about customizing CSS parts.

Animations

Name	Description
`panel.expand`	The animation to use when expanding the panel. You can use `height: auto` with this animation.
`panel.collapse`	The animation to use when collapsing the panel. You can use `height: auto` with this animation.

Learn more about customizing animations.

Dependencies

This component automatically imports the following dependencies.

<lynk-icon>