Panel

npm2.0.0

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

Example

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

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

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

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'`	determine the size
`closable`	`boolean`	determine if the panel has a close button
`hidden`	`boolean`	determine user hidden state
`i18n`		set default aria/i18n strings

Attributes

Name	Types	Description
`size`	`'sm' \| 'md' \| 'lg'`	determine the size
`closable`	`boolean`	determine if the panel has a close button
`hidden`	`boolean`	determine user hidden state
`i18n`		set default aria/i18n strings

CSS Properties

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

Slots

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