1.0.1 • Published 12 months ago

ion-peek-pop v1.0.1

Weekly downloads
-
License
-
Repository
github
Last release
12 months ago

Features

  • 👉 3D Touch Experience: Utilizes advanced touch recognition to provide a tactile interaction, simulating a three-dimensional interaction within a two-dimensional interface.
  • 📳 Haptic Feedback: Offers immediate tactile feedback to users, enhancing the overall experience and engagement.
  • ✨ Pixel Matching Animation: Ensures a fluid and responsive animation that matches the touch intensity, providing a seamless transition between states.

Table of Contents

Instalation

npm install ion-peek-pop

Usage

Basic Example

<template>
    <IonPeekPop @onPop="">
        <template v-slot:item>
            <IonButton>Peek me (press and hold)</IonButton>
        </template>
        <template v-slot:popover>
            <div>Hello World from the Peek Window</div>
        </template>
        <template v-slot:contextmenu>
            <!--Optional contextmenu items-->
        </template>
    </IonPeekPop>
</template>

<script setup lang="ts">
import { IonPeekPop, IonPeekPopContextMenuItem } from 'ion-peek-pop';
import 'ion-peek-pop/styles.css';
</script>

You can access the demos files in the ./demos folder

Documentation

The IonPeekPop component is a sophisticated addition to Ionic/Vue applications, offering an immersive 3D touch experience 📱. This component is designed to enhance user interaction through haptic feedback, precise touch recognition, and smooth pixel-matching animations, bringing a new level of depth to the application's interface.

Basic Component Structure

<IonPeekPop @onPop="">
    <template v-slot:item>
        <!--The peekable item or button goes here-->
    </template>
    <template v-slot:popover>
        <!--Here goes what will be shown when peeked-->
    </template>
    <template v-slot:contextmenu>
        <!--Here goes the context menu items-->
    </template>
</IonPeekPop>

How to Import

<script setup lang="ts">
import { IonPeekPop, IonPeekPopContextMenuItem } from 'ion-peek-pop';
import 'ion-peek-pop/styles.css';
</script>

Components

IonPeekPop

Slots

PropTypeDescriptionDefault
itemSlotSlot for the peekable item or button.N/A
popoverSlotSlot for the content shown when peeked.N/A
contextmenuSlotSlot for the context menu items.N/A

Events

PropTypeDescriptionDefault
onPopEventTriggered when the user pops the item.N/A
onPeekEventTriggered when the user initiates a peek.N/A
onDismissEventTriggered when the peek view is dismissed.N/A

IonPeekPopContextMenuItem

Properties

PropTypeDescriptionDefault
iconPropIcon for the menu item.N/A
labelPropText label for the menu item.N/A
separateBooleanAdds separation from other items.false
colorStringCustom color for the item, enhancing emphasis.N/A

Styling

The component's appearance and theming are managed through a dedicated styles.css file, ensuring consistency and ease of customization.

Examples

Photo Library Example

<template>
    <IonPeekPop>
        <template v-slot:item>
            <img :src="path/to/photo"/>
        </template>
        <template v-slot:popover>
            <img :src="path/to/photo" />
        </template>
        <template v-slot:contextmenu>
            <ion-peek-pop-context-menu-item :icon="clipboardOutline" label="Copy"/>
            <ion-peek-pop-context-menu-item :icon="shareOutline" label="Share"/>
            <ion-peek-pop-context-menu-item :icon="openOutline" label="Favorite"/>
            <ion-peek-pop-context-menu-item :icon="copyOutline" label="Duplicate"/>
            <ion-peek-pop-context-menu-item :icon="eyeOffOutline" label="Hide"/>
            <ion-peek-pop-context-menu-item :icon="imagesOutline" label="Show in All Photos"/>
            <ion-peek-pop-context-menu-item :icon="albumsOutline" label="Add to Album"/>
            <ion-peek-pop-context-menu-item :icon="trashOutline" :separate="true" color="danger" :label="'Delete'" />
        </template>
    </IonPeekPop>
</template>
<script setup lang="ts">
import { albumsOutline, clipboardOutline, copyOutline, eyeOffOutline, imagesOutline, openOutline, shareOutline, trashOutline } from 'ionicons/icons';

import { IonPeekPop, IonPeekPopContextMenuItem } from 'ion-peek-pop';
import 'ion-peek-pop/styles.css';
</script>

https://github.com/user-attachments/assets/e097ca51-7118-4775-9147-441e3c683f43

Ion-Item in Ion-List Example

<template>
    <ion-list>
        <IonPeekPop v-for="user in usersList" :key="user.name" @onPop="openUser()">
            <template v-slot:item>
                <ion-item button>
                    <ion-avatar slot="start">
                        <ion-img :src="user.avatar" />
                    </ion-avatar>
                    <ion-label>
                        <h2><b>{{ user.name }}</b></h2>
                        <p><b>{{ user.email }}</b></p>
                        <p>{{ user.phone }}</p>
                    </ion-label>
                </ion-item>
            </template>
            <template v-slot:popover>
            <section>
                <img :src="user.avatar" />
                <h2>{{ user.name }}</h2>
                <p>{{ user.email }}</p>
                <p>{{ user.phone }}</p>
            </section>
            </template>
            <template v-slot:contextmenu>
                <ion-peek-pop-context-menu-item :icon="openOutline" @click="openUser()" label="See user"/>
                <ion-peek-pop-context-menu-item :icon="chatbubbleEllipsesOutline" label="Chat" />
                <ion-peek-pop-context-menu-item :icon="callOutline" label="Call" />
                <ion-peek-pop-context-menu-item :icon="removeCircleOutline" :separate="true" color="danger" :label="'Remove from list'" />
            </template>
        </IonPeekPop>
    </ion-list>
</template>
<script setup lang="ts">
import { albumsOutline, clipboardOutline, copyOutline, eyeOffOutline, imagesOutline, openOutline, shareOutline, trashOutline } from 'ionicons/icons';

import { IonPeekPop, IonPeekPopContextMenuItem } from 'ion-peek-pop';
import 'ion-peek-pop/styles.css';
</script>

https://github.com/user-attachments/assets/0046581c-9b26-4b4c-a415-f21405dcee14