status-bar

Introduction:

Status Bar Plugin

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

Reference

Method

• setState

  Set Status

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

• getState

  Get Current Status

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

• setColor

  Set Color

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

• getColor

  Get Current Color

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

• setStyle

  Set Mode, e.g.: Dark Mode

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

• getStyle

  Get Current Mode

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

• setOverlay

  Set Overlay

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

• getOverlay

  Get Overlay Status

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

Parameter

• STATUS_BAR_STYLE

  Status Bar Mode

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

• $StatusBarWritableState

  Status Bar State Values

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

Usage Plugins

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

async function getState() {
  const state = statusBarPlugin.getState();
}
</script>

Usage WebComponent

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

const $statusBarPlugin = ref<HTMLDwebStatusBarElement>();

async function getState() {
  const statusBar = $statusBarPlugin.value!;
  const state = statusBar.getState();
}
</script>
<template>
  <dweb-status-bar ref="$statusBarPlugin"></dweb-status-bar>
</template>