■ コンポーネントデモ(demo)

≡

■ 概要（Overview）

コンポーネント名

NavBar

レベル (Atomic Design)

原子（Atom）

カテゴリー（category）

navigations

■ データ（Data）

【props】

id (String): ナビゲーションバーのID
class (String): ナビゲーションバーのクラス
style (String | Object): ナビゲーションバーのスタイル
isVisible (Boolean, required): ナビゲーションバーの表示・非表示を制御するフラグです。デフォルトは false です。

【emit】

close:ナビゲーションバーが閉じられたときに発火するイベント。

【computed】

bindingClass: props.classの値をベースにしたクラス名

■ 使用例（Usage Example）

<script setup>
import { ref } from 'vue'
import { NavBar } from 'revuekitz'

import { mdiInformationOutline } from '@mdi/js'

const navBarVisible = ref(false)
const showNavBar = () => {
  navBarVisible.value = true
}
const closeNavBar = () => {
  navBarVisible.value = false
}
</script>

<template>
  <div class="three-lines mr-2" @click="showNavBar">&equiv;</div>
  <NavBar :isVisible="navBarVisible" @close="closeNavBar">
    <NavBarItem to="" :icon="mdiInformationOutline" linkName="TEST" />
  </NavBar>
</template>