Discover CatsJuice/dockbar Open Source project

dockbar

A macOS like dockbar component made with Web Components
that can be used in any framework.

Install

NPM
```
npm install dockbar --save
```

CDN

<head>
  <script type="module" src="https://unpkg.com/dockbar@latest/dockbar.js"></script>
</head>

IIFE(Example)

<head>
  <script src="https://unpkg.com/dockbar@latest/dockbar.iife.js"></script>
</head>

Go to Codepen for a quick try.

Usage

Basic usage

<body>
  <dock-wrapper>
    <dock-item>1</dock-item>
    <dock-item>2</dock-item>
    <dock-item>3</dock-item>
    <dock-item>4</dock-item>
  </dock-wrapper>
</body>

It is recommended to use a custom element inside dock-item, so that you can customize the content of dock-item.

<dock-wrapper>
  <dock-item>
    <div class="my-element"></div>
  </dock-item>
</dock-wrapper>

You may need to look at docs if you are using a framework like Vue.js or React.

Custom Style

Apply class to dock-wrapper and dock-item and customize your own style.

For more, see 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:
```
<head>
  #dock {
    visibility: hidden;
  }
  #dock:defined {
    visibility: visible;
  }
</head>
<body>
  <dock-wrapper id="dock">

  </dock-wrapper>
</body>
```

Configuration

Property	Type	Default	Description
`size`	`number`	`40`	The size of `dock-item` in `px`, see Sizes
`padding`	`number`	`8`	The padding of `dock-wrapper` in `px`, see Sizes
`gap`	`number`	`8`	The gap between `dock-item` in `px`, see Sizes
`maxScale`	`number`	`2`	The max scale of `dock-item`, see Sizes
`maxRange`	`number`	`200`	The max range of `dock-item` that will scale when mouseover in `px`, see 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

CatsJuice/dockbar

CatsJuice

Reviews

Repository Details