@slickteam/slick-topbar NPM

\

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