https://github.com/CatsJuice/dockbar
A macOS-like dock component made with WebComponents
https://github.com/CatsJuice/dockbar
dock macos-dock macos-hack
Last synced: 6 months ago
JSON representation
A macOS-like dock component made with WebComponents
- Host: GitHub
- URL: https://github.com/CatsJuice/dockbar
- Owner: CatsJuice
- License: mit
- Created: 2023-07-13T01:18:07.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-04T02:18:34.000Z (almost 2 years ago)
- Last Synced: 2024-11-09T18:46:57.217Z (7 months ago)
- Topics: dock, macos-dock, macos-hack
- Language: Vue
- Homepage: https://dock.oooo.so
- Size: 1.27 MB
- Stars: 148
- Watchers: 2
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
dockbar
A macOS like dockbar component made with Web Components
that can be used in any framework.
---
## Install
- **NPM**
```bash
npm install dockbar --save
```
- **CDN**
ESM([Example](./examples/esm/index.html))
```html
```
IIFE([Example](./examples/iife/index.html))
```html
```
Go to [Codepen](https://codepen.io/catsjuice/pen/GRwQdza) for a quick try.
## Usage
### Basic usage
```html
1
2
3
4
```
It is recommended to use a custom element inside `dock-item`, so that you can customize the content of `dock-item`.
```html
```
You may need to look at docs if you are using a framework like Vue.js or React.
- [Using Custom Elements in Vue](https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue)
- [Custom HTML Elements in React](https://react.dev/reference/react-dom/components#custom-html-elements)
### Custom Style
Apply `class` to `dock-wrapper` and `dock-item` and customize your own style.
For more, see [Configuration](#configuration).
## Problems
There are some problems yet to be solved:
- [ ] SSR compatibility
It does not work will in SSR framework like Nuxt.js. For now you have to render it inside `ClientOnly`, and import component asynchronously.
- [ ] Style asynchronous loading causes a flash on init
If you are not using by `iife`, it may cause a flash on init, because the style is loaded asynchronously. For now you could resolve this by applying a style:
```html
#dock {
visibility: hidden;
}
#dock:defined {
visibility: visible;
}
```
## Configuration
| Property | Type | Default | Description |
| ----------- | -------------------------------------- | ------------ | ---------------------------------------------------------------------------------------- |
| `size` | `number` | `40` | The size of `dock-item` in `px`, see [Sizes](#sizes) |
| `padding` | `number` | `8` | The padding of `dock-wrapper` in `px`, see [Sizes](#sizes) |
| `gap` | `number` | `8` | The gap between `dock-item` in `px`, see [Sizes](#sizes) |
| `maxScale` | `number` | `2` | The max scale of `dock-item`, see [Sizes](#sizes) |
| `maxRange` | `number` | `200` | The max range of `dock-item` that will scale when mouseover in `px`, see [Sizes](#sizes) |
| `disabled` | `boolean` | `false` | Disable the scale effect |
| `direction` | `horizontal` \| `vertical` | `horizontal` | The direction of `dock-item`s |
| `position` | `top` \| `bottom` \| `left` \| `right` | `bottom` | The position of `dock-wrapper`, will affect the scale origin |
### Sizes
