@slickteam/slick-topbar

<slick-topbar>

Description

A topbar with a burger that emits an event when clicked on. There is the possibility of adding a logo and a title if needed. This web component was made using lit element.

Installation

npm i @slickteam/slick-topbar

Usage

• Html vanilla

<script type="module">
  import '@slickteam/slick-topbar';
</script>

<slick-topbar></slick-topbar>

• Vue.js

<template>
  <div>
    <h1>Test Page</h1>
    <slick-topbar
        :imgSrc="image"
    ></slick-topbar>
  </div>
</template>

<script>
import '@slickteam/slick-topbar';
import image from './path/to/image/file'

export default {
  name: 'TestPage', 
  data() {
      return {
          image: image,
      }
  },
}
</script>

<style scoped>
/* Put CSS */
</style>

Template

    <slick-topbar
      hideTitle
      titleContent="The title you want to display"
      hideLogo
      imgSrc
      color="#000000"
      backgroundColor="#FFF"
    ></slick-topbar>

Properties

Name	Type	Description
hideTitle	Boolean	Hide the title if not needed
titleContent	String	Define text content of the title
hideLogo	Boolean	Hide the logo that is next to the burger
imgSrc	String	The image source
color	String	Custom color
backgroundColor	String	Custom background color

Events

Name	Description
slick-burger	The event emitted when the burger is clicked, it potentially allows to open a navigation drawer.

Development

Demoing with Storybook

To run a local instance of Storybook for your component, run

npm run storybook

To build a production version of Storybook, run

npm run storybook:build