Re:Vue

■ 概要(Overview)

コンポーネント名

  • NavListItem

レベル (Atomic Design)

  • 原子(Atom)

カテゴリー(category)

  • navigations

■ データ(Data)

【props】

  • to (String, required): ナビゲーションリンクのURL。デフォルトは / です。
  • icon (String, required): ナビゲーションリンクのアイコン。デフォルトは mdi-vuetify です。
  • linkName (String, required): ナビゲーションリンクの名前。デフォルトは vuetify です。

■ 使用例(Usage Example)

<script setup>
import { ref } from 'vue'
import { NavBar } from 'revuekitz'
import { NavListItem } from 'revuekitz'
import 'revuekitz/dist/style.css' 

const navBarVisible = ref(false)
</script>

<template>
  <NavBar :isVisible="navBarVisible" @close="navBarVisible = false">
    <NavListItem to="/home" icon="mdi-home" linkName="Home" />
    <NavListItem to="/about" icon="mdi-information" linkName="About" />
    <NavListItem to="/contact" icon="mdi-contact-mail" linkName="Contact" />
  </NavBar>
</template>