119833b9.e78009f2.js

js ionicframework.jp collected 2026-10-04 01:41:31 UTC 91,633 bytes, 21 lines download raw bytes

1"use strict";(self.webpackChunkionic_docs=self.webpackChunkionic_docs||[]).push([["1200"],{13024(n,e,o){o.d(e,{Ay:()=>f,RM:()=>x});var t=o(74848),r=o(28453),i=o(61794);function l(n){let e={code:"code",pre:"pre",...(0,r.R)(),...n.components};return(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-html",children:'<ion-header>\n  <ion-toolbar>\n    <ion-title>Toolbar</ion-title>\n    <ion-progress-bar type="indeterminate"></ion-progress-bar>\n  </ion-toolbar>\n</ion-header>\n'})})}function s(n={}){let{wrapper:e}={...(0,r.R)(),...n.components};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(l,{...n})}):l(n)}function a(n){let e={code:"code",pre:"pre",...(0,r.R)(),...n.components};return(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonHeader, IonProgressBar, IonTitle, IonToolbar } from '@ionic/react';\n\nfunction Example() {\n  return (\n    <IonHeader>\n      <IonToolbar>\n        <IonTitle>Toolbar</IonTitle>\n        <IonProgressBar type=\"indeterminate\"></IonProgressBar>\n      </IonToolbar>\n    </IonHeader>\n  );\n}\nexport default Example;\n"})})}function c(n={}){let{wrapper:e}={...(0,r.R)(),...n.components};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(a,{...n})}):a(n)}function d(n){let e={code:"code",pre:"pre",...(0,r.R)(),...n.components};return(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-html",children:'<template>\n  <ion-header>\n    <ion-toolbar>\n      <ion-title>Toolbar</ion-title>\n      <ion-progress-bar type="indeterminate"></ion-progress-bar>\n    </ion-toolbar>\n  </ion-header>\n</template>\n\n<script setup lang="ts">\n  import { IonHeader, IonProgressBar, IonTitle, IonToolbar } from \'@ionic/vue\';\n<\/script>\n'})})}function u(n={}){let{wrapper:e}={...(0,r.R)(),...n.components};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(d,{...n})}):d(n)}function p(n){let e={code:"code",pre:"pre",...(0,r.R)(),...n.components};return(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-html",children:'<ion-header>\n  <ion-toolbar>\n    <ion-title>Toolbar</ion-title>\n    <ion-progress-bar type="indeterminate"></ion-progress-bar>\n  </ion-toolbar>\n</ion-header>\n'})})}function h(n={}){let{wrapper:e}={...(0,r.R)(),...n.components};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(p,{...n})}):p(n)}function m(n){let e={code:"code",pre:"pre",...(0,r.R)(),...n.components};return(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-ts",children:"import { Component } from '@angular/core';\nimport { IonHeader, IonProgressBar, IonTitle, IonToolbar } from '@ionic/angular/standalone';\n\n@Component({\n  selector: 'app-example',\n  templateUrl: 'example.component.html',\n  styleUrls: ['example.component.css'],\n  imports: [IonHeader, IonProgressBar, IonTitle, IonToolbar],\n})\nexport class ExampleComponent {}\n"})})}function b(n={}){let{wrapper:e}={...(0,r.R)(),...n.components};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(m,{...n})}):m(n)}let x=[];function j(n){return(0,t.jsx)(i.A,{version:"8",code:{javascript:s,react:c,vue:u,angular:{files:{"src/app/example.component.html":h,"src/app/example.component.ts":b}}},src:"usage/v8/toolbar/progress-bars/demo.html",devicePreview:!0,includeIonContent:!1})}function f(n={}){let{wrapper:e}={...(0,r.R)(),...n.components};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(j,{...n})}):j(n)}},68083(n,e,o){o.d(e,{Ay:()=>f,RM:()=>x});var t=o(74848),r=o(28453),i=o(61794);function l(n){let e={code:"code",pre:"pre",...(0,r.R)(),...n.components};return(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-html",children:"<ion-header>\n  <ion-toolbar>\n    <ion-title>Toolbar</ion-title>\n  </ion-toolbar>\n  <ion-toolbar>\n    <ion-searchbar></ion-searchbar>\n  </ion-toolbar>\n</ion-header>\n"})})}function s(n={}){let{wrapper:e}={...(0,r.R)(),...n.components};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(l,{...n})}):l(n)}function a(n){let e={code:"code",pre:"pre",...(0,r.R)(),...n.components};return(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonHeader, IonSearchbar, IonTitle, IonToolbar } from '@ionic/react';\n\nfunction Example() {\n  return (\n    <IonHeader>\n      <IonToolbar>\n        <IonTitle>Toolbar</IonTitle>\n      </IonToolbar>\n      <IonToolbar>\n        <IonSearchbar></IonSearchbar>\n      </IonToolbar>\n    </IonHeader>\n  );\n}\nexport default Example;\n"})})}function c(n={}){let{wrapper:e}={...(0,r.R)(),...n.components};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(a,{...n})}):a(n)}function d(n){let e={code:"code",pre:"pre",...(0,r.R)(),...n.components};return(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-html",children:"<template>\n  <ion-header>\n    <ion-toolbar>\n      <ion-title>Toolbar</ion-title>\n    </ion-toolbar>\n    <ion-toolbar>\n      <ion-searchbar></ion-searchbar>\n    </ion-toolbar>\n  </ion-header>\n</template>\n\n<script setup lang=\"ts\">\n  import { IonHeader, IonSearchbar, IonTitle, IonToolbar } from '@ionic/vue';\n<\/script>\n"})})}function u(n={}){let{wrapper:e}={...(0,r.R)(),...n.components};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(d,{...n})}):d(n)}function p(n){let e={code:"code",pre:"pre",...(0,r.R)(),...n.components};return(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-html",children:"<ion-header>\n  <ion-toolbar>\n    <ion-title>Toolbar</ion-title>\n  </ion-toolbar>\n  <ion-toolbar>\n    <ion-searchbar></ion-searchbar>\n  </ion-toolbar>\n</ion-header>\n"})})}function h(n={}){let{wrapper:e}={...(0,r.R)(),...n.components};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(p,{...n})}):p(n)}function m(n){let e={code:"code",pre:"pre",...(0,r.R)(),...n.components};return(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-ts",children:"import { Component } from '@angular/core';\nimport { IonHeader, IonSearchbar, IonTitle, IonToolbar } from '@ionic/angular/standalone';\n\n@Component({\n  selector: 'app-example',\n  templateUrl: 'example.component.html',\n  styleUrls: ['example.component.css'],\n  imports: [IonHeader, IonSearchbar, IonTitle, IonToolbar],\n}

1)\nexport class ExampleComponent {}\n"})})}function b(n={}){let{wrapper:e}={...(0,r.R)(),...n.components};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(m,{...n})}):m(n)}let x=[];function j(n){return(0,t.jsx)(i.A,{version:"8",code:{javascript:s,react:c,vue:u,angular:{files:{"src/app/example.component.html":h,"src/app/example.component.ts":b}}},src:"usage/v8/toolbar/searchbars/demo.html",devicePreview:!0,includeIonContent:!1})}function f(n={}){let{wrapper:e}={...(0,r.R)(),...n.components};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(j,{...n})}):j(n)}},12503(n,e,o){o.d(e,{Ay:()=>f,RM:()=>x});var t=o(74848),r=o(28453),i=o(61794);function l(n){let e={code:"code",pre:"pre",...(0,r.R)(),...n.components};return(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-html",children:'<ion-header>\n  <ion-toolbar>\n    <ion-segment value="all">\n      <ion-segment-button value="all">\n        <ion-label>All</ion-label>\n      </ion-segment-button>\n      <ion-segment-button value="favorites">\n        <ion-label>Favorites</ion-label>\n      </ion-segment-button>\n    </ion-segment>\n  </ion-toolbar>\n</ion-header>\n'})})}function s(n={}){let{wrapper:e}={...(0,r.R)(),...n.components};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(l,{...n})}):l(n)}function a(n){let e={code:"code",pre:"pre",...(0,r.R)(),...n.components};return(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-tsx",children:'import React from \'react\';\nimport { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from \'@ionic/react\';\n\nfunction Example() {\n  return (\n    <IonHeader>\n      <IonToolbar>\n        <IonSegment value="all">\n          <IonSegmentButton value="all">\n            <IonLabel>All</IonLabel>\n          </IonSegmentButton>\n          <IonSegmentButton value="favorites">\n            <IonLabel>Favorites</IonLabel>\n          </IonSegmentButton>\n        </IonSegment>\n      </IonToolbar>\n    </IonHeader>\n  );\n}\nexport default Example;\n'})})}function c(n={}){let{wrapper:e}={...(0,r.R)(),...n.components};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(a,{...n})}):a(n)}function d(n){let e={code:"code",pre:"pre",...(0,r.R)(),...n.components};return(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-html",children:'<template>\n  <ion-header>\n    <ion-toolbar>\n      <ion-segment value="all">\n        <ion-segment-button value="all">\n          <ion-label>All</ion-label>\n        </ion-segment-button>\n        <ion-segment-button value="favorites">\n          <ion-label>Favorites</ion-label>\n        </ion-segment-button>\n      </ion-segment>\n    </ion-toolbar>\n  </ion-header>\n</template>\n\n<script setup lang="ts">\n  import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from \'@ionic/vue\';\n<\/script>\n'})})}function u(n={}){let{wrapper:e}={...(0,r.R)(),...n.components};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(d,{...n})}):d(n)}function p(n){let e={code:"code",pre:"pre",...(0,r.R)(),...n.components};return(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-html",children:'<ion-header>\n  <ion-toolbar>\n    <ion-segment value="all">\n      <ion-segment-button value="all">\n        <ion-label>All</ion-label>\n      </ion-segment-button>\n      <ion-segment-button value="favorites">\n        <ion-label>Favorites</ion-label>\n      </ion-segment-button>\n    </ion-segment>\n  </ion-toolbar>\n</ion-header>\n'})})}function h(n={}){let{wrapper:e}={...(0,r.R)(),...n.components};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(p,{...n})}):p(n)}function m(n){let e={code:"code",pre:"pre",...(0,r.R)(),...n.components};return(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-ts",children:"import { Component } from '@angular/core';\nimport { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonToolbar } from '@ionic/angular/standalone';\n\n@Component({\n  selector: 'app-example',\n  templateUrl: 'example.component.html',\n  styleUrls: ['example.component.css'],\n  imports: [IonHeader, IonLabel, IonSegment, IonSegmentButton, IonToolbar],\n}

1)\nexport class ExampleComponent {}\n"})})}function b(n={}){let{wrapper:e}={...(0,r.R)(),...n.components};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(m,{...n})}):m(n)}let x=[];function j(n){return(0,t.jsx)(i.A,{version:"8",code:{javascript:s,react:c,vue:u,angular:{files:{"src/app/example.component.html":h,"src/app/example.component.ts":b}}},src:"usage/v8/toolbar/segments/demo.html",devicePreview:!0,includeIonContent:!1})}function f(n={}){let{wrapper:e}={...(0,r.R)(),...n.components};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(j,{...n})}):j(n)}},75583(n,e,o){o.r(e),o.d(e,{metadata:()=>t,default:()=>nN,frontMatter:()=>nC,contentTitle:()=>nB,toc:()=>nR,assets:()=>nk});var t=JSON.parse('{"id":"api/toolbar","title":"ion-toolbar","description":"ion-toolbar: Customize App Menu Toolbar Buttons and Icons","source":"@site/versioned_docs/version-v8/api/toolbar.md","sourceDirName":"api","slug":"/api/toolbar","permalink":"/docs/v8/api/toolbar","draft":false,"unlisted":false,"editUrl":"https://github.com/ionic-team/ionic-docs/tree/main/docs/api/toolbar.md","tags":[],"version":"v8","frontMatter":{"title":"ion-toolbar"},"sidebar":"api","previous":{"title":"ion-toggle","permalink":"/docs/v8/api/toggle"},"next":{"title":"ion-header","permalink":"/docs/v8/api/header"}}'),r=o(74848),i=o(28453);function l(n){let e={a:"a",code:"code",h3:"h3",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.R)(),...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h3,{id:"prop-color",children:"color"}),"\n",(0,r.jsxs)(e.table,{children:[(0,r.jsx)(e.thead,{children:(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.th,{}),(0,r.jsx)(e.th,{})]})}),(0,r.jsxs)(e.tbody,{children:[(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.strong,{children:"Description"})}),(0,r.jsxs)(e.td,{children:["The color to use from your application's color palette. Default options are: ",(0,r.jsx)(e.code,{children:'"primary"'}),", ",(0,r.jsx)(e.code,{children:'"secondary"'}),", ",(0,r.jsx)(e.code,{children:'"tertiary"'}),", ",(0,r.jsx)(e.code,{children:'"success"'}),", ",(0,r.jsx)(e.code,{children:'"warning"'}),", ",(0,r.jsx)(e.code,{children:'"danger"'}),", ",(0,r.jsx)(e.code,{children:'"light"'}),", ",(0,r.jsx)(e.code,{children:'"medium"'}),", and ",(0,r.jsx)(e.code,{children:'"dark"'}),". For more information on colors, see ",(0,r.jsx)(e.a,{href:"/docs/theming/basics",children:"theming"}),"."]})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.strong,{children:"Attribute"})}),(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"color"})})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.strong,{children:"Type"})}),(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:'"danger" \uFF5C "dark" \uFF5C "light" \uFF5C "medium" \uFF5C "primary" \uFF5C "secondary" \uFF5C "success" \uFF5C "tertiary" \uFF5C "warning" \uFF5C string \uFF5C undefined'})})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.strong,{children:"Default"})}),(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"undefined"})})]})]})]}),"\n",(0,r.jsx)(e.h3,{id:"prop-mode",children:"mode"}),"\n",(0,r.jsxs)(e.table,{children:[(0,r.jsx)(e.thead,{children:(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.th,{}),(0,r.jsx)(e.th,{})]})}),(0,r.jsxs)(e.tbody,{children:[(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.strong,{children:"Description"})}),(0,r.jsxs)(e.td,{children:["The mode determines which platform styles to use.",(0,r.jsx)("br",{}),(0,r.jsx)("br",{}),"This is a ",(0,r.jsx)(e.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,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.strong,{children:"Attribute"})}),(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"mode"})})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.strong,{children:"Type"})}),(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:'"ios" \uFF5C "md"'})})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.strong,{children:"Default"})}),(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"undefined"})})]})]})]})]})}function s(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(l,{...n})}):l(n)}function a(n){let e={p:"p",...(0,i.R)(),...n.components};return(0,r.jsx)(e.p,{children:"No events available for this component."})}function c(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(a,{...n})}):a(n)}function d(n){let e={p:"p",...(0,i.R)(),...n.components};return(0,r.jsx)(e.p,{children:"No public methods available for this component."})}function u(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(d,{...n})}):d(n)}function p(n){let e={code:"code",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.R)(),...n.components};return(0,r.jsxs)(e.table,{children:[(0,r.jsx)(e.thead,{children:(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.th,{children:"Name"}),(0,r.jsx)(e.th,{children:"Description"})]})}),(0,r.jsxs)(e.tbody,{children:[(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"background"})}),(0,r.jsx)(e.td,{children:"The background of the toolbar, covering the entire area behind the toolbar content."})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"container"})}),(0,r.jsx)(e.td,{children:"The container that wraps all toolbar content, including the default slot and named slot content."})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"content"})}),(0,r.jsx)(e.td,{children:"The container for the default slot, wrapping content provided without a named slot."})]})]})]})}function h(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(p,{...n})}):p(n)}var m=o(50773),b=o(57250);function x(n){let e={code:"code",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.R)(),...n.components};return(0,r.jsxs)(m.A,{groupId:"mode",defaultValue:"ios",values:[{value:"ios",label:"iOS"},{value:"md",label:"MD"}],children:[(0,r.jsx)(b.A,{value:"ios",children:(0,r.jsxs)(e.table,{children:[(0,r.jsx)(e.thead,{children:(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.th,{children:"Name"}),(0,r.jsx)(e.th,{children:"Description"})]})}),(0,r.jsxs)(e.tbody,{children:[(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"--background"})}

1),(0,r.jsx)(e.td,{children:"Background of the toolbar"})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"--border-color"})}),(0,r.jsx)(e.td,{children:"Color of the toolbar border"})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"--border-style"})}),(0,r.jsx)(e.td,{children:"Style of the toolbar border"})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"--border-width"})}),(0,r.jsx)(e.td,{children:"Width of the toolbar border"})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"--color"})}),(0,r.jsx)(e.td,{children:"Color of the toolbar text"})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"--min-height"})}),(0,r.jsx)(e.td,{children:"Minimum height of the toolbar"})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"--opacity"})}),(0,r.jsx)(e.td,{children:"Opacity of the toolbar background"})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"--padding-bottom"})}),(0,r.jsx)(e.td,{children:"Bottom padding of the toolbar"})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"--padding-end"})}),(0,r.jsx)(e.td,{children:"Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar"})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"--padding-start"})}),(0,r.jsx)(e.td,{children:"Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar"})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"--padding-top"})}),(0,r.jsx)(e.td,{children:"Top padding of the toolbar"})]})]})]})}),(0,r.jsx)(b.A,{value:"md",children:(0,r.jsxs)(e.table,{children:[(0,r.jsx)(e.thead,{children:(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.th,{children:"Name"}),(0,r.jsx)(e.th,{children:"Description"})]})}),(0,r.jsxs)(e.tbody,{children:[(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"--background"})}

1),(0,r.jsx)(e.td,{children:"Background of the toolbar"})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"--border-color"})}),(0,r.jsx)(e.td,{children:"Color of the toolbar border"})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"--border-style"})}),(0,r.jsx)(e.td,{children:"Style of the toolbar border"})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"--border-width"})}),(0,r.jsx)(e.td,{children:"Width of the toolbar border"})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"--color"})}),(0,r.jsx)(e.td,{children:"Color of the toolbar text"})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"--min-height"})}),(0,r.jsx)(e.td,{children:"Minimum height of the toolbar"})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"--opacity"})}),(0,r.jsx)(e.td,{children:"Opacity of the toolbar background"})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"--padding-bottom"})}),(0,r.jsx)(e.td,{children:"Bottom padding of the toolbar"})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"--padding-end"})}),(0,r.jsx)(e.td,{children:"Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar"})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"--padding-start"})}),(0,r.jsx)(e.td,{children:"Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar"})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"--padding-top"})}),(0,r.jsx)(e.td,{children:"Top padding of the toolbar"})]})]})]})})]})}function j(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(x,{...n})}):x(n)}function f(n){let e={code:"code",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.R)(),...n.components};return(0,r.jsxs)(e.table,{children:[(0,r.jsx)(e.thead,{children:(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.th,{children:"Name"}),(0,r.jsx)(e.th,{children:"Description"})]})}),(0,r.jsxs)(e.tbody,{children:[(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{}),(0,r.jsx)(e.td,{children:"Content is placed between the named slots if provided without a slot."})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"end"})}),(0,r.jsx)(e.td,{children:"Content is placed to the right of the toolbar text in LTR, and to the left in RTL."})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"primary"})}),(0,r.jsxs)(e.td,{children:["Content is placed to the right of the toolbar text in ",(0,r.jsx)(e.code,{children:"ios"})," mode, and to the far right in ",(0,r.jsx)(e.code,{children:"md"})," mode."]})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"secondary"})}),(0,r.jsxs)(e.td,{children:["Content is placed to the left of the toolbar text in ",(0,r.jsx)(e.code,{children:"ios"})," mode, and directly to the right in ",(0,r.jsx)(e.code,{children:"md"})," mode."]})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"start"})}),(0,r.jsx)(e.td,{children:"Content is placed to the left of the toolbar text in LTR, and to the right in RTL."})]})]})]})}function g(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(f,{...n})}):f(n)}var v=o(54441),I=o(61794);function y(n){let e={code:"code",pre:"pre",...(0,i.R)(),...n.components};return(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-html",children:"<ion-header>\n  <ion-toolbar>\n    <ion-title>Header Toolbar</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-footer>\n  <ion-toolbar>\n    <ion-title>Footer Toolbar</ion-title>\n  </ion-toolbar>\n</ion-footer>\n"})})}function T(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(y,{...n})}):y(n)}function w(n){let e={code:"code",pre:"pre",...(0,i.R)(),...n.components};return(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/react';\n\nfunction Example() {\n  return (\n    <>\n      <IonHeader>\n        <IonToolbar>\n          <IonTitle>Header Toolbar</IonTitle>\n        </IonToolbar>\n      </IonHeader>\n\n      <IonFooter>\n        <IonToolbar>\n          <IonTitle>Footer Toolbar</IonTitle>\n        </IonToolbar>\n      </IonFooter>\n    </>\n  );\n}\nexport default Example;\n"})})}function C(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(w,{...n})}):w(n)}function B(n){let e={code:"code",pre:"pre",...(0,i.R)(),...n.components};return(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-html",children:"<template>\n  <ion-header>\n    <ion-toolbar>\n      <ion-title>Header Toolbar</ion-title>\n    </ion-toolbar>\n  </ion-header>\n\n  <ion-footer>\n    <ion-toolbar>\n      <ion-title>Footer Toolbar</ion-title>\n    </ion-toolbar>\n  </ion-footer>\n</template>\n\n<script setup lang=\"ts\">\n  import { IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';\n<\/script>\n"})})}function k(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(B,{...n})}):B(n)}function R(n){let e={code:"code",pre:"pre",...(0,i.R)(),...n.components};return(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-html",children:"<ion-header>\n  <ion-toolbar>\n    <ion-title>Header Toolbar</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-footer>\n  <ion-toolbar>\n    <ion-title>Footer Toolbar</ion-title>\n  </ion-toolbar>\n</ion-footer>\n"})})}function S(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(R,{...n})}):R(n)}function N(n){let e={code:"code",pre:"pre",...(0,i.R)(),...n.components};return(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-ts",children:"import { Component } from '@angular/core';\nimport { IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';\n\n@Component({\n  selector: 'app-example',\n  templateUrl: 'example.component.html',\n  styleUrls: ['example.component.css'],\n  imports: [IonFooter, IonHeader, IonTitle, IonToolbar],\n}

1)\nexport class ExampleComponent {}\n"})})}function _(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(N,{...n})}):N(n)}function E(n){return(0,r.jsx)(I.A,{version:"8",code:{javascript:T,react:C,vue:k,angular:{files:{"src/app/example.component.html":S,"src/app/example.component.ts":_}}},src:"usage/v8/toolbar/basic/demo.html",devicePreview:!0,includeIonContent:!1})}function A(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(E,{...n})}):E(n)}function L(n){let e={code:"code",pre:"pre",...(0,i.R)(),...n.components};return(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-html",children:'<ion-toolbar>\n  <ion-buttons slot="start">\n    <ion-button> Start </ion-button>\n  </ion-buttons>\n  <ion-title>Start / End Buttons</ion-title>\n  <ion-buttons slot="end">\n    <ion-button> End </ion-button>\n  </ion-buttons>\n</ion-toolbar>\n\n<ion-toolbar>\n  <ion-buttons slot="secondary">\n    <ion-button> Secondary </ion-button>\n  </ion-buttons>\n  <ion-buttons slot="primary">\n    <ion-button> Primary </ion-button>\n  </ion-buttons>\n  <ion-title>Primary / Secondary Buttons</ion-title>\n</ion-toolbar>\n\n<ion-toolbar>\n  <ion-buttons slot="secondary">\n    <ion-button>\n      <ion-icon slot="icon-only" name="person-circle"></ion-icon>\n    </ion-button>\n    <ion-button>\n      <ion-icon slot="icon-only" name="search"></ion-icon>\n    </ion-button>\n  </ion-buttons>\n  <ion-buttons slot="primary">\n    <ion-button>\n      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>\n    </ion-button>\n  </ion-buttons>\n  <ion-title>Icon Buttons</ion-title>\n</ion-toolbar>\n\n<ion-toolbar>\n  <ion-buttons slot="secondary">\n    <ion-button fill="solid">\n      <ion-icon slot="start" name="person-circle"></ion-icon>\n      Contact\n    </ion-button>\n  </ion-buttons>\n  <ion-buttons slot="primary">\n    <ion-button fill="solid">\n      Help\n      <ion-icon slot="end" name="help-circle"></ion-icon>\n    </ion-button>\n  </ion-buttons>\n  <ion-title>Solid Buttons</ion-title>\n</ion-toolbar>\n\n<ion-toolbar>\n  <ion-buttons slot="secondary">\n    <ion-button fill="outline">\n      <ion-icon slot="start" name="star"></ion-icon>\n      Star\n    </ion-button>\n  </ion-buttons>\n  <ion-buttons slot="primary">\n    <ion-button fill="outline">\n      Edit\n      <ion-icon slot="end" name="create"></ion-icon>\n    </ion-button>\n  </ion-buttons>\n  <ion-title>Outline Buttons</ion-title>\n</ion-toolbar>\n\n<ion-toolbar>\n  <ion-buttons slot="start">\n    <ion-back-button default-href="#"></ion-back-button>\n  </ion-buttons>\n  <ion-title>Back Button</ion-title>\n</ion-toolbar>\n\n<ion-toolbar>\n  <ion-buttons slot="start">\n    <ion-menu-button auto-hide="false"></ion-menu-button>\n  </ion-buttons>\n  <ion-title>Menu Button</ion-title>\n</ion-toolbar>\n'})})}function M(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(L,{...n})}):L(n)}function H(n){let e={code:"code",pre:"pre",...(0,i.R)(),...n.components};return(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-ts",children:"import { defineCustomElements } from '@ionic/core/loader';\n\nimport { addIcons } from 'ionicons';\nimport { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons';\n\n/* Core CSS required for Ionic components to work properly */\nimport '@ionic/core/css/core.css';\n\n/* Basic CSS for apps built with Ionic */\nimport '@ionic/core/css/normalize.css';\nimport '@ionic/core/css/structure.css';\nimport '@ionic/core/css/typography.css';\n\n/* Optional CSS utils that can be commented out */\nimport '@ionic/core/css/padding.css';\nimport '@ionic/core/css/float-elements.css';\nimport '@ionic/core/css/text-alignment.css';\nimport '@ionic/core/css/text-transformation.css';\nimport '@ionic/core/css/flex-utils.css';\nimport '@ionic/core/css/display.css';\n\n/**\n * Ionic Dark Palette\n * -----------------------------------------------------\n * For more information, please see:\n * https://ionicframework.com/docs/theming/dark-mode\n */\n\n// import '@ionic/core/css/palettes/dark.always.css';\n// import '@ionic/core/css/palettes/dark.class.css';\nimport '@ionic/core/css/palettes/dark.system.css';\n\n/* Theme variables */\nimport './theme/variables.css';\n\n/**\n * On Ionicons 7.2+ these icons\n * get mapped to a kebab-case key.\n * Alternatively, developers can do:\n * addIcons({ 'create': create, 'ellipsis-horizontal': ellipsisHorizontal, 'ellipsis-vertical': ellipsisVertical,\n * 'help-circle': helpCircle, 'person-circle': personCircle, 'search': search, 'star': star });\n */\naddIcons({ create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star });\n\ndefineCustomElements();\n"})})}function O(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(H,{...n})}):H(n)}function $(n){let e={code:"code",pre:"pre",...(0,i.R)(),...n.components};return(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-tsx",children:'import React from \'react\';\nimport { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from \'@ionic/react\';\nimport { create, ellipsisHorizontal, ellipsisVertical, helpCircle, search, personCircle, star } from \'ionicons/icons\';\n\nfunction Example() {\n  return (\n    <>\n      <IonToolbar>\n        <IonButtons slot="start">\n          <IonButton>Start</IonButton>\n        </IonButtons>\n        <IonTitle>Start / End Buttons</IonTitle>\n        <IonButtons slot="end">\n          <IonButton>End</IonButton>\n        </IonButtons>\n      </IonToolbar>\n\n      <IonToolbar>\n        <IonButtons slot="secondary">\n          <IonButton>Secondary</IonButton>\n        </IonButtons>\n        <IonButtons slot="primary">\n          <IonButton>Primary</IonButton>\n        </IonButtons>\n        <IonTitle>Primary / Secondary Buttons</IonTitle>\n      </IonToolbar>\n\n      <IonToolbar>\n        <IonButtons slot="secondary">\n          <IonButton>\n            <IonIcon slot="icon-only" icon={personCircle}></IonIcon>\n          </IonButton>\n          <IonButton>\n            <IonIcon slot="icon-only" icon={search}></IonIcon>\n          </IonButton>\n        </IonButtons>\n        <IonButtons slot="primary">\n          <IonButton>\n            <IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical}></IonIcon>\n          </IonButton>\n        </IonButtons>\n        <IonTitle>Icon Buttons</IonTitle>\n      </IonToolbar>\n\n      <IonToolbar>\n        <IonButtons slot="secondary">\n          <IonButton fill="solid">\n            <IonIcon slot="start" icon={personCircle}></IonIcon>\n            Contact\n          </IonButton>\n        </IonButtons>\n        <IonButtons slot="primary">\n          <IonButton fill="solid">\n            Help\n            <IonIcon slot="end" icon={helpCircle}></IonIcon>\n          </IonButton>\n        </IonButtons>\n        <IonTitle>Solid Buttons</IonTitle>\n      </IonToolbar>\n\n      <IonToolbar>\n        <IonButtons slot="secondary">\n          <IonButton fill="outline">\n            <IonIcon slot="start" icon={star}></IonIcon>\n            Star\n          </IonButton>\n        </IonButtons>\n        <IonButtons slot="primary">\n          <IonButton fill="outline">\n            Edit\n            <IonIcon slot="end" icon={create}></IonIcon>\n          </IonButton>\n        </IonButtons>\n        <IonTitle>Outline Buttons</IonTitle>\n      </IonToolbar>\n\n      <IonToolbar>\n        <IonButtons slot="start">\n          <IonBackButton defaultHref="#"></IonBackButton>\n        </IonButtons>\n        <IonTitle>Back Button</IonTitle>\n      </IonToolbar>\n\n      <IonToolbar>\n        <IonButtons slot="start">\n          <IonMenuButton autoHide={false}></IonMenuButton>\n        </IonButtons>\n        <IonTitle>Menu Button</IonTitle>\n      </IonToolbar>\n    </>\n  );\n}\nexport default Example;\n'})})}function P(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)($,{...n})}):$(n)}function D(n){let e={code:"code",pre:"pre",...(0,i.R)(),...n.components};return(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-html",children:'<template>\n  <ion-toolbar>\n    <ion-buttons slot="start">\n      <ion-button> Start </ion-button>\n    </ion-buttons>\n    <ion-title>Start / End Buttons</ion-title>\n    <ion-buttons slot="end">\n      <ion-button> End </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n\n  <ion-toolbar>\n    <ion-buttons slot="secondary">\n      <ion-button> Secondary </ion-button>\n    </ion-buttons>\n    <ion-buttons slot="primary">\n      <ion-button> Primary </ion-button>\n    </ion-buttons>\n    <ion-title>Primary / Secondary Buttons</ion-title>\n  </ion-toolbar>\n\n  <ion-toolbar>\n    <ion-buttons slot="secondary">\n      <ion-button>\n        <ion-icon slot="icon-only" :icon="personCircle"></ion-icon>\n      </ion-button>\n      <ion-button>\n        <ion-icon slot="icon-only" :icon="search"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    <ion-buttons slot="primary">\n      <ion-button>\n        <ion-icon slot="icon-only" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    <ion-title>Icon Buttons</ion-title>\n  </ion-toolbar>\n\n  <ion-toolbar>\n    <ion-buttons slot="secondary">\n      <ion-button fill="solid">\n        <ion-icon slot="start" :icon="personCircle"></ion-icon>\n        Contact\n      </ion-button>\n    </ion-buttons>\n    <ion-buttons slot="primary">\n      <ion-button fill="solid">\n        Help\n        <ion-icon slot="end" :icon="helpCircle"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    <ion-title>Solid Buttons</ion-title>\n  </ion-toolbar>\n\n  <ion-toolbar>\n    <ion-buttons slot="secondary">\n      <ion-button fill="outline">\n        <ion-icon slot="start" :icon="star"></ion-icon>\n        Star\n      </ion-button>\n    </ion-buttons>\n    <ion-buttons slot="primary">\n      <ion-button fill="outline">\n        Edit\n        <ion-icon slot="end" :icon="create"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    <ion-title>Outline Buttons</ion-title>\n  </ion-toolbar>\n\n  <ion-toolbar>\n    <ion-buttons slot="start">\n      <ion-back-button default-href="#"></ion-back-button>\n    </ion-buttons>\n    <ion-title>Back Button</ion-title>\n  </ion-toolbar>\n\n  <ion-toolbar>\n    <ion-buttons slot="start">\n      <ion-menu-button :auto-hide="false"></ion-menu-button>\n    </ion-buttons>\n    <ion-title>Menu Button</ion-title>\n  </ion-toolbar>\n</template>\n\n<script setup lang="ts">\n  import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from \'@ionic/vue\';\n  import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, search, personCircle, star } from \'ionicons/icons\';\n<\/script>\n'})})}function V(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(D,{...n})}):D(n)}function z(n){let e={code:"code",pre:"pre",...(0,i.R)(),...n.components};return(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-html",children:'<ion-toolbar>\n  <ion-buttons slot="start">\n    <ion-button> Start </ion-button>\n  </ion-buttons>\n  <ion-title>Start / End Buttons</ion-title>\n  <ion-buttons slot="end">\n    <ion-button> End </ion-button>\n  </ion-buttons>\n</ion-toolbar>\n\n<ion-toolbar>\n  <ion-buttons slot="secondary">\n    <ion-button> Secondary </ion-button>\n  </ion-buttons>\n  <ion-buttons slot="primary">\n    <ion-button> Primary </ion-button>\n  </ion-buttons>\n  <ion-title>Primary / Secondary Buttons</ion-title>\n</ion-toolbar>\n\n<ion-toolbar>\n  <ion-buttons slot="secondary">\n    <ion-button>\n      <ion-icon slot="icon-only" name="person-circle"></ion-icon>\n    </ion-button>\n    <ion-button>\n      <ion-icon slot="icon-only" name="search"></ion-icon>\n    </ion-button>\n  </ion-buttons>\n  <ion-buttons slot="primary">\n    <ion-button>\n      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>\n    </ion-button>\n  </ion-buttons>\n  <ion-title>Icon Buttons</ion-title>\n</ion-toolbar>\n\n<ion-toolbar>\n  <ion-buttons slot="secondary">\n    <ion-button fill="solid">\n      <ion-icon slot="start" name="person-circle"></ion-icon>\n      Contact\n    </ion-button>\n  </ion-buttons>\n  <ion-buttons slot="primary">\n    <ion-button fill="solid">\n      Help\n      <ion-icon slot="end" name="help-circle"></ion-icon>\n    </ion-button>\n  </ion-buttons>\n  <ion-title>Solid Buttons</ion-title>\n</ion-toolbar>\n\n<ion-toolbar>\n  <ion-buttons slot="secondary">\n    <ion-button fill="outline">\n      <ion-icon slot="start" name="star"></ion-icon>\n      Star\n    </ion-button>\n  </ion-buttons>\n  <ion-buttons slot="primary">\n    <ion-button fill="outline">\n      Edit\n      <ion-icon slot="end" name="create"></ion-icon>\n    </ion-button>\n  </ion-buttons>\n  <ion-title>Outline Buttons</ion-title>\n</ion-toolbar>\n\n<ion-toolbar>\n  <ion-buttons slot="start">\n    <ion-back-button default-href="#"></ion-back-button>\n  </ion-buttons>\n  <ion-title>Back Button</ion-title>\n</ion-toolbar>\n\n<ion-toolbar>\n  <ion-buttons slot="start">\n    <ion-menu-button auto-hide="false"></ion-menu-button>\n  </ion-buttons>\n  <ion-title>Menu Button</ion-title>\n</ion-toolbar>\n'})})}function F(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(z,{...n})}):z(n)}function W(n){let e={code:"code",pre:"pre",...(0,i.R)(),...n.components};return(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-ts",children:"import { Component } from '@angular/core';\nimport {\n  IonBackButton,\n  IonButton,\n  IonButtons,\n  IonIcon,\n  IonMenuButton,\n  IonTitle,\n  IonToolbar,\n} from '@ionic/angular/standalone';\n\nimport { addIcons } from 'ionicons';\nimport { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons';\n\n@Component({\n  selector: 'app-example',\n  templateUrl: 'example.component.html',\n  styleUrls: ['example.component.css'],\n  imports: [IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar],\n}

1)\nexport class ExampleComponent {\n  constructor() {\n    /**\n     * Any icons you want to use in your application\n     * can be registered in app.component.ts and then\n     * referenced by name anywhere in your application.\n     */\n    addIcons({ create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star });\n  }\n}\n"})})}function U(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(W,{...n})}):W(n)}function q(n){return(0,r.jsx)(I.A,{version:"8",code:{javascript:{files:{"index.html":M,"index.ts":O}},react:P,vue:V,angular:{files:{"src/app/example.component.html":F,"src/app/example.component.ts":U}}},size:"500px",src:"usage/v8/toolbar/buttons/demo.html"})}function J(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(q,{...n})}):q(n)}var Z=o(68083),Y=o(12503),X=o(13024);function G(n){let e={code:"code",pre:"pre",...(0,i.R)(),...n.components};return(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-html",children:'<ion-toolbar>\n  <ion-title>Default Toolbar</ion-title>\n</ion-toolbar>\n<ion-toolbar color="primary">\n  <ion-title>Primary Toolbar</ion-title>\n</ion-toolbar>\n<ion-toolbar color="secondary">\n  <ion-title>Secondary Toolbar</ion-title>\n</ion-toolbar>\n<ion-toolbar color="tertiary">\n  <ion-title>Tertiary Toolbar</ion-title>\n</ion-toolbar>\n<ion-toolbar color="success">\n  <ion-title>Success Toolbar</ion-title>\n</ion-toolbar>\n<ion-toolbar color="warning">\n  <ion-title>Warning Toolbar</ion-title>\n</ion-toolbar>\n<ion-toolbar color="danger">\n  <ion-title>Danger Toolbar</ion-title>\n</ion-toolbar>\n<ion-toolbar color="light">\n  <ion-title>Light Toolbar</ion-title>\n</ion-toolbar>\n<ion-toolbar color="medium">\n  <ion-title>Medium Toolbar</ion-title>\n</ion-toolbar>\n<ion-toolbar color="dark">\n  <ion-title>Dark Toolbar</ion-title>\n</ion-toolbar>\n'})})}function K(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(G,{...n})}):G(n)}function Q(n){let e={code:"code",pre:"pre",...(0,i.R)(),...n.components};return(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-tsx",children:'import React from \'react\';\nimport { IonTitle, IonToolbar } from \'@ionic/react\';\n\nfunction Example() {\n  return (\n    <>\n      <IonToolbar>\n        <IonTitle>Default Toolbar</IonTitle>\n      </IonToolbar>\n      <IonToolbar color="primary">\n        <IonTitle>Primary Toolbar</IonTitle>\n      </IonToolbar>\n      <IonToolbar color="secondary">\n        <IonTitle>Secondary Toolbar</IonTitle>\n      </IonToolbar>\n      <IonToolbar color="tertiary">\n        <IonTitle>Tertiary Toolbar</IonTitle>\n      </IonToolbar>\n      <IonToolbar color="success">\n        <IonTitle>Success Toolbar</IonTitle>\n      </IonToolbar>\n      <IonToolbar color="warning">\n        <IonTitle>Warning Toolbar</IonTitle>\n      </IonToolbar>\n      <IonToolbar color="danger">\n        <IonTitle>Danger Toolbar</IonTitle>\n      </IonToolbar>\n      <IonToolbar color="light">\n        <IonTitle>Light Toolbar</IonTitle>\n      </IonToolbar>\n      <IonToolbar color="medium">\n        <IonTitle>Medium Toolbar</IonTitle>\n      </IonToolbar>\n      <IonToolbar color="dark">\n        <IonTitle>Dark Toolbar</IonTitle>\n      </IonToolbar>\n    </>\n  );\n}\nexport default Example;\n'})})}function nn(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(Q,{...n})}):Q(n)}function ne(n){let e={code:"code",pre:"pre",...(0,i.R)(),...n.components};return(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-html",children:'<template>\n  <ion-toolbar>\n    <ion-title>Default Toolbar</ion-title>\n  </ion-toolbar>\n  <ion-toolbar color="primary">\n    <ion-title>Primary Toolbar</ion-title>\n  </ion-toolbar>\n  <ion-toolbar color="secondary">\n    <ion-title>Secondary Toolbar</ion-title>\n  </ion-toolbar>\n  <ion-toolbar color="tertiary">\n    <ion-title>Tertiary Toolbar</ion-title>\n  </ion-toolbar>\n  <ion-toolbar color="success">\n    <ion-title>Success Toolbar</ion-title>\n  </ion-toolbar>\n  <ion-toolbar color="warning">\n    <ion-title>Warning Toolbar</ion-title>\n  </ion-toolbar>\n  <ion-toolbar color="danger">\n    <ion-title>Danger Toolbar</ion-title>\n  </ion-toolbar>\n  <ion-toolbar color="light">\n    <ion-title>Light Toolbar</ion-title>\n  </ion-toolbar>\n  <ion-toolbar color="medium">\n    <ion-title>Medium Toolbar</ion-title>\n  </ion-toolbar>\n  <ion-toolbar color="dark">\n    <ion-title>Dark Toolbar</ion-title>\n  </ion-toolbar>\n</template>\n\n<script setup lang="ts">\n  import { IonTitle, IonToolbar } from \'@ionic/vue\';\n<\/script>\n'})})}function no(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(ne,{...n})}):ne(n)}function nt(n){let e={code:"code",pre:"pre",...(0,i.R)(),...n.components};return(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-html",children:'<ion-toolbar>\n  <ion-title>Default Toolbar</ion-title>\n</ion-toolbar>\n<ion-toolbar color="primary">\n  <ion-title>Primary Toolbar</ion-title>\n</ion-toolbar>\n<ion-toolbar color="secondary">\n  <ion-title>Secondary Toolbar</ion-title>\n</ion-toolbar>\n<ion-toolbar color="tertiary">\n  <ion-title>Tertiary Toolbar</ion-title>\n</ion-toolbar>\n<ion-toolbar color="success">\n  <ion-title>Success Toolbar</ion-title>\n</ion-toolbar>\n<ion-toolbar color="warning">\n  <ion-title>Warning Toolbar</ion-title>\n</ion-toolbar>\n<ion-toolbar color="danger">\n  <ion-title>Danger Toolbar</ion-title>\n</ion-toolbar>\n<ion-toolbar color="light">\n  <ion-title>Light Toolbar</ion-title>\n</ion-toolbar>\n<ion-toolbar color="medium">\n  <ion-title>Medium Toolbar</ion-title>\n</ion-toolbar>\n<ion-toolbar color="dark">\n  <ion-title>Dark Toolbar</ion-title>\n</ion-toolbar>\n'})})}function nr(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(nt,{...n})}):nt(n)}function ni(n){let e={code:"code",pre:"pre",...(0,i.R)(),...n.components};return(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-ts",children:"import { Component } from '@angular/core';\nimport { IonTitle, IonToolbar } from '@ionic/angular/standalone';\n\n@Component({\n  selector: 'app-example',\n  templateUrl: 'example.component.html',\n  styleUrls: ['example.component.css'],\n  imports: [IonTitle, IonToolbar],\n}

1)\nexport class ExampleComponent {}\n"})})}function nl(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(ni,{...n})}):ni(n)}function ns(n){return(0,r.jsx)(I.A,{version:"8",code:{javascript:K,react:nn,vue:no,angular:{files:{"src/app/example.component.html":nr,"src/app/example.component.ts":nl}}},src:"usage/v8/toolbar/theming/colors/demo.html",size:"large"})}function na(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(ns,{...n})}):ns(n)}function nc(n){let e={code:"code",pre:"pre",...(0,i.R)(),...n.components};return(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-html",children:"<ion-toolbar>\n  <ion-title>Custom Toolbar</ion-title>\n</ion-toolbar>\n\n<style>\n  ion-toolbar {\n    --background: #19422d;\n    --color: white;\n\n    --border-color: #f24aec;\n    --border-width: 4px 0;\n    --border-style: double;\n\n    --min-height: 80px;\n    --padding-top: 20px;\n    --padding-bottom: 20px;\n  }\n</style>\n"})})}function nd(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(nc,{...n})}):nc(n)}function nu(n){let e={code:"code",pre:"pre",...(0,i.R)(),...n.components};return(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-tsx",children:"import React from 'react';\nimport { IonTitle, IonToolbar } from '@ionic/react';\n\nimport './main.css';\n\nfunction Example() {\n  return (\n    <IonToolbar>\n      <IonTitle>Custom Toolbar</IonTitle>\n    </IonToolbar>\n  );\n}\nexport default Example;\n"})})}function np(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(nu,{...n})}):nu(n)}function nh(n){let e={code:"code",pre:"pre",...(0,i.R)(),...n.components};return(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-css",children:"ion-toolbar {\n  --background: #19422d;\n  --color: white;\n\n  --border-color: #f24aec;\n  --border-width: 4px 0;\n  --border-style: double;\n\n  --min-height: 80px;\n  --padding-top: 20px;\n  --padding-bottom: 20px;\n}\n"})})}function nm(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(nh,{...n})}):nh(n)}function nb(n){let e={code:"code",pre:"pre",...(0,i.R)(),...n.components};return(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-html",children:"<template>\n  <ion-toolbar>\n    <ion-title>Custom Toolbar</ion-title>\n  </ion-toolbar>\n</template>\n\n<script setup lang=\"ts\">\n  import { IonTitle, IonToolbar } from '@ionic/vue';\n<\/script>\n\n<style scoped>\n  ion-toolbar {\n    --background: #19422d;\n    --color: white;\n\n    --border-color: #f24aec;\n    --border-width: 4px 0;\n    --border-style: double;\n\n    --min-height: 80px;\n    --padding-top: 20px;\n    --padding-bottom: 20px;\n  }\n</style>\n"})})}function nx(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(nb,{...n})}):nb(n)}function nj(n){let e={code:"code",pre:"pre",...(0,i.R)(),...n.components};return(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-html",children:"<ion-toolbar>\n  <ion-title>Custom Toolbar</ion-title>\n</ion-toolbar>\n"})})}function nf(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(nj,{...n})}):nj(n)}function ng(n){let e={code:"code",pre:"pre",...(0,i.R)(),...n.components};return(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-css",children:"ion-toolbar {\n  --background: #19422d;\n  --color: white;\n\n  --border-color: #f24aec;\n  --border-width: 4px 0;\n  --border-style: double;\n\n  --min-height: 80px;\n  --padding-top: 20px;\n  --padding-bottom: 20px;\n}\n"})})}function nv(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(ng,{...n})}):ng(n)}function nI(n){let e={code:"code",pre:"pre",...(0,i.R)(),...n.components};return(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-ts",children:"import { Component } from '@angular/core';\nimport { IonTitle, IonToolbar } from '@ionic/angular/standalone';\n\n@Component({\n  selector: 'app-example',\n  templateUrl: 'example.component.html',\n  styleUrls: ['example.component.css'],\n  imports: [IonTitle, IonToolbar],\n}

1)\nexport class ExampleComponent {}\n"})})}function ny(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(nI,{...n})}):nI(n)}function nT(n){return(0,r.jsx)(I.A,{version:"8",code:{javascript:nd,react:{files:{"src/main.tsx":np,"src/main.css":nm}},vue:nx,angular:{files:{"src/app/example.component.html":nf,"src/app/example.component.css":nv,"src/app/example.component.ts":ny}}},src:"usage/v8/toolbar/theming/css-properties/demo.html",size:"250px"})}function nw(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(nT,{...n})}):nT(n)}let nC={title:"ion-toolbar"},nB,nk={},nR=[{value:"Basic Usage",id:"basic-usage",level:2},{value:"Buttons in Toolbars",id:"buttons-in-toolbars",level:2},{value:"Searchbars in Toolbars",id:"searchbars-in-toolbars",level:2},...Z.RM,{value:"Segments in Toolbars",id:"segments-in-toolbars",level:2},...Y.RM,{value:"Progress Bars in Toolbars",id:"progress-bars-in-toolbars",level:2},...X.RM,{value:"Theming",id:"theming",level:2},{value:"Colors",id:"colors",level:3},{value:"CSS Custom Properties",id:"css-custom-properties",level:3},{value:"Borders",id:"borders",level:2},{value:"Properties",id:"properties",level:2},{value:"color",id:"prop-color",level:3},{value:"mode",id:"prop-mode",level:3},{value:"Events",id:"events",level:2},{value:"Methods",id:"methods",level:2},{value:"CSS Shadow Parts",id:"css-shadow-parts",level:2},{value:"CSS Custom Properties",id:"css-custom-properties-1",level:2},{value:"Slots",id:"slots",level:2}];function nS(n){let e={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",...(0,i.R)(),...n.components},{Head:o}=e;return o||function(n,e){throw Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}("Head",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(o,{children:[(0,r.jsx)("title",{children:"ion-toolbar: Customize App Menu Toolbar Buttons and Icons"}),(0,r.jsx)("meta",{name:"description",content:"Ion-toolbar component lets you customize toolbar buttons on your app menu. Add fixed toolbars above or below content or use full screen to scroll with content."})]}),"\n","\n",(0,r.jsx)(v.A,{type:"shadow"}),"\n",(0,r.jsxs)(e.p,{children:["Toolbars are generally positioned above or below content and provide content and actions for the current screen. When placed within the ",(0,r.jsx)(e.a,{href:"./content",children:"content"}),", toolbars will scroll with the content."]}),"\n",(0,r.jsx)(e.p,{children:"Toolbars can contain several different components including titles, buttons, icons, back buttons, menu buttons, searchbars, segments, progress bars, and more."}),"\n",(0,r.jsx)(e.h2,{id:"basic-usage",children:"Basic Usage"}),"\n",(0,r.jsxs)(e.p,{children:["It is recommended to put a toolbar inside of a ",(0,r.jsx)(e.a,{href:"./header",children:"header"})," or ",(0,r.jsx)(e.a,{href:"./footer",children:"footer"})," for proper positioning. When a toolbar is placed in a header it will appear fixed at the top of the content. When it is placed in a footer it will appear fixed at the bottom. Fullscreen content will scroll behind a toolbar in a header or footer. A ",(0,r.jsx)(e.a,{href:"./title",children:"title"})," component can be used to display text inside of the toolbar."]}),"\n","\n",(0,r.jsx)(A,{}),"\n",(0,r.jsx)(e.h2,{id:"buttons-in-toolbars",children:"Buttons in Toolbars"}),"\n",(0,r.jsxs)(e.p,{children:["Buttons placed in a toolbar should be placed inside of the ",(0,r.jsx)(e.a,{href:"./buttons",children:"buttons"})," component. The buttons component can be positioned inside of the toolbar using a named ",(0,r.jsx)(e.a,{href:"#slots",children:"slot"}),". The ",(0,r.jsx)(e.code,{children:'"primary"'})," and ",(0,r.jsx)(e.code,{children:'"secondary"'})," slots behave differently in ",(0,r.jsx)(e.code,{children:"ios"})," and ",(0,r.jsx)(e.code,{children:"md"})," mode."]}),"\n",(0,r.jsxs)(e.p,{children:["The buttons component can wrap a standard ",(0,r.jsx)(e.a,{href:"./button",children:"button"}),", ",(0,r.jsx)(e.a,{href:"./back-button",children:"back button"}),", ",(0,r.jsx)(e.a,{href:"./menu-button",children:"menu button"}),", or several of any of them. A button in a toolbar is styled to be clear by default, but this can be changed using the ",(0,r.jsx)(e.a,{href:"./button#fill",children:(0,r.jsx)(e.code,{children:"fill"})})," property on the button. The properties included on back button and menu button in this example are for display purposes; refer to their respective documentation for proper usage."]}),"\n","\n",(0,r.jsx)(J,{}),"\n",(0,r.jsx)(e.h2,{id:"searchbars-in-toolbars",children:"Searchbars in Toolbars"}),"\n",(0,r.jsxs)(e.p,{children:["A ",(0,r.jsx)(e.a,{href:"./searchbar",children:"searchbar"})," can be placed inside of a toolbar to search through the content. It should be the only child component of the toolbar, and will take up the full width and height."]}),"\n","\n",(0,r.jsx)(Z.Ay,{}),"\n",(0,r.jsx)(e.h2,{id:"segments-in-toolbars",children:"Segments in Toolbars"}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.a,{href:"./segment",children:"Segments"})," are generally used in toolbars to toggle between two different c

1ontent views on the same page. They can be placed in a toolbar with other components, such as buttons, but should not be placed alongside a title."]}),"\n","\n",(0,r.jsx)(Y.Ay,{}),"\n",(0,r.jsx)(e.h2,{id:"progress-bars-in-toolbars",children:"Progress Bars in Toolbars"}),"\n",(0,r.jsxs)(e.p,{children:["A ",(0,r.jsx)(e.a,{href:"./progress-bar",children:"progress bar"})," is used as a loading indicator to show an ongoing process in an app. Progress bars can be placed with any other components inside of a toolbar as they will align with the bottom of the toolbar."]}),"\n","\n",(0,r.jsx)(X.Ay,{}),"\n",(0,r.jsx)(e.h2,{id:"theming",children:"Theming"}),"\n",(0,r.jsx)(e.h3,{id:"colors",children:"Colors"}),"\n","\n",(0,r.jsx)(na,{}),"\n",(0,r.jsx)(e.h3,{id:"css-custom-properties",children:"CSS Custom Properties"}),"\n","\n",(0,r.jsx)(nw,{}),"\n",(0,r.jsx)(e.h2,{id:"borders",children:"Borders"}),"\n",(0,r.jsxs)(e.p,{children:["In ",(0,r.jsx)(e.code,{children:"md"})," mode, the ",(0,r.jsx)(e.code,{children:"<ion-header>"})," will receive a box-shadow on the bottom, and the ",(0,r.jsx)(e.code,{children:"<ion-footer>"})," will receive a box-shadow on the top. In ",(0,r.jsx)(e.code,{children:"ios"})," mode, the ",(0,r.jsx)(e.code,{children:"<ion-header>"})," will receive a border on the bottom, and the ",(0,r.jsx)(e.code,{children:"<ion-footer>"})," will receive a border on the top."]}),"\n",(0,r.jsx)(e.h2,{id:"properties",children:"Properties"}),"\n",(0,r.jsx)(s,{}),"\n",(0,r.jsx)(e.h2,{id:"events",children:"Events"}),"\n",(0,r.jsx)(c,{}),"\n",(0,r.jsx)(e.h2,{id:"methods",children:"Methods"}),"\n",(0,r.jsx)(u,{}),"\n",(0,r.jsx)(e.h2,{id:"css-shadow-parts",children:"CSS Shadow Parts"}),"\n",(0,r.jsx)(h,{}),"\n",(0,r.jsx)(e.h2,{id:"css-custom-properties-1",children:"CSS Custom Properties"}),"\n",(0,r.jsx)(j,{}),"\n",(0,r.jsx)(e.h2,{id:"slots",children:"Slots"}),"\n",(0,r.jsx)(g,{})]})}function nN(n={}){let{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(nS,{...n})}):nS(n)}},57250(n,e,o){o.d(e,{A:()=>s});var t=o(74848);o(96540);var r=o(18215),i=o(57663);function l({children:n,className:e,hidden:o}){return(0,t.jsx)("div",{role:"tabpanel",className:(0,r.A)("tabItem_Ymn6",e),hidden:o,children:n})}function s({children:n,className:e,value:o}){let{selectedValue:r,lazy:a}=(0,i.uc)(),c=o===r;return!c&&a?null:(0,t.jsx)(l,{className:e,hidden:!c,children:n})}},50773(n,e,o){o.d(e,{A:()=>p});var t=o(74848);o(96540);var r=o(18215),i=o(88287),l=o(57663),s=o(28584),a=o(19863);function c({className:n}){let{selectedValue:e,selectValue:o,tabValues:i,block:a}=(0,l.uc)(),d=[],{blockElementScrollPositionUntilNextRender:u}=(0,s.a_)(),p=n=>{let t=n.currentTarget,r=i[d.indexOf(t)].value;r!==e&&(u(t),o(r))},h=n=>{let e=null;switch(n.key){case"Enter":p(n);break;case"ArrowRight":{let o=d.indexOf(n.currentTarget)+1;e=d[o]??d[0];break}case"ArrowLeft":{let o=d.indexOf(n.currentTarget)-1;e=d[o]??d[d.length-1]}}e?.focus()};return(0,t.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":a},n),children:i.map(({value:n,label:o,attributes:i})=>(0,t.jsx)("li",{role:"tab",tabIndex:e===n?0:-1,"aria-selected":e===n,ref:n=>{d.push(n)},onKeyDown:h,onClick:p,...i,className:(0,r.A)("tabs__item","tabItem_LNqP",i?.className,{"tabs__item--active":e===n}),children:o??n},n))})}function d({children:n}){return(0,t.jsx)("div",{className:"margin-top--md",children:n})}function u({className:n,children:e}){return(0,t.jsxs)("div",{className:(0,r.A)(i.G.tabs.container,"tabs-container","tabList__CuJ"),children:[(0,t.jsx)(c,{className:n}),(0,t.jsx)(d,{children:e})]})}function p(n){let e=(0,a.A)(),o=(0,l.OC)(n);return(0,t.jsx)(l.O_,{value:o,children:(0,t.jsx)(u,{className:n.className,children:(0,l.vT)(n.children)})},String(e))}},57663(n,e,o){o.d(e,{OC:()=>p,O_:()=>b,uc:()=>m,vT:()=>d});var t=o(74848),r=o(96540),i=o(56347),l=o(99989),s=o(96629),a=o(80618),c=o(41367);function d(n){return r.Children.toArray(n).filter(n=>"\n"!==n)}function u({value:n,tabValues:e}){return e.some(e=>e.value===n)}function p(n){let e,{defaultValue:o,queryString:t=!1,groupId:d}=n,p=function(n){let{values:e,children:o}=n;return(0,r.useMemo)(()=>{let n=e??r.Children.toArray(o).flatMap(n=>{if(!n)return[];if((0,r.isValidElement)(n)&&function(n){let{props:e}=n;return!!e&&"object"==typeof e&&"value"in e}(n))return[n];let e="string"==typeof n.type?n.type:n.type.name;throw Error(`Docusaurus error: Bad <Tabs> child <${e}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.
2If you do not want to pass on a "value" prop to the direct children of <Tabs>, you can also pass an explicit <Tabs values={...}> prop.`)}).map(({props:{value:n,label:e,attributes:o,default:t}})=>({value:n,label:e,attributes:o,default:t})),t=(0,a.XI)(n,(n,e)=>n.value===e.value);if(t.length>0)throw Error(`Docusaurus error: Duplicate values "${t.map(n=>`'${n.value}'`).join(", ")}" found in <Tabs>. Every value needs to be unique.`);return n},[e,o])}(n),[h,m]=(0,r.useState)(()=>(function({defaultValue:n,tabValues:e}){if(0===e.length)throw Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(n){if(!u({value:n,tabValues:e}))throw Error(`Docusaurus error: The <Tabs> has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${e.map(n=>n.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}let o=e.find(n=>n.default)??e[0];if(!o)throw Error("Unexpected error: 0 tabValues");return o.value})({defaultValue:o,tabValues:p})),[b,x]=function({queryString:n=!1,groupId:e}){let o=(0,i.W6)(),t=function({queryString:n=!1,groupId:e}){if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!e)throw Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return e??null}({queryString:n,groupId:e});return[(0,s.aZ)(t),(0,r.useCallback)(n=>{if(!t)return;let e=new URLSearchParams(o.location.search);e.set(t,n),o.replace({...o.location,search:e.toString()})},[t,o])]}({queryString:t,groupId:d}),[j,f]=function({groupId:n}){let e=n?`docusaurus.tab.${n}`:null,[o,t]=(0,c.Dv)(e);return[o,(0,r.useCallback)(n=>{e&&t.set(n)},[e,t])]}({groupId:d}),g=u({value:e=b??j,tabValues:p})?e:null;return(0,l.A)(()=>{g&&m(g)},[g]),{selectedValue:h,selectValue:(0,r.useCallback)(n=>{if(!u({value:n,tabValues:p}))throw Error(`Can't select invalid tab value=${n}`);m(n),x(n),f(n)},[x,f,p]),tabValues:p,lazy:n.lazy??!1,block:n.block??!1}}let h=(0,r.createContext)(null);function m(){let n=r.useContext(h);if(!n)throw Error("useTabsContext() must be used within a Tabs component");return n}function b(n){return(0,t.jsx)(h.Provider,{value:n.value,children:n.children})}},61794(n,e,o){o.d(e,{A:()=>Z});

2var t,r,i=o(74848),l=o(96540),s=o(66497),a=o(52908);let c="__HTML_COMMENT_PLACEHOLDER_",d=/<!--[\s\S]*?-->/g,u=/^([ \t]*)((?:\/\/[^\n]*\n[ \t]*)+|\/\*[\s\S]*?\*\/\s*)?window\.Ionic\s*=\s*\{\s*config\s*:\s*(\{[\s\S]*?\})\s*,?\s*\};?[ \t]*/m,p=n=>{let e=n.indexOf("{"),o=n.lastIndexOf("}");return -1===e||-1===o||e>=o?"":n.slice(e+1,o)},h=n=>n?.mode?`{
3  mode: ${JSON.stringify(n.mode)}
4}`:"{}",m=(n,e)=>{if(!n)return e;let o=p(e).trim();if(0===o.length)return n;let t=p(n).split("\n").filter(n=>n.trim().length>0);if(0===t.length)return`{
5  ${o}
6}`;let r=Math.min(...t.map(n=>n.match(/^\s*/)?.[0].length??0)),i=t.map(n=>`  ${n.slice(r)}`).join("\n").replace(/,$/,"");return`{
7${i},
8  ${o}
9}`},b=(n,e)=>n.split("\n").map((n,o)=>0===o?n:`${e}${n}`).join("\n"),x=(n,e,o,t)=>n.replace(e,(...n)=>{let e=n[1],r=n[n.length-2],i=n[n.length-1],l=i.lastIndexOf("\n",r-1)+1,s=i.slice(l,r).match(/^[ \t]*/)?.[0]??"";return t(b(m(e,o),s))}),j=(n,e)=>e?{...n,dependencies:{...n.dependencies,...e}}:n,f=(n,e)=>{a.A.openProject({template:"node",title:e?.title??"Ionic Docs Example",description:e?.description??"",files:n}

9)},g=async(n,e)=>{let o=`v${e}`,t=await Promise.all(n.map(n=>fetch(`/docs/code/stackblitz/${o}/${n}`)));return await Promise.all(t.map(n=>n.text()))},v=async(n,e)=>{var o;let t,r,i,l=await g(["html/index.ts",e?.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"],e.version),s=j(JSON.parse(l[3]),e?.dependencies),a="index.html",p={"package.json":JSON.stringify(s,null,2),"package-lock.json":l[4],"index.ts":l[0],[a]:l[1],"theme/variables.css":l[2],"tsconfig.json":l[5],"vite.config.ts":l[6],...e?.files};p[a]=(o=l[1],r=b((t=((n,e)=>{let o,t,r,{maskedHtml:i,restore:l}=(r=[],{maskedHtml:n.replace(d,n=>{let e=`${c}${r.length}__`;return r.push(n),e}),restore:n=>n.replace(RegExp(`${c}(\\d+)__`,"g"),(n,e)=>r[Number(e)])}),s=i.replace(u,(n,e,r,i)=>(r&&r.trim().length>0&&(t=`${e}${r.trim()}`),o=i,""));return{code:l(s=s.replace(/<script>\s*\n([ \t]*\n)+/g,"<script>\n").replace(/<script>\s*<\/script>/g,"").replace(/\n{3,}/g,"\n\n")),ionicConfig:m(o,e),leadingComment:t}})(n,h(e))).ionicConfig,"      "),i=((n,e)=>{if(!n)return"";let o=n.split("\n").filter(n=>n.trim().length>0);if(0===o.length)return"";let t=Math.min(...o.map(n=>n.match(/^\s*/)?.[0].length??0));return o.map(n=>`${e}${n.slice(t)}`).join("\n")})(t.leadingComment,"    "),o.replace(/{{ TEMPLATE }}/g,t.code).replace("</head>",`
10  <script>
11${i?`${i}
12`:""}    window.Ionic = {
13      config: ${r}
14    };
15  </script>
16</head>
17`)),f(p,e)},I=async(n,e)=>{let o=await g(["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",e?.includeIonContent?"angular/app.component.withContent.ts":"angular/app.component.ts","angular/app.component.css",e?.includeIonContent?"angular/app.component.withContent.html":"angular/app.component.html","angular/example.component.ts","angular/styles.css","angular/global.css","angular/variables.css"],e.version),t=j(JSON.parse(o[0]),e?.dependencies),r="src/main.ts",i={"package.json":JSON.stringify(t,null,2),"package-lock.json":o[1],"angular.json":o[2],"tsconfig.json":o[3],"tsconfig.app.json":o[4],[r]:o[5],"src/index.html":o[6],"src/polyfills.ts":"9"===e.version?"":"import 'zone.js';","src/app/app.routes.ts":o[7],"src/app/app.component.ts":o[8],"src/app/app.component.css":o[9],"src/app/app.component.html":o[10],"src/app/example.component.ts":o[11],"src/app/example.component.html":n,"src/app/example.component.css":"","src/styles.css":o[12],"src/global.css":o[13],"src/theme/variables.css":o[14],...e?.files},l=h(e);i[r]="6"===e.version?x(i[r],/IonicModule\.forRoot\(\s*(\{[\s\S]*?\})?\s*\)/s,l,n=>`IonicModule.forRoot(${n})`):x(i[r],/provideIonicAngular\(\s*(\{[\s\S]*?\})?\s*\)/s,l,n=>`provideIonicAngular(${n})`),f(i,e)},y=async(n,e)=>{let o=await g(["react/index.tsx",e?.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"],e.version),t=j(JSON.parse(o[4]),e?.dependencies),r="src/App.tsx",i={".eslintrc.js":o[9],".browserslistrc":o[8],"vite.config.js":o[7],"index.html":o[6],"src/index.tsx":o[0],[r]:o[1],"src/main.tsx":n,"src/theme/variables.css":o[2],"tsconfig.json":o[3],"package.json":JSON.stringify(t,null,2),"package-lock.json":o[5],...e?.files,".stackblitzrc":`{
18  "startCommand": "yarn run start"
19}`};i[r]=x(i[r],/setupIonicReact\(\s*(\{[\s\S]*?\})?\s*\)/s,h(e),n=>`setupIonicReact(${n})`),f(i,e)},T=async(n,e)=>{let o=await g(["vue/package.json","vue/package-lock.json","vue/index.html","vue/variables.css","vue/vite.config.ts","vue/main.ts",e?.includeIonContent?"vue/App.withContent.vue":"vue/App.vue","vue/tsconfig.json","vue/tsconfig.node.json"],e.version),t=j(JSON.parse(o[0]),e?.dependencies),r="src/main.ts",i={"src/App.vue":o[6],"src/components/Example.vue":n,[r]:o[5],"src/theme/variables.css":o[3],"index.html":o[2],"vite.config.ts":o[4],"package.json":JSON.stringify(t,null,2),"package-lock.json":o[

191],"tsconfig.json":o[7],"tsconfig.node.json":o[8],...e?.files,".stackblitzrc":`{
20  "startCommand": "yarn run dev"
21}`};i[r]=x(i[r],/\.use\(IonicVue(?:,\s*(\{[\s\S]*?\}))?\)/s,h(e),n=>`.use(IonicVue, ${n})`),f(i,e)};var w=o(83941),C=((t={}).JavaScript="javascript",t.Angular="angular",t.React="react",t.Vue="vue",t),B=((r={}).iOS="ios",r.MD="md",r),k=o(52617),R=o(34743),S=o(95419);function N({content:n,children:e}){let[o,t]=(0,l.useState)(!1),{refs:r,floatingStyles:s,context:a}=(0,k.we)({open:o,onOpenChange:t,placement:"bottom",middleware:[(0,R.cY)(10),(0,R.UU)(),(0,R.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:u,styles:p}=(0,k.DL)(a,{duration:{open:300,close:250}}),h=(0,k.SV)([r.setReference,e.props.ref]);return(0,i.jsxs)(i.Fragment,{children:[(0,l.cloneElement)(e,c({...e.props,ref:h})),u&&(0,i.jsx)(k.XF,{children:(0,i.jsx)("div",{ref:r.setFloating,className:"tooltip__root",style:s,...d(),children:(0,i.jsx)("div",{className:"tooltip",style:p,children:n})})})]})}var _=o(19863),E=o(80618),A=o(28584),L=o(20053);let M="tabNavItem_t9Ol",H="tabNavButton__N7i";function O(n){let{lazy:e,block:o,defaultValue:t,values:r,groupId:s,className:a}=n,[c,d]=(0,l.useState)(!1),[u,p]=(0,l.useState)(!1),h=(0,l.createRef)(),m=l.Children.map(n.children,n=>{if((0,l.isValidElement)(n)&&function(n){let{props:e}=n;return!!e&&"object"==typeof e&&"value"in e}(n))return n;throw Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof n.type?n.type:n.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)}),b=r??m.map(({props:{value:n,label:e,icon:o,attributes:t}})=>({value:n,label:e,attributes:t,icon:o})),x=(0,E.XI)(b,(n,e)=>n.value===e.value);if(x.length>0)throw Error(`Docusaurus error: Duplicate values "${x.map(n=>n.value).join(", ")}" found in <Tabs>. Every value needs to be unique.`);let j=null===t?t:t??m.find(n=>n.props.default)?.props.value??m[0]?.props.value;if(null!==j&&!b.some(n=>n.value===j))throw Error(`Docusaurus error: The <Tabs> has a defaultValue "${j}" but none of its children has the corresponding value. Available values are: ${b.map(n=>n.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);let[f,g]=(0,l.useState)(j),v=[],{blockElementScrollPositionUntilNextRender:I}=(0,A.a_)(),y=n=>{let e=n.currentTarget,o=b[v.indexOf(e)].value;o!==f&&(I(e),g(o))},T=n=>{let e=null;switch(n.key){case"ArrowRight":{let o=v.indexOf(n.currentTarget)+1;e=v[o]||v[0];break}case"ArrowLeft":{let o=v.indexOf(n.currentTarget)-1;e=v[o]||v[v.length-1]}}e?.focus()};(0,l.useEffect)(()=>{d(h.current?.scrollLeft>40),p(h.current?.scrollWidth>h.current?.offsetWidth)},[s]);let w=void 0===b.find(n=>n.value===f),C=n=>w?n===b[0].value:n===f;return(0,i.jsxs)("div",{className:(0,L.A)("tabs-container","tabList_nZAZ"),children:[(0,i.jsx)("div",{className:(0,L.A)("tabs-nav","tabNav_gxPI"),children:(0,i.jsxs)("ul",{ref:h,role:"tablist","aria-orientation":"horizontal",className:(0,L.A)("tabs",{"tabs--block":o},a),onScroll:()=>{d(h.current?.scrollLeft>40),p(h.current?.scrollWidth>h.current?.offsetWidth)},children:[c&&(0,i.jsx)("div",{className:(0,L.A)("tabs__nav-item",M,"tabNavItemLeft_qnms"),children:(0,i.jsx)("button",{className:(0,L.A)("tabs__nav-button",H),onClick:()=>{h.current.scrollTo({left:h.current.scrollLeft-150,behavior:"smooth"})},children:(0,i.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 512 512",children:(0,i.jsx)("polyline",{points:"328 112 184 256 328 400",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"48px"})})})}),b.map(({value:n,label:e,icon:o,attributes:t})=>{let r=C(n);return(0,i.jsxs)("li",{role:"tab",tabIndex:r?0:-1,"aria-selected":r,ref:n=>v.push(n),onKeyDown:T,onFocus:y,onClick:y,...t,className:(0,L.A)("tabs__item","tabItem_VZd9",t?.className,{"tabs__item--active":r}),children:[o&&(0,i.jsx)("span",{className:(0,L.A)("tabs__icon","tabIcon_DCeC"),children:o}),e??n]},n)}),u&&(0,i.jsx)("div",{className:(0,L.A)("tabs__nav-item",M),children:(0,i.jsx)("button",{className:(0,L.A)("tabs__nav-button",H),onClick:()=>{h.current.scrollTo({left:h.current.scrollLeft+150,behavior:"smooth"})},children:(0,i.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 512 512",children:(0,i.jsx)("polyline",{points:"184 112 328 256 184 400",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"48px"})})})})]})}),e?(0,l.cloneElement)(m.filter(n=>C(n.props.value))[0],{className:"margin-top--md"}):(0,i.jsx)("div",{className:"margin-top--md",children:m.map((n,e)=>(0,l.cloneElement)(n,{key:e,className:`${n.props.className} ${!C(n.props.value)?"hidden":""}`}))})]})}function $(n){let e=(0,_.A)();return(0,i.jsx)(O,{...n},String(e))}function P({children:n,className:e}){return(0,i.jsx)("div",{role:"tabpanel",className:(0,L.A)("tabPanel_Fc1s",e),children:n})}let D=()=>(0,i.jsxs)("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,i.jsx)("path",{d:"M3.75 8.625L0.75 6L3.75 3.375",stroke:"#EB4700",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),(0,i.jsx)("path",{d:"M8.25 8.625L11.25 6L8.25 3.375",stroke:"#EB4700",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),V=()=>(0,i.jsx)("svg",{width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,i.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.4902

211C11.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.121379 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"})}),z=()=>(0,i.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 512 512",children:[(0,i.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,i.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"})]}),F=()=>(0,i.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",height:"12",width:"12",children:(0,i.jsx)("path",{d:"M20.414,2H5V30H27V8.586ZM7,28V4H19v6h6V28Z",fill:"#3178C6"})}),W=()=>(0,i.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",height:"12",width:"12",children:[(0,i.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,i.jsx)("polygon",{points:"16 27.858 24.17 25.593 26.092 4.061 16 4.061 16 27.858",fill:"#33a9dc"}),(0,i.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,i.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,i.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,i.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,i.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"})]}),U=()=>(0,i.jsxs)("div",{className:"icon__dots",children:[(0,i.jsx)("svg",{viewBox:"0 0 64 64",children:(0,i.jsx)("circle",{transform:"translate(32,32)",r:"6"})}),(0,i.jsx)("svg",{viewBox:"0 0 64 64",children:(0,i.jsx)("circle",{transform:"translate(32,32)",r:"6"})}),(0,i.jsx)("svg",{viewBox:"0 0 64 64",children:(0,i.jsx)("circle",{transform:"translate(32,32)",r:"6"})})]}),q=(0,l.forwardRef)(({isSelected:n,handleClick:e,title:o,label:t,disabled:r},l)=>{let s=(0,i.jsx)("button",{title:r?void 0:o,disabled:r,className:`playground__control-button ${n?"playground__control-button--selected":""}`,onClick:e,"data-text":t,ref:l,children:t});return r?(0,i.jsx)(N,{content:`Unavailable for ${t}`,children:(0,i.jsx)("div",{children:s})}):s}),J=({language:n,usageTarget:e,setAndSaveUsageTarget:o,disabled:t})=>{let r=(0,l.useRef)(null),s=C[n];return(0,i.jsx)(q,{isSelected:e===s,handleClick:()=>{o(s,r.current)},title:`Show ${n} code`,label:n,disabled:t,ref:r})};function Z({code:n,title:e,description:t,src:r,size:a="small",mode:c,devicePreview:d,showConsole:u,includeIonContent:p=!0,version:h,defaultFramework:m}){let b;if(!n||0===Object.keys(n).length)return void console.warn("No code usage examples provided for this Playground example.");

21if(void 0!==c&&"ios"!==c&&"md"!==c)return void console.warn(`Invalid mode provided: ${c}. Accepted values are: "ios" or "md".`);if(void 0===h)return void console.warn('You must specify a `version` for the Playground example. For example: <Playground version="7" />');let{colorMode:x}=(0,w.G)(),j=(0,_.A)(),f=(0,l.useRef)(null),g=(0,l.useRef)(null),k=(0,l.useRef)(null),R=(0,l.useRef)(null),S=(0,l.useRef)(null),{blockElementScrollPositionUntilNextRender:E}=(0,A.a_)(),L=()=>{if(c)return c;if(j){let n=localStorage.getItem(nn);if(n)return n}return B.iOS},M=()=>{if(m&&void 0!==n[m])return m;if(j){let e=localStorage.getItem(Q);if(e&&void 0!==n[e])return e}return void 0!==n[C.Angular]?C.Angular:Object.keys(n)[0]},H=Y[a]||a,[O,K]=(0,l.useState)(M()),[nt,nr]=(0,l.useState)(L()),[ni,nl]=(0,l.useState)({}),[ns,na]=(0,l.useState)(!1),[nc,nd]=(0,l.useState)(!1),[nu,np]=(0,l.useState)("dark"===x),[nh,nm]=(0,l.useState)([]),[nb,nx]=(0,l.useState)([]),[nj,nf]=(0,l.useState)(0),[ng,nv]=(0,l.useState)(!1),nI=n=>{nr(n),j&&(localStorage.setItem(nn,n),window.dispatchEvent(new CustomEvent(no,{detail:n})))},ny=(n,e)=>{K(n),j&&(localStorage.setItem(Q,n),E(e),window.dispatchEvent(new CustomEvent(ne,{detail:n})))},nT=async()=>{if(k.current&&R.current){await Promise.all([X(k.current),X(R.current)]);let n={darkMode:nu};k.current&&k.current.contentWindow.postMessage(n),R.current&&R.current.contentWindow.postMessage(n)}},nw=(n,e)=>{"ios"===e?k.current=n:R.current=n,k.current&&R.current&&nT()};(0,l.useEffect)(()=>{np("dark"===x)},[x]),(0,l.useEffect)(()=>{nT()},[nu]),(0,l.useEffect)(()=>{(async()=>{await Promise.all([X(k.current),X(R.current)]),nd(!0)})()},[ns]),(0,l.useEffect)(()=>{u&&(k.current&&k.current.contentWindow.addEventListener("console",n=>{nx(e=>[...e,n.detail]),S.current.scrollTo(0,S.current.scrollHeight)}),R.current&&R.current.contentWindow.addEventListener("console",n=>{nm(e=>[...e,n.detail]),S.current.scrollTo(0,S.current.scrollHeight)}))},[nc,nj]),(0,l.useEffect)(()=>{o.e("5812").then(o.bind(o,92607)).then(n=>n.defineCustomElement())}),(0,l.useEffect)(()=>{new IntersectionObserver(n=>{let e=n[0];nv(e.isIntersecting),e.isIntersecting&&(nr(L()),m||K(M()),ns||na(!0))},{threshold:0}).observe(f.current)});let nC=n=>{let e=n.detail;Object.values(B).includes(e)&&nr(e)},nB=n=>{let e=n.detail;Object.values(C).includes(e)&&K(e)};(0,l.useEffect)(()=>(j&&ng&&(window.addEventListener(no,nC),window.addEventListener(ne,nB)),()=>{window.removeEventListener(no,nC),window.removeEventListener(ne,nB)}),[j,ng]);let nk=nt===B.iOS,nR=nt===B.MD,nS=(0,s.Ay)(`${r}?ionic:mode=${B.iOS}`),nN=(0,s.Ay)(`${r}?ionic:mode=${B.MD}`),n_=n[O]?.files!==void 0;async function nE(){k.current&&k.current.contentWindow.location.reload(),R.current&&R.current.contentWindow.location.reload(),nx([]),nm([]),await Promise.all([G(k.current),G(R.current)]),nf(n=>n+1)}function nA(n,e){let o=e;return o=o.replace(/[^a-zA-Z0-9]/g,"_"),`playground_${n}_${o}`}(0,l.useEffect)(()=>{let e={};Object.keys(n).forEach(o=>{if("function"==typeof n[o]){let t=n[o];e[o]=(0,i.jsx)(t,{})}else if("object"==typeof n[o]){let t={};for(let e of Object.keys(n[o].files)){let r=n[o].files[e];t[`${e}`]=(0,i.jsx)(r,{})}e[o]=t}}),nl(e)},[]);let nL=(0,l.useMemo)(()=>Object.keys(C).sort(),[]);return(0,i.jsxs)("div",{className:"playground",ref:f,children:[(0,i.jsxs)("div",{className:`playground__container ${u?"playground__container--has-console":""}`,children:[(0,i.jsxs)("div",{className:"playground__control-toolbar",children:[(0,i.jsx)("div",{className:"playground__control-group",children:nL.map(e=>{let o=void 0!==n[C[e]];return(0,i.jsx)(J,{language:e,usageTarget:O,setAndSaveUsageTarget:ny,disabled:!o},`code-block-${e}`)})}),(0,i.jsxs)("div",{className:"playground__control-group",children:[(0,i.jsx)(q,{disabled:c&&"md"===c,isSelected:nk,handleClick:()=>nI(B.iOS),title:"iOS mode",label:"iOS"}),(0,i.jsx)(q,{disabled:c&&"ios"===c,isSelected:nR,handleClick:()=>nI(B.MD),title:"MD mode",label:"MD"})]}),(0,i.jsxs)("div",{className:"playground__control-group playground__control-group--end",children:[(0,i.jsx)(N,{content:"Open in StackBlitz",children:(0,i.jsx)("button",{className:"playground__icon-button playground__icon-button--primary",onClick:function(o){let r={title:e,description:t,includeIonContent:p,mode:nk?"ios":"md",version:h},i=g.current.querySelector("code").outerText;switch(n_&&(r.files=Object.keys(ni[O]).map(n=>{let e=f.current.querySelector(`#${nA(O,n)} code`),o=e.outerText;if(0===o.trim().length){let n=document.createElement("div");n.innerHTML=e.innerHTML,o=n.outerText}return{[n]:o}}).reduce((n,e)=>({...n,...e}),{}),r.dependencies=n[O].dependencies),O){case C.Angular:I(i,r);break;case C.JavaScript:v(i,r);break;case C.React:y(i,r);break;case C.Vue:T(i,r)}},children:(0,i.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,i.jsx)("path",{d:"M5.53812 5.91743L7.52915 1L1 8.01835H4.42601L2.42601 13L9 5.91743H5.53812Z",stroke:"#73849A",strokeLinejoin:"round"})})})}),(0,i.jsx)(N,{content:n_?"For multi-file examples, use the copy buttons on the code blocks":"Copy source code",children:(0,i.jsx)("button",{className:`playground__icon-button playground__icon-button--primary ${n_?"playground__icon-button--disabled":""}`,"aria-disabled":n_,onClick:function(){n_||g.current.querySelector("button").click()},children:(0,i.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,i.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"}

21),(0,i.jsx)("rect",{x:"3",y:"3",width:"8",height:"8",rx:"1.5",stroke:"current"})]})})}),(0,i.jsx)(N,{content:"Reset demo",children:(0,i.jsx)("button",{className:"playground__icon-button",onClick:nE,children:(0,i.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,i.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,i.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,i.jsx)(N,{content:"Report an issue",children:(0,i.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,i.jsx)("svg",{"aria-hidden":"true",width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",children:(0,i.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"})})})})]})]}),ns?[(0,i.jsxs)("div",{className:"playground__preview",children:[!nc&&(0,i.jsx)("div",{className:"playground__loading",children:(0,i.jsx)(U,{})}),d?[(0,i.jsx)("div",{className:nk?"frame-visible":"frame-hidden","aria-hidden":nk?null:"true",children:(0,i.jsx)("device-preview",{mode:"ios",children:(0,i.jsx)("iframe",{height:H,ref:n=>nw(n,"ios"),src:nS})})},"ios-iframe"),(0,i.jsx)("div",{className:nR?"frame-visible":"frame-hidden","aria-hidden":nR?null:"true",children:(0,i.jsx)("device-preview",{mode:"md",children:(0,i.jsx)("iframe",{height:H,ref:n=>nw(n,"md"),src:nN})})},"md-iframe")]:[(0,i.jsx)("iframe",{height:H,className:nk?"":"frame-hidden",ref:n=>nw(n,"ios"),src:nS,"aria-hidden":nk?null:"true"},"ios-iframe"),(0,i.jsx)("iframe",{height:H,className:nR?"":"frame-hidden",ref:n=>nw(n,"md"),src:nN,"aria-hidden":nR?null:"true"},"md-iframe")]]},"preview")]:[]]}),u&&(b=nt===B.iOS?nb:nh,(0,i.jsxs)("div",{className:"playground__console",children:[(0,i.jsx)("div",{className:"playground__console-header",children:(0,i.jsx)("code",{children:"Console"})}),(0,i.jsx)("div",{className:"playground__console-body",ref:S,children:0===b.length?(0,i.jsx)("div",{className:"playground__console-item playground__console-item--placeholder",children:(0,i.jsx)("code",{children:"Console messages will appear here when logged from the example above."})}):b.map((n,e)=>(0,i.jsxs)("div",{className:`playground__console-item playground__console-item--${n.type}`,children:["log"!==n.type&&(0,i.jsx)("div",{className:"playground__console-icon",children:"warning"===n.type?"\u26A0":"\u274C"}),(0,i.jsx)("code",{children:n.message})]},e))})]})),(0,i.jsx)("div",{ref:g,className:"playground__code-block",children:function(){if(n[O])return n_?null==ni[O]?null:(0,i.jsx)($,{groupId:O,className:"playground__tabs",children:Object.keys(ni[O]).map(n=>(0,i.jsx)(P,{className:"playground__tab-item",value:n,label:n,icon:function(n){switch(n.slice(n.lastIndexOf(".")+1)){case"ts":case"tsx":return(0,i.jsx)(V,{});case"html":return(0,i.jsx)(D,{});case"vue":return(0,i.jsx)(z,{});case"css":return(0,i.jsx)(W,{});default:return(0,i.jsx)(F,{})}}(n),children:(0,i.jsx)("div",{id:nA(O,n),children:ni[O][n]})}

21,n))}):ni[O]}()})]})}let Y={xsmall:"100px",small:"200px",medium:"400px",large:"600px",xlarge:"800px"},X=n=>K(n)?Promise.resolve():new Promise(e=>{n&&n.contentWindow.addEventListener("demoReady",()=>{e()})}),G=n=>new Promise(e=>{let o=()=>{n.removeEventListener("load",o),e()};n&&n.addEventListener("load",o)}),K=n=>!!n&&!0===n.contentWindow.demoReady,Q="playground_usage_target",nn="playground_mode",ne="playground-usage-target-updated",no="playground-event-updated"},54441(n,e,o){o.d(e,{A:()=>s});var t=o(74848);o(96540);var r=o(20053),i=o(66497),l=o(95310);function s({type:n,...e}){let o=(0,i.Ay)(`reference/glossary#${n}`);return(0,t.jsx)(l.A,{to:o,...e,className:(0,r.A)(e.className,"encapsulation-pill","encapsulationPill_weMM"),children:n})}}}]);

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.