Bài 34: Popover Tìm hiểu ion-popover

 

  ion-popover

Popover là một hộp thoại xuất hiện trên đầu trang hiện tại. Nó có thể được sử dụng cho mọi thứ, nhưng nói chung nó được sử dụng cho các hành động tràn không phù hợp với thanh điều hướng.

Presenting(trình bày)

Để trình bày một cửa sổ bật lên(To present a popover), hãy gọi present phương thức trên một bản sao cửa sổ bật lên. Để định vị cửa sổ bật lên so với phần tử được nhấp, một sự kiện nhấp chuột cần được chuyển vào các tùy chọn của present phương pháp. Nếu sự kiện không được thông qua, cửa sổ bật lên sẽ được đặt ở trung tâm của khung nhìn.

Customization

Popover sử dụng tính năng đóng gói theo phạm vi, có nghĩa là nó sẽ tự động mở rộng phạm vi CSS của mình bằng cách nối mỗi kiểu với một lớp bổ sung trong thời gian chạy. Ghi đè các bộ chọn theo phạm vi trong CSS yêu cầu một bộ chọn có higher specificity .

Chúng tôi khuyên bạn nên chuyển một lớp tùy chỉnh vào cssClass trong create phương thức và sử dụng lớp đó để thêm các kiểu tùy chỉnh vào máy chủ và các phần tử bên trong. Thuộc tính này cũng có thể chấp nhận nhiều lớp được phân tách bằng dấu cách. Xem  Usage cho một ví dụ về cách vượt qua một lớp bằng cách sử dụng cssClass.

  /* DOES NOT WORK - not specific enough */

  .popover-content {

    background: #222;

  }

  

  /* Works - pass "my-custom-class" in cssClass to increase specificity */

  .my-custom-class .popover-content {

    background: #222;

  }

Bất kỳ trong số những điều đã xác định thuộc tính CSS có thể được sử dụng để tạo kiểu cho Popover mà không cần nhắm mục tiêu đến các phần tử riêng lẻ:

  .my-custom-class {

    --background: #222;

  }

Usage

import { Component } from '@angular/core';
import { PopoverController } from '@ionic/angular';
import { PopoverComponent } from '../../component/popover/popover.component';

@Component({
  selector: 'popover-example',
  templateUrl: 'popover-example.html',
  styleUrls: ['./popover-example.css']
})
export class PopoverExample {
  constructor(public popoverController: PopoverController) {}

  async presentPopover(ev: any) {
    const popover = await this.popoverController.create({
      component: PopoverComponent,
      cssClass: 'my-custom-class',
      event: ev,
      translucent: true
    });
    await popover.present();

    const { role } = await popover.onDidDismiss();
    console.log('onDidDismiss resolved with role', role);
  }
}

class PopoverExamplePage extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = `
      <ion-content>
        <ion-list>
          <ion-list-header><ion-label>Ionic</ion-label></ion-list-header>
          <ion-item button><ion-label>Item 0</ion-label></ion-item>
          <ion-item button><ion-label>Item 1</ion-label></ion-item>
          <ion-item button><ion-label>Item 2</ion-label></ion-item>
          <ion-item button><ion-label>Item 3</ion-label></ion-item>
        </ion-list>
      </ion-content>
    `;
  }
}

customElements.define('popover-example-page', PopoverExamplePage);

function presentPopover(ev) {
  const popover = Object.assign(document.createElement('ion-popover'), {
    component: 'popover-example-page',
    cssClass: 'my-custom-class',
    event: ev,
    translucent: true
  });
  document.body.appendChild(popover);

  await popover.present();

  const { role } = await popover.onDidDismiss();
  console.log('onDidDismiss resolved with role', role);
}

/* Using with useIonPopover Hook */

import React from 'react';
import {
  IonButton,
  IonContent,
  IonItem,
  IonList,
  IonListHeader,
  IonPage,
  useIonPopover,
} from '@ionic/react';

const PopoverList: React.FC<{
  onHide: () => void;
}> = ({ onHide }) => (
  <IonList>
    <IonListHeader>Ionic</IonListHeader>
    <IonItem button>Learn Ionic</IonItem>
    <IonItem button>Documentation</IonItem>
    <IonItem button>Showcase</IonItem>
    <IonItem button>GitHub Repo</IonItem>
    <IonItem lines="none" detail={false} button onClick={onHide}>
      Close
    </IonItem>
  </IonList>
);

const PopoverExample: React.FC = () => {
  const [present, dismiss] = useIonPopover(PopoverList, { onHide: () => dismiss() });

  return (
    <IonPage>
      <IonContent>
        <IonButton
          expand="block"
          onClick={(e) =>
            present({
              event: e.nativeEvent,
            })
          }
        >
          Show Popover
        </IonButton>
      </IonContent>
    </IonPage>
  );
};

CopyCopied

/* Using with IonPopover Component */

import React, { useState } from 'react';
import { IonPopover, IonButton } from '@ionic/react';

export const PopoverExample: React.FC = () => {
  const [popoverState, setShowPopover] = useState({ showPopover: false, event: undefined });

  return (
    <>
      <IonPopover
        cssClass='my-custom-class'
        event={popoverState.event}
        isOpen={popoverState.showPopover}
        onDidDismiss={() => setShowPopover({ showPopover: false, event: undefined })}
      >
        <p>This is popover content</p>
      </IonPopover>
      <IonButton onClick={
        (e: any) => {
          e.persist();
          setShowPopover({ showPopover: true, event: e })
        }}
      >
        Show Popover
      </IonButton>
    </>
  );
};

import { Component, h } from '@stencil/core';

import { popoverController } from '@ionic/core';

@Component({
  tag: 'popover-example',
  styleUrl: 'popover-example.css'
})
export class PopoverExample {
  async presentPopover(ev: any) {
    const popover = await popoverController.create({
      component: 'page-popover',
      cssClass: 'my-custom-class',
      event: ev,
      translucent: true
    });
    await popover.present();

    const { role } = await popover.onDidDismiss();
    console.log('onDidDismiss resolved with role', role);
  }

  render() {
    return [
      <ion-content>
        <ion-button onClick={(ev) => this.presentPopover(ev)}>Present Popover</ion-button>
      </ion-content>
    ];
  }
}

CopyCopied

import { Component, h } from '@stencil/core';

@Component({
  tag: 'page-popover',
  styleUrl: 'page-popover.css',
})
export class PagePopover {
  render() {
    return [
      <ion-list>
        <ion-item>
          <ion-label>Documentation</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>Feedback</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>Settings</ion-label>
        </ion-item>
      </ion-list>
    ];
  }
}

<template>
  <ion-content class="ion-padding">
    Popover Content
  </ion-content>
</template>

<script>
import { IonContent } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Popover',
  components: { IonContent }
});
</script>

CopyCopied

<template>
  <ion-page>
    <ion-content class="ion-padding">
      <ion-button @click="openPopover">Open Popover</ion-button>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonButton, IonContent, IonPage, popoverController } from '@ionic/vue';
import Popver from './popover.vue'

export default {
  components: { IonButton, IonContent, IonPage },
  methods: {
    async openPopover(ev: Event) {
      const popover = await popoverController
        .create({
          component: Popover,
          cssClass: 'my-custom-class',
          event: ev,
          translucent: true
        })
      await popover.present();

      const { role } = await popover.onDidDismiss();
      console.log('onDidDismiss resolved with role', role);
    },
  },
}
</script>

Các nhà phát triển cũng có thể sử dụng thành phần này trực tiếp trong mẫu của họ:

<template>
  <ion-button @click="setOpen(true, $event)">Show Popover</ion-button>
  <ion-popover
    :is-open="isOpenRef"
    css-class="my-custom-class"
    :event="event"
    :translucent="true"
    @didDismiss="setOpen(false)"
  >
    <Popover></Popover>
  </ion-popover>
</template>

<script>
import { IonButton, IonPopover } from '@ionic/vue';
import { defineComponent, ref } from 'vue';
import Popver from './popover.vue'

export default defineComponent({
  components: { IonButton, IonPopover, Popover },
  setup() {
    const isOpenRef = ref(false);
    const event = ref();
    const setOpen = (state: boolean, event?: Event) => {
      event.value = event; 
      isOpenRef.value = state;
    }
    return { isOpenRef, setOpen, event }
  }
});
</script>

Properties

animated
Description	If true, the popover will animate.
Attribute	animated
Type	boolean
Default	true
backdropDismiss
Description	If true, the popover will be dismissed when the backdrop is clicked.
Attribute	backdrop-dismiss
Type	boolean
Default	true
component
Description	The component to display inside of the popover.
Attribute	component
Type	Function | HTMLElement | null | string
componentProps
Description	The data to pass to the popover component.
Type	undefined | { [key: string]: any; }
cssClass
Description	Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
Attribute	css-class
Type	string | string[] | undefined
enterAnimation
Description	Animation to use when the popover is presented.
Type	((baseEl: any, opts?: any) => Animation) | undefined
event
Description	The event to pass to the popover animation.
Attribute	event
Type	any
keyboardClose
Description	Nếu true, bàn phím sẽ tự động bị loại bỏ khi lớp phủ được hiển thị.
Attribute	keyboard-close
Type	boolean
Default	true
leaveAnimation
Description	Animation sử dụng khi cửa sổ bật lên bị loại bỏ.
Type	((baseEl: any, opts?: any) => Animation) | undefined
mode
Description	mode xác định kiểu nền tảng nào sẽ sử dụng.
Attribute	mode
Type	"ios" | "md"
showBackdrop
Description	Nếu true, một phông nền sẽ được hiển thị phía sau cửa sổ bật lên.
Attribute	show-backdrop
Type	boolean
Default	true
translucent
Description	Nếu true, cửa sổ bật lên sẽ mờ. Chỉ áp dụng khi chế độ "ios"và thiết bị hỗ trợ backdrop-filter.
Attribute	translucent
Type	boolean
Default	false

Events

Name	Description
ionPopoverDidDismiss	Emitted sau khi cửa sổ bật lên đã loại bỏ.
ionPopoverDidPresent	Emitted  sau khi cửa sổ bật lên đã trình bày.
ionPopoverWillDismiss	Emitted  trước khi cửa sổ bật lên đã loại bỏ.
ionPopoverWillPresent	Emitted trước khi cửa sổ bật lên đã trình bày.

Methods

dismiss
Description	Loại bỏ lớp phủ bật lên sau khi nó đã được hiển thị.
Signature	dismiss(data?: any, role?: string | undefined) => Promise<boolean>
onDidDismiss
Description	Returns a promise that resolves when the popover did dismiss.
Signature	onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
onWillDismiss
Description	Returns lớp phủ cửa sổ bật lên sau khi nó đã được tạo.
Signature	onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
present
Description	Present the popover overlay after it has been created.
Signature	present() => Promise<void>

CSS Custom Properties

Name	Description
--backdrop-opacity	Độ mờ của phông nền
--background	Background của cửa sổ(popover) bật lên
--box-shadow	Bóng hộp của cửa sổ(popover) bật lên
--height	Chiều cao của cửa sổ(popover) bật lên
--max-height	Chiều cao tối đa của cửa sổ(popover) bật lên
--max-width	Chiều rộng tối đa của cửa sổ(popover) bật lên
--min-height	Chiều cao tối thiểu của cửa sổ( popover) bật lên
--min-width	Chiều rộng tối thiểu của cửa sổ(popover) bật lên
--width	Chiều rộng của cửa sổ( popover) bật lên