Skip to content

Commit

Permalink
doc(readme): update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
MadhushaPrasad committed Apr 7, 2024
1 parent ae085ea commit 89df653
Showing 1 changed file with 36 additions and 1 deletion.
37 changes: 36 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ This package provides a **Vue 3** component to display an **analog clock**. It's
```bash
npm install vue3-analog-clock
```

or go to npm <a href="https://www.npmjs.com/package/vue3-analog-clock" target="_blank">package link</a>

## Import the component and register it in your main.js or main.ts file:
Expand Down Expand Up @@ -42,7 +43,41 @@ app.mount("#app");

## Demo

![ezgif-1-3d019c9ad5](https://github.com/MadhushaPrasad/vue-analog-clock/assets/50085447/fe6c60e1-a631-42cc-9d93-5bd1bc7e0791)
Default Analog Clock

![Default-Analog-Clock](https://github.com/MadhushaPrasad/vue-analog-clock/assets/50085447/7db6707d-db25-40a3-92a6-7bcfafb5c598)

Customize Analog Clock

![customize-analog-clock](https://github.com/MadhushaPrasad/vue-analog-clock/assets/50085447/65ab7487-efab-46cb-91d9-682634b484b8)

## 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:

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

## 🌱 Contributors

Expand Down

0 comments on commit 89df653

Please sign in to comment.