Shell

npm2.0.0

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>

<bp-shell interaction="auto">
  <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>

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>

<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

Events

Name	Types	Description
`scroll`	`Event`
`open`		dispatched when the drawer is opened
`close`		dispatched when the drawer is closed

Properties

Name	Types	Description
`breakpoint`	`number`
`open`	`boolean`
`interaction`	`'auto'`
`closable`	`boolean`
`width`	`number`

Attributes

Name	Types	Description
`accessor`		determine user closable state

Slots

Name	Types	Description
`default`		slot for content