1"use strict";(self.webpackChunkionic_docs=self.webpackChunkionic_docs||[]).push([["27888"],{63704(e,n,t){t.r(n),t.d(n,{metadata:()=>i,default:()=>es,frontMatter:()=>en,contentTitle:()=>et,toc:()=>eo,assets:()=>ei});var i=JSON.parse('{"id":"api/list","title":"ion-list","description":"ion-list: Item List View Component for iOS and Android Apps","source":"@site/docs/api/list.md","sourceDirName":"api","slug":"/api/list","permalink":"/docs/api/list","draft":false,"unlisted":false,"editUrl":"https://github.com/ionic-team/ionic-docs/tree/main/docs/api/list.md","tags":[],"version":"current","frontMatter":{"title":"ion-list"},"sidebar":"api","previous":{"title":"ion-note","permalink":"/docs/api/note"},"next":{"title":"ion-list-header","permalink":"/docs/api/list-header"}}'),o=t(74848),l=t(28453);function s(e){let n={a:"a",code:"code",h3:"h3",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,l.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h3,{id:"prop-inset",children:"inset"}),"\n",(0,o.jsxs)(n.table,{children:[(0,o.jsx)(n.thead,{children:(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.th,{}),(0,o.jsx)(n.th,{})]})}),(0,o.jsxs)(n.tbody,{children:[(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:(0,o.jsx)(n.strong,{children:"Description"})}),(0,o.jsxs)(n.td,{children:[(0,o.jsx)(n.code,{children:"true"}),"\u306E\u5834\u5408\u3001\u30EA\u30B9\u30C8\u306E\u5468\u56F2\u306B\u4F59\u767D\u304C\u3067\u304D\u3001\u89D2\u304C\u4E38\u304F\u306A\u308B\u3002"]})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:(0,o.jsx)(n.strong,{children:"Attribute"})}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"inset"})})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:(0,o.jsx)(n.strong,{children:"Type"})}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"boolean"})})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:(0,o.jsx)(n.strong,{children:"Default"})}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"false"})})]})]})]}),"\n",(0,o.jsx)(n.h3,{id:"prop-lines",children:"lines"}),"\n",(0,o.jsxs)(n.table,{children:[(0,o.jsx)(n.thead,{children:(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.th,{}),(0,o.jsx)(n.th,{})]})}),(0,o.jsxs)(n.tbody,{children:[(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:(0,o.jsx)(n.strong,{children:"Description"})}),(0,o.jsx)(n.td,{children:"\u3059\u3079\u3066\u306E\u30A2\u30A4\u30C6\u30E0\u3067\u3001\u4E0B\u306E\u30DC\u30FC\u30C0\u30FC\u3092\u3069\u306E\u3088\u3046\u306B\u8868\u793A\u3055\u305B\u308B\u304B\u3002"})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:(0,o.jsx)(n.strong,{children:"Attribute"})}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"lines"})})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:(0,o.jsx)(n.strong,{children:"Type"})}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:'"full" \uFF5C "inset" \uFF5C "none" \uFF5C undefined'})})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:(0,o.jsx)(n.strong,{children:"Default"})}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"undefined"})})]})]})]}),"\n",(0,o.jsx)(n.h3,{id:"prop-mode",children:"mode"}),"\n",(0,o.jsxs)(n.table,{children:[(0,o.jsx)(n.thead,{children:(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.th,{}),(0,o.jsx)(n.th,{})]})}),(0,o.jsxs)(n.tbody,{children:[(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:(0,o.jsx)(n.strong,{children:"Description"})}),(0,o.jsxs)(n.td,{children:["mode\u306F\u3001\u3069\u306E\u30D7\u30E9\u30C3\u30C8\u30D5\u30A9\u30FC\u30E0\u306E\u30B9\u30BF\u30A4\u30EB\u3092\u4F7F\u7528\u3059\u308B\u304B\u3092\u6C7A\u5B9A\u3057\u307E\u3059\u3002",(0,o.jsx)("br",{}),(0,o.jsx)("br",{}),"This is a ",(0,o.jsx)(n.a,{href:"/docs/core-concepts/fundamentals#virtual-properties",children:"virtual property"})," that is set once during initialization and will not update if you change its value after the initial render."]})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:(0,o.jsx)(n.strong,{children:"Attribute"})}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"mode"})})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:(0,o.jsx)(n.strong,{children:"Type"})}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:'"ios" \uFF5C "md"'})})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:(0,o.jsx)(n.strong,{children:"Default"})}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"undefined"})})]})]})]})]})}function r(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(s,{...e})}):s(e)}function a(e){let n={p:"p",...(0,l.R)(),...e.components};return(0,o.jsx)(n.p,{children:"No events available for this component."})}function c(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(a,{...e})}):a(e)}function d(e){let n={code:"code",h3:"h3",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,l.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h3,{id:"method-close-sliding-items",children:"closeSlidingItems"}),"\n",(0,o.jsxs)(n.table,{children:[(0,o.jsx)(n.thead,{children:(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.th,{}),(0,o.jsx)(n.th,{})]})}),(0,o.jsxs)(n.tbody,{children:[(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:(0,o.jsx)(n.strong,{children:"Description"})}),(0,o.jsxs)(n.td,{children:["\u30EA\u30B9\u30C8\u5185\u3067 ",(0,o.jsx)(n.code,{children:"ion-item-sliding"})," \u304C\u4F7F\u7528\u3055\u308C\u3066\u3044\u308B\u5834\u5408\u3001\u3053\u306E\u30E1\u30BD\u30C3\u30C9\u306F\u958B\u3044\u3066\u3044\u308B\u30B9\u30E9\u30A4\u30C9\u30A2\u30A4\u30C6\u30E0\u3092\u9589\u3058\u308B\u3002 \u5B9F\u969B\u306B ",(0,o.jsx)(n.code,{children:"ion-item-sliding"})," \u304C\u9589\u3058\u3089\u308C\u305F\u5834\u5408\u306F ",(0,o.jsx)(n.code,{children:"true"})," \u3092\u8FD4\u3057\u307E\u3059\u3002"]})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:(0,o.jsx)(n.strong,{children:"Signature"})}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"closeSlidingItems() => Promise<boolean>"})})]})]})]})]})}function p(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}function m(e){let n={p:"p",...(0,l.R)(),...e.components};return(0,o.jsx)(n.p,{children:"No CSS shadow parts available for this component."})}function u(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}function h(e){let n={p:"p",...(0,l.R)(),...e.components};return(0,o.jsx)(n.p,{children:"No CSS custom properties available for this component."})}function x(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}function j(e){let n={p:"p",...(0,l.R)(),...e.components};return(0,o.jsx)(n.p,{children:"No slots available for this component."})}function g(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(j,{...e})}):j(e)}t(54441);var f=t(61794);function b(e){let n={code:"code",pre:"pre",...(0,l.R)(),...e.components};return(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-html",children:"<ion-list>\n <ion-item>\n <ion-label>Pok\xe9mon Yellow</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Mega Man X</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>The Legend of Zelda</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Pac-Man</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Super Mario World</ion-label>\n </ion-item>\n</ion-list>\n"})})}function v(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(b,{...e})}):b(e)}function I(e){let n={code:"code",pre:"pre",...(0,l.R)(),...e.components};return(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonItem, IonLabel, IonList } from '@ionic/react';\n\nfunction Example() {\n return (\n <IonList>\n <IonItem>\n <IonLabel>Pok\xe9mon Yellow</IonLabel>\n </IonItem>\n <IonItem>\n <IonLabel>Mega Man X</IonLabel>\n </IonItem>\n <IonItem>\n <IonLabel>The Legend of Zelda</IonLabel>\n </IonItem>\n <IonItem>\n <IonLabel>Pac-Man</IonLabel>\n </IonItem>\n <IonItem>\n <IonLabel>Super Mario World</IonLabel>\n </IonItem>\n </IonList>\n );\n}\nexport default Example;\n"})})}function w(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(I,{...e})}):I(e)}function C(e){let n={code:"code",pre:"pre",...(0,l.R)(),...e.components};return(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-html",children:"<template>\n <ion-list>\n <ion-item>\n <ion-label>Pok\xe9mon Yellow</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Mega Man X</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>The Legend of Zelda</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Pac-Man</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Super Mario World</ion-label>\n </ion-item>\n </ion-list>\n</template>\n\n<script setup lang=\"ts\">\n import { IonItem, IonLabel, IonList } from '@ionic/vue';\n<\/script>\n"})})}function L(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(C,{...e})}):C(e)}function y(e){let n={code:"code",pre:"pre",...(0,l.R)(),...e.components};return(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-html",children:"<ion-list>\n <ion-item>\n <ion-label>Pok\xe9mon Yellow</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Mega Man X</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>The Legend of Zelda</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Pac-Man</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Super Mario World</ion-label>\n </ion-item>\n</ion-list>\n"})})}function _(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(y,{...e})}):y(e)}function k(e){let n={code:"code",pre:"pre",...(0,l.R)(),...e.components};return(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:"import { Component } from '@angular/core';\nimport { IonItem, IonLabel, IonList } from '@ionic/angular';\n\n@Component({\n selector: 'app-example',\n templateUrl: 'example.component.html',\n styleUrls: ['example.component.css'],\n imports: [IonItem, IonLabel, IonList],\n}
1)\nexport class ExampleComponent {}\n"})})}function N(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(k,{...e})}):k(e)}function S(e){return(0,o.jsx)(f.A,{version:"9",code:{javascript:v,react:w,vue:L,angular:{files:{"src/app/example.component.html":_,"src/app/example.component.ts":N}}},src:"usage/v9/list/basic/demo.html",size:"300px"})}function R(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(S,{...e})}):S(e)}function M(e){let n={code:"code",pre:"pre",...(0,l.R)(),...e.components};return(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-html",children:'<ion-content color="light">\n <ion-list inset="true">\n <ion-item>\n <ion-label>Pok\xe9mon Yellow</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Mega Man X</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>The Legend of Zelda</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Pac-Man</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Super Mario World</ion-label>\n </ion-item>\n </ion-list>\n</ion-content>\n'})})}function A(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(M,{...e})}):M(e)}function E(e){let n={code:"code",pre:"pre",...(0,l.R)(),...e.components};return(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonContent, IonItem, IonLabel, IonList } from '@ionic/react';\n\nfunction Example() {\n return (\n <IonContent color=\"light\">\n <IonList inset={true}>\n <IonItem>\n <IonLabel>Pok\xe9mon Yellow</IonLabel>\n </IonItem>\n <IonItem>\n <IonLabel>Mega Man X</IonLabel>\n </IonItem>\n <IonItem>\n <IonLabel>The Legend of Zelda</IonLabel>\n </IonItem>\n <IonItem>\n <IonLabel>Pac-Man</IonLabel>\n </IonItem>\n <IonItem>\n <IonLabel>Super Mario World</IonLabel>\n </IonItem>\n </IonList>\n </IonContent>\n );\n}\nexport default Example;\n"})})}function $(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(E,{...e})}):E(e)}function O(e){let n={code:"code",pre:"pre",...(0,l.R)(),...e.components};return(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-html",children:'<template>\n <ion-content color="light">\n <ion-list :inset="true">\n <ion-item>\n <ion-label>Pok\xe9mon Yellow</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Mega Man X</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>The Legend of Zelda</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Pac-Man</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Super Mario World</ion-label>\n </ion-item>\n </ion-list>\n </ion-content>\n</template>\n\n<script setup lang="ts">\n import { IonContent, IonItem, IonLabel, IonList } from \'@ionic/vue\';\n<\/script>\n'})})}function T(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(O,{...e})}):O(e)}function P(e){let n={code:"code",pre:"pre",...(0,l.R)(),...e.components};return(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-html",children:'<ion-content color="light">\n <ion-list [inset]="true">\n <ion-item>\n <ion-label>Pok\xe9mon Yellow</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Mega Man X</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>The Legend of Zelda</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Pac-Man</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Super Mario World</ion-label>\n </ion-item>\n </ion-list>\n</ion-content>\n'})})}function V(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(P,{...e})}):P(e)}function F(e){let n={code:"code",pre:"pre",...(0,l.R)(),...e.components};return(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:"import { Component } from '@angular/core';\nimport { IonContent, IonItem, IonLabel, IonList } from '@ionic/angular';\n\n@Component({\n selector: 'app-example',\n templateUrl: 'example.component.html',\n styleUrls: ['example.component.css'],\n imports: [IonContent, IonItem, IonLabel, IonList],\n}
1)\nexport class ExampleComponent {}\n"})})}function W(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(F,{...e})}):F(e)}function D(e){return(0,o.jsx)(f.A,{version:"9",code:{javascript:A,react:$,vue:T,angular:{files:{"src/app/example.component.html":V,"src/app/example.component.ts":W}}},src:"usage/v9/list/inset/demo.html",size:"350px",includeIonContent:!1})}function B(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(D,{...e})}):D(e)}function Z(e){let n={code:"code",pre:"pre",...(0,l.R)(),...e.components};return(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-html",children:'<ion-list lines="full">\n <ion-item>\n <ion-label>Full Lines</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Full Lines</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Full Lines</ion-label>\n </ion-item>\n</ion-list>\n\n<ion-list lines="inset">\n <ion-item>\n <ion-label>Inset Lines</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Inset Lines</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Inset Lines</ion-label>\n </ion-item>\n</ion-list>\n\n<ion-list lines="none">\n <ion-item>\n <ion-label>No Lines</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>No Lines</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>No Lines</ion-label>\n </ion-item>\n</ion-list>\n'})})}function H(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(Z,{...e})}):Z(e)}function J(e){let n={code:"code",pre:"pre",...(0,l.R)(),...e.components};return(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'import React from \'react\';\nimport { IonItem, IonLabel, IonList } from \'@ionic/react\';\n\nfunction Example() {\n return (\n <>\n <IonList lines="full">\n <IonItem>\n <IonLabel>Full Lines</IonLabel>\n </IonItem>\n <IonItem>\n <IonLabel>Full Lines</IonLabel>\n </IonItem>\n <IonItem>\n <IonLabel>Full Lines</IonLabel>\n </IonItem>\n </IonList>\n\n <IonList lines="inset">\n <IonItem>\n <IonLabel>Inset Lines</IonLabel>\n </IonItem>\n <IonItem>\n <IonLabel>Inset Lines</IonLabel>\n </IonItem>\n <IonItem>\n <IonLabel>Inset Lines</IonLabel>\n </IonItem>\n </IonList>\n\n <IonList lines="none">\n <IonItem>\n <IonLabel>No Lines</IonLabel>\n </IonItem>\n <IonItem>\n <IonLabel>No Lines</IonLabel>\n </IonItem>\n <IonItem>\n <IonLabel>No Lines</IonLabel>\n </IonItem>\n </IonList>\n </>\n );\n}\nexport default Example;\n'})})}function z(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(J,{...e})}):J(e)}function U(e){let n={code:"code",pre:"pre",...(0,l.R)(),...e.components};return(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-html",children:'<template>\n <ion-list lines="full">\n <ion-item>\n <ion-label>Full Lines</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Full Lines</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Full Lines</ion-label>\n </ion-item>\n </ion-list>\n\n <ion-list lines="inset">\n <ion-item>\n <ion-label>Inset Lines</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Inset Lines</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Inset Lines</ion-label>\n </ion-item>\n </ion-list>\n\n <ion-list lines="none">\n <ion-item>\n <ion-label>No Lines</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>No Lines</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>No Lines</ion-label>\n </ion-item>\n </ion-list>\n</template>\n\n<script setup lang="ts">\n import { IonItem, IonLabel, IonList } from \'@ionic/vue\';\n<\/script>\n'})})}function X(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(U,{...e})}):U(e)}function Y(e){let n={code:"code",pre:"pre",...(0,l.R)(),...e.components};return(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-html",children:'<ion-list lines="full">\n <ion-item>\n <ion-label>Full Lines</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Full Lines</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Full Lines</ion-label>\n </ion-item>\n</ion-list>\n\n<ion-list lines="inset">\n <ion-item>\n <ion-label>Inset Lines</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Inset Lines</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>Inset Lines</ion-label>\n </ion-item>\n</ion-list>\n\n<ion-list lines="none">\n <ion-item>\n <ion-label>No Lines</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>No Lines</ion-label>\n </ion-item>\n <ion-item>\n <ion-label>No Lines</ion-label>\n </ion-item>\n</ion-list>\n'})})}function q(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(Y,{...e})}):Y(e)}function G(e){let n={code:"code",pre:"pre",...(0,l.R)(),...e.components};return(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:"import { Component } from '@angular/core';\nimport { IonItem, IonLabel, IonList } from '@ionic/angular';\n\n@Component({\n selector: 'app-example',\n templateUrl: 'example.component.html',\n styleUrls: ['example.component.css'],\n imports: [IonItem, IonLabel, IonList],\n}
1)\nexport class ExampleComponent {}\n"})})}function K(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(G,{...e})}):G(e)}function Q(e){return(0,o.jsx)(f.A,{version:"9",code:{javascript:H,react:z,vue:X,angular:{files:{"src/app/example.component.html":q,"src/app/example.component.ts":K}}},src:"usage/v9/list/lines/demo.html",size:"500px"})}function ee(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(Q,{...e})}):Q(e)}let en={title:"ion-list"},et,ei={},eo=[{value:"\u57FA\u672C\u7684\u306A\u4F7F\u3044\u65B9",id:"\u57FA\u672C\u7684\u306A\u4F7F\u3044\u65B9",level:2},{value:"Inset List",id:"inset-list",level:2},{value:"List Lines",id:"list-lines",level:2},{value:"\u30D7\u30ED\u30D1\u30C6\u30A3",id:"\u30D7\u30ED\u30D1\u30C6\u30A3",level:2},{value:"inset",id:"prop-inset",level:3},{value:"lines",id:"prop-lines",level:3},{value:"mode",id:"prop-mode",level:3},{value:"\u30A4\u30D9\u30F3\u30C8",id:"\u30A4\u30D9\u30F3\u30C8",level:2},{value:"\u30E1\u30BD\u30C3\u30C9",id:"\u30E1\u30BD\u30C3\u30C9",level:2},{value:"closeSlidingItems",id:"method-close-sliding-items",level:3},{value:"CSS Shadow Parts",id:"css-shadow-parts",level:2},{value:"CSS\u30AB\u30B9\u30BF\u30E0\u30D7\u30ED\u30D1\u30C6\u30A3",id:"css\u30AB\u30B9\u30BF\u30E0\u30D7\u30ED\u30D1\u30C6\u30A3",level:2},{value:"Slots",id:"slots",level:2}];function el(e){let n={a:"a",code:"code",h2:"h2",p:"p",...(0,l.R)(),...e.components},{Head:t}=n;return t||function(e,n){throw Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Head",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t,{children:[(0,o.jsx)("title",{children:"ion-list: Item List View Component for iOS and Android Apps"}),(0,o.jsx)("meta",{name:"description",content:"ion-lists\u306F\u3001\u30C6\u30AD\u30B9\u30C8\u3001\u30A2\u30A4\u30B3\u30F3\u3001\u30C8\u30B0\u30EB\u306A\u3069\u3092\u542B\u3080\u30A2\u30A4\u30C6\u30E0\u306E\u8907\u6570\u306E\u884C\u3067\u69CB\u6210\u3055\u308C\u3066\u3044\u307E\u3059\u3002iOS\u304A\u3088\u3073Android\u306EIonic\u30A2\u30D7\u30EA\u306E\u30EA\u30B9\u30C8\u30D3\u30E5\u30FC\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u306B\u3064\u3044\u3066\u8AAC\u660E\u3057\u307E\u3059\u3002"})]}),"\n","\n",(0,o.jsxs)(n.p,{children:["\u30EA\u30B9\u30C8\u306F\u3001Text\u3001Buttons\u3001Toggle\u3092\u542B\u3080\u3053\u3068 ",(0,o.jsx)(n.a,{href:"./item",children:"\u30A2\u30A4\u30C6\u30E0"})," \u306E\u8907\u6570\u306E\u884C\u3067\u69CB\u6210\u3055\u308C\u3066\u3044\u307E\u3059\u3002\n\u30A2\u30A4\u30B3\u30F3\u3084\u30B5\u30E0\u30CD\u30A4\u30EB\u306A\u3069\u3001\u3055\u307E\u3056\u307E\u306A\u6A5F\u80FD\u3092\u5099\u3048\u3066\u3044\u307E\u3059\u3002\u30EA\u30B9\u30C8\u306B\u306F\u4E00\u822C\u7684\u306B\u3001\u753B\u50CF\u3084\u30C6\u30AD\u30B9\u30C8\u306A\u3069\u3001\u985E\u4F3C\u3057\u305F\u30C7\u30FC\u30BF\u5185\u5BB9\u3092\u6301\u3064\u30A2\u30A4\u30C6\u30E0\u304C\u542B\u307E\u308C\u307E\u3059\u3002"]}),"\n",(0,o.jsxs)(n.p,{children:["\u30EA\u30B9\u30C8\u306F\u3001\u30A2\u30A4\u30C6\u30E0\u3092\u30B9\u30EF\u30A4\u30D7\u3057\u3066\u30AA\u30D7\u30B7\u30E7\u30F3\u3092\u8868\u793A\u3057\u305F\u308A\u3001\u30C9\u30E9\u30C3\u30B0\u3057\u3066\u30EA\u30B9\u30C8\u5185\u306E\u30A2\u30A4\u30C6\u30E0\u3092",(0,o.jsx)(n.a,{href:"./reorder",children:"\u4E26\u3073\u66FF\u3048"}),"\u3057\u305F\u308A\u3001\u30A2\u30A4\u30C6\u30E0\u3092\u524A\u9664\u3057\u305F\u308A\u3059\u308B\u306A\u3069\u306E\u64CD\u4F5C\u3092\u30B5\u30DD\u30FC\u30C8\u3057\u3066\u3044\u307E\u3059\u3002"]}),"\n",(0,o.jsx)(n.h2,{id:"\u57FA\u672C\u7684\u306A\u4F7F\u3044\u65B9",children:"\u57FA\u672C\u7684\u306A\u4F7F\u3044\u65B9"}),"\n","\n",(0,o.jsx)(R,{}),"\n",(0,o.jsx)(n.h2,{id:"inset-list",children:"Inset List"}),"\n",(0,o.jsxs)(n.p,{children:["\u30EA\u30B9\u30C8\u306B ",(0,o.jsx)(n.code,{children:"inset"})," \u30D7\u30ED\u30D1\u30C6\u30A3\u3092\u8FFD\u52A0\u3059\u308B\u3068\u3001\u30EA\u30B9\u30C8\u306E\u5468\u56F2\u306B\u30DE\u30FC\u30B8\u30F3\u304C\u9069\u7528\u3055\u308C\u307E\u3059\u3002\u307E\u305F\u3001",(0,o.jsx)(n.code,{children:"ios"}),"\u30E2\u30FC\u30C9\u3067\u306F\u3001\u30EA\u30B9\u30C8\u306B\u89D2\u4E38\u304C\u8FFD\u52A0\u3055\u308C\u307E\u3059\u3002"]}),"\n","\n",(0,o.jsx)(B,{}),"\n",(0,o.jsx)(n.h2,{id:"list-lines",children:"List Lines"}),"\n",(0,o.jsxs)(n.p,{children:["\u30EA\u30B9\u30C8\u306B ",(0,o.jsx)(n.code,{children:"lines"})," \u30D7\u30ED\u30D1\u30C6\u30A3\u3092\u8FFD\u52A0\u3059\u308B\u3068\u3001\u30EA\u30B9\u30C8\u5185\u306E\u3059\u3079\u3066\u306E\u30A2\u30A4\u30C6\u30E0\u306E\u4E0B\u5074\u306E\u30DC\u30FC\u30C0\u30FC\u3092\u8ABF\u6574\u3059\u308B\u3053\u3068\u304C\u3067\u304D\u307E\u3059\u3002 ",(0,o.jsx)(n.code,{children:'"full"'}),"\u306B\u8A2D\u5B9A\u3059\u308B\u3068\u5168\u5E45\u306E\u30DC\u30FC\u30C0\u30FC\u304C\u8868\u793A\u3055\u308C\u3001",(0,o.jsx)(n.code,{children:'"inset"'}),"\u306B\u8A2D\u5B9A\u3059\u308B\u3068\u5DE6padding\u3067\u8ABF\u6574\u3055\u308C\u305F\u30DC\u30FC\u30C0\u30FC\u304C\u8868\u793A\u3055\u308C\u3001",(0,o.jsx)(n.code,{children:'none"'}),"\u306B\u8A2D\u5B9A\u3059\u308B\u3068\u30DC\u30FC\u30C0\u30FC\u304C\u8868\u793A\u3055\u308C\u307E\u305B\u3093\u3002\u30EA\u30B9\u30C8\u5185\u306E\u30A2\u30A4\u30C6\u30E0\u306B ",(0,o.jsx)(n.code,{children:"lines"})," \u30D7\u30ED\u30D1\u30C6\u30A3\u304C\u8A2D\u5B9A\u3055\u308C\u3066\u3044\u308B\u5834\u5408\u306F\u3001\u30EA\u30B9\u30C8\u4E0A\u306E\u30D7\u30ED\u30D1\u30C6\u30A3\u3088\u308A\u3082\u305D\u3061\u3089\u304C\u512A\u5148\u3055\u308C\u307E\u3059\u3002"]}),"\n","\n",(0,o.jsx)(ee,{}),"\n",(0,o.jsx)(n.h2,{id:"\u30D7\u30ED\u30D1\u30C6\u30A3",children:"\u30D7\u30ED\u30D1\u30C6\u30A3"}),"\n",(0,o.jsx)(r,{}),"\n",(0,o.jsx)(n.h2,{id:"\u30A4\u30D9\u30F3\u30C8",children:"\u30A4\u30D9\u30F3\u30C8"}),"\n",(0,o.jsx)(c,{}),"\n",(0,o.jsx)(n.h2,{id:"\u30E1\u30BD\u30C3\u30C9",children:"\u30E1\u30BD\u30C3\u30C9"}),"\n",(0,o.jsx)(p,{}),"\n",(0,o.jsx)(n.h2,{id:"css-shadow-parts",children:"CSS Shadow Parts"}),"\n",(0,o.jsx)(u,{}),"\n",(0,o.jsx)(n.h2,{id:"css\u30AB\u30B9\u30BF\u30E0\u30D7\u30ED\u30D1\u30C6\u30A3",children:"CSS\u30AB\u30B9\u30BF\u30E0\u30D7\u30ED\u30D1\u30C6\u30A3"}),"\n",(0,o.jsx)(x,{}),"\n",(0,o.jsx)(n.h2,{id:"slots",children:"Slots"}),"\n",(0,o.jsx)(g,{})]})}function es(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(el,{...e})}):el(e)}},61794(e,n,t){t.d(n,{A:()=>X});var i,o,l=t(74848),s=t(96540),r=t(66497),a=t(52908);let c="__HTML_COMMENT_PLACEHOLDER_",d=/<!--[\s\S]*?-->/g,p=/^([ \t]*)((?:\/\/[^\n]*\n[ \t]*)+|\/\*[\s\S]*?\*\/\s*)?window\.Ionic\s*=\s
1*\{\s*config\s*:\s*(\{[\s\S]*?\})\s*,?\s*\};?[ \t]*/m,m=e=>{let n=e.indexOf("{"),t=e.lastIndexOf("}");return -1===n||-1===t||n>=t?"":e.slice(n+1,t)},u=e=>e?.mode?`{ 2 mode: ${JSON.stringify(e.mode)} 3}`:"{}",h=(e,n)=>{if(!e)return n;let t=m(n).trim();if(0===t.length)return e;let i=m(e).split("\n").filter(e=>e.trim().length>0);if(0===i.length)return`{ 4 ${t} 5}`;let o=Math.min(...i.map(e=>e.match(/^\s*/)?.[0].length??0)),l=i.map(e=>` ${e.slice(o)}`).join("\n").replace(/,$/,"");return`{ 6${l}, 7 ${t} 8}`},x=(e,n)=>e.split("\n").map((e,t)=>0===t?e:`${n}${e}`).join("\n"),j=(e,n,t,i)=>e.replace(n,(...e)=>{let n=e[1],o=e[e.length-2],l=e[e.length-1],s=l.lastIndexOf("\n",o-1)+1,r=l.slice(s,o).match(/^[ \t]*/)?.[0]??"";return i(x(h(n,t),r))}),g=(e,n)=>n?{...e,dependencies:{...e.dependencies,...n}}:e,f=(e,n)=>{a.A.openProject({template:"node",title:n?.title??"Ionic Docs Example",description:n?.description??"",files:e})},b=async(e,n)=>{let t=`v${n}`,i=await Promise.all(e.map(e=>fetch(`/docs/code/stackblitz/${t}/${e}`)));return await Promise.all(i.map(e=>e.text()))},v=async(e,n)=>{var t;let i,o,l,s=await b(["html/index.ts",n?.includeIonContent?"html/index.withContent.html":"html/index.html","html/variables.css","html/package.json","html/package-lock.json","html/tsconfig.json","html/vite.config.ts"],n.version),r=g(JSON.parse(s[3]),n?.dependencies),a="index.html",m={"package.json":JSON.stringify(r,null,2),"package-lock.json":s[4],"index.ts":s[0],[a]:s[1],"theme/variables.css":s[2],"tsconfig.json":s[5],"vite.config.ts":s[6],...n?.files};m[a]=(t=s[1],o=x((i=((e,n)=>{let t,i,o,{maskedHtml:l,restore:s}=(o=[],{maskedHtml:e.replace(d,e=>{let n=`${c}${o.length}__`;return o.push(e),n}),restore:e=>e.replace(RegExp(`${c}(\\d+)__`,"g"),(e,n)=>o[Number(n)])}),r=l.replace(p,(e,n,o,l)=>(o&&o.trim().length>0&&(i=`${n}${o.trim()}`),t=l,""));return{code:s(r=r.replace(/<script>\s*\n([ \t]*\n)+/g,"<script>\n").replace(/<script>\s*<\/script>/g,"").replace(/\n{3,}/g,"\n\n")),ionicConfig:h(t,n),leadingComment:i}})(e,u(n))).ionicConfig," "),l=((e,n)=>{if(!e)return"";let t=e.split("\n").filter(e=>e.trim().length>0);if(0===t.length)return"";let i=Math.min(...t.map(e=>e.match(/^\s*/)?.[0].length??0));return t.map(e=>`${n}${e.slice(i)}`).join("\n")})(i.leadingComment," "),t.replace(/{{ TEMPLATE }}/g,i.code).replace("</head>",` 9 <script> 10${l?`${l} 11`:""} window.Ionic = { 12 config: ${o} 13 }; 14 </script> 15</head> 16`)),f(m,n)},I=async(e,n)=>{let t=await b(["angular/package.json","angular/package-lock.json","angular/angular.json","angular/tsconfig.json","angular/tsconfig.app.json","angular/main.ts","angular/index.html","angular/app.routes.ts",n?.includeIonContent?"angular/app.component.withContent.ts":"angular/app.component.ts","angular/app.component.css",n?.includeIonContent?"angular/app.component.withContent.html":"angular/app.component.html","angular/example.component.ts","angular/styles.css","angular/global.css","angular/variables.css"],n.version),i=g(JSON.parse(t[0]),n?.dependencies),o="src/main.ts",l={"package.json":JSON.stringify(i,null,2),"package-lock.json":t[1],"angular.json":t[2],"tsconfig.json":t[3],"tsconfig.app.json":t[4],[o]:t[5],"src/index.html":t[6],"src/polyfills.ts":"9"===n.version?"":"import 'zone.js';","src/app/app.routes.ts":t[7],"src/app/app.component.ts":t[8],"src/app/app.component.css":t[9],"src/app/app.component.html":t[10],"src/app/example.component.ts":t[11],"src/app/example.component.html":e,"src/app/example.component.css":"","src/styles.css":t[12],"src/global.css":t[13],"src/theme/variables.css":t[14],...n?.files},s=u(n);l[o]="6"===n.version?j(l[o],/IonicModule\.forRoot\(\s*(\{[\s\S]*?\})?\s*\)/s,s,e=>`IonicModule.forRoot(${e})`):j(l[o],/provideIonicAngular\(\s*(\{[\s\S]*?\})?\s*\)/s,s,e=>`provideIonicAngular(${e})`),f(l,n)},w=async(e,n)=>{let t=await b(["react/index.tsx",n?.includeIonContent?"react/app.withContent.tsx":"react/app.tsx","react/variables.css","react/tsconfig.json","react/package.json","react/package-lock.json","react/index.html","react/vite.config.js","react/browserslistrc","react/eslintrc.js"],n.version),i=g(JSON.parse(t[4]),n?.depen
16dencies),o="src/App.tsx",l={".eslintrc.js":t[9],".browserslistrc":t[8],"vite.config.js":t[7],"index.html":t[6],"src/index.tsx":t[0],[o]:t[1],"src/main.tsx":e,"src/theme/variables.css":t[2],"tsconfig.json":t[3],"package.json":JSON.stringify(i,null,2),"package-lock.json":t[5],...n?.files,".stackblitzrc":`{ 17 "startCommand": "yarn run start" 18}`};l[o]=j(l[o],/setupIonicReact\(\s*(\{[\s\S]*?\})?\s*\)/s,u(n),e=>`setupIonicReact(${e})`),f(l,n)},C=async(e,n)=>{let t=await b(["vue/package.json","vue/package-lock.json","vue/index.html","vue/variables.css","vue/vite.config.ts","vue/main.ts",n?.includeIonContent?"vue/App.withContent.vue":"vue/App.vue","vue/tsconfig.json","vue/tsconfig.node.json"],n.version),i=g(JSON.parse(t[0]),n?.dependencies),o="src/main.ts",l={"src/App.vue":t[6],"src/components/Example.vue":e,[o]:t[5],"src/theme/variables.css":t[3],"index.html":t[2],"vite.config.ts":t[4],"package.json":JSON.stringify(i,null,2),"package-lock.json":t[1],"tsconfig.json":t[7],"tsconfig.node.json":t[8],...n?.files,".stackblitzrc":`{ 19 "startCommand": "yarn run dev" 20}`};l[o]=j(l[o],/\.use\(IonicVue(?:,\s*(\{[\s\S]*?\}))?\)/s,u(n),e=>`.use(IonicVue, ${e})`),f(l,n)};var L=t(83941),y=((i={}).JavaScript="javascript",i.Angular="angular",i.React="react",i.Vue="vue",i),_=((o={}).iOS="ios",o.MD="md",o),k=t(52617),N=t(34743),S=t(95419);function R({content:e,children:n}){let[t,i]=(0,s.useState)(!1),{refs:o,floatingStyles:r,context:a}=(0,k.we)({open:t,onOpenChange:i,placement:"bottom",middleware:[(0,N.cY)(10),(0,N.UU)(),(0,N.BN)({padding:5})],whileElementsMounted:S.ll}),{getReferenceProps:c,getFloatingProps:d}=(0,k.bv)([(0,k.Mk)(a,{move:!1}),(0,k.iQ)(a),(0,k.s9)(a),(0,k.It)(a,{role:"tooltip"})]),{isMounted:p,styles:m}=(0,k.DL)(a,{duration:{open:300,close:250}}),u=(0,k.SV)([o.setReference,n.props.ref]);return(0,l.jsxs)(l.Fragment,{children:[(0,s.cloneElement)(n,c({...n.props,ref:u})),p&&(0,l.jsx)(k.XF,{children:(0,l.jsx)("div",{ref:o.setFloating,className:"tooltip__root",style:r,...d(),children:(0,l.jsx)("div",{className:"tooltip",style:m,children:e})})})]})}var M=t(19863),A=t(80618),E=t(28584),$=t(20053);let O="tabNavItem_t9Ol",T="tabNavButton__N7i";function P(e){let{lazy:n,block:t,defaultValue:i,values:o,groupId:r,className:a}=e,[c,d]=(0,s.useState)(!1),[p,m]=(0,s.useState)(!1),u=(0,s.createRef)(),h=s.Children.map(e.children,e=>{if((0,s.isValidElement)(e)&&function(e){let{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)}),x=o??h.map(({props:{value:e,label:n,icon:t,attributes:i}})=>({value:e,label:n,attributes:i,icon:t})),j=(0,A.XI)(x,(e,n)=>e.value===n.value);if(j.length>0)throw Error(`Docusaurus error: Duplicate values "${j.map(e=>e.value).join(", ")}" found in <Tabs>. Every value needs to be unique.`);let g=null===i?i:i??h.find(e=>e.props.default)?.props.value??h[0]?.props.value;if(null!==g&&!x.some(e=>e.value===g))throw Error(`Docusaurus error: The <Tabs> has a defaultValue "${g}" but none of its children has the corresponding value. Available values are: ${x.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);let[f,b]=(0,s.useState)(g),v=[],{blockElementScrollPositionUntilNextRender:I}=(0,E.a_)(),w=e=>{let n=e.currentTarget,t=x[v.indexOf(n)].value;t!==f&&(I(n),b(t))},C=e=>{let n=null;switch(e.key){case"ArrowRight":{let t=v.indexOf(e.currentTarget)+1;n=v[t]||v[0];break}case"ArrowLeft":{let t=v.indexOf(e.currentTarget)-1;n=v[t]||v[v.length-1]}}n?.focus()};(0,s.useEffect)(()=>{d(u.current?.scrollLeft>40),m(u.current?.scrollWidth>u.current?.offsetWidth)},[r]);let L=void 0===x.find(e=>e.value===f),y=e=>L?e===x[0].value:e===f;return(0,l.jsxs)("div",{className:(0,$.A)("tabs-container","tabList_nZAZ"),children:[(0,l.jsx)("div",{className:(0,$.A)("tabs-nav","tabNav_gxPI"),children:(0,l.jsxs)("ul",{ref:u,role:"tablist","aria-orientation":"horizontal",className:(0,$.A)("tabs",{"tabs--block":t},a),onScroll:()=>{d(u.current?.scrollLeft>40),m(u.current?.scrollWidth>u.current?.offsetWidth)},children:[c&&(0,l.jsx)("div",{className:(0,$.A)("tabs__nav-item",O,"tabNavItemLeft_qnms"),children:(0,l.jsx)("button",{className:(0,$.A)("tabs__nav-button",T),onClick:()=>{u.current.scrollTo({left:u.current.scrollLeft-150,behavior:"smooth"})},children:(0,l.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 512 512",children:(0,l.jsx)("polyline",{points:"328 112 184 256 328 400",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"48px"})})})}),x.map(({value:e,label:n,icon:t,attributes:i})=>{let o=y(e);return(0,l.jsxs)("li",{role:"tab",tabIndex:o?0:-1,"aria-selected":o,ref:e=>
20v.push(e),onKeyDown:C,onFocus:w,onClick:w,...i,className:(0,$.A)("tabs__item","tabItem_VZd9",i?.className,{"tabs__item--active":o}),children:[t&&(0,l.jsx)("span",{className:(0,$.A)("tabs__icon","tabIcon_DCeC"),children:t}),n??e]},e)}),p&&(0,l.jsx)("div",{className:(0,$.A)("tabs__nav-item",O),children:(0,l.jsx)("button",{className:(0,$.A)("tabs__nav-button",T),onClick:()=>{u.current.scrollTo({left:u.current.scrollLeft+150,behavior:"smooth"})},children:(0,l.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 512 512",children:(0,l.jsx)("polyline",{points:"184 112 328 256 184 400",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"48px"})})})})]})}),n?(0,s.cloneElement)(h.filter(e=>y(e.props.value))[0],{className:"margin-top--md"}):(0,l.jsx)("div",{className:"margin-top--md",children:h.map((e,n)=>(0,s.cloneElement)(e,{key:n,className:`${e.props.className} ${!y(e.props.value)?"hidden":""}`}))})]})}function V(e){let n=(0,M.A)();return(0,l.jsx)(P,{...e},String(n))}function F({children:e,className:n}){return(0,l.jsx)("div",{role:"tabpanel",className:(0,$.A)("tabPanel_Fc1s",n),children:e})}let W=()=>(0,l.jsxs)("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,l.jsx)("path",{d:"M3.75 8.625L0.75 6L3.75 3.375",stroke:"#EB4700",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),(0,l.jsx)("path",{d:"M8.25 8.625L11.25 6L8.25 3.375",stroke:"#EB4700",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),D=()=>(0,l.jsx)("svg",{width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,l.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M6.78201 5.84221V7.56845C7.05944 7.71231 7.38757 7.82017 7.76639 7.8921C8.1452 7.96403 8.54444 8 8.96417 8C9.37323 8 9.7618 7.96045 10.1299 7.88131C10.4981 7.80221 10.8209 7.67183 11.0983 7.49021C11.3758 7.30862 11.5954 7.07124 11.7572 6.77814C11.9191 6.48503 12 6.12272 12 5.69117C12 5.37828 11.9538 5.10407 11.8613 4.86852C11.7688 4.63297 11.6354 4.42348 11.4611 4.24007C11.2869 4.05666 11.0779 3.8921 10.8342 3.74645C10.5906 3.60079 10.3158 3.46324 10.0099 3.33379C9.78583 3.24028 9.58486 3.14948 9.40701 3.06138C9.22916 2.97324 9.078 2.88335 8.9535 2.79166C8.829 2.69993 8.73297 2.60283 8.6654 2.50035C8.59783 2.39783 8.56401 2.28186 8.56401 2.15238C8.56401 2.03372 8.59425 1.92672 8.65473 1.83141C8.71521 1.7361 8.80057 1.65431 8.91082 1.58597C9.0211 1.51766 9.15624 1.46459 9.3163 1.42683C9.47639 1.38907 9.6542 1.37021 9.84985 1.37021C9.99211 1.37021 10.1424 1.381 10.3007 1.40255C10.459 1.42414 10.6181 1.45741 10.7782 1.50234C10.9383 1.54731 11.0939 1.60397 11.2451 1.67228C11.3962 1.74062 11.5358 1.81972 11.6639 1.90966V0.29669C11.4042 0.196 11.1206 0.12
201379 10.8129 0.0728276C10.5052 0.0242758 10.1522 0 9.75382 0C9.34831 0 8.96417 0.0440687 8.60138 0.132172C8.23858 0.220276 7.91935 0.357828 7.64366 0.544828C7.368 0.731862 7.15016 0.970103 6.9901 1.25962C6.83005 1.5491 6.75 1.89524 6.75 2.29803C6.75 2.81231 6.89673 3.25107 7.19018 3.61431C7.4836 3.97752 7.9291 4.285 8.52668 4.53676C8.76143 4.63386 8.98019 4.72914 9.18293 4.82266C9.38567 4.91617 9.56086 5.01328 9.70844 5.11397C9.85606 5.21465 9.97255 5.32434 10.0579 5.44303C10.1433 5.56169 10.186 5.69655 10.186 5.84762C10.186 5.9591 10.1593 6.06248 10.1059 6.15779C10.0526 6.2531 9.97166 6.33579 9.86318 6.40593C9.75471 6.47607 9.61953 6.5309 9.4577 6.57045C9.29584 6.61003 9.10647 6.62979 8.88948 6.62979C8.51956 6.62979 8.15322 6.56417 7.79039 6.4329C7.42759 6.30165 7.09145 6.10476 6.78201 5.84221ZM3.91295 1.58903H6.10227V0.172414H0V1.58903H2.17861V7.89655H3.91295V1.58903Z",fill:"#3178C6"})}),B=()=>(0,l.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 512 512",children:[(0,l.jsx)("polygon",{fill:"#33475A",points:"256 144.03 200.51 47.92 121.08 47.92 256 281.61 390.92 47.92 311.49 47.92 256 144.03"}),(0,l.jsx)("polygon",{fill:"#3FB27F",points:"409.4 47.92 256 313.61 102.6 47.92 15.74 47.92 256 464.08 496.26 47.92 409.4 47.92"})]}),Z=()=>(0,l.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",height:"12",width:"12",children:(0,l.jsx)("path",{d:"M20.414,2H5V30H27V8.586ZM7,28V4H19v6h6V28Z",fill:"#3178C6"})}),H=()=>(0,l.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",height:"12",width:"12",children:[(0,l.jsx)("polygon",{points:"5.902 27.201 3.656 2 28.344 2 26.095 27.197 15.985 30 5.902 27.201",fill:"#1572b6"}),(0,l.jsx)("polygon",{points:"16 27.858 24.17 25.593 26.092 4.061 16 4.061 16 27.858",fill:"#33a9dc"}),(0,l.jsx)("polygon",{points:"16 13.191 20.09 13.191 20.372 10.026 16 10.026 16 6.935 16.011 6.935 23.75 6.935 23.676 7.764 22.917 16.282 16 16.282 16 13.191",fill:"#fff"}),(0,l.jsx)("polygon",{points:"16.019 21.218 16.005 21.222 12.563 20.292 12.343 17.827 10.67 17.827 9.24 17.827 9.673 22.68 16.004 24.438 16.019 24.434 16.019 21.218",fill:"#ebebeb"}),(0,l.jsx)("polygon",{points:"19.827 16.151 19.455 20.29 16.008 21.22 16.008 24.436 22.344 22.68 22.391 22.158 22.928 16.151 19.827 16.151",fill:"#fff"}),(0,l.jsx)("polygon",{points:"16.011 6.935 16.011 8.855 16.011 10.018 16.011 10.026 8.555 10.026 8.555 10.026 8.545 10.026 8.483 9.331 8.342 7.764 8.268 6.935 16.011 6.935",fill:"#ebebeb"}),(0,l.jsx)("polygon",{points:"16 13.191 16 15.111 16 16.274 16 16.282 12.611 16.282 12.611 16.282 12.601 16.282 12.539 15.587 12.399 14.02 12.325 13.191 16 13.191",fill:"#ebebeb"})]}),J=()=>(0,l.jsxs)("div",{className:"icon__dots",children:[(0,l.jsx)("svg",{viewBox:"0 0 64 64",children:(0,l.jsx)("circle",{transform:"translate(32,32)",r:"6"})}),(0,l.jsx)("svg",{viewBox:"0 0 64 64",children:(0,l.jsx)("circle",{transform:"translate(32,32)",r:"6"})}),(0,l.jsx)("svg",{viewBox:"0 0 64 64",children:(0,l.jsx)("circle",{transform:"translate(32,32)",r:"6"})})]}),z=(0,s.forwardRef)(({isSelected:e,handleClick:n,title:t,label:i,disabled:o},s)=>{let r=(0,l.jsx)("button",{title:o?void 0:t,disabled:o,className:`playground__control-button ${e?"playground__control-button--selected":""}`,onClick:n,"data-text":i,ref:s,children:i});return o?(0,l.jsx)(R,{content:`Unavailable for ${i}`,children:(0,l.jsx)("div",{children:r})}):r}),U=({language:e,usageTarget:n,setAndSaveUsageTarget:t,disabled:i})=>{let o=(0,s.useRef)(null),r=y[e];return(0,l.jsx)(z,{isSelected:n===r,handleClick:()=>{t(r,o.current)},title:`Show ${e} code`,label:e,disabled:i,ref:o})};function X({code:e,title:n,description:i,src:o,size:a="small",mode:c,devicePreview:d,showConsole:p,includeIonContent:m=!0,version:u,defaultFramework:h}){let x;if(!e||0===Object.keys(e).length)return void console.warn("No code usage examples provided for this Playground example.");if(void 0!==c&&"ios"!==c&&"md"!==c)return void console.warn(`Invalid mode provided: ${c}. Accepted values are: "ios" or "md".`);if(void 0===u)return void console.warn('You must specify a `version` for the Playground example. For example: <Playground version="7" />');let{colorMode:j}=(0,L.G)(),g=(0,M.A)(),f=(0,s.useRef)(null),b=(0,s.useRef)(null),k=(0,s.useRef)(null),N=(0,s.useRef)(null),S=(0,s.useRef)(null),{blockElementScrollPositionUntilNextRender:A}=(0,E.a_)(),$=()=>{if(c)return c;if(g){let e=localStorage.getItem(ee);if(e)return e}return _.iOS},O=()=>{if(h&&void 0!==e[h])return h;if(g){let n=localStorage.getItem(Q);if(n&&void 0!==e[n])return n}return void 0!==e[y.Angular]?y.Angular:Object.keys(e)[0]}
20,T=Y[a]||a,[P,K]=(0,s.useState)(O()),[ei,eo]=(0,s.useState)($()),[el,es]=(0,s.useState)({}),[er,ea]=(0,s.useState)(!1),[ec,ed]=(0,s.useState)(!1),[ep,em]=(0,s.useState)("dark"===j),[eu,eh]=(0,s.useState)([]),[ex,ej]=(0,s.useState)([]),[eg,ef]=(0,s.useState)(0),[eb,ev]=(0,s.useState)(!1),eI=e=>{eo(e),g&&(localStorage.setItem(ee,e),window.dispatchEvent(new CustomEvent(et,{detail:e})))},ew=(e,n)=>{K(e),g&&(localStorage.setItem(Q,e),A(n),window.dispatchEvent(new CustomEvent(en,{detail:e})))},eC=async()=>{if(k.current&&N.current){await Promise.all([q(k.current),q(N.current)]);let e={darkMode:ep};k.current&&k.current.contentWindow.postMessage(e),N.current&&N.current.contentWindow.postMessage(e)}},eL=(e,n)=>{"ios"===n?k.current=e:N.current=e,k.current&&N.current&&eC()};(0,s.useEffect)(()=>{em("dark"===j)},[j]),(0,s.useEffect)(()=>{eC()},[ep]),(0,s.useEffect)(()=>{(async()=>{await Promise.all([q(k.current),q(N.current)]),ed(!0)})()},[er]),(0,s.useEffect)(()=>{p&&(k.current&&k.current.contentWindow.addEventListener("console",e=>{ej(n=>[...n,e.detail]),S.current.scrollTo(0,S.current.scrollHeight)}),N.current&&N.current.contentWindow.addEventListener("console",e=>{eh(n=>[...n,e.detail]),S.current.scrollTo(0,S.current.scrollHeight)}))},[ec,eg]),(0,s.useEffect)(()=>{t.e("5812").then(t.bind(t,92607)).then(e=>e.defineCustomElement())}),(0,s.useEffect)(()=>{new IntersectionObserver(e=>{let n=e[0];ev(n.isIntersecting),n.isIntersecting&&(eo($()),h||K(O()),er||ea(!0))},{threshold:0}).observe(f.current)});let ey=e=>{let n=e.detail;Object.values(_).includes(n)&&eo(n)},e_=e=>{let n=e.detail;Object.values(y).includes(n)&&K(n)};(0,s.useEffect)(()=>(g&&eb&&(window.addEventListener(et,ey),window.addEventListener(en,e_)),()=>{window.removeEventListener(et,ey),window.removeEventListener(en,e_)}),[g,eb]);let ek=ei===_.iOS,eN=ei===_.MD,eS=(0,r.Ay)(`${o}?ionic:mode=${_.iOS}`),eR=(0,r.Ay)(`${o}?ionic:mode=${_.MD}`),eM=e[P]?.files!==void 0;async function eA(){k.current&&k.current.contentWindow.location.reload(),N.current&&N.current.contentWindow.location.reload(),ej([]),eh([]),await Promise.all([G(k.current),G(N.current)]),ef(e=>e+1)}function eE(e,n){let t=n;return t=t.replace(/[^a-zA-Z0-9]/g,"_"),`playground_${e}_${t}`}(0,s.useEffect)(()=>{let n={};Object.keys(e).forEach(t=>{if("function"==typeof e[t]){let i=e[t];n[t]=(0,l.jsx)(i,{})}else if("object"==typeof e[t]){let i={};for(let n of Object.keys(e[t].files)){let o=e[t].files[n];i[`${n}`]=(0,l.jsx)(o,{})}n[t]=i}}),es(n)},[]);let e$=(0,s.useMemo)(()=>Object.keys(y).sort(),[]);return(0,l.jsxs)("div",{className:"playground",ref:f,children:[(0,l.jsxs)("div",{className:`playground__container ${p?"playground__container--has-console":""}`,children:[(0,l.jsxs)("div",{className:"playground__control-toolbar",children:[(0,l.jsx)("div",{className:"playground__control-group",children:e$.map(n=>{let t=void 0!==e[y[n]];return(0,l.jsx)(U,{language:n,usageTarget:P,setAndSaveUsageTarget:ew,disabled:!t},`code-block-${n}`)})}),(0,l.jsxs)("div",{className:"playground__control-group",children:[(0,l.jsx)(z,{disabled:c&&"md"===c,isSelected:ek,handleClick:()=>eI(_.iOS),title:"iOS mode",label:"iOS"}),(0,l.jsx)(z,{disabled:c&&"ios"===c,isSelected:eN,handleClick:()=>eI(_.MD),title:"MD mode",label:"MD"})]}),(0,l.jsxs)("div",{className:"playground__control-group playground__control-group--end",children:[(0,l.jsx)(R,{content:"Open in StackBlitz",children:(0,l.jsx)("button",{className:"playground__icon-button playground__icon-button--primary",onClick:function(t){let o={title:n,description:i,includeIonContent:m,mode:ek?"ios":"md",version:u},l=b.current.querySelector("code").outerText;switch(eM&&(o.files=Object.keys(el[P]).map(e=>{let n=f.current.querySelector(`#${eE(P,e)} code`),t=n.outerText;if(0===t.trim().length){let e=document.createElement("div");e.innerHTML=n.innerHTML,t=e.outerText}return{[e]:t}}).reduce((e,n)=>({...e,...n}),{}),o.dependencies=e[P].dependencies),P){case y.Angular:I(l,o);break;case y.JavaScript:v(l,o);break;case y.React:w(l,o);break;case y.Vue:C(l,o)}},children:(0,l.jsx)("svg",{"aria-hidden":"true",width:"10",height:"14",viewBox:"0 0 10 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,l.jsx)("path",{d:"M5.53812 5.91743L7.52915 1L1 8.01835H4.42601L2.42601 13L9 5.91743H5.53812Z",stroke:"#73849A",strokeLinejoin:"round"})})})}),(0,l.jsx)(R,{content:eM?"For multi-file examples, use the copy buttons on the code blocks":"Copy source code",children:(0,l.jsx)("button",{className:`playground__icon-button playground__icon-button--primary ${eM?"playground__icon-button--disabled":""}`,"aria-disabled":eM,onClick:function(){eM||b.current.querySelector("button").click()},children:(0,l.jsxs)("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",children:[(0,l.jsx)("path",{d:"M2.06667 9V9C1.47756 9 1 8.52244 1 7.93333V3C1 1.89543 1.89543 1 3 1H7.93333C8.52244 1 9 1.47756 9 2.06667V2.06667",stroke:"current"}
20),(0,l.jsx)("rect",{x:"3",y:"3",width:"8",height:"8",rx:"1.5",stroke:"current"})]})})}),(0,l.jsx)(R,{content:"Reset demo",children:(0,l.jsx)("button",{className:"playground__icon-button",onClick:eA,children:(0,l.jsxs)("svg",{"aria-hidden":"true",width:"10",height:"12",viewBox:"0 0 10 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,l.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M2.22215 2.96247C3.0444 2.42025 4.01109 2.13084 5 2.13084C5.63538 2.13084 6.08146 2.15202 6.39321 2.18615C6.68142 2.2177 6.92148 2.26571 7.08584 2.36392C7.17445 2.41686 7.31584 2.52988 7.35221 2.73039C7.38869 2.93151 7.29402 3.07964 7.24155 3.14415C7.18678 3.21149 7.126 3.25445 7.09468 3.275C7.07632 3.28704 7.06001 3.29656 7.04754 3.30345C7.0412 3.30696 7.03557 3.30995 7.03082 3.3124C7.02933 3.31317 7.02792 3.31389 7.0266 3.31456C7.0258 3.31496 7.02503 3.31535 7.02429 3.31572C7.02331 3.31621 7.02238 3.31667 7.0215 3.3171L7.02023 3.31773C7.01994 3.31787 7.01905 3.31831 6.81818 2.91589L7.01905 3.31831C6.79385 3.42779 6.52136 3.33637 6.41043 3.11412C6.40662 3.1065 6.40305 3.09881 6.39972 3.09108C6.36829 3.08669 6.33284 3.08224 6.29298 3.07787C6.02849 3.04892 5.61974 3.02804 5 3.02804C4.1909 3.02804 3.39996 3.26482 2.72721 3.70846C2.05447 4.15209 1.53013 4.78264 1.22049 5.52038C0.910864 6.25812 0.82985 7.0699 0.987699 7.85307C1.14555 8.63625 1.53517 9.35564 2.10729 9.92028C2.67942 10.4849 3.40835 10.8694 4.2019 11.0252C4.99546 11.181 5.81801 11.1011 6.56552 10.7955C7.31304 10.4899 7.95195 9.97241 8.40147 9.30847C8.85098 8.64452 9.09091 7.86394 9.09091 7.06542C9.09091 6.81767 9.29442 6.61682 9.54545 6.61682C9.79649 6.61682 10 6.81767 10 7.06542C10 8.04139 9.70675 8.99544 9.15735 9.80692C8.60794 10.6184 7.82705 11.2509 6.91342 11.6244C5.99979 11.9979 4.99445 12.0956 4.02455 11.9052C3.05464 11.7148 2.16373 11.2448 1.46447 10.5547C0.765206 9.86458 0.289002 8.98532 0.0960758 8.02811C-0.0968502 7.07089 0.00216639 6.07871 0.380605 5.17704C0.759043 4.27536 1.3999 3.50469 2.22215 2.96247Z",fill:"#73849A"}),(0,l.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M4.67859 0.131391C4.8561 -0.0437971 5.1439 -0.0437971 5.32141 0.131391L7.59414 2.37438C7.77165 2.54957 7.77165 2.83361 7.59414 3.00879L5.32141 5.25178C5.1439 5.42697 4.8561 5.42697 4.67859 5.25178C4.50108 5.0766 4.50108 4.79256 4.67859 4.61737L6.6299 2.69159L4.67859 0.765805C4.50108 0.590616 4.50108 0.30658 4.67859 0.131391Z",fill:"#73849A"})]})})}),(0,l.jsx)(R,{content:"Report an issue",children:(0,l.jsx)("a",{className:"playground__icon-button",href:"https://github.com/ionic-team/ionic-docs/issues/new/choose","aria-label":"Report an issue",target:"_blank",rel:"noreferrer",children:(0,l.jsx)("svg",{"aria-hidden":"true",width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",children:(0,l.jsx)("path",{d:"M6 0C2.68661 0 0 2.75625 0 6.15268C0 8.87143 1.71964 11.175 4.10357 11.9893C4.14107 11.9973 4.17321 12 4.20536 12C4.42768 12 4.51339 11.8366 4.51339 11.6946C4.51339 11.5473 4.50804 11.1616 4.50536 10.6473C4.28036 10.6982 4.07946 10.7196 3.9 10.7196C2.74554 10.7196 2.48304 9.82232 2.48304 9.82232C2.20982 9.1125 1.81607 8.92232 1.81607 8.92232C1.29375 8.55536 1.81339 8.54464 1.85357 8.54464H1.85625C2.45893 8.59821 2.775 9.18214 2.775 9.18214C3.075 9.70714 3.47679 9.85446 3.83571 9.85446C4.11696 9.85446 4.37143 9.76339 4.52143 9.69375C4.575 9.29732 4.73036 9.02679 4.90179 8.87143C3.57054 8.71607 2.16964 8.18839 2.16964 5.83125C2.16964 5.15893 2.40268 4.60982 2.78571 4.18125C2.72411 4.02589 2.51786 3.39911 2.84464 2.55268C2.84464 2.55268 2.8875 2.53929 2.97857 2.53929C3.19554 2.53929 3.68571 2.62232 4.49464 3.18482C4.97411 3.04821 5.48571 2.98125 5.99732 2.97857C6.50625 2.98125 7.02054 3.04821 7.5 3.18482C8.30893 2.62232 8.79911 2.53929 9.01607 2.53929C9.10714 2.53929 9.15 2.55268 9.15 2.55268C9.47679 3.39911 9.27054 4.02589 9.20893 4.18125C9.59196 4.6125 9.825 5.16161 9.825 5.83125C9.825 8.19375 8.42143 8.71339 7.08482 8.86607C7.29911 9.05625 7.49196 9.43125 7.49196 10.0045C7.49196 10.8268 7.48393 11.4911 7.48393 11.692C7.48393 11.8366 7.56696 12 7.78929 12C7.82143 12 7.85893 11.9973 7.89643 11.9893C10.283 11.175 12 8.86875 12 6.15268C12 2.75625 9.31339 0 6 0Z",fill:"#73849A"})})})})]})]}),er?[(0,l.jsxs)("div",{className:"playground__preview",children:[!ec&&(0,l.jsx)("div",{className:"playground__loading",children:(0,l.jsx)(J,{})}),d?[(0,l.jsx)("div",{className:ek?"frame-visible":"frame-hidden","aria-hidden":ek?null:"true",children:(0,l.jsx)("device-preview",{mode:"ios",children:(0,l.jsx)("iframe",{height:T,ref:e=>eL(e,"ios"),src:eS})})},"ios-iframe"),(0,l.jsx)("div",{className:eN?"frame-visible":"frame-hidden","aria-hidden":eN?null:"true",children:(0,l.jsx)("device-preview",{mode:"md",children:(0,l.jsx)("iframe",{height:T,ref:e=>eL(e,"md"),src:eR})})},"md-iframe")]:[(0,l.jsx)("iframe",{height:T,className:ek?"":"frame-hidden",ref:e=>eL(e,"ios"),src:eS,"aria-hidden":ek?null:"true"},"ios-iframe"),(0,l.jsx)("iframe",{height:T,className:eN?"":"frame-hidden",ref:e=>eL(e,"md"),src:eR,"aria-hidden":eN?null:"true"},"md-iframe")]]},"preview")]:[]]}),p&&(x=ei===_.iOS?ex:eu,(0,l.jsxs)("div",{className:"playground__console",children:[(0,l.jsx)("div",{className:"playground__console-header",children:(0,l.jsx)("code",{children:"Console"})}),(0,l.jsx)("div",{className:"playground__console-body",ref:S,children:0===x.length?(0,l.jsx)("div",{className:"playground__console-item playground__console-item--placeholder",children:(0,l.jsx)("code",{children:"Console messages will appear here when logged from the example above."})}):x.map((e,n)=>(0,l.jsxs)("div",{className:`playground__console-item playground__console-item--${e.type}`,children:["log"!==e.type&&(0,l.jsx)("div",{className:"playground__console-icon",children:"warning"===e.type?"\u26A0":"\u274C"}),(0,l.jsx)("code",{children:e.message})]},n))})]})),(0,l.jsx)("div",{ref:b,className:"playground__code-block",children:function(){if(e[P])return eM?null==el[P]?null:(0,l.jsx)(V,{groupId:P,className:"playground__tabs",children:Object.keys(el[P]).map(e=>(0,l.jsx)(F,{className:"playground__tab-item",value:e,label:e,icon:function(e){switch(e.slice(e.lastIndexOf(".")+1)){case"ts":case"tsx":return(0,l.jsx)(D,{});case"html":return(0,l.jsx)(W,{});case"vue":return(0,l.jsx)(B,{});case"css":return(0,l.jsx)(H,{});default:return(0,l.jsx)(Z,{})}}(e),children:(0,l.jsx)("div",{id:eE(P,e),children:el[P][e]})},e))}):el[P]}()})]})}let Y={xsmall:"100px",small:"200px",medium:"400px",large:"600px",xlarge:"800px"},q=e=>K(e)?Promise.resolve():new Promise(n=>{e&&e.contentWindow.addEventListener("demoReady",()=>{n()})}),G=e=>new Promise(n=>{let t=()=>{e.removeEventListener("load",t),n()};e&&e.addEventListener("load",t)}),K=e=>!!e&&!0===e.contentWindow.demoReady,Q="playground_usage_target",ee="playground_mode",en="playground-usage-target-updated",et="playground-event-updated"},54441(e,n,t){t.d(n,{A:()=>r});var i=t(74848);t(96540);var o=t(20053),l=t(66497),s=t(95310);function r({type:e,...n}){let t=(0,l.Ay)(`reference/glossary#${e}`);return(0,i.jsx)(s.A,{to:t,...n,className:(0,o.A)(n.className,"encapsulation-pill","encapsulationPill_weMM"),children:e})}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.