Page

npm2.0.0

github

The page component is for page level layout.

Example

Structures main page layout with consistent spacing and sections.

header

subheader

aside-start

main content

aside-end

subfooter

footer

code

<script type="module">
  import '@blueprintui/components/include/page.js';
  import '@blueprintui/components/include/panel.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>
  html,
  body {
    min-height: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  bp-page {
    div[slot] {
      padding: 1rem;
      height: 100%;
      width: 100%;
    }

    [slot='header'],
    [slot='footer'] {
      background: var(--bp-color-blue-200);
    }

    [slot='subheader'],
    [slot='subfooter'] {
      background: var(--bp-color-red-200);
    }

    [slot='aside-start'] {
      background: var(--bp-color-green-200);
    }

    [slot='aside-end'] {
      background: var(--bp-color-yellow-200);
    }
  }
</style>

<bp-page>
  <div slot="header">header</div>
  <div slot="subheader">subheader</div>
  <div slot="aside-start">aside-start</div>
  <main>main content</main>
  <div slot="aside-end">aside-end</div>
  <div slot="subfooter">subfooter</div>
  <div slot="footer">footer</div>
</bp-page>

Install

NPM

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

CDN

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

Accessibility

bp-page

Properties

Name	Types	Description

Slots

Name	Types	Description
`default`		slot for content
`header`		slot for header
`subheader`		slot for subheader
`aside-start`		slot for aside start
`aside-end`		slot for aside end
`subfooter`		slot for subfooter
`footer`		slot for footer