Shell

npm1.8.3

github

Example

item 1

item 2

item 3

header

Shell

hello there

code

<script type="module">
  import '@blueprintui/components/include/shell.js';
  import '@blueprintui/components/include/header.js';
  import '@blueprintui/components/include/nav.js';
  import '@blueprintui/components/include/alert.js';
  import '@blueprintui/icons/shapes/home.js';
</script>
<style>
  body {
    padding: 0;
  }
</style>

<bp-shell>
  <bp-nav expanded>
    <bp-nav-item> <bp-icon shape="home"></bp-icon> item 1 </bp-nav-item>
    <bp-nav-item> <bp-icon shape="home"></bp-icon> item 2 </bp-nav-item>
    <bp-nav-item> <bp-icon shape="home"></bp-icon> item 3 </bp-nav-item>
  </bp-nav>
  <bp-header>
    <bp-header-item>header</bp-header-item>
    <bp-header-item id="drawer-button" bp-shell="drawer-button" aria-label="menu" bp-layout="inline:end"><bp-icon size="lg"></bp-icon></bp-header-item>
  </bp-header>
  <section bp-layout="block gap:md" style="height: 2000px">
    <h1 bp-text="heading">Shell</h1>
    <bp-alert-group status="success">
      <bp-alert>hello there</bp-alert>
    </bp-alert-group>
  </section>
</bp-shell>
<script type="module">
  const button = document.querySelector('#drawer-button');
  const shell = document.querySelector('bp-shell');
  button.addEventListener('click', () => (shell.open = !shell.open));
</script>

No Header

item 1

item 2

item 3

Shell

hello there

code

<script type="module">
  import '@blueprintui/components/include/shell.js';
  import '@blueprintui/components/include/alert.js';
  import '@blueprintui/components/include/nav.js';
  import '@blueprintui/icons/shapes/home.js';
</script>
<style>
  body {
    padding: 0;
  }
</style>

<bp-shell>
  <bp-nav expanded>
    <bp-nav-item> <bp-icon shape="home"></bp-icon> item 1 </bp-nav-item>
    <bp-nav-item> <bp-icon shape="home"></bp-icon> item 2 </bp-nav-item>
    <bp-nav-item> <bp-icon shape="home"></bp-icon> item 3 </bp-nav-item>
  </bp-nav>
  <section bp-layout="block gap:md">
    <h1 bp-text="heading">Shell</h1>
    <bp-alert-group status="success">
      <bp-alert>hello there</bp-alert>
    </bp-alert-group>
  </section>
</bp-shell>

Install

NPM

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

CDN

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

bp-shell

Properties

Name	Types	Description
`layout`	`'app' \| 'app-expandable'`
`breakpoint`	`number`
`open`	`boolean`

Attributes

Name	Types	Description
`layout`	`'app' \| 'app-expandable'`
`breakpoint`	`number`
`open`	`boolean`

Slots

Name	Types	Description
`default`		slot for content