A Vue (3.x) implementation of Dynamic Island

Overview

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>
      
    template>
    <template #trailing>
      
    template>
    <template #expanded>
      
    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.
You might also like...
Vue directive for conditional rendering element on screen smaller than breakpoints
Vue directive for conditional rendering element on screen smaller than breakpoints

vue-not-visible Vue directive for conditional rendering (like v-if) element on screen smaller than breakpoints; 📺 Demo Install $ npm install --save v

Provides reactivity window size properties for Vue.js

vue-window-size Provides reactivity window size properties for Vue.js. Install for Vue v3 The following command installs vue-window-size v1. $ yarn ad

↔ Vue component that scales its child node in relation to its parent node's width
↔ Vue component that scales its child node in relation to its parent node's width

vue-responsive-text Vue component that scales its child node in relation to its parent node's width Installation Install the package from npm by runni

simple vue plugin to implement underscore

vue-underscore You know Underscore.js is a utility-belt library for JavaScript that provides support for the usual functional suspects (each, map, red

Vue composition-api composable components. i18n, validation, pagination, fetch, etc. +50 different composables

vue-composable Out-of-the-box ready to use composables 🌴 TreeShakable 🧙‍♂️ Fully Typescript 💚 Vue 3 and 2 support 🔨 Vue Devtools support Introduct

🕶 Vue Composition API for automatic fetch data when condition has been changed
🕶 Vue Composition API for automatic fetch data when condition has been changed

vue-condition-watcher 🕶 Introduction Vue Composition API for automatic fetch data when condition has been changed Features ✔ Auto fetch data when con

Use Vue Composition API Right Now (WIP)

Vue Use Use Vue Composition API Right Now. Note: Currently only Vue.js 2.x is supported. Since Vue.js has released a beta version of 3.0, this library

A library for encapsulating asynchronous operations and managing concurrency for Vue and Composition API.

🚦 vue-concurrency Inspired by ember-concurrency. A library for encapsulating asynchronous operations and managing concurrency for Vue and Composition

A Vue composition function that makes infinite scroll a breeze.

vue-use-infinite-scroll Installation npm i -S vue-use-infinite-scroll Usage template div span{{ errorMessageRef }}/span ul li

Owner
Jinjiang
0.1.x Engineer + ⚽️💻
Jinjiang
Vue Use Utilities build on top of vue-demi & @vue/compostion-api

Vue Use Utilities Vue Use Utilities build on top of vue-demi & @vue/compostion-api. It works both for Vue 2 & 3. ✨ Features ?? Composable Utilities ??

Vue Blocks 27 Nov 9, 2022
Collection of essential Vue Composition Utilities for Vue 2 and 3

Collection of essential Vue Composition Utilities ?? Features ?? Interactive docs & demos ?? Seamless migration: Works for both Vue 3 and 2 ⚡ Fully tr

VueUse 93 Oct 29, 2022
Transforms Vue.js 2.0 SFCs to Vue.js 3.0 Composition API syntax.

vue2-migration-helper Transforms Vue.js SFCs to composition api syntax. Install npm i vue2-migration-helper CLI # convert all .vue files in source dir

Muhammad Ubaid Raza 26 Nov 1, 2022
🤲 Use Vue 3's Fragment feature in Vue 2 to return multiple root elements

?? Vue 2 fragment directive to return multiple root elements

hiroki osame 180 Nov 6, 2022
The word highlighter library for Vue 2 and Vue 3.

The word highlighter library for Vue 2 and Vue 3.

ryo 112 Nov 23, 2022
Leon L. 4 Nov 8, 2022
JSX for Vue 3 - Babel Plugin JSX for Vue 3.0

JSX for Vue 3 - Babel Plugin JSX for Vue 3.0

vuejs 1.5k Dec 2, 2022
Paystack module for Vue that supports Vue 2 & 3.

Vue-Paystack2 is a Paystack payment gateway integration for Vue which provides Universal support for Vue 2 & 3 Table of Contents ✨ Install ✨ Usage ??

Enoch Chejieh 11 Aug 16, 2022
🛠️Vue kit of useful Vue Composition API functions

??️ Vue kit of useful Vue Composition API functions.

Salvatore Tedde 43 Feb 28, 2022
Vue Json Pretty - A Vue component for rendering JSON data as a tree structure.

Vue Json Pretty A Vue component for rendering JSON data as a tree structure. Now it supports Vue3 at least. If you still use Vue2, see 1.x. English |

Daniel 773 Nov 24, 2022