/v-dynamic-island

A Vue (3.x) implementation of Dynamic Island

Primary LanguageVueMIT LicenseMIT

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.