Skip to content

Latest commit

 

History

History
128 lines (105 loc) · 2.85 KB

dile-nav.rocket.md

File metadata and controls

128 lines (105 loc) · 2.85 KB
Raw
/* START - Rocket auto generated - do not touch */
export const sourceRelativeFilePath = 'components/dile-nav.rocket.md';
import { layout } from '../recursive.data.js';
export { layout };
/* END - Rocket auto generated - do not touch */

export const title = 'dile-nav';
import { html, css, LitElement } from 'lit'; 
import '@mdjs/mdjs-story/define';
import '@mdjs/mdjs-preview/define';
import '@dile/dile-nav/dile-nav.js'
import "@dile/dile-menu-hamburger/dile-menu-hamburger.js";
import "@dile/dile-selector/dile-selector.js";
import "@dile/dile-selector/dile-selector-item.js";
import "@dile/dile-hamburger/dile-hamburger.js";

dile-nav

Web Component to create a nav bar

Installation

npm i @dile/dile-nav

Usage

Import the component.

import '@dile/dile-nav/dile-nav.js';

Use the component

<dile-nav>
  <span slot="title">Hi from Polydile!!</span>
</dile-nav>

The dile-nav component has 3 slots of content: "title", "menu" and "actions". It is not necessary to use all of them.

There is am example in a more complex implementation.

<dile-nav>
  <h2 slot="title">Nav title</h2>
  <span slot="menu">[x]</span>
  <span slot="actions">Create</span>
</dile-nav>

Properties

  • menu: position of the menu, between "left" and "right"

Style customization

You can customize the navigation bar by using the CSS custom properties bellow.

Custom property Description Default
--dile-nav-color Nav text color #fff
--dile-nav-background-color Nav background color #666
--dile-nav-align-items Nav align items (display grid property) center
--dile-nav-column-gap Nav column gap (display grid property) 1rem
--dile-nav-padding-x Nav padding horizontal 0.6rem
--dile-nav-padding-y Nav padding vertical 0.8rem

dile-nav demos

Default nav

<style>
  h2 {
    margin: 0;
  }
  dile-nav.demo {
    color: #fff;
  }
  .hamburger {
    position: relative;
    top: -2px;
    --dile-hamburger-padding-x: 0;
    --dile-hamburger-color: #fff;
  }
</style>
<dile-nav class="demo">
  <h2 slot="title">Nav title</h2>
  <span slot="menu"><dile-hamburger class="hamburger"></dile-hamburger></span>
  <span slot="actions">Action</span>
</dile-nav>

Styled nav

<style>
  h2 {
    margin: 0;
  }
  .hamburger2 {
    position: relative;
    top: -2px;
    --dile-hamburger-padding-x: 0;
    --dile-hamburger-color: #369;
  }
  .styled {
    --dile-nav-background-color: #bbdefb;
    --dile-nav-color: #303030;
    --dile-nav-padding-y: 1rem;
    --dile-nav-padding-x: 1rem;
    color: #666;
  }
</style>
<dile-nav class="styled" menu="right">
  <h2 slot="title">Nav title</h2>
  <span slot="menu"><dile-hamburger class="hamburger2"></dile-hamburger></span>
  <span slot="actions">Action</span>
</dile-nav>