---

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