Panel

npm2.0.0

github

The panel component is used to display secondary information, commonly navigation or actions.

Example

Groups related content in a bordered container section.

header

content

footer

code

<script type="module">
  import '@blueprintui/components/include/panel.js';
</script>

<bp-panel style="height: 400px">
  <p slot="header" bp-text="content">header</p>
  <p bp-text="content">content</p>
  <p slot="footer" bp-text="content">footer</p>
</bp-panel>

Closable

Demonstrates panel with closable functionality.

header

content

footer

code

<script type="module">
  import '@blueprintui/components/include/panel.js';

  document.querySelector('#closable-panel-example').addEventListener('close', (e) => {
    console.log('close');
  });
</script>

<bp-panel closable id="closable-panel-example" style="height: 400px">
  <p slot="header" bp-text="content">header</p>
  <p bp-text="content">content</p>
  <p slot="footer" bp-text="content">footer</p>
</bp-panel>

Size

Demonstrates various panel size options.

small

content

footer

medium

content

footer

large

content

footer

code

<script type="module">
  import '@blueprintui/components/include/panel.js';
</script>

<div bp-layout="inline gap:md">
  <bp-panel size="sm" style="height: 400px">
    <p slot="header" bp-text="content">small</p>
    <p bp-text="content">content</p>
    <p slot="footer" bp-text="content">footer</p>
  </bp-panel>

  <bp-panel size="md" style="height: 400px">
    <p slot="header" bp-text="content">medium</p>
    <p bp-text="content">content</p>
    <p slot="footer" bp-text="content">footer</p>
  </bp-panel>

  <bp-panel size="lg" style="height: 400px">
    <p slot="header" bp-text="content">large</p>
    <p bp-text="content">content</p>
    <p slot="footer" bp-text="content">footer</p>
  </bp-panel>
</div>

Scroll

Shows panel with scrollable overflow content.

header

content

footer

code

<script type="module">
  import '@blueprintui/components/include/panel.js';
</script>

<bp-panel style="height: 400px">
  <p slot="header" bp-text="content">header</p>
  <p bp-text="content" style="height: 1000px">content</p>
  <p slot="footer" bp-text="content">footer</p>
</bp-panel>

Install

NPM

// npm package
import '@blueprintui/components/include/panel.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/panel.js/+esm';
</script>

Accessibility

bp-panel

Events

Name	Types	Description
		close
		open

Properties

Name	Types	Description
`size`	`'sm' \| 'md' \| 'lg'`	Determines the size variant of the panel for different visual hierarchies
`closable`	`boolean`	Determines whether a close button is displayed for dismissing the panel
`hidden`	`boolean`	Controls the visibility state of the panel
`i18n`		Provides internationalization strings for translated text content

Attributes

Name	Types	Description
`size`	`'sm' \| 'md' \| 'lg'`	Determines the size variant of the panel for different visual hierarchies
`closable`	`boolean`	Determines whether a close button is displayed for dismissing the panel
`hidden`	`boolean`	Controls the visibility state of the panel
`i18n`		Provides internationalization strings for translated text content

CSS Properties

Name	Types	Description
`--background`
`--color`
`--border`
`--padding`

Slots

Name	Types	Description
`default`		content
`header`
`footer`