Simulate iPhone’s Dynamic Island In Vue

A Vue 3 component to simulate the Dynamic Island introduced in the brand new Apple iPhone 14 Pro.

How to use it:

1. Import and register the component.

import { ref } from 'vue'
import { DynamicIsland } from 'v-dynamic-island'
import 'v-dynamic-island/style.css'

2. Add the Dynamic Island to the app.

<template>
  <DynamicIsland :shown="shown" :expanded="expanded">
    <template #leading>
      ...
    </template>
    <template #trailing>
      ...
    </template>
    <template #expanded>
      ...
    </template>
  </DynamicIsland>
</template>

const shown = ref(false)
const expanded = ref(false)

Preview:

Download Details:

Author: Jinjiang

Live Demo: https://jinjiang.dev/v-dynamic-island/

Download Link: https://github.com/Jinjiang/v-dynamic-island/archive/refs/heads/main.zip

Official Website: https://github.com/Jinjiang/v-dynamic-island

Install & Download:

# NPM
$ npm i v-dynamic-island