https://github.com/kanejun-x/vue-bubble-ui
A highly configurable Bubble UI Vue.js component, similar to the iconic Apple Watch app layout.
https://github.com/kanejun-x/vue-bubble-ui
applewatch bubble bubble-ui
Last synced: 7 months ago
JSON representation
A highly configurable Bubble UI Vue.js component, similar to the iconic Apple Watch app layout.
- Host: GitHub
- URL: https://github.com/kanejun-x/vue-bubble-ui
- Owner: kanejun-x
- License: mit
- Created: 2024-07-18T12:16:57.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-19T12:06:17.000Z (about 1 year ago)
- Last Synced: 2025-02-19T16:19:49.878Z (8 months ago)
- Topics: applewatch, bubble, bubble-ui
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/vue-bubble-ui
- Size: 251 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue-Bubble-UI 🔮
[](https://www.npmjs.com/package/vue-bubble-ui)
[](https://github.com/kanejun-x/Vue-Bubble-UI#readme)
[](https://github.com/kanejun-x/Vue-Bubble-UI/graphs/commit-activity)
[](https://github.com/kanejun-x/Vue-Bubble-UI/blob/master/LICENSE)
[](https://twitter.com/kanejun-x)
A highly configurable Bubble UI Vue.js component, similar to the iconic Apple Watch app layout.
Originally known as [React-Bubble-UI](https://github.com/blakesanie/React-Bubble-UI), this package is re-created for Vue.js.
## Prerequisites
- node >=18
## Install
Using npm:
```sh
npm i vue-bubble-ui
```
Using yarn:
```sh
yarn add vue-bubble-ui
```
## Interactive Demo
Interact with a live demo to configure to UI to your liking.
[**Experience Demo**](https://blakesanie.github.io/React-Bubble-UI/#/demo)
## Thorough Documentation
Understand how to apply the component's high confirgurability to your design.
[**Read Docs**](https://blakesanie.github.io/React-Bubble-UI/#/docs)
## How to use for Vue.js
```vue
import { BubbleUi, type BubbleUiProps } from 'vue-bubble-ui'
// write your code
write your bubble code here
```
Please see `src/App.vue` for the detail.
Each element in the `items` of props can be access from `item`.
The position and size of each element can be got from `bubble` with the type below.
```ts
{
bubbleSize: number
translateX: number
translateY: number
distance: number
}
```
## Author
This package was re-created for Vue.js by [Junichi Kaneda](https://github.com/kanejun-x) in 2024.
- Twitter: [@kanejun-x](https://twitter.com/kanejun-x)
- Github: [@kanejun-x](https://github.com/kanejun-x)
Original React package was created by [Blake Sanie](https://github.com/blakesanie) in 2020.
- Like what you see? [View his other projects 📱 ](https://blakesanie.com/cs), [read his blog 💻 ](https://blakesanie.medium.com), or [buy him a coffee ☕](https://paypal.me/blakesanie?locale.x=en_US).
## 🤝 Contributing
Contributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com/kanejun-x/Vue-Bubble-UI/issues).
I highly encourage you to help improve this package further through the following steps:
1. Clone this repository
2. Branch off for the new feature
3. Contribute the feature (write the code)
4. Push to origin repository
5. Create a Pull Request
This package assumes you are using [Conventional Commit messages](https://www.conventionalcommits.org/en/v1.0.0/).
## Show your support
Give a ⭐️ if this project helped you!
## 📝 License
MIT © [blakesanie](https://github.com/blakesanie)
---
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_