HHL-UI

Introduction

The hhl-drawer component gives you a slide in window that can be used as a menu.


Using with router

It is not possible to make a active example with router but the syntax is like this

<template>
  <div class="about">
    <hhl-btn @click="$refs.drawer.menuOpen()">Open</hhl-btn>
      <hhl-drawer ref="drawer">
        <router-link to="/home" class="router-link-active"><hhl-icon icon="clock"></hhl-icon>Home</router-link>
        <router-link to="/about">About</router-link>
      </hhl-drawer>
  </div>
</template>

CSS Variables

Name Default Describtion
--hhl-drawer-bgColor Theme: --col-bg-1 The background color.
--hhl-drawer-color Theme: --col-txt-1 The color of text.
--hhl-drawer-color-hover Theme: --col-pri The color of text when hover.
--hhl-drawer-color-selected Theme: --col-txt-on-pri The color of text when selected.
--hhl-drawer-bgColor-selected Theme: --col-pri The background color when selected.

← Tabs →