❤
npm
Sign UpSign In

digital-clock-vue

1.0.6 • Public • Published

digital-clock-vue

LICENSE

A digital clock simulation build on Vue.

digital-clock

without seconds:

digital-clock-without-seconds

You can also use the digital-number component.

digital-number

Installation

via NPM:

npm install --save digital-clock-vue

via Yarn:

yarn add digital-clock-vue

Usage

import DigitalClockVue, { DigitalNumber } from 'digital-clock-vue'
 
export default {
  components: {
    DigitalClockVue,
    DigitalNumber
  }
}

Props

Prop Type Desc
color String CSS color for digital number and twink.
showSeconds Boolean Determine whether to show seconds, default is false.

Examples

<!-- recommend aspect ratio 4:1 -->
<digital-clock-vue
  color="red"
  showSeconds
  style="background: black; width: 400px; height: 100px;"
/>
 
<!-- recommend aspect ratio when without seconds 8:3 -->
<digital-clock-vue
  color="#39af78"
  style="background: #2f4053; width: 240px; height: 90px;"
/>
 
<!-- digital number -->
<div>
  <digital-number
    :key="item"
    :num="item"
    color="#1973de"
    style="width: 45px; height:75px; margin-left: 2px;"
    v-for="item in Array.apply(null, {length: 10}).map((_, i) => i)"
  ></digital-number>
</div>

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i digital-clock-vue

Repository

github.com/zkerhcy/digital-clock-vue

Homepage

github.com/zkerhcy/digital-clock-vue#readme

Weekly Downloads

1

Version

1.0.6

License

MIT

Unpacked Size

53.2 kB

Total Files

9

Last publish

Collaborators

  • zkerhcy
Try on RunKit
Report malware