🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

vue3-analog-clock

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue3-analog-clock

A simple analog clock component for Vue 3

0.1.1
latest
Source
npm
Version published
Maintainers
1
Created
Source

Vue 3 Analog Clock Component

A simple analog clock component for Vue 3.

Description

This package provides a Vue 3 component to display an analog clock. It's lightweight, customizable, and easy to integrate into your Vue 3 projects.

Usage

Install the package via npm:

npm install vue3-analog-clock

or go to npm package link

Import the component and register it in your main.js or main.ts file:

import { createApp } from "vue";
import App from "./App.vue";
import AnalogClock from "vue3-analog-clock";
import "vue3-analog-clock/dist/style.css";

const app = createApp(App);

app.use(AnalogClock);

app.mount("#app");

Use the component in your Vue templates:

<template>
  <div>
    <AnalogClock />
  </div>
</template>

Demo

Default Analog Clock

Default-Analog-Clock

Customize Analog Clock

customize-analog-clock

Customization Options

You can customize the appearance of the analog clock component using the following props:

  • watchFaceBackground: Background color of the clock face. Default: #f9f9f9.
  • watchDigitsColor: Color of the clock digits. Default: #000000.
  • watchDigitsMinuteMarksColor: Color of the minute marks on the clock face. Default: #929394.
  • watchHoursHand: Color of the hour hand. Default: #232425.
  • watchMinutesHand: Color of the minute hand. Default: #343536.
  • watchSecondsHand: Color of the seconds hand. Default: #c00.

To customize the clock colors, simply pass the desired color values as props when using the component in your Vue templates:

<template>
  <div>
    <AnalogClock
      watchFaceBackground="#673F69"
      watchDigitsColor="#FFFFFF"
      watchDigitsMinuteMarksColor="#FFFFFF"
      watchHoursHand="#FFAF45"
      watchMinutesHand="#FB6D48"
      watchSecondsHand="#E72929"
    />
  </div>
</template>

🌱 Contributors

Keywords

Vue, Vue 3, Analog Clock, Clock Component, Vue Component

License

This package is licensed under the MIT License

Keywords

vue

FAQs

Package last updated on 07 Apr 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts