Directives

The library provides four directives for component functionality. If components are imported globally, these are registered automatically. For auto-import or on-demand loading, you need to manually import and register them.

// main.ts
import { createApp } from 'vue'
import {
  create,
  // Click outside directive
  ClickOutside,
  // Click animation
  ClickAnimation,
  // Ripple wave directive
  Waves,
  // Repeat click
  RepeatClick
} from 'bin-ui-design'

const UI = create({
  directives: [ClickOutside, ClickAnimation, Waves, RepeatClick]
})

const app = createApp()
app.use(UI)
app.mount('#app')

Click Animation Directive

Add the v-click-animation directive to elements for a click animation effect. The ripple color is created based on the border or background color.

Custom

Ripple Waves Directive

Add the v-waves directive for a ripple effect. You can configure the ripple color and click behavior. Note that adding this directive will override the default button click effect.

<b-button v-waves>Default</b-button>
<b-button v-waves="'rgba(255,162,211,0.5)'">Custom Color</b-button>

Repeat Click Directive

Enables repeat click when held down. Used in the InputNumber component for incrementing.

ClickOutside Directive

Add click-outside detection with v-click-outside="clickOutside". Commonly used to close popper overlays.

Click outside me