0.0.5 • Published 2 years ago
vue-live-island v0.0.5
vue-live-island
Dynamic Island 🏝 for ⚛️ Vue
Install
pnpm add vue-live-island
# or
yarn add vue-live-island
# or
npm i vue-live-islandUsage
<script setup lang="ts">
import { LiveIsland } from 'vue-live-island';
import { ref } from 'vue';
const isSmall = ref<boolean>(true)
</script>
<template>
<LiveIsland
class-name="flex items-center justify-center uppercase"
small-class-name="text-xs"
large-class-name="text-7xl"
trigger-type="click"
initial-animation
@change="(change:boolean)=>{isSmall = !change}"
>
{{ isSmall ? 'Small':'Large' }}
</LiveIsland>
</template>Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | '' | Class name of the island |
top | number\|string | 10 | Top egde of the island |
smallClassName | string | '' | Class name of the small island |
smallWidth | number\|string | 96 | Width of the small island |
smallHeight | number\|string | 30 | Height of the small island |
largeClassName | string | '' | Class name of the large island |
largeWidth | number\|string | 400 | Width of the large island |
largeHeight | number\|string | 180 | Height of the large island |
largeRadius | number\|string | 36 | Border radius of the large island |
wrapperClassName | string | '' | Class name of the whole container |
triggerType | 'click'\|'hover' | 'click' | Trigger mode for open |
initialAnimation | boolean | false | Whether show animiation on enter |
Reference
This project is built with