Vue Dynamic Island

A Vue (3.x) implementation of Dynamic Island.

How to use

Install first:

pnpm install v-dynamic-island

Then import into your Vue project:

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

// to control the display
const shown = ref(false)
const expanded = ref(false)
</script>

<template>
  <DynamicIsland :shown="shown" :expanded="expanded">
    <template #leading>
      <!-- leading content -->
    </template>
    <template #trailing>
      <!-- trailing content -->
    </template>
    <template #expanded>
      <!-- expanded content -->
    </template>
  </DynamicIsland>
</template>

Explanations

The shown prop controls whether the island would be enabled.

The island has two modes: compat mode and expanded mode. The expanded prop controls which mode it is on.

The #leading and #trailing slots accepts the compat content. The former one is for the left side and the later one is for the right side.

The #expanded slot accepts the expanded content.

To be notice that the "little-pill" core area (roughly 137px x 40px) of the island always shouldn't be able to render anything since that's the place where Apple puts the TrueDepth Camera.

Live examples

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

Source code:

https://github.com/Jinjiang/v-dynamic-island/tree/main/src/examples

Basic APIs

Props

shown: boolean
expanded: boolean

Slots

#leading
#trailing
#expanded

Emits

none

Advanced feature

Shaking as a warning.
Customize device width for the max width of expanded content.
"Super element" transitions for leading/trailing content between compat mode and expanded mode.
Slots for expanded leading/trailing content.

Advanced APIs

Props

warning: boolean

When set to be true, the whole island would be shaked for a few times as a warning. According to the original design of Dynamic Island, this prop should only be used on the compat mode.
deviceWidth: number

By default the component will auto detect the device width. However, you can explicitly specify a number for that. Usually, it's useful when you prepare a demo on non-iOS devices or laptops.
superLeading: boolean or { top, left, size }

By default, #leading content will be hidden on the expanded mode. However, if you want to retain it, you can set it to be true. So when switching to the expanded mode, #leading content would be kept and scaled up.

You can also set it as a customized position and size for its expanded mode.
- The top and left is the number of pixels from the center of the content to the island edges.
- The size is the number of pixels height, which is used for calculating the scaling transition.
superTrailing: boolean or { top, right, size }

Similar to superTrailing but for #trailing content.

Slots

#expanded-leading
#expanded-trailing

Emits

none

Specs & default values

TrueDepth Camera:

Size of the cemara: 137px x 40px.

Compat mode:

Gap between heading/trailing slots and the TrueDepth Camera: 10px.
Height of headling/trailing slots: 40px.

Expanded mode:

Padding of the expanded slot: top 137px, other sides 10px.
Default height of headling/trailing slots: 80px.
Default center of heading slot to the top: 46px.
Default center of heading slot to the left: 46px.
Default center of trailing slot to the top: 46px.
Default center of trailing slot to the right: 46px.