navigation-bar

介绍：

导航栏插件

• Reference
  • Method
    • Parameter
• Usage Plugins
• Usage WebComponent

Reference

Method

• setState

  设置状态

import { navigationBarPlugin } from "@plaoc/plugins";
navigationBarPlugin.setState({ color: "#ff00ff" });

• getState

  获取当前状态

import { navigationBarPlugin } from "@plaoc/plugins";
navigationBarPlugin.getState();

• setColor

  设置颜色

import { navigationBarPlugin } from "@plaoc/plugins";
navigationBarPlugin.setColor("#ff00ff");

• getColor

  获取当前颜色

import { navigationBarPlugin } from "@plaoc/plugins";
navigationBarPlugin.getColor();

• setStyle

  设置模式，如：暗黑模式

import { navigationBarPlugin, NAVIGATION_BAR_STYLE } from "@plaoc/plugins";
navigationBarPlugin.setStyle(NAVIGATION_BAR_STYLE.Dark);

• getStyle

  获取当前模式

import { navigationBarPlugin } from "@plaoc/plugins";
navigationBarPlugin.getStyle();

• setOverlay

  设置覆盖

import { navigationBarPlugin } from "@plaoc/plugins";
navigationBarPlugin.setOverlay(true);

• getOverlay

  获取覆盖状态

import { navigationBarPlugin } from "@plaoc/plugins";
navigationBarPlugin.getOverlay();

Parameter

• NAVIGATION_BAR_STYLE

  导航栏模式

import { NAVIGATION_BAR_STYLE } from "@plaoc/plugins";
NAVIGATION_BAR_STYLE.
Dark;

• $NavigationBarWritableState

  状态栏状态值

import { NAVIGATION_BAR_STYLE, type $NavigationBarWritableState } from "@plaoc/plugins";
const state: Partial<$NavigationBarWritableState> = {
  color: "",
  style: NAVIGATION_BAR_STYLE.Light,
  overlay: true,
  visible: true,
};

Usage Plugins

<script setup lang="ts">
import { ref } from "vue";
import { navigationBarPlugin } from "@plaoc/plugins";

async function getState() {
  const state = navigationBarPlugin.getState();
}

</script>

Usage WebComponent

<script setup lang="ts">
import { ref } from "vue";
import { HTMLDwebNavigationBarElement } from "@plaoc/plugins";

const $navigationBarPlugin = ref<HTMLDwebNavigationBarElement>();

async function getState() {
  const navigationBar = $navigationBarPlugin.value!;
  const state = navigationBar.getState();
}

</script>
<template>
  <dweb-navigation-bar ref="$navigationBarPlugin"></dweb-navigation-bar>
</template>