vue-live-island

Dynamic Island 🏝 for ⚛️ Vue

Install

pnpm add vue-live-island
# or
yarn add vue-live-island
# or
npm i vue-live-island

Usage

<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

• react-live-island

License

MIT License