ion-popover
Properties
alignment
| Description | ポップオーバーのコンテンツを reference ポイントに揃える方法を記述します。デフォルトは ios モードでは "center" で、md モードでは "start" です。 |
| Attribute | alignment |
| Type | "center" ｜ "end" ｜ "start" ｜ undefined |
| Default | undefined |
animated
| Description | trueの場合、ポップオーバーはアニメーションを行います。 |
| Attribute | animated |
| Type | boolean |
| Default | true |
arrow
| Description | trueの場合、ios modeで動作しているとき、ポップオーバーは reference を指し示す矢印を表示します。 md modeでは適用されない。 |
| Attribute | arrow |
| Type | boolean |
| Default | true |
backdropDismiss
| Description | trueの場合、バックドロップがクリックされたときにポップオーバーが解除される。 |
| Attribute | backdrop-dismiss |
| Type | boolean |
| Default | true |
component
| Description | ポップオーバーの内側に表示するコンポーネントです。これを使う必要があるのは、JavaScriptフレームワークを使用していない場合だけです。そうでない場合は、ion-popoverの中にコンポーネントを入れるだけでいいです。 |
| Attribute | component |
| Type | Function ｜ HTMLElement ｜ null ｜ string ｜ undefined |
| Default | undefined |
componentProps
| Description | ポップオーバー・コンポーネントに渡すデータです。これを使う必要があるのは、JavaScriptフレームワークを使用していない場合だけです。そうでなければ、コンポーネントに直接propsを設定すればよいのです。 |
| Attribute | component-props |
| Type | undefined ｜ { [key: string]: any; } |
| Default | undefined |
dismissOnSelect
| Description | trueの場合、コンテンツがクリックされると、ポップオーバーは自動的に解除される。 |
| Attribute | dismiss-on-select |
| Type | boolean |
| Default | false |
enterAnimation
| Description | ポップオーバーが表示されたときに使用するアニメーションです。 |
| Attribute | enter-animation |
| Type | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| Default | undefined |
event
| Description | ポップオーバー・アニメーションに渡すイベントです。 |
| Attribute | event |
| Type | any |
| Default | undefined |
focusTrap
| Description | もし true なら、フォーカスはこのオーバーレイの外側には移動できない。falseの場合、フォーカスはオーバーレイの外側に移動することができる。 ほとんどの場合、このプロパティは trueのままにしておくべきである。このプロパティをfalseに設定すると、支援技術に依存しているユーザーがフォーカスを混乱した状態に移動できる可能性があるため、深刻なアクセシビリティの問題を引き起こす可能性があります。絶対に必要な場合のみ、このプロパティをfalse` に設定することをお勧めします。 開発者は、このオーバーレイがサードパーティライブラリからIonic以外のオーバーレイを表示している場合、フォーカストラッピングを無効にすることを検討するとよいでしょう。開発者は、サードパーティーのオーバーレイを表示するときにIonicオーバーレイのフォーカストラッピングを無効にし、サードパーティーのオーバーレイを解除してIonicオーバーレイにフォーカスを戻すときにフォーカストラッピングを再度有効にします。 |
| Attribute | focus-trap |
| Type | boolean |
| Default | true |
htmlAttributes
| Description | ポップオーバーに渡す追加属性。 |
| Attribute | html-attributes |
| Type | undefined ｜ { [key: string]: any; } |
| Default | undefined |
isOpen
| Description | trueの場合、ポップオーバーは開く。もし false ならば、ポップオーバーは閉じます。より細かく表示を制御する必要がある場合はこれを使用し、そうでない場合は popoverController または trigger プロパティを使用します。注意: ポップオーバーが閉じると isOpen は自動的に false に戻されません。あなたのコードでそれを行う必要があります。 |
| Attribute | is-open |
| Type | boolean |
| Default | false |
keepContentsMounted
| Description | trueの場合、ポップオーバーの作成時に ion-popover に渡されたコンポーネントが自動的にマウントされます。このコンポーネントは、ポップオーバーが削除されてもマウントされたままです。ただし、ポップオーバーが破棄されると、コンポーネントは破棄されます。このプロパティはリアクティブではないので、ポップオーバーを最初に作成するときにのみ使用する必要があります。 注：この機能は、Angular、React、VueなどのJavaScriptフレームワークのインラインポップオーバーにのみ適用されます。 |
| Attribute | keep-contents-mounted |
| Type | boolean |
| Default | false |
keyboardClose
| Description | trueの場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。 |
| Attribute | keyboard-close |
| Type | boolean |
| Default | true |
leaveAnimation
| Description | ポップオーバーが解除されたときに使用するアニメーションです。 |
| Attribute | leave-animation |
| Type | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| Default | undefined |
mode
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。 |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
reference
| Description | ポップオーバーを何に対して相対的に配置するかを記述します。もし "trigger" ならば、ポップオーバーはトリガーボタンに相対して配置されます。イベントを渡すと、event.targetによって決定されます。もし "event" ならば、ポップオーバーはトリガーアクションのx/y座標に相対的に配置されます。イベントを渡す場合、これはevent.clientXとevent.clientYを介して決定されます。 |
| Attribute | reference |
| Type | "event" ｜ "trigger" |
| Default | 'trigger' |
showBackdrop
| Description | trueの場合、ポップオーバーの後ろに背景が表示されます。このプロパティは、ポップオーバーが表示されたときに背景が画面を暗くするかどうかを制御します。このプロパティは、背景がアクティブであるかどうか、またはDOMに存在するかどうかを制御しません。 |
| Attribute | show-backdrop |
| Type | boolean |
| Default | true |
side
| Description | ポップオーバーを reference ポイントのどちら側に配置するかを記述します。"start" と "end" の値はRTLを意識しており、"left" と "right" の値はそうではない。 |
| Attribute | side |
| Type | "bottom" ｜ "end" ｜ "left" ｜ "right" ｜ "start" ｜ "top" |
| Default | 'bottom' |
size
| Description | ポップオーバーの幅を計算する方法を記述します。もし "cover" なら、ポップオーバーの幅はトリガーの幅に合わせます。auto"` の場合、ポップオーバーの幅は静的なデフォルト値に設定されます。 |
| Attribute | size |
| Type | "auto" ｜ "cover" |
| Default | 'auto' |
translucent
| Description | trueの場合、ポップオーバーは半透明になります。modeが "ios" で、デバイスが backdrop-filter をサポートしている場合にのみ適用されます。 |
| Attribute | translucent |
| Type | boolean |
| Default | false |
trigger
| Description | ポップオーバーを開かせるトリガー要素に対応するIDです。trigger-action`プロパティを使用して、ポップオーバーを開くためのインタラクションをカスタマイズすることができます。 |
| Attribute | trigger |
| Type | string ｜ undefined |
| Default | undefined |
triggerAction
| Description | どのようなトリガーとの相互作用でポップオーバーを開くべきかを記述します。 triggerプロパティが undefined の場合は適用されません。"click" の場合、トリガーが左クリックされたときにポップオーバーが表示されます。"hover" の場合、ポインタがトリガーの上に乗ったときにポップオーバーが表示されます。コンテキストメニューの場合、デスクトップでは右クリック、モバイルでは長押しでポップオーバーが表示されます。これは、デバイスの通常のコンテキストメニューが表示されるのを防ぐことにもなります。 |
| Attribute | trigger-action |
| Type | "click" ｜ "context-menu" ｜ "hover" |
| Default | 'click' |
Events
| Name | Description |
|---|---|
didDismiss | ポップオーバーが解散した後に発行されます。ionPopoverDidDismissの略記です。 |
didPresent | ポップオーバーが提示された後に発行されます。ionPopoverWillDismissの略記です。 |
ionPopoverDidDismiss | ポップオーバーが解除された後に発行されます。 |
ionPopoverDidPresent | ポップオーバーが表示された後に発行されます。 |
ionPopoverWillDismiss | ポップオーバーが解除される前に発行されます。 |
ionPopoverWillPresent | ポップオーバーが表示される前に発行されます。 |
willDismiss | ポップオーバーが解散する前に発行されます。ionPopoverWillDismissの略記です。 |
willPresent | ポップオーバーが提示される前に発行されます。ionPopoverWillPresentの略記です。 |
Methods
dismiss
| Description | ポップオーバーのオーバーレイが表示された後に閉じます。オーバーレイがまだ表示されていない場合は何もしません。表示されなかったオーバーレイを DOM から削除するには、remove メソッドを使用してください。 |
| Signature | dismiss(data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean> |
onDidDismiss
| Description | ポップオーバーが解除されたタイミングを解決するPromiseを返します。 |
| Signature | onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>> |
onWillDismiss
| Description | ポップオーバーが解除されるタイミングを解決するPromiseを返します。 |
| Signature | onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>> |
present
| Description | ポップオーバーが作成された後に、ポップオーバーを表示します。開発者は、マウス、タッチ、またはポインタイベントを渡すことで、そのイベントがディスパッチされた場所と相対的にポップオーバーを配置することができます。 |
| Signature | present(event?: MouseEvent ｜ TouchEvent ｜ PointerEvent ｜ CustomEvent) => Promise<void> |
CSS Shadow Parts
| Name | Description |
|---|---|
arrow | 参照要素を指し示す矢印。ios mode時のみ適用される。 |
backdrop | ion-backdrop要素です。 |
content | デフォルトslotのラッパー要素です。 |
CSS Custom Properties
| Name | Description |
|---|---|
--backdrop-opacity | 背景の不透明度 |
--backdrop-opacity | 背景の不透明度 |
--background | ポップオーバーの背景 |
--background | ポップオーバーの背景 |
--box-shadow | ポップオーバーのボックスシャドウ |
--box-shadow | ポップオーバーのボックスシャドウ |
--height | ポップオーバーの高さ |
--height | ポップオーバーの高さ |
--max-height | ポップオーバーの最大の高さ |
--max-height | ポップオーバーの最大の高さ |
--max-width | ポップオーバーの最大幅 |
--max-width | ポップオーバーの最大幅 |
--min-height | ポップオーバーの高さの最小値 |
--min-height | ポップオーバーの高さの最小値 |
--min-width | ポップオーバーの最小幅 |
--min-width | ポップオーバーの最小幅 |
--offset-x | ポップオーバーをX軸方向に移動させる量 |
--offset-x | ポップオーバーをX軸方向に移動させる量 |
--offset-y | ポップオーバーをY軸方向に移動させる量を指定します。 |
--offset-y | ポップオーバーをY軸方向に移動させる量を指定します。 |
--width | ポップオーバーの幅 |
--width | ポップオーバーの幅 |
Slots
| Name | Description |
|---|---|
| `` | コンテンツは .popover-content 要素の内部に配置される。 |