离子模态:离子移动应用betway东盟体育app自定义模态API组件</标题><style sty-id="sc-docs-root">@charset "UTF-8";html.ios{--ion-default-font:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif}html.md{--ion-default-font:"Roboto", "Helvetica Neue", sans-serif}html{--ion-font-family:var(--ion-default-font)}body{background:var(--ion-background-color)}body.backdrop-no-scroll{overflow:hidden}html.ios ion-modal.modal-card .ion-page>ion-header>ion-toolbar:first-of-type{padding-top:0px}html.ios ion-modal .ion-page{border-radius:inherit}.ion-color-primary{--ion-color-base:var(--ion-color-primary, #3880ff) !important;--ion-color-base-rgb:var(--ion-color-primary-rgb, 56, 128, 255) !important;--ion-color-contrast:var(--ion-color-primary-contrast, #fff) !important;--ion-color-contrast-rgb:var(--ion-color-primary-contrast-rgb, 255, 255, 255) !important;--ion-color-shade:var(--ion-color-primary-shade, #3171e0) !important;--ion-color-tint:var(--ion-color-primary-tint, #4c8dff) !important}.ion-color-secondary{--ion-color-base:var(--ion-color-secondary, #3dc2ff) !important;--ion-color-base-rgb:var(--ion-color-secondary-rgb, 61, 194, 255) !important;--ion-color-contrast:var(--ion-color-secondary-contrast, #fff) !important;--ion-color-contrast-rgb:var(--ion-color-secondary-contrast-rgb, 255, 255, 255) !important;--ion-color-shade:var(--ion-color-secondary-shade, #36abe0) !important;--ion-color-tint:var(--ion-color-secondary-tint, #50c8ff) !important}.ion-color-tertiary{--ion-color-base:var(--ion-color-tertiary, #5260ff) !important;--ion-color-base-rgb:var(--ion-color-tertiary-rgb, 82, 96, 255) !important;--ion-color-contrast:var(--ion-color-tertiary-contrast, #fff) !important;--ion-color-contrast-rgb:var(--ion-color-tertiary-contrast-rgb, 255, 255, 255) !important;--ion-color-shade:var(--ion-color-tertiary-shade, #4854e0) !important;--ion-color-tint:var(--ion-color-tertiary-tint, #6370ff) !important}.ion-color-success{--ion-color-base:var(--ion-color-success, #2dd36f) !important;--ion-color-base-rgb:var(--ion-color-success-rgb, 45, 211, 111) !important;--ion-color-contrast:var(--ion-color-success-contrast, #fff) !important;--ion-color-contrast-rgb:var(--ion-color-success-contrast-rgb, 255, 255, 255) !important;--ion-color-shade:var(--ion-color-success-shade, #28ba62) !important;--ion-color-tint:var(--ion-color-success-tint, #42d77d) !important}.ion-color-warning{--ion-color-base:var(--ion-color-warning, #ffc409) !important;--ion-color-base-rgb:var(--ion-color-warning-rgb, 255, 196, 9) !important;--ion-color-contrast:var(--ion-color-warning-contrast, #000) !important;--ion-color-contrast-rgb:var(--ion-color-warning-contrast-rgb, 0, 0, 0) !important;--ion-color-shade:var(--ion-color-warning-shade, #e0ac08) !important;--ion-color-tint:var(--ion-color-warning-tint, #ffca22) !important}.ion-color-danger{--ion-color-base:var(--ion-color-danger, #eb445a) !important;--ion-color-base-rgb:var(--ion-color-danger-rgb, 235, 68, 90) !important;--ion-color-contrast:var(--ion-color-danger-contrast, #fff) !important;--ion-color-contrast-rgb:var(--ion-color-danger-contrast-rgb, 255, 255, 255) !important;--ion-color-shade:var(--ion-color-danger-shade, #cf3c4f) !important;--ion-color-tint:var(--ion-color-danger-tint, #ed576b) !important}.ion-color-light{--ion-color-base:var(--ion-color-light, #f4f5f8) !important;--ion-color-base-rgb:var(--ion-color-light-rgb, 244, 245, 248) !important;--ion-color-contrast:var(--ion-color-light-contrast, #000) !important;--ion-color-contrast-rgb:var(--ion-color-light-contrast-rgb, 0, 0, 0) !important;--ion-color-shade:var(--ion-color-light-shade, #d7d8da) !important;--ion-color-tint:var(--ion-color-light-tint, #f5f6f9) !important}.ion-color-medium{--ion-color-base:var(--ion-color-medium, #92949c) !important;--ion-color-base-rgb:var(--ion-color-medium-rgb, 146, 148, 156) !important;--ion-color-contrast:var(--ion-color-medium-contrast, #fff) !important;--ion-color-contrast-rgb:var(--ion-color-medium-contrast-rgb, 255, 255, 255) !important;--ion-color-shade:var(--ion-color-medium-shade, #808289) !important;--ion-color-tint:var(--ion-color-medium-tint, #9d9fa6) !important}.ion-color-dark{--ion-color-base:var(--ion-color-dark, #222428) !important;--ion-color-base-rgb:var(--ion-color-dark-rgb, 34, 36, 40) !important;--ion-color-contrast:var(--ion-color-dark-contrast, #fff) !important;--ion-color-contrast-rgb:var(--ion-color-dark-contrast-rgb, 255, 255, 255) !important;--ion-color-shade:var(--ion-color-dark-shade, #1e2023) !important;--ion-color-tint:var(--ion-color-dark-tint, #383a3e) !important}.ion-page{left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;contain:layout size style;overflow:hidden;z-index:0}.split-pane-visible>.ion-page.split-pane-main{position:relative}ion-route,ion-route-redirect,ion-router,ion-select-option,ion-nav-controller,ion-menu-controller,ion-action-sheet-controller,ion-alert-controller,ion-loading-controller,ion-modal-controller,ion-picker-controller,ion-popover-controller,ion-toast-controller,.ion-page-hidden,[hidden]{display:none !important}.ion-page-invisible{opacity:0}.can-go-back>ion-header ion-back-button{display:block}html.plt-ios.plt-hybrid,html.plt-ios.plt-pwa{--ion-statusbar-padding:20px}@supports (padding-top: 20px){html{--ion-safe-area-top:var(--ion-statusbar-padding)}}@supports (padding-top: constant(safe-area-inset-top)){html{--ion-safe-area-top:constant(safe-area-inset-top);--ion-safe-area-bottom:constant(safe-area-inset-bottom);--ion-safe-area-left:constant(safe-area-inset-left);--ion-safe-area-right:constant(safe-area-inset-right)}}@supports (padding-top: env(safe-area-inset-top)){html{--ion-safe-area-top:env(safe-area-inset-top);--ion-safe-area-bottom:env(safe-area-inset-bottom);--ion-safe-area-left:env(safe-area-inset-left);--ion-safe-area-right:env(safe-area-inset-right)}}ion-card.ion-color .ion-inherit-color,ion-card-header.ion-color .ion-inherit-color{color:inherit}.menu-content{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.menu-content-open{cursor:pointer;-ms-touch-action:manipulation;touch-action:manipulation;pointer-events:none}.ios .menu-content-reveal{-webkit-box-shadow:-8px 0 42px rgba(0, 0, 0, 0.08);box-shadow:-8px 0 42px rgba(0, 0, 0, 0.08)}[dir=rtl].ios .menu-content-reveal{-webkit-box-shadow:8px 0 42px rgba(0, 0, 0, 0.08);box-shadow:8px 0 42px rgba(0, 0, 0, 0.08)}.md .menu-content-reveal{-webkit-box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18);box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18)}.md .menu-content-push{-webkit-box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18);box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18)}.ion-no-padding{--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}.ion-padding{--padding-start:var(--ion-padding, 16px);--padding-end:var(--ion-padding, 16px);--padding-top:var(--ion-padding, 16px);--padding-bottom:var(--ion-padding, 16px);padding-left:var(--ion-padding, 16px);padding-right:var(--ion-padding, 16px);padding-top:var(--ion-padding, 16px);padding-bottom:var(--ion-padding, 16px)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.ion-padding{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-padding, 16px);padding-inline-start:var(--ion-padding, 16px);-webkit-padding-end:var(--ion-padding, 16px);padding-inline-end:var(--ion-padding, 16px)}}.ion-padding-top{--padding-top:var(--ion-padding, 16px);padding-top:var(--ion-padding, 16px)}.ion-padding-start{--padding-start:var(--ion-padding, 16px);padding-left:var(--ion-padding, 16px)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.ion-padding-start{padding-left:unset;-webkit-padding-start:var(--ion-padding, 16px);padding-inline-start:var(--ion-padding, 16px)}}.ion-padding-end{--padding-end:var(--ion-padding, 16px);padding-right:var(--ion-padding, 16px)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.ion-padding-end{padding-right:unset;-webkit-padding-end:var(--ion-padding, 16px);padding-inline-end:var(--ion-padding, 16px)}}.ion-padding-bottom{--padding-bottom:var(--ion-padding, 16px);padding-bottom:var(--ion-padding, 16px)}.ion-padding-vertical{--padding-top:var(--ion-padding, 16px);--padding-bottom:var(--ion-padding, 16px);padding-top:var(--ion-padding, 16px);padding-bottom:var(--ion-padding, 16px)}.ion-padding-horizontal{--padding-start:var(--ion-padding, 16px);--padding-end:var(--ion-padding, 16px);padding-left:var(--ion-padding, 16px);padding-right:var(--ion-padding, 16px)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.ion-padding-horizontal{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-padding, 16px);padding-inline-start:var(--ion-padding, 16px);-webkit-padding-end:var(--ion-padding, 16px);padding-inline-end:var(--ion-padding, 16px)}}.ion-no-margin{--margin-start:0;--margin-end:0;--margin-top:0;--margin-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.ion-margin{--margin-start:var(--ion-margin, 16px);--margin-end:var(--ion-margin, 16px);--margin-top:var(--ion-margin, 16px);--margin-bottom:var(--ion-margin, 16px);margin-left:var(--ion-margin, 16px);margin-right:var(--ion-margin, 16px);margin-top:var(--ion-margin, 16px);margin-bottom:var(--ion-margin, 16px)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.ion-margin{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--ion-margin, 16px);margin-inline-start:var(--ion-margin, 16px);-webkit-margin-end:var(--ion-margin, 16px);margin-inline-end:var(--ion-margin, 16px)}}.ion-margin-top{--margin-top:var(--ion-margin, 16px);margin-top:var(--ion-margin, 16px)}.ion-margin-start{--margin-start:var(--ion-margin, 16px);margin-left:var(--ion-margin, 16px)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.ion-margin-start{margin-left:unset;-webkit-margin-start:var(--ion-margin, 16px);margin-inline-start:var(--ion-margin, 16px)}}.ion-margin-end{--margin-end:var(--ion-margin, 16px);margin-right:var(--ion-margin, 16px)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.ion-margin-end{margin-right:unset;-webkit-margin-end:var(--ion-margin, 16px);margin-inline-end:var(--ion-margin, 16px)}}.ion-margin-bottom{--margin-bottom:var(--ion-margin, 16px);margin-bottom:var(--ion-margin, 16px)}.ion-margin-vertical{--margin-top:var(--ion-margin, 16px);--margin-bottom:var(--ion-margin, 16px);margin-top:var(--ion-margin, 16px);margin-bottom:var(--ion-margin, 16px)}.ion-margin-horizontal{--margin-start:var(--ion-margin, 16px);--margin-end:var(--ion-margin, 16px);margin-left:var(--ion-margin, 16px);margin-right:var(--ion-margin, 16px)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.ion-margin-horizontal{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--ion-margin, 16px);margin-inline-start:var(--ion-margin, 16px);-webkit-margin-end:var(--ion-margin, 16px);margin-inline-end:var(--ion-margin, 16px)}}.ion-float-left{float:left !important}.ion-float-right{float:right !important}.ion-float-start{float:left !important}[dir=rtl] .ion-float-start,:host-context([dir=rtl]) .ion-float-start{float:right !important}.ion-float-end{float:right !important}[dir=rtl] .ion-float-end,:host-context([dir=rtl]) .ion-float-end{float:left !important}@media (min-width: 576px){.ion-float-sm-left{float:left !important}.ion-float-sm-right{float:right !important}.ion-float-sm-start{float:left !important}[dir=rtl] .ion-float-sm-start,:host-context([dir=rtl]) .ion-float-sm-start{float:right !important}.ion-float-sm-end{float:right !important}[dir=rtl] .ion-float-sm-end,:host-context([dir=rtl]) .ion-float-sm-end{float:left !important}}@media (min-width: 768px){.ion-float-md-left{float:left !important}.ion-float-md-right{float:right !important}.ion-float-md-start{float:left !important}[dir=rtl] .ion-float-md-start,:host-context([dir=rtl]) .ion-float-md-start{float:right !important}.ion-float-md-end{float:right !important}[dir=rtl] .ion-float-md-end,:host-context([dir=rtl]) .ion-float-md-end{float:left !important}}@media (min-width: 992px){.ion-float-lg-left{float:left !important}.ion-float-lg-right{float:right !important}.ion-float-lg-start{float:left !important}[dir=rtl] .ion-float-lg-start,:host-context([dir=rtl]) .ion-float-lg-start{float:right !important}.ion-float-lg-end{float:right !important}[dir=rtl] .ion-float-lg-end,:host-context([dir=rtl]) .ion-float-lg-end{float:left !important}}@media (min-width: 1200px){.ion-float-xl-left{float:left !important}.ion-float-xl-right{float:right !important}.ion-float-xl-start{float:left !important}[dir=rtl] .ion-float-xl-start,:host-context([dir=rtl]) .ion-float-xl-start{float:right !important}.ion-float-xl-end{float:right !important}[dir=rtl] .ion-float-xl-end,:host-context([dir=rtl]) .ion-float-xl-end{float:left !important}}.ion-text-center{text-align:center !important}.ion-text-justify{text-align:justify !important}.ion-text-start{text-align:start !important}.ion-text-end{text-align:end !important}.ion-text-left{text-align:left !important}.ion-text-right{text-align:right !important}.ion-text-nowrap{white-space:nowrap !important}.ion-text-wrap{white-space:normal !important}@media (min-width: 576px){.ion-text-sm-center{text-align:center !important}.ion-text-sm-justify{text-align:justify !important}.ion-text-sm-start{text-align:start !important}.ion-text-sm-end{text-align:end !important}.ion-text-sm-left{text-align:left !important}.ion-text-sm-right{text-align:right !important}.ion-text-sm-nowrap{white-space:nowrap !important}.ion-text-sm-wrap{white-space:normal !important}}@media (min-width: 768px){.ion-text-md-center{text-align:center !important}.ion-text-md-justify{text-align:justify !important}.ion-text-md-start{text-align:start !important}.ion-text-md-end{text-align:end !important}.ion-text-md-left{text-align:left !important}.ion-text-md-right{text-align:right !important}.ion-text-md-nowrap{white-space:nowrap !important}.ion-text-md-wrap{white-space:normal !important}}@media (min-width: 992px){.ion-text-lg-center{text-align:center !important}.ion-text-lg-justify{text-align:justify !important}.ion-text-lg-start{text-align:start !important}.ion-text-lg-end{text-align:end !important}.ion-text-lg-left{text-align:left !important}.ion-text-lg-right{text-align:right !important}.ion-text-lg-nowrap{white-space:nowrap !important}.ion-text-lg-wrap{white-space:normal !important}}@media (min-width: 1200px){.ion-text-xl-center{text-align:center !important}.ion-text-xl-justify{text-align:justify !important}.ion-text-xl-start{text-align:start !important}.ion-text-xl-end{text-align:end !important}.ion-text-xl-left{text-align:left !important}.ion-text-xl-right{text-align:right !important}.ion-text-xl-nowrap{white-space:nowrap !important}.ion-text-xl-wrap{white-space:normal !important}}.ion-text-uppercase{text-transform:uppercase !important}.ion-text-lowercase{text-transform:lowercase !important}.ion-text-capitalize{text-transform:capitalize !important}@media (min-width: 576px){.ion-text-sm-uppercase{text-transform:uppercase !important}.ion-text-sm-lowercase{text-transform:lowercase !important}.ion-text-sm-capitalize{text-transform:capitalize !important}}@media (min-width: 768px){.ion-text-md-uppercase{text-transform:uppercase !important}.ion-text-md-lowercase{text-transform:lowercase !important}.ion-text-md-capitalize{text-transform:capitalize !important}}@media (min-width: 992px){.ion-text-lg-uppercase{text-transform:uppercase !important}.ion-text-lg-lowercase{text-transform:lowercase !important}.ion-text-lg-capitalize{text-transform:capitalize !important}}@media (min-width: 1200px){.ion-text-xl-uppercase{text-transform:uppercase !important}.ion-text-xl-lowercase{text-transform:lowercase !important}.ion-text-xl-capitalize{text-transform:capitalize !important}}.ion-align-self-start{-ms-flex-item-align:start !important;align-self:flex-start !important}.ion-align-self-end{-ms-flex-item-align:end !important;align-self:flex-end !important}.ion-align-self-center{-ms-flex-item-align:center !important;align-self:center !important}.ion-align-self-stretch{-ms-flex-item-align:stretch !important;align-self:stretch !important}.ion-align-self-baseline{-ms-flex-item-align:baseline !important;align-self:baseline !important}.ion-align-self-auto{-ms-flex-item-align:auto !important;align-self:auto !important}.ion-wrap{-ms-flex-wrap:wrap !important;flex-wrap:wrap !important}.ion-nowrap{-ms-flex-wrap:nowrap !important;flex-wrap:nowrap !important}.ion-wrap-reverse{-ms-flex-wrap:wrap-reverse !important;flex-wrap:wrap-reverse !important}.ion-justify-content-start{-ms-flex-pack:start !important;justify-content:flex-start !important}.ion-justify-content-center{-ms-flex-pack:center !important;justify-content:center !important}.ion-justify-content-end{-ms-flex-pack:end !important;justify-content:flex-end !important}.ion-justify-content-around{-ms-flex-pack:distribute !important;justify-content:space-around !important}.ion-justify-content-between{-ms-flex-pack:justify !important;justify-content:space-between !important}.ion-justify-content-evenly{-ms-flex-pack:space-evenly !important;justify-content:space-evenly !important}.ion-align-items-start{-ms-flex-align:start !important;align-items:flex-start !important}.ion-align-items-center{-ms-flex-align:center !important;align-items:center !important}.ion-align-items-end{-ms-flex-align:end !important;align-items:flex-end !important}.ion-align-items-stretch{-ms-flex-align:stretch !important;align-items:stretch !important}.ion-align-items-baseline{-ms-flex-align:baseline !important;align-items:baseline !important}:root{--accent-color:#3880ff;--accent-color-rgb:56, 128, 255;--accent-color-100:#4d8dff;--accent-color-200:#639cff;--accent-color-300:#4d8dff;--accent-color-400:#7cabff;--accent-color-500:#97bdff;--accent-color-600:#b2ceff;--accent-color-700:#cddfff;--accent-color-800:#e3edff;--accent-color-900:#f0f6ff;--background:#ffffff;--code-background:#f5f7fa;--code-color:var(--text-color--dark);--code-font-family:"SFMono-Regular", "Roboto Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace;--font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI emoji";--header-height:56px;--heading-font-family:var(--font-family);--line-rule-color:#edf2f6;--menu-width:240px;--offset-background:#fdfdff;--offset-background--dark:#f7f7ff;--page-margin-left:var(--menu-width);--text-color:#303943;--text-color--darker:#24282e;--text-color--dark:#020814;--text-color--lighter:#abb2bf;--text-color--light:#73849a}*{-webkit-box-sizing:border-box;box-sizing:border-box}body{background-color:var(--background);color:var(--text-color);font-family:var(--font-family);-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{height:100%}ion-grid{margin:1em 0}figure{margin:0}figure>*{display:block;margin:0 auto}figure.device{max-width:400px;margin:0 auto}figcaption{text-align:center}img{display:block;max-width:100%}a{color:var(--accent-color);font-weight:400;text-decoration:none}a.outbound svg{fill:currentColor;height:1em;width:1em;margin-bottom:-0.15em}.intro{color:var(--text-color--light);font-size:1.2em;margin-bottom:1.2em;max-width:40em}.intro code{font-size:15px;font-weight:500}.intro strong{font-weight:500;color:var(--text-color)}ol,ul{padding-left:2em}h1,h2,h3,h4,h5,h6{color:var(--text-color--dark);font-family:var(--heading-font-family);letter-spacing:0;line-height:1.1;padding-top:2em}h1,h2,h3,h4,h5,h6,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:700}h1{font-size:3.5rem;padding-top:0}@media (max-width: 768px){h1{font-size:3rem}}h2{font-size:1.825rem;margin-bottom:0.2em}h3{font-size:1.375rem;margin-bottom:0.2em}h4{font-size:1.15rem}h5,h6{font-size:1rem}h2+h3,h3+h4{margin-top:-1em}h2+p>small,h3+p>small,h4+p>small{display:block;margin-top:-2em}blockquote{background:rgba(255, 250, 237, 0.8);border-left:4px solid #ffcc5f;border-radius:2px 4px 4px 2px;color:#736545;font-size:14px;line-height:1.8;margin:1em 0;padding:2em}blockquote a{border-bottom:dotted 1px currentColor;color:#e09f16}blockquote>*:first-child{margin-top:0;padding-top:0}blockquote>*:last-child{margin-bottom:0;padding-bottom:0}blockquote code{background:#f7f1e6;color:#381600;font-weight:500}mark{background-color:#ffd780;color:var(--text-color--dark)}hr{border-color:var(--line-rule-color);border-style:solid;border-width:1px 0 0 0;margin:3rem 0}code,kbd{background-color:var(--code-background);border-radius:4px;color:var(--code-color);font-family:var(--code-font-family);font-size:15px;font-weight:500;letter-spacing:0;padding:4px 6px;white-space:pre-wrap}pre{background-color:var(--code-background);border-radius:4px;line-height:1.2;margin:2rem 0;overflow:auto;padding:2em}pre code{background-color:transparent;color:inherit;font-size:13px;padding:0;white-space:inherit}kbd{border:1px solid #ccc;white-space:nowrap;margin:0 1px}table{border-width:1px 0 0 1px;font-size:13px;margin:2em 0;overflow-x:auto;width:100%}table,td,th{border-collapse:collapse;border-color:var(--line-rule-color);border-style:solid}td,th{border-width:0 1px 1px 0;line-height:1.5;padding:1em;text-align:left}tbody tr:nth-child(odd){background-color:var(--offset-background)}iframe{background-color:rgba(0, 0, 0, 0.02);-webkit-box-shadow:10px 10px 20px rgba(0, 0, 0, 0.1);box-shadow:10px 10px 20px rgba(0, 0, 0, 0.1)}:root{--ion-color-primary:#3880ff;--ion-color-primary-rgb:56, 128, 255;--ion-color-primary-contrast:#ffffff;--ion-color-primary-contrast-rgb:255, 255, 255;--ion-color-primary-shade:#3171e0;--ion-color-primary-tint:#4c8dff;--ion-color-secondary:#3dc2ff;--ion-color-secondary-rgb:61, 194, 255;--ion-color-secondary-contrast:#ffffff;--ion-color-secondary-contrast-rgb:255, 255, 255;--ion-color-secondary-shade:#36abe0;--ion-color-secondary-tint:#50c8ff;--ion-color-tertiary:#5260ff;--ion-color-tertiary-rgb:82, 96, 255;--ion-color-tertiary-contrast:#ffffff;--ion-color-tertiary-contrast-rgb:255, 255, 255;--ion-color-tertiary-shade:#4854e0;--ion-color-tertiary-tint:#6370ff;--ion-color-success:#2dd36f;--ion-color-success-rgb:45, 211, 111;--ion-color-success-contrast:#ffffff;--ion-color-success-contrast-rgb:255, 255, 255;--ion-color-success-shade:#28ba62;--ion-color-success-tint:#42d77d;--ion-color-warning:#ffc409;--ion-color-warning-rgb:255, 196, 9;--ion-color-warning-contrast:#000000;--ion-color-warning-contrast-rgb:0, 0, 0;--ion-color-warning-shade:#e0ac08;--ion-color-warning-tint:#ffca22;--ion-color-danger:#eb445a;--ion-color-danger-rgb:235, 68, 90;--ion-color-danger-contrast:#ffffff;--ion-color-danger-contrast-rgb:255, 255, 255;--ion-color-danger-shade:#cf3c4f;--ion-color-danger-tint:#ed576b;--ion-color-dark:#222428;--ion-color-dark-rgb:34, 36, 40;--ion-color-dark-contrast:#ffffff;--ion-color-dark-contrast-rgb:255, 255, 255;--ion-color-dark-shade:#1e2023;--ion-color-dark-tint:#383a3e;--ion-color-medium:#92949c;--ion-color-medium-rgb:146, 148, 156;--ion-color-medium-contrast:#ffffff;--ion-color-medium-contrast-rgb:255, 255, 255;--ion-color-medium-shade:#808289;--ion-color-medium-tint:#9d9fa6;--ion-color-light:#f4f5f8;--ion-color-light-rgb:244, 245, 248;--ion-color-light-contrast:#000000;--ion-color-light-contrast-rgb:0, 0, 0;--ion-color-light-shade:#d7d8da;--ion-color-light-tint:#f5f6f9}.page-components{--page-width:1040px}.page-components docs-cards{font-size:14px;margin-top:5rem}.page-index docs-cards{margin-top:48px;font-size:14px;grid-template-columns:repeat(auto-fit, minmax(240px, 45%))}.page-index docs-card .Card-icon{background:#f6f8fb;-o-object-fit:none;object-fit:none}.page-index docs-card .Card-icon-hover{background:#e7f4ff}.page-building-migration figure,.page-building-migration figure file-tree{height:100%}.page-appflow{--page-width:1000px}.page-appflow docs-cards>docs-card:nth-child(1){font-size:1.25em}.page-appflow-cookbook-intro,.page-appflow-deploy-intro,.page-appflow-package-intro,.page-appflow-automation-intro,.page-appflow-quickstart{--page-width:800px}.page-appflow-quickstart-connect img{max-height:400px}.page-appflow-quickstart-native-config img,.page-appflow-quickstart-ionic-remote img,.page-appflow-quickstart-package img,.page-appflow-quickstart-automation img,.page-appflow-quickstart-environment img{max-height:500px}.page-intro-browser-support tbody{font-size:18px}.page-native,.page-enterprise{--page-width:1000px}.page-native h1,.page-enterprise h1{margin-bottom:-10px}.page-native docs-cards,.page-enterprise docs-cards{margin-top:40px;font-size:14px;letter-spacing:-0.01em;color:#5B708B}.page-native blockquote,.page-enterprise blockquote{margin-top:40px;padding:1em}[class^=page-native] .Card[href] docs-button button,[class*=" page-native"] .Card[href] docs-button button,[class^=page-enterprise] .Card[href] docs-button button,[class*=" page-enterprise"] .Card[href] docs-button button{cursor:pointer}[class^=page-native] ion-icon[aria-label=alert],[class*=" page-native"] ion-icon[aria-label=alert],[class^=page-enterprise] ion-icon[aria-label=alert],[class*=" page-enterprise"] ion-icon[aria-label=alert]{color:var(--ion-color-danger)}.native-ee-detail{float:right;cursor:pointer}.cordova-ee-img{width:50px;float:left;margin-right:20px}.cordova-ee-card{max-width:100%}.native-ee-pricing svg{width:1em;height:1em;color:#00d287;fill:#00d287}.native-ee-pricing .table-wrap{overflow-x:auto;max-width:100%}.native-ee-pricing-table{font-size:18px;color:#020814;font-weight:700;margin:0;letter-spacing:-0.01em}.native-ee-pricing table,.native-ee-pricing .table{margin-bottom:0;border-style:none}.native-ee-pricing thead tr td:first-child,.native-ee-pricing thead tr th:first-child,.native-ee-pricing tbody tr td:first-child,.native-ee-pricing tbody tr th:first-child{padding-left:36px}.native-ee-pricing thead tr td:last-child,.native-ee-pricing thead tr th:last-child,.native-ee-pricing tbody tr td:last-child,.native-ee-pricing tbody tr th:last-child{padding-right:36px}.native-ee-pricing thead th,.native-ee-pricing tbody td{width:30%}.native-ee-pricing thead th,.native-ee-pricing thead td{background:#fff;border-bottom:1px solid rgba(232, 235, 241, 0.6);padding-bottom:20px;vertical-align:bottom;border:0}.native-ee-pricing thead th{text-align:center}.native-ee-pricing thead th h2{padding-top:0;margin-bottom:0}.native-ee-pricing thead .eyebrow{font-size:10px;color:#94a0b7;text-transform:uppercase;letter-spacing:0.05em;font-weight:700;margin-bottom:4px;display:inline-block}.native-ee-pricing thead h2{font-size:18px;font-weight:700;margin:0;letter-spacing:-0.01em;color:#020814}.native-ee-pricing thead .price{font-weight:600;font-size:14px;line-height:20px;color:#5B708B}.native-ee-pricing thead .price strong{font-size:16px;font-weight:600}.native-ee-pricing thead .btn{margin-top:8px}.native-ee-pricing thead .btn--primary{background:#3880FF;color:#fff}.native-ee-pricing thead .btn--primary:hover{background:#478aff}.native-ee-pricing thead .btn--dark{background:#213049;color:#CDDFFF;border:0}.native-ee-pricing thead .btn--dark:hover{background:#31476c}.native-ee-pricing thead .plan-wrap{display:inline-block;text-align:center;border:0}.native-ee-pricing tbody th,.native-ee-pricing tbody td{padding-top:14px;padding-bottom:14px;padding-left:16px;padding-right:16px}.native-ee-pricing tbody .pill{margin-top:-2px;margin-left:2px;background:none}.native-ee-pricing tbody .pill--blue{margin-left:8px}.native-ee-pricing tbody tr.combined th,.native-ee-pricing tbody tr.combined td{padding-top:45px;padding-bottom:22px}.native-ee-pricing tbody tr.combined th{font-size:16px;line-height:22px;font-weight:700;color:#333}.native-ee-pricing tbody th{font-weight:400;vertical-align:middle;border:0}.native-ee-pricing tbody th[colspan="4"] span{display:inline-block;font-size:16px;line-height:22px;font-weight:600;color:#020814;border-top:none;padding-top:30px;padding-bottom:8px}.native-ee-pricing tbody th:not([colspan="4"]){color:#4E5B6A}.native-ee-pricing tbody th strong{font-size:14px;font-weight:600;display:block;color:#565c67}.native-ee-pricing tbody th strong b{font-weight:600;color:#171a20}.native-ee-pricing tbody th strong b a{-webkit-transition:border 0.3s;transition:border 0.3s;display:inline-block;color:#171a20;border-bottom:1px solid rgba(23, 26, 32, 0.2);line-height:1}.native-ee-pricing tbody th strong b a:hover{border-bottom:1px solid rgba(23, 26, 32, 0.7)}.native-ee-pricing tbody th a{display:block;font-weight:600}.native-ee-pricing tbody th span{font-size:12px;font-weight:500;color:#999}.native-ee-pricing tbody td,.native-ee-pricing tbody th{background:#fff}.native-ee-pricing tbody .stripe td,.native-ee-pricing tbody .stripe th{background:#f8f9fb}.native-ee-pricing tbody .small td,.native-ee-pricing tbody .small th{border-bottom:1px solid #E9EDF3;padding-top:6px;padding-bottom:6px}.native-ee-pricing tbody .small th:first-child{color:#73849A;position:relative}.native-ee-pricing tbody .small .check:before{font-size:12px}.native-ee-pricing tbody td{vertical-align:middle;text-align:center;font-weight:400;border:0;font-size:13px;color:#4E5B6A}.native-ee-pricing tbody .dash:before{content:"—";color:#c3ccdb}.native-ee-pricing tbody .check:before{font-family:"Ionicons";content:"";color:#00d287;font-size:16px;line-height:1em}.native-ee-pricing tbody tr:last-child td{padding-top:24px}.native-ee-pricing tbody .btn{-webkit-transition:all 0.3s ease;transition:all 0.3s ease;background:#3880ff;color:#FFF;font-size:14px;font-weight:700;border-radius:6px;padding:12px 18px 14px;width:100%;white-space:nowrap;-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.12);box-shadow:0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.12)}.native-ee-pricing tbody .btn:hover{-webkit-box-shadow:0 7px 14px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.08);box-shadow:0 7px 14px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.08);background:#4d8dfd;color:#fff;outline:0}.native-ee-pricing tbody .btn.sm{font-size:12px;letter-spacing:0.1em}.native-ee-pricing tbody .btn.dark{background-color:#213049;color:#CDDFFF}.native-ee-pricing tbody .btn.dark:hover{background-color:#293c5b}.native-ee-pricing .btn-secondary{background-color:#e1efff;color:#3880ff;-webkit-box-shadow:none;box-shadow:none}.native-ee-pricing .btn-secondary:hover{background-color:#eaf3fd}.native-ee-pricing .btn-secondary:active,.native-ee-pricing .btn-secondary:active:focus,.native-ee-pricing .btn-secondary:active:hover{background-color:#d8eafe}.native-ee-pricing .pinned table{padding-top:140px;display:block}.native-ee-pricing .pinned thead{position:fixed;top:0;left:0;width:100%;z-index:1000}.native-ee-pricing .pinned thead tr{display:-ms-flexbox;display:flex;width:100%;max-width:1110px;margin:0 auto;padding:0 15px;position:relative}.native-ee-pricing .pinned thead td{-ms-flex:1 0 auto;flex:1 0 auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:end;justify-content:flex-end}.native-ee-pricing .pinned tbody{display:block}.native-ee-pricing .pinned tbody tr{display:-ms-flexbox;display:flex;width:100%}.native-ee-pricing .pinned tbody th{-ms-flex:1 0 auto;flex:1 0 auto}.native-ee-pricing .pinned-at-point thead{position:absolute}.native-ee-pricing .pinned-at-point thead tr{padding:0}.native-solutions-img{width:48px;height:48px;border-radius:50%;margin-bottom:10px}.page-reference-release-notes .intro{margin-bottom:2.2em}.page-reference-release-notes .release-note{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:top;align-items:top;padding-bottom:80px}.page-reference-release-notes h2 a[href^="#"]:hover:before,.page-reference-release-notes h3 a[href^="#"]:hover:before,.page-reference-release-notes h4 a[href^="#"]:hover:before,.page-reference-release-notes h5 a[href^="#"]:hover:before,.page-reference-release-notes h6 a[href^="#"]:hover:before{opacity:0}.page-reference-release-notes h2{margin:0;font-size:32px}.page-reference-release-notes h3{margin-top:32px;margin-bottom:0;font-size:20px}.page-reference-release-notes h2,.page-reference-release-notes h3{padding-top:0}.page-reference-release-notes ul{margin-top:0.8em}.page-reference-release-notes ul li{line-height:1.5;margin-bottom:8px}.page-reference-release-notes .release-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap}.page-reference-release-notes .release-header h2{font-family:var(--font-family);margin-right:8px}.page-reference-release-notes .release-header .release-version{font-weight:500}.page-reference-release-notes .release-published h3{font-family:var(--font-family);font-weight:300;margin-top:4px;color:#4E5B6A}.page-reference-release-notes .release-badge{margin-right:8px;margin-top:5px;margin-bottom:4px;text-transform:uppercase;background:transparent;color:#b2becd;border:1px solid #b2becd;border-radius:14px;height:24px;padding:2px 8px;font-weight:600;font-size:10px;line-height:14px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;letter-spacing:0.08em}.page-reference-release-notes .release-note-major .release-badge{background:var(--text-color--dark);border-color:var(--text-color--dark);color:white}.page-reference-release-notes .release-note-minor .release-badge{background:#b2becd;border-color:#b2becd;color:white}.page-reference-release-notes .release-badge.release-badge-latest{background:transparent;color:#43c465;border-color:#43c465}.page-reference-release-notes .release-tag-wrapper h2{font-size:15px;margin-right:30px}.page-reference-release-notes .release-note-patch .release-tag-wrapper:after{content:"";background-image:-webkit-gradient(linear, left top, left bottom, from(#ebf0f6), to(#ebf0f6));background-image:linear-gradient(to bottom, #ebf0f6, #ebf0f6);width:2px;position:absolute;top:0;bottom:0;left:calc((65px / 2) - 1px);z-index:-1}.page-reference-release-notes .release-tag{line-height:200%;color:var(--accent-color-200);padding:6px 12px;display:inline-block;text-align:center;font-weight:600;border-radius:16px;width:64px;height:64px;background:var(--background);color:var(--accent-color-200);border:2px solid var(--accent-color-200);line-height:normal}.page-reference-release-notes .release-tag:hover{background:var(--accent-color-800)}.page-reference-release-notes .release-note-major .release-tag,.page-reference-release-notes .release-note-minor .release-tag{background:var(--accent-color-200);color:#fff}.page-reference-release-notes .release-note-major:hover .release-tag,.page-reference-release-notes .release-note-minor:hover .release-tag{background:var(--accent-color-100)}.page-reference-release-notes .release-tag .release-symbol{font-family:var(--font-family);font-weight:300;display:block;font-size:24px;margin-top:3px;margin-bottom:-7px}.page-reference-release-notes .release-tag .release-version{font-family:var(--code-font-family);font-size:10px;letter-spacing:-0.08em}.page-reference-release-notes blockquote{margin-left:0;background:rgba(var(--accent-color-rgb), 0.05);border-color:var(--accent-color)}.page-reference-release-notes a{color:var(--accent-color)}.page-studio docs-cards>docs-card:nth-child(1){font-size:1.25em}.page-react,.page-angular{--page-width:900px}.page-react command-line,.page-angular command-line{max-width:720px;margin:50px auto}.page-react strong,.page-angular strong{color:#44b4ff}.page-react .pull-left h3,.page-angular .pull-left h3{font-size:4rem;padding-top:0}.page-react .flex,.page-angular .flex{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse;padding:50px 0px}.page-react .main-flex h1,.page-angular .main-flex h1{margin-botton:0px}.page-react .main-flex ul,.page-angular .main-flex ul{padding-left:0;list-style:none;line-height:1}.page-react .main-flex .pull-right img,.page-angular .main-flex .pull-right img{width:150px}.page-react .pull-right img,.page-angular .pull-right img{display:block;max-width:250px;width:100%;margin:auto}@media (min-width: 1058px){.page-react .flex,.page-angular .flex{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:75px 0}.page-react .flex.reverse,.page-angular .flex.reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.page-react .pull-left,.page-angular .pull-left{width:450px}.page-react .pull-right,.page-angular .pull-right{-ms-flex:1;flex:1;text-align:center}.page-react .pull-right img,.page-angular .pull-right img{display:initial;max-width:250px}.page-react .main-flex .pull-right img,.page-angular .main-flex .pull-right img{max-width:375px;width:100%}.page-react h2,.page-angular h2{margin-top:0;padding-top:0}}.page-react .cli,.page-angular .cli{width:150px !important}.Layout{display:-ms-flexbox;display:flex;overflow-x:hidden}.Layout>stencil-route{width:100%}.Layout.is-menu-toggled{--menu-transform:translateX(calc(-1 * var(--menu-width)));--page-margin-left:0}@media (max-width: 768px){.Layout{--menu-transform:translateX(calc(-1 * var(--menu-width)));--page-padding:1.5rem;--page-margin-left:0}.Layout.is-menu-toggled{--menu-transform:none;--page-transform:translateX(var(--menu-width))}.Layout.is-menu-toggled docs-page>*{opacity:0.2;pointer-events:none}body.scroll-lock{overflow-y:hidden}}</style> <style sty-id="sc-stencil-route">stencil-route.inactive{display:none}</style> <style sty-id="sc-docs-header">docs-header{background-color:var(--background);-webkit-box-shadow:0px 1px 3px rgba(2, 8, 20, 0.06), 0px 1px 2px rgba(2, 8, 20, 0.04);box-shadow:0px 1px 3px rgba(2, 8, 20, 0.06), 0px 1px 2px rgba(2, 8, 20, 0.04);color:var(--text-color--light);display:block;font-size:14px;font-weight:500;line-height:1;position:fixed;top:0;left:0;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:-webkit-transform 200ms ease;transition:-webkit-transform 200ms ease;transition:transform 200ms ease;transition:transform 200ms ease, -webkit-transform 200ms ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;white-space:nowrap;z-index:2}@media (min-width: 768px){.Layout:not(.is-menu-toggled) docs-header.hidden{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@media (max-width: 768px){.Layout.is-menu-toggled docs-header.hidden{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}docs-header header{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;height:var(--header-height);padding:0 1.4rem 0 0.8rem}docs-header a{color:inherit;font-weight:500;padding:10px 0}docs-header ion-icon{font-size:16px;color:#B2BECD}docs-header .link-active{color:var(--text-color--dark)}@media (hover: hover){docs-header a:not(.link-active):hover{color:var(--text-color)}}docs-header docs-menu-toggle{-ms-flex:none;flex:none;margin-right:0.75em}.HeaderLogo{color:var(--text-color--dark);font-family:var(--heading-font-family);height:25px;margin-right:0.125em}.SectionNav stencil-route{display:-ms-flexbox;display:flex}.SectionNav .Dropdown{-ms-flex-item-align:center;align-self:center;color:var(--text-color);margin-right:0.75em}.SectionNav .Dropdown-button{border:solid 1px #DEE3EA;border-radius:6px;color:var(--text-color--dark);padding:10px;-webkit-transition:border-color 100ms ease;transition:border-color 100ms ease}.SectionNav .Dropdown.is-open .Dropdown-button{border-color:var(--line-rule-color)}.SectionNav .Dropdown-panel{min-width:180px}.SectionNav .Dropdown-panel a{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.SectionNav .Dropdown-panel svg{height:1em;width:1em}.SectionNav .Dropdown-panel .Nav-link{margin-left:0;margin-right:0}.SectionNav-tabs>*{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;height:var(--header-height);margin-right:1em;position:relative}.SectionNav-tabs .link-active:after{background-color:currentColor;bottom:0;content:"";display:block;height:2px;left:0;position:absolute;width:100%}.jobs{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;background:-webkit-gradient(linear, left top, right top, color-stop(1.23%, #62BDFF), color-stop(99.18%, #7489FF));background:linear-gradient(90deg, #62BDFF 1.23%, #7489FF 99.18%);border-radius:100px;padding:5px 8px}.jobs-wrapper{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}@media (max-width: 1260px){.jobs-wrapper{display:none}}.jobs{font-size:.75rem}.jobs .start{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:#F3FAFF;font-weight:400;-webkit-margin-end:8px;margin-inline-end:8px}.jobs .start svg{-webkit-margin-end:4px;margin-inline-end:4px}.jobs .end{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:#FFFFFF;font-weight:600}.jobs .end svg{-webkit-transition:-webkit-transform .1s ease-out;transition:-webkit-transform .1s ease-out;transition:transform .1s ease-out;transition:transform .1s ease-out, -webkit-transform .1s ease-out}.jobs:hover .end svg{-webkit-transform:translateX(1px);transform:translateX(1px)}.UtilNav{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;font-size:12px;margin-left:auto}.UtilNav>*{margin-left:1em}.UtilNav .Dropdown.is-open{color:var(--text-color)}.UtilNav .Dropdown-button{padding:10px 0}@media (hover: hover){.UtilNav .Dropdown-button:hover{color:var(--text-color)}}.UtilNav .Dropdown-panel{font-size:14px}</style> <style sty-id="sc-docs-menu">docs-menu{background-color:var(--background);border-right:solid 1px var(--line-rule-color);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100vh;left:0;position:fixed;top:0;-webkit-transition:-webkit-transform 200ms cubic-bezier(0.2, 1, 0.2, 1);transition:-webkit-transform 200ms cubic-bezier(0.2, 1, 0.2, 1);transition:transform 200ms cubic-bezier(0.2, 1, 0.2, 1);transition:transform 200ms cubic-bezier(0.2, 1, 0.2, 1), -webkit-transform 200ms cubic-bezier(0.2, 1, 0.2, 1);-webkit-transform:var(--menu-transform, none);transform:var(--menu-transform, none);width:var(--menu-width);z-index:1}docs-menu>header{-ms-flex-align:center;align-items:center;border-bottom:solid 1px var(--line-rule-color);display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;height:var(--header-height);padding:0 1.4rem 0 0.8rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}docs-menu docs-menu-toggle{margin-right:0.75em}docs-menu .MenuLogo{color:var(--text-color--dark);font-family:var(--heading-font-family);height:25px}docs-menu>.Menu{overflow-y:auto;-webkit-overflow-scrolling:touch}docs-menu nav{padding:2rem 1.5rem}.MenuControls{border-bottom:solid 1px var(--line-rule-color);-webkit-box-shadow:0 5px 10px -10px rgba(0, 0, 0, 0.1);box-shadow:0 5px 10px -10px rgba(0, 0, 0, 0.1);font-size:13px;padding:1em}.FrameworkSelect,.FrameworkSelect .Dropdown,.FrameworkSelect .Dropdown-button{width:100%}.FrameworkSelect-framework{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.FrameworkSelect-icon{height:14px;width:14px;margin-right:0.5em}.FrameworkSelect .Select-option{padding-left:0.75em}</style> <style sty-id="sc-docs-menu-toggle">docs-menu-toggle{background-color:rgba(0, 0, 0, var(--bg-alpha, 0));border-radius:50%;color:var(--text-color--light);cursor:pointer;height:40px;padding:8px;width:40px}@media (hover: hover){docs-menu-toggle:focus,docs-menu-toggle:hover{--bg-alpha:0.03;outline:none}docs-menu-toggle:active{--bg-alpha:0.06}}docs-menu-toggle svg{fill:currentColor}</style> <style sty-id="sc-header-mobile-collapse">header-mobile-collapse,header-mobile-collapse .header-mobile-collapse__content{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}header-mobile-collapse .ionic-sub-header__mobile-toggle{display:none;padding-top:14px;pointer-events:none;padding-left:8px}header-mobile-collapse .ionic-sub-header__mobile-toggle svg{height:20px;width:20px}header-mobile-collapse .UtilNav{margin-left:auto}header-mobile-collapse>ionic-search{padding-right:8px;padding-top:4px;display:none}header-mobile-collapse .label-sm-only .Dropdown-button-label,header-mobile-collapse .sm-only{display:none}@media (max-width: 800px){header-mobile-collapse .ionic-sub-header__mobile-toggle{display:block;cursor:pointer;padding-top:14px;pointer-events:all;-webkit-transition:.2s transform ease .1s;transition:.2s transform ease .1s;-webkit-transform-origin:66% 50%;transform-origin:66% 50%}header-mobile-collapse .header-mobile-collapse__backdrop{position:fixed;top:100%;height:100vh;left:0;right:0;background:rgba(0,0,0,.1);cursor:pointer;opacity:0;pointer-events:none;-webkit-transition:.4s opacity;transition:.4s opacity}header-mobile-collapse.ionic-sub-header--mobile-active .header-mobile-collapse__backdrop{opacity:1;pointer-events:all}header-mobile-collapse>ionic-search{display:block}header-mobile-collapse .header-mobile-collapse__content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;position:fixed;width:100vw;left:0;background:white;-webkit-box-shadow:0px 1px 3px rgba(2, 8, 20, 0.06), 0px 1px 2px rgba(2, 8, 20, 0.04);box-shadow:0px 1px 3px rgba(2, 8, 20, 0.06), 0px 1px 2px rgba(2, 8, 20, 0.04);top:56px;padding:16px 16px 8px;max-height:calc(100vh - 64px);overflow:auto;pointer-events:none;opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px);-webkit-transition:opacity .2s linear, -webkit-transform .2s cubic-bezier(.36,.66,.04,1);transition:opacity .2s linear, -webkit-transform .2s cubic-bezier(.36,.66,.04,1);transition:transform .2s cubic-bezier(.36,.66,.04,1), opacity .2s linear;transition:transform .2s cubic-bezier(.36,.66,.04,1), opacity .2s linear, -webkit-transform .2s cubic-bezier(.36,.66,.04,1)}header-mobile-collapse.ionic-sub-header--mobile-active .header-mobile-collapse__content{opacity:1;pointer-events:all;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity .1s linear, -webkit-transform .25s cubic-bezier(.17,.67,.52,1);transition:opacity .1s linear, -webkit-transform .25s cubic-bezier(.17,.67,.52,1);transition:transform .25s cubic-bezier(.17,.67,.52,1), opacity .1s linear;transition:transform .25s cubic-bezier(.17,.67,.52,1), opacity .1s linear, -webkit-transform .25s cubic-bezier(.17,.67,.52,1)}header-mobile-collapse .docs-dropdown,header-mobile-collapse .SectionNav .Dropdown{-ms-flex-item-align:stretch;align-self:stretch}header-mobile-collapse .Dropdown .Dropdown-button,header-mobile-collapse .UtilNav .sm-only{width:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;color:#5B708B;font-size:20px;line-height:24px;letter-spacing:-0.03em;padding:13px 0 14px}header-mobile-collapse .Dropdown--left .Dropdown-button{padding-left:16px;padding-right:14px;margin-bottom:10px;padding-top:10px;height:44px;-webkit-box-shadow:0px 1px 2px rgba(2, 8, 20, 0.04);box-shadow:0px 1px 2px rgba(2, 8, 20, 0.04)}header-mobile-collapse .Dropdown .Dropdown-button .Dropdown-arrow{height:26px;width:20px;margin-right:-4px}header-mobile-collapse .SectionNav .Dropdown,header-mobile-collapse .SectionNav-tabs>*{margin-right:0}header-mobile-collapse .Dropdown:focus{outline:none}header-mobile-collapse .SectionNav-tabs stencil-route-link{height:45px}header-mobile-collapse .Dropdown--right .Dropdown-button{text-align:left}header-mobile-collapse .SectionNav stencil-route,header-mobile-collapse .SectionNav-tabs,header-mobile-collapse .UtilNav{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin-left:0;-ms-flex-align:stretch;align-items:stretch}header-mobile-collapse .UtilNav>*{margin-left:0;border-bottom:1px solid #E6E6E8}header-mobile-collapse .UtilNav>:last-child{border-bottom:none}header-mobile-collapse .Dropdown-panel{position:static;border-bottom:1px solid var(--text-color--lighter)}header-mobile-collapse .SectionNav-tabs a{font-size:20px;line-height:24px;letter-spacing:-0.02em;color:#5B708B;padding-left:16px;padding-right:14px;font-weight:400}header-mobile-collapse .UtilNav a{padding:0}header-mobile-collapse .SectionNav-tabs .link-active{background:rgba(81,167,255, .12);color:#3880FF;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%;border-radius:8px}header-mobile-collapse .SectionNav-tabs .link-active::after{content:"\2713";position:static;background:none;width:auto;font-size:16px}header-mobile-collapse .SectionNav-tabs{position:relative;padding-bottom:8px;margin-bottom:18px;margin-top:5px}header-mobile-collapse .SectionNav-tabs::after{position:absolute;bottom:0;left:-16px;width:100vw;border-bottom:1px solid #E6E6E8;content:''}header-mobile-collapse .header-mobile-collapse__content ionic-search{display:none}header-mobile-collapse .UtilNav::before{content:'More';font-size:20px;line-height:24px;letter-spacing:0.01em;color:#000;padding:6px 2px 8px}header-mobile-collapse .label-sm-only .Dropdown-button-label,header-mobile-collapse .sm-only{display:block}header-mobile-collapse .label-sm-only .Dropdown-icon,header-mobile-collapse .lg-only{display:none}header-mobile-collapse .label-sm-only .Dropdown-icon+.Dropdown-arrow{fill:#5B708B}header-mobile-collapse .UtilNav .sm-only .Dropdown-arrow{height:26px;width:20px;margin-right:-4px;fill:#B2BECD}header-mobile-collapse .Dropdown-panel a{padding:8px;font-size:16px}header-mobile-collapse .Dropdown.is-open .Dropdown-panel{position:static}}</style> <style sty-id="sc-ionic-search">.Search__Defaults{padding-bottom:32px;max-height:calc(100vh - 160px);overflow-y:auto;border-top:1px solid #E6E7E9}.Search__Defaults::after{content:'';display:block;clear:both}.Search__Defaults__Section{padding:32px 44px 0;float:left;width:49%}.Search__Defaults__Section h4{font-size:11px;line-height:160%;letter-spacing:0.08em;text-transform:uppercase;color:#92A1B3;margin-top:0;padding-top:0}.Search__Defaults__Section strong{display:inline-block;font-weight:500;color:#1A232F;font-size:14px;margin-bottom:.4em}.Search__Defaults__Section ul{padding:0;border-top:none}.Search__Defaults__Section ul a{display:inline-block;padding:11px 10px 9px 40px;margin-left:-16px;margin-right:-16px;width:calc(100% + 32px);border-radius:6px;-webkit-transition:.2s background-color;transition:.2s background-color;position:relative;color:#B2BECD;font-size:12px;font-weight:400}.Search__Defaults__Section ul li a:hover{color:var(--accent-color-500)}@media (max-width: 660px){.Search__Defaults__Section{width:100%;float:none}}@-webkit-keyframes ionic-search-scan{from{left:0}to{left:100%}}@keyframes ionic-search-scan{from{left:0}to{left:100%}}@-webkit-keyframes ionic-search-scan-mobile{from{left:calc(0% + 8px)}to{left:calc(100% - 16px)}}@keyframes ionic-search-scan-mobile{from{left:calc(0% + 8px)}to{left:calc(100% - 16px)}}ionic-search{display:block;display:inline-block}ionic-search .SearchBtn{-webkit-transition:.2s opacity;transition:.2s opacity}ionic-search .SearchBtn.active{cursor:default;opacity:.7}ionic-search .SearchBtn__lg{border:1px solid #E9EDF3;border-radius:16px;padding:4px;display:-ms-flexbox;display:flex;min-width:180px;padding:5px 9px 7px;cursor:pointer;-webkit-transition:.4s border-color ease, .4s box-shadow;transition:.4s border-color ease, .4s box-shadow}ionic-search .SearchBtn__lg:hover{border-color:#ddd;-webkit-box-shadow:0 2px 8px rgba(0,0,0,.02);box-shadow:0 2px 8px rgba(0,0,0,.02)}ionic-search .SearchBtn__lg__icon{height:14px;fill:#B2BECD;margin:2px 6px 0 1px}ionic-search .SearchBtn__lg__text{font-size:12px;line-height:14px;letter-spacing:-0.03em;color:#B2BECD;margin-top:2px}ionic-search .SearchBtn__lg__key{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:4px;font-size:11px;line-height:1em;letter-spacing:-0.03em;color:#B2BECD;margin-left:auto;padding:1px 5px 3px}ionic-search .SearchBtn__sm{fill:rgb(115, 132, 154);height:20px;cursor:pointer;-webkit-transition:.2s color;transition:.2s color}ionic-search .SearchBtn__sm:hover{fill:var(--text-color)}@media (min-width: 992px){ionic-search .SearchBtn__sm{display:none}}@media (max-width: 991px){ionic-search .SearchBtn__lg{display:none}}ionic-search .slot.hidden{display:none}ionic-search .search-box{background:white;border-radius:10px;position:absolute;left:calc(50% - 330px);width:660px;max-width:calc(100% - 20px);top:80px;background:white;border-radius:10px;opacity:0;z-index:1;padding-top:2px;pointer-events:none;-webkit-box-shadow:0 8px 16px rgba(0,0,0,.08);box-shadow:0 8px 16px rgba(0,0,0,.08);-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}@media (max-width: 660px){ionic-search .search-box{left:10px}}ionic-search .search-box.active{pointer-events:all;opacity:1}ionic-search .search-static{position:absolute;top:42px;left:15px;height:20px;z-index:2;color:#92A1B3;pointer-events:none;-webkit-transform:translate3d(0, -25px, 0);transform:translate3d(0, -25px, 0);-webkit-transition:.4s transform cubic-bezier(0.23, 1, 0.32, 1), .1s opacity;transition:.4s transform cubic-bezier(0.23, 1, 0.32, 1), .1s opacity}ionic-search .close{right:18px;top:20px;position:absolute;z-index:2;opacity:0;pointer-events:none;-webkit-transition:.3s opacity;transition:.3s opacity}ionic-search .close.active{pointer-events:all;opacity:1;cursor:pointer;-webkit-transform:none;transform:none}ionic-search input{width:100%;margin-left:0;padding-left:40px;padding-right:40px;outline:none;border:none;z-index:2;background:transparent;padding:13px 30px 15px 41px;font-size:20px;line-height:24px;letter-spacing:-0.02em;position:relative;-webkit-transition:.2s opacity, .4s transform cubic-bezier(0.23, 1, 0.32, 1);transition:.2s opacity, .4s transform cubic-bezier(0.23, 1, 0.32, 1)}ionic-search input::-webkit-input-placeholder{color:#B2BECD}ionic-search input::-moz-placeholder{color:#B2BECD}ionic-search input:-ms-input-placeholder{color:#B2BECD}ionic-search input::-ms-input-placeholder{color:#B2BECD}ionic-search input::placeholder{color:#B2BECD}ionic-search .slot .hidden{display:none}ionic-search ul{list-style:none;margin-top:0;margin-bottom:0;text-align:left;border-top:1px solid #E6E7E9;padding:20px;-webkit-transition:.5s transform cubic-bezier(0.23, 1, 0.32, 1), .2s opacity;transition:.5s transform cubic-bezier(0.23, 1, 0.32, 1), .2s opacity}ionic-search span,ionic-search strong,ionic-search em,ionic-search ul path{-webkit-transition:.2s color, .2s fill;transition:.2s color, .2s fill}ionic-search strong{display:block;font-weight:500;color:#1A232F;font-size:14px;margin-bottom:.4em}ionic-search span{color:#B2BECD;font-size:12px;font-weight:400}ionic-search span em{color:#92A1B3}ionic-search span .no-results{padding:8px 40px;color:#2a2f38}ionic-search ul a{display:inline-block;padding:10px 20px 10px 40px;width:100%;border-radius:6px;-webkit-transition:.2s background-color;transition:.2s background-color;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ionic-search ul a:hover,ionic-search ul a.active{background-color:#F4FAFF}ionic-search ul a:hover strong,ionic-search ul a.active strong{color:#3880FF}ionic-search ul a:hover span,ionic-search ul a.active span{color:var(--accent-color-500)}ionic-search ul a:hover em,ionic-search ul a.active em{color:var(--accent-color-300)}ionic-search ul a:hover svg path,ionic-search ul a.active svg path{fill:#639CFF}ionic-search ul a:hover svg path:last-child,ionic-search ul a.active svg path:last-child{fill:#97BDFF}ionic-search ul a svg{position:absolute;left:12px;top:11px;height:14px;width:16px;display:block}ionic-search .searching{position:absolute;height:1px;width:8px;background:#3880ff;top:54px;left:0;-webkit-animation:ionic-search-scan 1s ease-in-out infinite;animation:ionic-search-scan 1s ease-in-out infinite}ionic-search .search-box.active .close{opacity:1;-webkit-transform:none;transform:none;-webkit-transition-delay:.4s;transition-delay:.4s}ionic-search .SearchResults{max-height:calc(100vh - 160px);overflow-y:auto}ionic-search .backdrop{background:rgba(0, 12, 34, 0.1);position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;min-height:calc(100vh + 200px);pointer-events:none;-webkit-transition:.4s all ease;transition:.4s all ease}ionic-search .backdrop.active{opacity:1;pointer-events:all}ionic-search .SearchMore__link{color:var(--text-color);padding:10px 25px;border-top:1px solid rgba(0,20,56,.06);background:#fafafa;cursor:pointer;width:100%;font-weight:600;display:block;border-radius:0 0 6px 6px;-webkit-transition:.3s background-color, .3s color;transition:.3s background-color, .3s color}ionic-search .SearchMore__link svg{fill:var(--text-color);height:1.2em;vertical-align:-3px;float:right;-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-transition:.3s transform ease;transition:.3s transform ease}ionic-search .search-box .SearchMore__link:hover{color:var(--accent-color-300);background:#F4FAFF}ionic-search .search-box .SearchMore__link:hover svg{fill:var(--accent-color)}ionic-search .SearchMore__list{display:none}ionic-search .SearchMore.active .SearchMore__link{border-radius:0}ionic-search .SearchMore.active .SearchMore__link svg{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}ionic-search .SearchMore.active .SearchMore__list{display:block}ionic-search[mobile]{display:block}ionic-search[mobile] .search{color:#999;right:auto;left:0;bottom:0;font-size:28px;padding:22px;top:auto;z-index:3;position:fixed}ionic-search[mobile] .backdrop{top:0;background:rgba(0,0,0,.5);z-index:2}ionic-search[mobile] .search-box{width:auto;left:2px;right:2px;top:42px;bottom:0;padding:60px 12px 48px;position:fixed;z-index:3;background:white;border-top-left-radius:12px;border-top-right-radius:12px;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);-webkit-transition:.4s transform cubic-bezier(0.23, 1, 0.32, 1);transition:.4s transform cubic-bezier(0.23, 1, 0.32, 1)}ionic-search[mobile] .search-box.active{-webkit-transform:none;transform:none}ionic-search[mobile] .mobile-close{-webkit-transition-delay:0;transition-delay:0;left:calc(50% - 24px);top:0;left:0;right:0;position:absolute}ionic-search[mobile] .mobile-close svg{position:absolute;top:8px;width:40px;height:40px;left:calc(50% - 20px)}ionic-search[mobile] .searching{top:113px;z-index:3;-webkit-animation:ionic-search-scan-mobile 1s ease-in-out infinite;animation:ionic-search-scan-mobile 1s ease-in-out infinite}ionic-search[mobile] ul{opacity:1;-webkit-transform:none;transform:none;z-index:3;top:auto;-webkit-box-shadow:none;box-shadow:none;width:100%;max-height:calc(100vh - 154px);overflow:touch}ionic-search[mobile] .search-static{-webkit-transform:none;transform:none;opacity:1;z-index:3;top:71px;left:22px}ionic-search[mobile] a{padding-left:20px;padding-right:20px}ionic-search[mobile] input{margin:0 0 10px;padding:10px 40px 8px;background:#eceef2;border-radius:12px;width:100%}ionic-search[mobile]~.mobile-nav__pane{min-height:100%;background:white;-webkit-transition:.4s transform ease, .4s border-radius step-end;transition:.4s transform ease, .4s border-radius step-end}ionic-search[mobile].active~.mobile-nav__pane{border-radius:12px;-webkit-transform:scale3d(0.97, 0.97, 1);transform:scale3d(0.97, 0.97, 1);-webkit-transition:.4s transform ease;transition:.4s transform ease}.mobile-nav{background:black !important}</style> <style sty-id="sc-docs-dropdown">.Dropdown{display:inline-block;position:relative;z-index:1}.Dropdown-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;padding:initial;white-space:nowrap}.Dropdown-button .Dropdown-icon{height:14px;width:22px;fill:#CED6E0}.Dropdown-button .Dropdown-icon+.Dropdown-arrow{margin-left:0px;fill:#CED6E0;vertical-align:2px}.Dropdown:focus,.Dropdown-button:focus{outline:none}.Dropdown-button:hover{cursor:pointer}.Dropdown-arrow{fill:currentColor;height:0.8em;margin-bottom:-0.0875em;width:0.8em;margin-left:.8em}.Dropdown.is-open .Dropdown-arrow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.Dropdown-panel{background-color:var(--background);border-radius:6px;border:none;-webkit-box-shadow:0px 4px 12px 0px rgba(0,0,0,0.08), 0px 2px 4px 0px rgba(0,0,0,0.08);box-shadow:0px 4px 12px 0px rgba(0,0,0,0.08), 0px 2px 4px 0px rgba(0,0,0,0.08);display:none;min-width:100%;overflow:hidden;pointer-events:none;position:absolute;top:100%;visibility:hidden}.Dropdown.is-open .Dropdown-panel{display:initial;pointer-events:auto;visibility:visible}.Dropdown--left .Dropdown-panel{left:0}.Dropdown--right .Dropdown-panel{right:0}.Dropdown--center .Dropdown-panel{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.Dropdown-panel a{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:0.5em 1em}.Dropdown-panel svg{height:1em;width:1em;margin-left:4px}@media (hover: hover){.Dropdown-panel a:hover{background-color:rgba(0, 0, 0, 0.025)}}.Dropdown-panel>section{padding:0.5em 0}.Dropdown-panel>section:not(:last-child){border-bottom:solid 1px var(--line-rule-color)}</style> <style sty-id="sc-ion-icon">/*!@:host*/.sc-ion-icon-h{display:inline-block;width:1em;height:1em;contain:strict;fill:currentColor;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}/*!@:host .ionicon*/.sc-ion-icon-h .ionicon.sc-ion-icon{stroke:currentColor}/*!@.ionicon-fill-none*/.ionicon-fill-none.sc-ion-icon{fill:none}/*!@.ionicon-stroke-width*/.ionicon-stroke-width.sc-ion-icon{stroke-width:32px;stroke-width:var(--ionicon-stroke-width, 32px)}/*!@.icon-inner, .ionicon, svg*/.icon-inner.sc-ion-icon,.ionicon.sc-ion-icon,svg.sc-ion-icon{display:block;height:100%;width:100%}/*!@:host(.flip-rtl) .icon-inner*/.flip-rtl.sc-ion-icon-h .icon-inner.sc-ion-icon{-webkit-transform:scaleX(-1);transform:scaleX(-1)}/*!@:host(.icon-small)*/.icon-small.sc-ion-icon-h{font-size:18px !important}/*!@:host(.icon-large)*/.icon-large.sc-ion-icon-h{font-size:32px !important}/*!@:host(.ion-color)*/.ion-color.sc-ion-icon-h{color:var(--ion-color-base) !important}/*!@:host(.ion-color-primary)*/.ion-color-primary.sc-ion-icon-h{--ion-color-base:var(--ion-color-primary, #3880ff)}/*!@:host(.ion-color-secondary)*/.ion-color-secondary.sc-ion-icon-h{--ion-color-base:var(--ion-color-secondary, #0cd1e8)}/*!@:host(.ion-color-tertiary)*/.ion-color-tertiary.sc-ion-icon-h{--ion-color-base:var(--ion-color-tertiary, #f4a942)}/*!@:host(.ion-color-success)*/.ion-color-success.sc-ion-icon-h{--ion-color-base:var(--ion-color-success, #10dc60)}/*!@:host(.ion-color-warning)*/.ion-color-warning.sc-ion-icon-h{--ion-color-base:var(--ion-color-warning, #ffce00)}/*!@:host(.ion-color-danger)*/.ion-color-danger.sc-ion-icon-h{--ion-color-base:var(--ion-color-danger, #f14141)}/*!@:host(.ion-color-light)*/.ion-color-light.sc-ion-icon-h{--ion-color-base:var(--ion-color-light, #f4f5f8)}/*!@:host(.ion-color-medium)*/.ion-color-medium.sc-ion-icon-h{--ion-color-base:var(--ion-color-medium, #989aa2)}/*!@:host(.ion-color-dark)*/.ion-color-dark.sc-ion-icon-h{--ion-color-base:var(--ion-color-dark, #222428)}</style> <style sty-id="sc-docs-nav">docs-nav{display:block}docs-nav ul{list-style:none;margin:0;padding:0}docs-nav a{color:inherit;font-weight:inherit}.Nav{--item-spacing:10px;color:var(--text-color--dark);font-size:14px;font-weight:500;line-height:1.25;padding:1rem 0 .3rem}.Nav-subnav{--item-spacing:6px;color:var(--text-color--light);font-size:13px}.Nav-header{font-size:15px;font-weight:600;color:#27323f;letter-spacing:0.02em}.Nav-link,.Nav-header{background-color:rgba(0,0,0, var(--bg-alpha, 0));display:block;padding-top:var(--item-spacing);padding-right:20px;padding-bottom:var(--item-spacing);padding-left:calc(14px + var(--level, 1) * 10px)}.Nav-link{margin:0 14px;padding-left:calc(var(--level, 1) * 10px);border-radius:4px}.Nav>li{padding-bottom:16px}@media (hover: hover){.Nav-link:not(.Nav-link--active):hover{color:var(--text-color)}}.Nav-link--active{background-color:#f3f9fe;color:var(--accent-color);font-weight:500}.Nav-subnav .Nav-header{color:var(--text-color);font-weight:600}.Nav-link.outbound{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.Nav-link.outbound svg{-ms-flex:none;flex:none;margin-left:0.25em}.Nav span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.01em}@media (max-width: 768px), (pointer: coarse){.Nav{--item-spacing:12px;font-size:15px}.Nav-subnav{--item-spacing:6px;font-size:14px}}</style> <style sty-id="sc-docs-select">.Select{cursor:pointer;display:inline-block;font-weight:500}.Select .Dropdown-button{-ms-flex-align:center;align-items:center;border:solid 1px #DEE3EA;border-radius:6px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:justify;justify-content:space-between;min-width:100px;padding:0.5em 1em}.Select .Dropdown-panel{padding:0.5em 0}.Select .Dropdown-arrow{margin-left:0.5em}.Select-option{--bg-alpha:0;background-color:rgba(0, 0, 0, var(--bg-alpha));padding:0.5em 1.5em}.Select-option:focus{--bg-alpha:0.025;outline:none}.Select-option--selected{--bg-alpha:0.05}.Select-option--selected:focus{--bg-alpha:0.075}@media (hover: hover){.Select-option:hover{--bg-alpha:0.025}.Select-option--selected:hover{--bg-alpha:0.075}}</style> <style sty-id="sc-docs-page">.Error{-ms-flex-align:center;align-items:center;background-color:var(--offset-background);color:var(--text-color--light);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;line-height:1;white-space:nowrap}.Error.full-screen{padding-bottom:3rem}.Error>*{margin:10px}.Error h1,.Error div{color:inherit;font-size:3rem}.Error div{text-shadow:3px 3px 3px rgba(0,0,0,0.1)}.Error p{font-size:18px}docs-page{display:grid;font-size:16px;grid-template-columns:1fr minmax(0, var(--page-width, 720px)) 1fr;line-height:2;margin-left:var(--page-margin-left);margin-top:var(--header-height);overflow-x:hidden;-webkit-transform:var(--page-transform, none);transform:var(--page-transform, none);-webkit-transition:-webkit-transform 200ms cubic-bezier(0.2, 1, 0.2, 1);transition:-webkit-transform 200ms cubic-bezier(0.2, 1, 0.2, 1);transition:transform 200ms cubic-bezier(0.2, 1, 0.2, 1);transition:transform 200ms cubic-bezier(0.2, 1, 0.2, 1), -webkit-transform 200ms cubic-bezier(0.2, 1, 0.2, 1)}@media (min-width: 1234px){docs-page{grid-template-columns:1fr minmax(0, var(--page-width, 720px)) 3fr}}@media (min-width: 1800px){docs-page{grid-template-columns:1fr minmax(0, var(--page-width, 720px)) 1fr 240px}}docs-page>main{position:relative;grid-column:2;margin-bottom:3rem;padding:var(--page-padding, 2rem 3rem);position:relative}docs-page docs-demo{margin-right:auto}docs-page docs-pagination{grid-column:1 / -1}docs-page .full-screen{grid-column:1 / -1;height:calc(100vh - var(--header-height));margin-bottom:0;overflow:hidden;padding:0}docs-page .page-heading-encapsulation{text-transform:uppercase;background:transparent;color:#2d4665;border:1px solid #dee3ea;border-radius:14px;height:24px;padding:2px 8px;font-weight:600;font-size:10px;line-height:14px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-item-align:center;align-self:center;justify-self:flex-end;letter-spacing:0.08em;float:right}docs-page .page-heading-encapsulation:hover{border-color:#92a1b3}docs-page h1{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;margin-top:2rem;margin-bottom:1rem}docs-page h2 a[href^="#"],docs-page h3 a[href^="#"],docs-page h4 a[href^="#"],docs-page h5 a[href^="#"],docs-page h6 a[href^="#"]{color:inherit;position:relative}docs-page h2 a[href^="#"]:before,docs-page h3 a[href^="#"]:before,docs-page h4 a[href^="#"]:before,docs-page h5 a[href^="#"]:before,docs-page h6 a[href^="#"]:before{content:"#";opacity:0;padding-right:5px;position:absolute;right:100%;-webkit-transition:opacity 100ms ease;transition:opacity 100ms ease}docs-page h2 a[href^="#"]:hover:before,docs-page h3 a[href^="#"]:hover:before,docs-page h4 a[href^="#"]:hover:before,docs-page h5 a[href^="#"]:hover:before,docs-page h6 a[href^="#"]:hover:before{opacity:1}docs-page h2 code,docs-page h3 code,docs-page h4 code,docs-page h5 code,docs-page h6 code{background:none;font-size:inherit}docs-page aside{float:right;margin-left:20px;margin-bottom:20px}@media (min-width: 1234px){docs-page main.no-demo .page-meta{position:fixed;right:0;top:100px;width:240px;-webkit-transition:.2s transform ease;transition:.2s transform ease}docs-header.hidden~stencil-route docs-page main.no-demo .page-meta{-webkit-transform:translateY(-60px);transform:translateY(-60px)}}docs-page main.has-demo .page-meta internal-ad{display:none}</style> <style sty-id="sc-docs-table-of-contents">docs-table-of-contents{display:block;font-size:13px;margin-bottom:2rem}docs-table-of-contents .Nav-header{color:var(--text-color--lighter);font-size:0.75em;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding-left:0}docs-table-of-contents ul{padding:0;list-style:none;line-height:1.23em}docs-table-of-contents .Nav-link{padding-left:0;margin-left:0}docs-table-of-contents a{color:inherit;display:inline-block;-webkit-transition:.2s color, .3s transform ease-out;transition:.2s color, .3s transform ease-out}docs-table-of-contents .Nav-link.selected a{color:var(--accent-color);-webkit-transform:translateX(2px);transform:translateX(2px)}</style> <style sty-id="sc-docs-code">code[class*="language-"],pre[class*="language-"]{color:#4d4d4c;background:none;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"],:not(pre)>code[class*="language-"]{background:hsl(30, 20%, 25%)}pre[class*="language-"]{padding:1em;margin:.5em 0;overflow:auto;border:.3em solid hsl(30, 20%, 40%);border-radius:.5em;-webkit-box-shadow:1px 1px .5em black inset;box-shadow:1px 1px .5em black inset}:not(pre)>code[class*="language-"]{padding:.15em .2em .05em;border-radius:.3em;border:.13em solid hsl(30, 20%, 40%);-webkit-box-shadow:1px 1px .3em -.1em black inset;box-shadow:1px 1px .3em -.1em black inset;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#8c9296}.token.punctuation{opacity:.7}.namespace{opacity:.7}.token.tag{color:#91c5ff}.token.tag .token.tag{color:#2b90ff}.token.property,.token.attr-name,.token.boolean,.token.number,.token.constant,.token.symbol{color:#8454ff}.token.selector,.token.char,.token.function,.token.builtin,.token.inserted{color:#ff6810}.token.operator,.token.string,.token.entity,.token.url,.token.attr-value,.language-css .token.string,.style .token.string,.token.variable{color:#42b983}.token.atrule{color:#ffbb01}.token.regex,.token.keyword,.token.important{color:#f55073}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}.token.deleted{color:red}docs-code[language="shell"]>pre{background-color:var(--text-color--dark);border-radius:7px}docs-code[language="shell"]:before{display:none}docs-code[language="shell"] code{color:rgba(255, 255, 255, 0.7);font-size:13px}docs-code[language="shell"] .token{color:inherit}docs-code[language="shell"] .token.prompt{color:#fb96f9;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}docs-code[language="shell"] .token.comment{color:rgba(255, 255, 255, 0.45)}docs-code{display:block;position:relative}docs-code:before{color:#bdc5d1;content:attr(language);font-family:var(--code-font-family);font-size:10px;letter-spacing:0.05em;line-height:1;padding:0.75em;position:absolute;right:0;text-transform:uppercase;top:0}docs-code[language="shell"] pre{white-space:pre-wrap}.code-text__copy{position:absolute;right:0;top:-1.6rem;height:20px}.code-text__copy-link,.code-text__copy-confirmation{padding:4px 5px;font-size:12px;line-height:12px;font-weight:600;position:absolute;right:0;top:0}.code-text__copy-link{-webkit-transition:0.2s opacity, 0.2s color , 0.2s -webkit-transform;transition:0.2s opacity, 0.2s color , 0.2s -webkit-transform;transition:0.2s transform , 0.2s opacity, 0.2s color;transition:0.2s transform , 0.2s opacity, 0.2s color , 0.2s -webkit-transform;color:#70A4FF;background-color:#E0EEFF;border-radius:4px;display:inline-block;cursor:pointer;opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:5}.code-text__copy-link:hover{color:var(--blue)}.code-text__copy-confirmation{-webkit-transition:0.2s opacity , 0.2s -webkit-transform;transition:0.2s opacity , 0.2s -webkit-transform;transition:0.2s transform , 0.2s opacity;transition:0.2s transform , 0.2s opacity , 0.2s -webkit-transform;color:#0ec254;opacity:0;-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0);z-index:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:20px;padding:0}.code-text__copy-confirmation svg{fill:#0ec254;margin-right:-4px}.show-confirmation .code-text__copy-link{opacity:0;-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0);pointer-events:none}.show-confirmation .code-text__copy-confirmation{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}</style> <style sty-id="sc-docs-tabs">.Tabs,.Tabs-tab{display:block}.Tabs-tab:not([selected]){display:none}.Tabs-header{border-bottom:solid 1px rgba(0, 32, 88, 0.1);white-space:nowrap}.Tabs-button{--bg-alpha:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:rgba(0, 0, 0, var(--bg-alpha));border:none;color:var(--text-color--light);cursor:pointer;font-family:inherit;font-size:10px;font-weight:600;letter-spacing:0.04em;padding:1rem;text-transform:uppercase;-webkit-transform:translateY(1px);transform:translateY(1px)}.Tabs-button:first-child{border-top-left-radius:6px}.Tabs-button:last-child{border-top-right-radius:6px}.Tabs-button:focus{outline:none}.Tabs-button:focus{--bg-alpha:0.015}@media (hover: hover){.Tabs-button:hover{--bg-alpha:0.015}}.Tabs-button:active{--bg-alpha:0.03}.Tabs-button.is-selected{border-bottom:solid 1px currentColor;color:var(--accent-color)}.Tabs-tab docs-code pre{margin-top:0}</style> <style sty-id="sc-docs-reference">docs-reference{display:block;margin:1rem 0}docs-reference h3{font-family:var(--code-font-family);font-size:1.25rem;margin:2rem 0 1rem;padding:0}docs-reference a{font-weight:inherit}docs-reference a:before{display:none}docs-reference thead tr{background-color:var(--offset-background)}docs-reference tbody tr{background-color:#ffffff !important}docs-reference tbody th{vertical-align:top}docs-reference tbody p{line-height:2}docs-reference p:first-child{margin-top:0}docs-reference p:last-child{margin-bottom:0}</style> <style sty-id="sc-docs-demo">docs-demo{padding-top:56px}.docs-demo-device{--device-padding:1rem;--device-width:344px;--device-height:704px;--device-frame-width:12px;padding:var(--device-padding);position:-webkit-sticky;position:sticky;top:0}.docs-demo-mode-toggle{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;margin:1rem auto 0;width:128px;height:28px;background:#ecf0f5;border-radius:18px}.docs-demo-mode-toggle button{background-color:transparent;border:none;border-radius:16px;color:#5b708b;cursor:pointer;font-family:var(--font-family);font-size:11px;letter-spacing:-0.02em;width:calc(50% - 2px);line-height:21px;padding-top:2px;-webkit-transition:200ms background-color ease, 200ms color ease;transition:200ms background-color ease, 200ms color ease}.docs-demo-mode-toggle button:focus,.docs-demo-mode-toggle button:active{outline:none}.docs-demo-mode-toggle button.is-selected{background-color:white;color:black;font-weight:600;-webkit-box-shadow:0px 2px 3px rgba(0, 16, 46, 0.15);box-shadow:0px 2px 3px rgba(0, 16, 46, 0.15)}.docs-demo-device>figure{margin:0;background-size:contain;background-repeat:no-repeat;-webkit-box-shadow:0px 2px 8px rgba(2, 8, 20, 0.1), 0px 8px 16px rgba(2, 8, 20, 0.08);box-shadow:0px 2px 8px rgba(2, 8, 20, 0.1), 0px 8px 16px rgba(2, 8, 20, 0.08);width:var(--device-width);height:var(--device-height);overflow:hidden;position:relative;z-index:1}.docs-demo-device>figure>iframe{position:absolute;top:0;left:0;margin:var(--device-frame-width);width:calc(100% - var(--device-frame-width) * 2);height:calc(100% - var(--device-frame-width) * 2);border:none;overflow:hidden;-webkit-mask-image:-webkit-radial-gradient(white, black);z-index:1}.docs-demo-device.ios figure{background-image:url("/docs/assets/img/iphone-device-skin.png");border-radius:54px}.docs-demo-device.ios>figure>iframe{border-radius:38px}.docs-demo-device.md figure{background-image:url("/docs/assets/img/android-device-skin.png");border-radius:44px}.docs-demo-device.md>figure>iframe{border-radius:32px}.docs-demo-device.ios figure:after{background-color:rgba(0,0,0,0.5);border-radius:2px;bottom:18px;content:"";display:none;height:4px;left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:35%;z-index:1}.docs-demo-device__ios-notch{display:none;fill:#090a0d;left:50%;position:absolute;top:12px;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:165px;z-index:2}.docs-demo-device.ios .docs-demo-device__ios-notch,.docs-demo-device.ios figure:after{display:block}.docs-demo-device__md-bar{display:none}.docs-demo-device.md .docs-demo-device__md-bar{display:block;fill:rgba(125, 125, 125, 0.3);padding:0.5rem 2.2rem;position:relative;width:100%;z-index:2;top:12px}.docs-demo-source{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;font-size:13px;-ms-flex-pack:center;justify-content:center}.docs-demo-source>ion-icon{margin-right:5px}@media (max-width: 1160px){.docs-demo-device,.docs-demo-mode-toggle,.docs-demo-source{display:none}}</style> <style sty-id="sc-internal-ad">internal-ad{max-width:148px;display:block;margin:48px 0 0}internal-ad p{font-size:13px;line-height:19px;font-weight:400;letter-spacing:0.02em;color:var(--text-color--light);-webkit-transition:.2s color;transition:.2s color}internal-ad a:hover p{color:var(--text-color)}@media (max-width: 1233px){internal-ad{display:none}}</style> <link rel="stylesheet" href="//www.jesscamp.com/docs/build/site.css"> </head> <body> <noscript> <iframe src="https://www.jesscamp.com/ns.html?id=GTM-TKMGCBC" height="0" width="0" style="display:none;visibility:hidden"></iframe> </noscript> <docs-root class="hydrated" s-id="1">  <stencil-router class="Layout hydrated" c-id="1.0.0.0" s-id="2">       <stencil-route class="hydrated" c-id="1.1.1.0" s-id="3" style="display: none;">  </stencil-route> <docs-header class="hydrated" c-id="1.2.1.1" s-id="4">  <header c-id="4.0.0.0"> <docs-menu-toggle role="button" tabindex="0" aria-label="Toggle Menu" class="hydrated" c-id="4.1.1.0" s-id="5">  <svg viewbox="0 0 512 512" c-id="5.0.0.0"> <path d="M64 384h384v-42.666H64V384zm0-106.666h384v-42.667H64v42.667zM64 128v42.665h384V128H64z" c-id="5.1.1.0"></path> </svg> </docs-menu-toggle> <a href="//www.jesscamp.com" c-id="4.2.1.1"> <svg viewbox="0 0 78 25" fill="currentColor" class="HeaderLogo" c-id="4.3.2.0"> <title c-id="4.4.3.0">< !——t.4.5.4.0 >betway东盟体育app www.jesscamp.com</标题><path d="M19.8517 8.01728C21.2289 8.01728 22.3454 6.9008 22.3454 5.52354C22.3454 4.14628 21.2289 3.02979 19.8517 3.02979C18.4744 3.02979 17.3579 4.14628 17.3579 5.52354C17.3579 6.9008 18.4744 8.01728 19.8517 8.01728Z" c-id="4.6.3.1"></path> <path d="M22.9219 8.02656L22.8187 7.79688L22.65 7.98438C22.2422 8.44844 21.7219 8.80469 21.1453 9.02031L20.9859 9.08125L21.0516 9.23594C21.5484 10.4312 21.8016 11.6969 21.8016 12.9953C21.8016 18.4 17.4047 22.8016 11.9953 22.8016C6.58594 22.8016 2.19375 18.4047 2.19375 13C2.19375 7.59531 6.59531 3.19375 12 3.19375C13.4672 3.19375 14.8828 3.5125 16.2 4.14062L16.3547 4.21562L16.4203 4.06094C16.6594 3.49844 17.0437 2.99687 17.5266 2.60781L17.7234 2.44844L17.4984 2.33125C15.7875 1.45 13.9359 1 12 1C5.38125 1 0 6.38125 0 13C0 19.6187 5.38125 25 12 25C18.6187 25 24 19.6187 24 13C24 11.2703 23.6391 9.59687 22.9219 8.02656Z" c-id="4.7.3.2"></path> <path d="M12.1829 7.53447C9.02353 7.43134 6.43134 10.0235 6.53447 13.1829C6.62822 16.047 8.95322 18.3767 11.8173 18.4657C14.9767 18.5688 17.5688 15.9767 17.4657 12.8173C17.372 9.95322 15.047 7.62822 12.1829 7.53447Z" c-id="4.8.3.3"></path> <text font-size="18" font-weight="bold" letter-spacing="-0.02em" c-id="4.9.3.4" style="white-space: pre;"> <tspan x="27.5" y="19.5" c-id="4.10.4.0"> 译文</TS.pan> </text> </svg></a> <header-mobile-collapse class="hydrated" c-id="4.12.1.2" s-id="6">     <div class="header-mobile-collapse__backdrop" c-id="6.0.0.0"></div> <ionic-search class="hydrated" c-id="6.1.0.1" s-id="7">  <div class="search-box" c-id="7.0.0.0"> <input type="text" placeholder="Search Ionic.." c-id="7.1.1.0"> <svg viewbox="0 0 512 512" class="search-static" c-id="7.2.1.1"> <path d="M443.5 420.2L336.7 312.4c20.9-26.2 33.5-59.4 33.5-95.5 0-84.5-68.5-153-153.1-153S64 132.5 64 217s68.5 153 153.1 153c36.6 0 70.1-12.8 96.5-34.2l106.1 107.1c3.2 3.4 7.6 5.1 11.9 5.1 4.1 0 8.2-1.5 11.3-4.5 6.6-6.3 6.8-16.7.6-23.3zm-226.4-83.1c-32.1 0-62.3-12.5-85-35.2-22.7-22.7-35.2-52.9-35.2-84.9 0-32.1 12.5-62.3 35.2-84.9 22.7-22.7 52.9-35.2 85-35.2s62.3 12.5 85 35.2c22.7 22.7 35.2 52.9 35.2 84.9 0 32.1-12.5 62.3-35.2 84.9-22.7 22.7-52.9 35.2-85 35.2z" c-id="7.3.2.0"></path> </svg> <ion-icon class="close sc-ion-icon-h md hydrated" role="img" aria-label="close" name="close" c-id="7.4.1.2" s-id="8">  <div class="icon-inner sc-ion-icon" c-id="8.0.0.0"></div> </ion-icon> <div class="slot" c-id="7.5.1.3"> <div class="Search__Defaults" c-id="7.6.2.0"> <div class="Search__Defaults__Section" c-id="7.7.3.0"> <h4 c-id="7.8.4.0"> 开始</h4> <ul c-id="7.10.4.1"> <li c-id="7.11.5.0"><a href="//www.jesscamp.com/docs/intro/cli" c-id="7.12.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="7.13.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="7.14.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="7.15.8.1"></path> </svg><strong c-id="7.16.7.1"> 安装指南</strong> |安装</a></li> <li c-id="7.19.5.1"><a href="//www.jesscamp.com/docs/developing/previewing" c-id="7.20.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="7.21.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="7.22.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="7.23.8.1"></path> </svg><strong c-id="7.24.7.1"> 运行一个应用程序</strong> |建筑</a></li> <li c-id="7.27.5.2"><a href="//www.jesscamp.com/docs/layout/structure" c-id="7.28.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="7.29.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="7.30.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="7.31.8.1"></path> </svg><strong c-id="7.32.7.1"> 应用程序结构</strong> |布局</a></li> <li c-id="7.35.5.3"><a href="//www.jesscamp.com/docs/theming/basics" c-id="7.36.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="7.37.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="7.38.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="7.39.8.1"></path> </svg><strong c-id="7.40.7.1"> 主题基础知识</strong> |主题</a></li> </ul> </div> <div class="Search__Defaults__Section" c-id="7.43.3.1"> <h4 c-id="7.44.4.0"> 常见的话题</h4> <ul c-id="7.46.4.1"> <li c-id="7.47.5.0"><a href="//www.jesscamp.com/docs/angular/testing" c-id="7.48.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="7.49.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="7.50.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="7.51.8.1"></path> </svg><strong c-id="7.52.7.1"> 测试</strong> |建筑</a></li> <li c-id="7.55.5.1"><a href="//www.jesscamp.com/docs/core-concepts/cross-platform" c-id="7.56.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="7.57.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="7.58.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="7.59.8.1"></path> </svg><strong c-id="7.60.7.1"> 存储</strong> |建筑</a></li> <li c-id="7.63.5.2"><a href="//www.jesscamp.com/docs/lifecycle/angular" c-id="7.64.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="7.65.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="7.66.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="7.67.8.1"></path> </svg><strong c-id="7.68.7.1"> 生命周期事件</strong> |角</a></li> <li c-id="7.71.5.3"><a href="//www.jesscamp.com/docs/navigation/angular" c-id="7.72.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="7.73.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="7.74.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="7.75.8.1"></path> </svg><strong c-id="7.76.7.1"> 导航</strong> |角</a></li> </ul> </div> <div class="Search__Defaults__Section" c-id="7.79.3.2"> <h4 c-id="7.80.4.0"> UI组件</h4> <ul c-id="7.82.4.1"> <li c-id="7.83.5.0"><a href="//www.jesscamp.com/docs/api/button" c-id="7.84.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="7.85.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="7.86.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="7.87.8.1"></path> </svg><strong c-id="7.88.7.1"> ion-button</strong> |按钮</a></li> <li c-id="7.91.5.1"><a href="//www.jesscamp.com/docs/api/card" c-id="7.92.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="7.93.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="7.94.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="7.95.8.1"></path> </svg><strong c-id="7.96.7.1"> ion-card</strong> |卡</a></li> <li c-id="7.99.5.2"><a href="//www.jesscamp.com/docs/api/loading" c-id="7.100.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="7.101.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="7.102.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="7.103.8.1"></path> </svg><strong c-id="7.104.7.1"> 离子装载</strong> |进度指标</a></li> <li c-id="7.107.5.3"><a href="//www.jesscamp.com/docs/api/tabs" c-id="7.108.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="7.109.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="7.110.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="7.111.8.1"></path> </svg><strong c-id="7.112.7.1"> ion-tabs</strong> |选项卡</a></li> </ul> </div> <div class="Search__Defaults__Section" c-id="7.115.3.3"> <h4 c-id="7.116.4.0"> 本国的</h4> <ul c-id="7.118.4.1"> <li c-id="7.119.5.0"><a href="https://ionic.io/docs/premier-plugins/camera" c-id="7.120.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="7.121.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="7.122.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="7.123.8.1"></path> </svg><strong c-id="7.124.7.1"> 相机</strong> |ee</a></li> <li c-id="7.127.5.1"><a href="https://ionic.io/docs/identity-vault" c-id="7.128.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="7.129.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="7.130.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="7.131.8.1"></path> </svg><strong c-id="7.132.7.1"> 身份保险库</strong> |ee</a></li> <li c-id="7.135.5.2"><a href="//www.jesscamp.com/docs/native/firebase" c-id="7.136.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="7.137.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="7.138.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="7.139.8.1"></path> </svg><strong c-id="7.140.7.1"> 重火力点</strong> |原生CE</a></li> <li c-id="7.143.5.3"><a href="//www.jesscamp.com/docs/native/barcode-scanner" c-id="7.144.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="7.145.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="7.146.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="7.147.8.1"></path> </svg><strong c-id="7.148.7.1"> 条形码扫描器</strong> |原生CE</a></li> </ul> </div> </div> </div> </div> <div class="SearchBtn" c-id="7.151.0.1"> <svg viewbox="0 0 512 512" class="SearchBtn__sm" c-id="7.152.1.0"> <path d="M443.5 420.2L336.7 312.4c20.9-26.2 33.5-59.4 33.5-95.5 0-84.5-68.5-153-153.1-153S64 132.5 64 217s68.5 153 153.1 153c36.6 0 70.1-12.8 96.5-34.2l106.1 107.1c3.2 3.4 7.6 5.1 11.9 5.1 4.1 0 8.2-1.5 11.3-4.5 6.6-6.3 6.8-16.7.6-23.3zm-226.4-83.1c-32.1 0-62.3-12.5-85-35.2-22.7-22.7-35.2-52.9-35.2-84.9 0-32.1 12.5-62.3 35.2-84.9 22.7-22.7 52.9-35.2 85-35.2s62.3 12.5 85 35.2c22.7 22.7 35.2 52.9 35.2 84.9 0 32.1-12.5 62.3-35.2 84.9-22.7 22.7-52.9 35.2-85 35.2z" c-id="7.153.2.0"></path> </svg> <div class="SearchBtn__lg" c-id="7.154.1.1"> <svg viewbox="0 0 512 512" class="SearchBtn__lg__icon" c-id="7.155.2.0"> <path d="M443.5 420.2L336.7 312.4c20.9-26.2 33.5-59.4 33.5-95.5 0-84.5-68.5-153-153.1-153S64 132.5 64 217s68.5 153 153.1 153c36.6 0 70.1-12.8 96.5-34.2l106.1 107.1c3.2 3.4 7.6 5.1 11.9 5.1 4.1 0 8.2-1.5 11.3-4.5 6.6-6.3 6.8-16.7.6-23.3zm-226.4-83.1c-32.1 0-62.3-12.5-85-35.2-22.7-22.7-35.2-52.9-35.2-84.9 0-32.1 12.5-62.3 35.2-84.9 22.7-22.7 52.9-35.2 85-35.2s62.3 12.5 85 35.2c22.7 22.7 35.2 52.9 35.2 84.9 0 32.1-12.5 62.3-35.2 84.9-22.7 22.7-52.9 35.2-85 35.2z" c-id="7.156.3.0"></path> </svg> <span class="SearchBtn__lg__text" c-id="7.157.2.1"> 搜索文件</span> <span class="SearchBtn__lg__key" c-id="7.159.2.2"> /</span> </div> </div> <div class="backdrop null" c-id="7.161.0.2"></div> </ionic-search> <a class="ionic-sub-header__mobile-toggle" c-id="6.2.0.2"> <svg viewbox="0 0 4 16" c-id="6.3.1.0"> <path d="M4 2C4 0.8999 3.1001 0 2 0C0.8999 0 0 0.8999 0 2C0 3.1001 0.8999 4 2 4C3.1001 4 4 3.1001 4 2ZM4 14C4 12.8999 3.1001 12 2 12C0.8999 12 0 12.8999 0 14C0 15.1001 0.8999 16 2 16C3.1001 16 4 15.1001 4 14ZM4 8C4 6.8999 3.1001 6 2 6C0.8999 6 0 6.8999 0 8C0 9.1001 0.8999 10 2 10C3.1001 10 4 9.1001 4 8Z" fill="#5B708B" c-id="6.4.2.0"></path> </svg></a> <div class="header-mobile-collapse__content" c-id="6.5.0.3">  <nav class="SectionNav" c-id="4.13.2.0"> <stencil-route-switch group="7282-0841-0667-9026" class="hydrated" c-id="4.14.3.0" s-id="9">       <stencil-route class="hydrated" group="7282-0841-0667-9026" c-id="4.15.4.0" s-id="10" style="display: none;">  <docs-dropdown tabindex="0" class="Dropdown Dropdown--left hydrated" c-id="4.16.5.0" s-id="11">    <button tabindex="-1" class="Dropdown-button" aria-haspopup="menu" aria-expanded="false" c-id="11.0.0.0"><span class="Dropdown-button-label" c-id="11.1.1.0"> 工作室</span> <svg viewbox="0 0 512 512" class="Dropdown-arrow" c-id="11.3.1.1"> <path d="M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z" c-id="11.4.2.0"></path> </svg></button> <div role="menu" class="Dropdown-panel" c-id="11.5.0.1">  <section c-id="4.17.6.0"> <stencil-route-link class="hydrated" c-id="4.18.7.0" s-id="12">   <a class="link-active" href="//www.jesscamp.com/docs/" c-id="12.0.0.0">  框架</a> </stencil-route-link> <stencil-route-link class="hydrated" c-id="4.20.7.1" s-id="13">   <a href="//www.jesscamp.com/docs/native" c-id="13.0.0.0">  本国的</a> </stencil-route-link> <stencil-route-link class="hydrated" c-id="4.22.7.2" s-id="14">   <a href="//www.jesscamp.com/docs/cli" c-id="14.0.0.0">  CLI</a> </stencil-route-link> </section> <section c-id="4.24.6.1"> <a href="https://ionic.io/docs/appflow" target="_blank" class="Nav-link outbound" c-id="4.25.7.0"><span c-id="4.26.8.0"> 演示applow</span>  <svg viewbox="0 0 512 512" c-id="4.29.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.30.9.0"></path> </svg></a> <a href="//www.jesscamp.com/capacitor/docs/" target="_blank" class="Nav-link outbound" c-id="4.31.7.1"><span c-id="4.32.8.0"> 电容器</span>  <svg viewbox="0 0 512 512" c-id="4.35.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.36.9.0"></path> </svg></a> <a href="https://stenciljs.com" target="_blank" class="Nav-link outbound" c-id="4.37.7.2"><span c-id="4.38.8.0"> 钢网</span>  <svg viewbox="0 0 512 512" c-id="4.41.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.42.9.0"></path> </svg></a> <a href="https://ionic.io/docs/identity-vault" target="_blank" class="Nav-link outbound" c-id="4.43.7.3"><span c-id="4.44.8.0"> 身份保险库</span>  <svg viewbox="0 0 512 512" c-id="4.47.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.48.9.0"></path> </svg></a> <a href="https://ionic.io/docs/auth-connect" target="_blank" class="Nav-link outbound" c-id="4.49.7.4"><span c-id="4.50.8.0"> 身份验证连接</span>  <svg viewbox="0 0 512 512" c-id="4.53.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.54.9.0"></path> </svg></a> <a href="https://ionic.io/docs/secure-storage" target="_blank" class="Nav-link outbound" c-id="4.55.7.5"><span c-id="4.56.8.0"> 安全存储</span>  <svg viewbox="0 0 512 512" c-id="4.59.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.60.9.0"></path> </svg></a> <a href="https://ionic.io/docs/premier-plugins" target="_blank" class="Nav-link outbound" c-id="4.61.7.6"><span c-id="4.62.8.0"> 尊贵插件</span>  <svg viewbox="0 0 512 512" c-id="4.65.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.66.9.0"></path> </svg></a> </section> </div> </docs-dropdown> </stencil-route> <stencil-route class="hydrated" group="7282-0841-0667-9026" c-id="4.67.4.1" s-id="15" style="display: none;">  <docs-dropdown tabindex="0" class="Dropdown Dropdown--left hydrated" c-id="4.68.5.0" s-id="16">    <button tabindex="-1" class="Dropdown-button" aria-haspopup="menu" aria-expanded="false" c-id="16.0.0.0"><span class="Dropdown-button-label" c-id="16.1.1.0"> 本国的</span> <svg viewbox="0 0 512 512" class="Dropdown-arrow" c-id="16.3.1.1"> <path d="M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z" c-id="16.4.2.0"></path> </svg></button> <div role="menu" class="Dropdown-panel" c-id="16.5.0.1">  <section c-id="4.69.6.0"> <stencil-route-link class="hydrated" c-id="4.70.7.0" s-id="17">   <a class="link-active" href="//www.jesscamp.com/docs/" c-id="17.0.0.0">  框架</a> </stencil-route-link> <stencil-route-link class="hydrated" c-id="4.72.7.1" s-id="18">    <a href="//www.jesscamp.com/docs/native" c-id="18.0.0.0">  本国的<svg viewbox="0 0 512 512" c-id="4.74.8.1"> <path d="M186.301 339.893L96 249.461l-32 30.507L186.301 402 448 140.506 416 110z" c-id="4.75.9.0"></path> </svg></a> </stencil-route-link> <stencil-route-link class="hydrated" c-id="4.76.7.2" s-id="19">   <a href="//www.jesscamp.com/docs/cli" c-id="19.0.0.0">  CLI</a> </stencil-route-link> </section> <section c-id="4.78.6.1"> <a href="https://ionic.io/docs/appflow" target="_blank" class="Nav-link outbound" c-id="4.79.7.0"><span c-id="4.80.8.0"> 演示applow</span>  <svg viewbox="0 0 512 512" c-id="4.83.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.84.9.0"></path> </svg></a> <a href="//www.jesscamp.com/capacitor/docs/" target="_blank" class="Nav-link outbound" c-id="4.85.7.1"><span c-id="4.86.8.0"> 电容器</span>  <svg viewbox="0 0 512 512" c-id="4.89.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.90.9.0"></path> </svg></a> <a href="https://stenciljs.com" target="_blank" class="Nav-link outbound" c-id="4.91.7.2"><span c-id="4.92.8.0"> 钢网</span>  <svg viewbox="0 0 512 512" c-id="4.95.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.96.9.0"></path> </svg></a> <a href="https://ionic.io/docs/identity-vault" target="_blank" class="Nav-link outbound" c-id="4.97.7.3"><span c-id="4.98.8.0"> 身份保险库</span>  <svg viewbox="0 0 512 512" c-id="4.101.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.102.9.0"></path> </svg></a> <a href="https://ionic.io/docs/auth-connect" target="_blank" class="Nav-link outbound" c-id="4.103.7.4"><span c-id="4.104.8.0"> 身份验证连接</span>  <svg viewbox="0 0 512 512" c-id="4.107.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.108.9.0"></path> </svg></a> <a href="https://ionic.io/docs/secure-storage" target="_blank" class="Nav-link outbound" c-id="4.109.7.5"><span c-id="4.110.8.0"> 安全存储</span>  <svg viewbox="0 0 512 512" c-id="4.113.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.114.9.0"></path> </svg></a> <a href="https://ionic.io/docs/premier-plugins" target="_blank" class="Nav-link outbound" c-id="4.115.7.6"><span c-id="4.116.8.0"> 尊贵插件</span>  <svg viewbox="0 0 512 512" c-id="4.119.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.120.9.0"></path> </svg></a> </section> </div> </docs-dropdown> </stencil-route> <stencil-route class="hydrated" group="7282-0841-0667-9026" c-id="4.121.4.2" s-id="20" style="display: none;">  <docs-dropdown tabindex="0" class="Dropdown Dropdown--left hydrated" c-id="4.122.5.0" s-id="21">    <button tabindex="-1" class="Dropdown-button" aria-haspopup="menu" aria-expanded="false" c-id="21.0.0.0"><span class="Dropdown-button-label" c-id="21.1.1.0"> CLI</span> <svg viewbox="0 0 512 512" class="Dropdown-arrow" c-id="21.3.1.1"> <path d="M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z" c-id="21.4.2.0"></path> </svg></button> <div role="menu" class="Dropdown-panel" c-id="21.5.0.1">  <section c-id="4.123.6.0"> <stencil-route-link class="hydrated" c-id="4.124.7.0" s-id="22">   <a class="link-active" href="//www.jesscamp.com/docs/" c-id="22.0.0.0">  框架</a> </stencil-route-link> <stencil-route-link class="hydrated" c-id="4.126.7.1" s-id="23">   <a href="//www.jesscamp.com/docs/native" c-id="23.0.0.0">  本国的</a> </stencil-route-link> <stencil-route-link class="hydrated" c-id="4.128.7.2" s-id="24">    <a href="//www.jesscamp.com/docs/cli" c-id="24.0.0.0">  CLI<svg viewbox="0 0 512 512" c-id="4.130.8.1"> <path d="M186.301 339.893L96 249.461l-32 30.507L186.301 402 448 140.506 416 110z" c-id="4.131.9.0"></path> </svg></a> </stencil-route-link> </section> <section c-id="4.132.6.1"> <a href="https://ionic.io/docs/appflow" target="_blank" class="Nav-link outbound" c-id="4.133.7.0"><span c-id="4.134.8.0"> 演示applow</span>  <svg viewbox="0 0 512 512" c-id="4.137.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.138.9.0"></path> </svg></a> <a href="//www.jesscamp.com/capacitor/docs/" target="_blank" class="Nav-link outbound" c-id="4.139.7.1"><span c-id="4.140.8.0"> 电容器</span>  <svg viewbox="0 0 512 512" c-id="4.143.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.144.9.0"></path> </svg></a> <a href="https://stenciljs.com" target="_blank" class="Nav-link outbound" c-id="4.145.7.2"><span c-id="4.146.8.0"> 钢网</span>  <svg viewbox="0 0 512 512" c-id="4.149.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.150.9.0"></path> </svg></a> <a href="https://ionic.io/docs/identity-vault" target="_blank" class="Nav-link outbound" c-id="4.151.7.3"><span c-id="4.152.8.0"> 身份保险库</span>  <svg viewbox="0 0 512 512" c-id="4.155.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.156.9.0"></path> </svg></a> <a href="https://ionic.io/docs/auth-connect" target="_blank" class="Nav-link outbound" c-id="4.157.7.4"><span c-id="4.158.8.0"> 身份验证连接</span>  <svg viewbox="0 0 512 512" c-id="4.161.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.162.9.0"></path> </svg></a> <a href="https://ionic.io/docs/secure-storage" target="_blank" class="Nav-link outbound" c-id="4.163.7.5"><span c-id="4.164.8.0"> 安全存储</span>  <svg viewbox="0 0 512 512" c-id="4.167.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.168.9.0"></path> </svg></a> <a href="https://ionic.io/docs/premier-plugins" target="_blank" class="Nav-link outbound" c-id="4.169.7.6"><span c-id="4.170.8.0"> 尊贵插件</span>  <svg viewbox="0 0 512 512" c-id="4.173.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.174.9.0"></path> </svg></a> </section> </div> </docs-dropdown> </stencil-route> <stencil-route group="7282-0841-0667-9026" class="hydrated" c-id="4.175.4.3" s-id="25">  <docs-dropdown tabindex="0" class="Dropdown Dropdown--left hydrated" c-id="4.176.5.0" s-id="26">     <button tabindex="-1" class="Dropdown-button" aria-haspopup="menu" aria-expanded="false" c-id="26.0.0.0"><span class="Dropdown-button-label" c-id="26.1.1.0"> 框架</span> <svg viewbox="0 0 512 512" class="Dropdown-arrow" c-id="26.3.1.1"> <path d="M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z" c-id="26.4.2.0"></path> </svg></button> <div role="menu" class="Dropdown-panel" c-id="26.5.0.1">  <section c-id="4.177.6.0"> <stencil-route-link class="hydrated" c-id="4.178.7.0" s-id="27">    <a class="link-active" href="//www.jesscamp.com/docs/" c-id="27.0.0.0">  框架<svg viewbox="0 0 512 512" c-id="4.180.8.1"> <path d="M186.301 339.893L96 249.461l-32 30.507L186.301 402 448 140.506 416 110z" c-id="4.181.9.0"></path> </svg></a> </stencil-route-link> <stencil-route-link class="hydrated" c-id="4.182.7.1" s-id="28">   <a href="//www.jesscamp.com/docs/native" c-id="28.0.0.0">  本国的</a> </stencil-route-link> <stencil-route-link class="hydrated" c-id="4.184.7.2" s-id="29">   <a href="//www.jesscamp.com/docs/cli" c-id="29.0.0.0">  CLI</a> </stencil-route-link> </section> <section c-id="4.186.6.1"> <a href="https://ionic.io/docs/appflow" target="_blank" class="Nav-link outbound" c-id="4.187.7.0"><span c-id="4.188.8.0"> 演示applow</span>  <svg viewbox="0 0 512 512" c-id="4.191.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.192.9.0"></path> </svg></a> <a href="//www.jesscamp.com/capacitor/docs/" target="_blank" class="Nav-link outbound" c-id="4.193.7.1"><span c-id="4.194.8.0"> 电容器</span>  <svg viewbox="0 0 512 512" c-id="4.197.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.198.9.0"></path> </svg></a> <a href="https://stenciljs.com" target="_blank" class="Nav-link outbound" c-id="4.199.7.2"><span c-id="4.200.8.0"> 钢网</span>  <svg viewbox="0 0 512 512" c-id="4.203.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.204.9.0"></path> </svg></a> <a href="https://ionic.io/docs/identity-vault" target="_blank" class="Nav-link outbound" c-id="4.205.7.3"><span c-id="4.206.8.0"> 身份保险库</span>  <svg viewbox="0 0 512 512" c-id="4.209.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.210.9.0"></path> </svg></a> <a href="https://ionic.io/docs/auth-connect" target="_blank" class="Nav-link outbound" c-id="4.211.7.4"><span c-id="4.212.8.0"> 身份验证连接</span>  <svg viewbox="0 0 512 512" c-id="4.215.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.216.9.0"></path> </svg></a> <a href="https://ionic.io/docs/secure-storage" target="_blank" class="Nav-link outbound" c-id="4.217.7.5"><span c-id="4.218.8.0"> 安全存储</span>  <svg viewbox="0 0 512 512" c-id="4.221.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.222.9.0"></path> </svg></a> <a href="https://ionic.io/docs/premier-plugins" target="_blank" class="Nav-link outbound" c-id="4.223.7.6"><span c-id="4.224.8.0"> 尊贵插件</span>  <svg viewbox="0 0 512 512" c-id="4.227.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.228.9.0"></path> </svg></a> </section> <section c-id="4.229.6.2"> <a href="//www.jesscamp.com/docs/v4/components" target="_blank" class="Nav-link outbound" c-id="4.230.7.0"><span c-id="4.231.8.0"> v4框架</span>  <svg viewbox="0 0 512 512" c-id="4.234.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.235.9.0"></path> </svg></a> <a href="//www.jesscamp.com/docs/v3" target="_blank" class="Nav-link outbound" c-id="4.236.7.1"><span c-id="4.237.8.0"> 框架v3</span>  <svg viewbox="0 0 512 512" c-id="4.240.8.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="4.241.9.0"></path> </svg></a> </section> </div> </docs-dropdown> <div class="SectionNav-tabs" c-id="4.242.5.1"> <stencil-route-link class="hydrated" c-id="4.243.6.0" s-id="30">   <a href="//www.jesscamp.com/docs/" c-id="30.0.0.0">  指导</a> </stencil-route-link> <stencil-route-link class="hydrated" c-id="4.245.6.1" s-id="31">   <a class="link-active" href="//www.jesscamp.com/docs/components" c-id="31.0.0.0">  成分</a> </stencil-route-link> <stencil-route-link class="hydrated" c-id="4.247.6.2" s-id="32">   <a href="//www.jesscamp.com/docs/cli" c-id="32.0.0.0">  CLI</a> </stencil-route-link> <stencil-route-link class="hydrated" c-id="4.249.6.3" s-id="33">   <a href="//www.jesscamp.com/docs/native" c-id="33.0.0.0">  本国的</a> </stencil-route-link> </div> </stencil-route> </stencil-route-switch> </nav> <div class="jobs-wrapper" c-id="4.251.2.1"> <a class="jobs" href="https://ionic.io/about/jobs" target="_blank" rel="noopener" c-id="4.252.3.0"><span class="start" c-id="4.253.4.0"> <svg width="12" height="12" fill="none" xmlns="http://www.w3.org/2000/svg" c-id="4.254.5.0"> <g clip-path="url(#clip0)" fill="#D0FDFF" c-id="4.255.6.0"> <path d="M4.4 2.9a.65.65 0 011.22 0l.8 2.25c.07.18.22.33.4.4l2.25.8a.65.65 0 010 1.22l-2.25.8a.65.65 0 00-.4.4l-.8 2.25a.65.65 0 01-1.22 0l-.8-2.25a.65.65 0 00-.4-.4l-2.25-.8a.65.65 0 010-1.22l2.25-.8c.18-.07.33-.22.4-.4l.8-2.25zM9.04 1.2c.15-.4.72-.4.87 0l.29.81c.04.13.14.23.27.28l.8.29c.41.14.41.72 0 .87l-.8.28a.46.46 0 00-.27.28l-.3.8c-.14.41-.71.41-.86 0l-.29-.8a.46.46 0 00-.28-.28l-.8-.28a.46.46 0 010-.87l.8-.3a.46.46 0 00.28-.27l.29-.8zM1.5.48c.1-.3.5-.3.6 0l.24.65c.03.1.1.16.2.2l.65.23c.29.1.29.5 0 .61l-.65.24c-.1.03-.17.1-.2.2l-.23.65c-.1.28-.51.28-.62 0l-.23-.66a.32.32 0 00-.2-.2l-.65-.23a.32.32 0 010-.6l.65-.24c.1-.04.17-.1.2-.2l.23-.65z" c-id="4.256.7.0"></path> </g> <defs c-id="4.257.6.1"> <clippath id="clip0" c-id="4.258.7.0"> <path fill="#fff" d="M0 0h12v12H0z" c-id="4.259.8.0"></path> </clippath> </defs> </svg> betway东盟体育app离子是招聘</span><span class="end" c-id="4.261.4.1"> 与我们合作<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="14" height="12" viewbox="0 0 512 512" c-id="4.263.5.1"> <title c-id="4.264.6.0"><！ - t.4.265.7.0 - >向前箭头</标题><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M268 112l144 144-144 144M392 256H100" c-id="4.266.6.1"></path> </svg></span></a> </div> <nav class="UtilNav" c-id="4.267.2.2"> <ionic-search class="hydrated" c-id="4.268.3.0" s-id="34">  <div class="search-box" c-id="34.0.0.0"> <input type="text" placeholder="Search Ionic.." c-id="34.1.1.0"> <svg viewbox="0 0 512 512" class="search-static" c-id="34.2.1.1"> <path d="M443.5 420.2L336.7 312.4c20.9-26.2 33.5-59.4 33.5-95.5 0-84.5-68.5-153-153.1-153S64 132.5 64 217s68.5 153 153.1 153c36.6 0 70.1-12.8 96.5-34.2l106.1 107.1c3.2 3.4 7.6 5.1 11.9 5.1 4.1 0 8.2-1.5 11.3-4.5 6.6-6.3 6.8-16.7.6-23.3zm-226.4-83.1c-32.1 0-62.3-12.5-85-35.2-22.7-22.7-35.2-52.9-35.2-84.9 0-32.1 12.5-62.3 35.2-84.9 22.7-22.7 52.9-35.2 85-35.2s62.3 12.5 85 35.2c22.7 22.7 35.2 52.9 35.2 84.9 0 32.1-12.5 62.3-35.2 84.9-22.7 22.7-52.9 35.2-85 35.2z" c-id="34.3.2.0"></path> </svg> <ion-icon class="close sc-ion-icon-h md hydrated" role="img" aria-label="close" name="close" c-id="34.4.1.2" s-id="35">  <div class="icon-inner sc-ion-icon" c-id="35.0.0.0"></div> </ion-icon> <div class="slot" c-id="34.5.1.3"> <div class="Search__Defaults" c-id="34.6.2.0"> <div class="Search__Defaults__Section" c-id="34.7.3.0"> <h4 c-id="34.8.4.0"> 开始</h4> <ul c-id="34.10.4.1"> <li c-id="34.11.5.0"><a href="//www.jesscamp.com/docs/intro/cli" c-id="34.12.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="34.13.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="34.14.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="34.15.8.1"></path> </svg><strong c-id="34.16.7.1"> 安装指南</strong> |安装</a></li> <li c-id="34.19.5.1"><a href="//www.jesscamp.com/docs/developing/previewing" c-id="34.20.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="34.21.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="34.22.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="34.23.8.1"></path> </svg><strong c-id="34.24.7.1"> 运行一个应用程序</strong> |建筑</a></li> <li c-id="34.27.5.2"><a href="//www.jesscamp.com/docs/layout/structure" c-id="34.28.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="34.29.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="34.30.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="34.31.8.1"></path> </svg><strong c-id="34.32.7.1"> 应用程序结构</strong> |布局</a></li> <li c-id="34.35.5.3"><a href="//www.jesscamp.com/docs/theming/basics" c-id="34.36.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="34.37.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="34.38.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="34.39.8.1"></path> </svg><strong c-id="34.40.7.1"> 主题基础知识</strong> |主题</a></li> </ul> </div> <div class="Search__Defaults__Section" c-id="34.43.3.1"> <h4 c-id="34.44.4.0"> 常见的话题</h4> <ul c-id="34.46.4.1"> <li c-id="34.47.5.0"><a href="//www.jesscamp.com/docs/angular/testing" c-id="34.48.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="34.49.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="34.50.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="34.51.8.1"></path> </svg><strong c-id="34.52.7.1"> 测试</strong> |建筑</a></li> <li c-id="34.55.5.1"><a href="//www.jesscamp.com/docs/core-concepts/cross-platform" c-id="34.56.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="34.57.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="34.58.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="34.59.8.1"></path> </svg><strong c-id="34.60.7.1"> 存储</strong> |建筑</a></li> <li c-id="34.63.5.2"><a href="//www.jesscamp.com/docs/lifecycle/angular" c-id="34.64.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="34.65.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="34.66.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="34.67.8.1"></path> </svg><strong c-id="34.68.7.1"> 生命周期事件</strong> |角</a></li> <li c-id="34.71.5.3"><a href="//www.jesscamp.com/docs/navigation/angular" c-id="34.72.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="34.73.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="34.74.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="34.75.8.1"></path> </svg><strong c-id="34.76.7.1"> 导航</strong> |角</a></li> </ul> </div> <div class="Search__Defaults__Section" c-id="34.79.3.2"> <h4 c-id="34.80.4.0"> UI组件</h4> <ul c-id="34.82.4.1"> <li c-id="34.83.5.0"><a href="//www.jesscamp.com/docs/api/button" c-id="34.84.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="34.85.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="34.86.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="34.87.8.1"></path> </svg><strong c-id="34.88.7.1"> ion-button</strong> |按钮</a></li> <li c-id="34.91.5.1"><a href="//www.jesscamp.com/docs/api/card" c-id="34.92.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="34.93.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="34.94.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="34.95.8.1"></path> </svg><strong c-id="34.96.7.1"> ion-card</strong> |卡</a></li> <li c-id="34.99.5.2"><a href="//www.jesscamp.com/docs/api/loading" c-id="34.100.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="34.101.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="34.102.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="34.103.8.1"></path> </svg><strong c-id="34.104.7.1"> 离子装载</strong> |进度指标</a></li> <li c-id="34.107.5.3"><a href="//www.jesscamp.com/docs/api/tabs" c-id="34.108.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="34.109.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="34.110.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="34.111.8.1"></path> </svg><strong c-id="34.112.7.1"> ion-tabs</strong> |选项卡</a></li> </ul> </div> <div class="Search__Defaults__Section" c-id="34.115.3.3"> <h4 c-id="34.116.4.0"> 本国的</h4> <ul c-id="34.118.4.1"> <li c-id="34.119.5.0"><a href="https://ionic.io/docs/premier-plugins/camera" c-id="34.120.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="34.121.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="34.122.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="34.123.8.1"></path> </svg><strong c-id="34.124.7.1"> 相机</strong> |ee</a></li> <li c-id="34.127.5.1"><a href="https://ionic.io/docs/identity-vault" c-id="34.128.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="34.129.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="34.130.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="34.131.8.1"></path> </svg><strong c-id="34.132.7.1"> 身份保险库</strong> |ee</a></li> <li c-id="34.135.5.2"><a href="//www.jesscamp.com/docs/native/firebase" c-id="34.136.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="34.137.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="34.138.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="34.139.8.1"></path> </svg><strong c-id="34.140.7.1"> 重火力点</strong> |原生CE</a></li> <li c-id="34.143.5.3"><a href="//www.jesscamp.com/docs/native/barcode-scanner" c-id="34.144.6.0"> <svg viewbox="0 0 16 14" fill="none" c-id="34.145.7.0"> <path d="M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z" fill="#73849A" c-id="34.146.8.0"></path> <path d="M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z" fill="#B2BECD" c-id="34.147.8.1"></path> </svg><strong c-id="34.148.7.1"> 条形码扫描器</strong> |原生CE</a></li> </ul> </div> </div> </div> </div> <div class="SearchBtn" c-id="34.151.0.1"> <svg viewbox="0 0 512 512" class="SearchBtn__sm" c-id="34.152.1.0"> <path d="M443.5 420.2L336.7 312.4c20.9-26.2 33.5-59.4 33.5-95.5 0-84.5-68.5-153-153.1-153S64 132.5 64 217s68.5 153 153.1 153c36.6 0 70.1-12.8 96.5-34.2l106.1 107.1c3.2 3.4 7.6 5.1 11.9 5.1 4.1 0 8.2-1.5 11.3-4.5 6.6-6.3 6.8-16.7.6-23.3zm-226.4-83.1c-32.1 0-62.3-12.5-85-35.2-22.7-22.7-35.2-52.9-35.2-84.9 0-32.1 12.5-62.3 35.2-84.9 22.7-22.7 52.9-35.2 85-35.2s62.3 12.5 85 35.2c22.7 22.7 35.2 52.9 35.2 84.9 0 32.1-12.5 62.3-35.2 84.9-22.7 22.7-52.9 35.2-85 35.2z" c-id="34.153.2.0"></path> </svg> <div class="SearchBtn__lg" c-id="34.154.1.1"> <svg viewbox="0 0 512 512" class="SearchBtn__lg__icon" c-id="34.155.2.0"> <path d="M443.5 420.2L336.7 312.4c20.9-26.2 33.5-59.4 33.5-95.5 0-84.5-68.5-153-153.1-153S64 132.5 64 217s68.5 153 153.1 153c36.6 0 70.1-12.8 96.5-34.2l106.1 107.1c3.2 3.4 7.6 5.1 11.9 5.1 4.1 0 8.2-1.5 11.3-4.5 6.6-6.3 6.8-16.7.6-23.3zm-226.4-83.1c-32.1 0-62.3-12.5-85-35.2-22.7-22.7-35.2-52.9-35.2-84.9 0-32.1 12.5-62.3 35.2-84.9 22.7-22.7 52.9-35.2 85-35.2s62.3 12.5 85 35.2c22.7 22.7 35.2 52.9 35.2 84.9 0 32.1-12.5 62.3-35.2 84.9-22.7 22.7-52.9 35.2-85 35.2z" c-id="34.156.3.0"></path> </svg> <span class="SearchBtn__lg__text" c-id="34.157.2.1"> 搜索文件</span> <span class="SearchBtn__lg__key" c-id="34.159.2.2"> /</span> </div> </div> <div class="backdrop null" c-id="34.161.0.2"></div> </ionic-search> <docs-dropdown tabindex="0" class="Dropdown Dropdown--right hydrated" c-id="4.269.3.1" s-id="36">     <button tabindex="-1" class="Dropdown-button" aria-haspopup="menu" aria-expanded="false" c-id="36.0.0.0"><span class="Dropdown-button-label" c-id="36.1.1.0"> 社区</span> <svg viewbox="0 0 512 512" class="Dropdown-arrow" c-id="36.3.1.1"> <path d="M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z" c-id="36.4.2.0"></path> </svg></button> <div role="menu" class="Dropdown-panel" c-id="36.5.0.1">  <section c-id="4.270.4.0"> <a href="//www.jesscamp.com/community" target="_blank" c-id="4.271.5.0">2018必威体育下载 </a> </section> <section c-id="4.273.4.1"> <a href="//www.jesscamp.com/forum/" target="_blank" c-id="4.274.5.0"> 论坛</a> <a href="https://www.meetup.com/topics/ionic-framework/" target="_blank" c-id="4.276.5.1"> 聚会</a> </section> <section c-id="4.278.4.2"> <a href="//www.jesscamp.com/blog/" target="_blank" c-id="4.279.5.0"> 博客</a> <a href="https://twitter.com/ionicframework" target="_blank" c-id="4.281.5.1"> 推特</a> </section> </div> </docs-dropdown> <docs-dropdown tabindex="0" class="Dropdown Dropdown--right hydrated" c-id="4.283.3.2" s-id="37">    <button tabindex="-1" class="Dropdown-button" aria-haspopup="menu" aria-expanded="false" c-id="37.0.0.0"><span class="Dropdown-button-label" c-id="37.1.1.0"> 支持</span> <svg viewbox="0 0 512 512" class="Dropdown-arrow" c-id="37.3.1.1"> <path d="M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z" c-id="37.4.2.0"></path> </svg></button> <div role="menu" class="Dropdown-panel" c-id="37.5.0.1">  <section c-id="4.284.4.0"> <a href="//www.jesscamp.com/support" target="_blank" c-id="4.285.5.0"> 帮助中心</a> </section> <section c-id="4.287.4.1"> <a href="https://ionic.zendesk.com/" target="_blank" c-id="4.288.5.0"> 客户支持</a> <a href="//www.jesscamp.com/advisory" target="_blank" c-id="4.290.5.1"> 企业咨询</a> </section> </div> </docs-dropdown> <docs-dropdown class="label-sm-only Dropdown Dropdown--right hydrated" tabindex="0" c-id="4.292.3.3" s-id="38">     <button tabindex="-1" class="Dropdown-button" aria-haspopup="menu" aria-expanded="false" c-id="38.0.0.0"><span class="Dropdown-button-label" c-id="38.1.1.0"> 翻译</span> <svg viewbox="0 0 22 14" fill="none" class="Dropdown-icon" c-id="38.3.1.1"> <path d="M19.3213 13.9999H22.0001L17.039 1.21558H14.2346L9.2832 13.9999H11.8072L13.0064 10.7307H18.1415L19.3213 13.9999ZM15.5014 3.65195H15.6658L17.5613 8.92339H13.5866L15.5014 3.65195Z" fill="#B2BECD" c-id="38.4.2.0"></path> <path d="M0 1.10938H12.4318L11.5697 3.32812H0V1.10938Z" fill="#B2BECD" c-id="38.5.2.1"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.75268 1.11609C8.75268 1.11609 8.75268 1.11712 9.89332 1.11712C11.034 1.11712 11.034 1.11822 11.034 1.11822L11.034 1.11939L11.034 1.12198L11.0339 1.12805L11.0337 1.14382C11.0335 1.15593 11.0332 1.17122 11.0325 1.1896C11.0313 1.22637 11.029 1.27554 11.0248 1.33642C11.0164 1.45817 11.0003 1.62689 10.9695 1.83709C10.9081 2.25748 10.7879 2.84428 10.5533 3.55314C10.083 4.97375 9.15623 6.87412 7.33744 8.89844L7.30893 8.93017L2.7154 13.3124L1.24023 11.7004L5.63338 7.45082C7.21765 5.67868 7.9949 4.05478 8.37789 2.89777C8.57098 2.31443 8.66471 1.84706 8.71016 1.53633C8.73288 1.38097 8.74352 1.2649 8.74847 1.19324C8.75095 1.15741 8.752 1.13272 8.75243 1.11981L8.75272 1.10938L8.7527 1.11094L8.75269 1.11345L8.75268 1.11609Z" fill="#B2BECD" c-id="38.6.2.2"></path> <rect x="5.5166" width="2.20704" height="1.10937" fill="#B2BECD" c-id="38.7.2.3"></rect> <path d="M4.17075 7.9686C3.09555 6.69872 2.39593 5.48407 1.94141 4.4375H4.40026C4.76103 5.09472 5.24197 5.81584 5.88345 6.5682L5.93101 6.62398L5.96524 6.67692C5.96787 6.68067 5.97319 6.68816 5.98137 6.69921C6.0017 6.72667 6.03969 6.77615 6.09781 6.8448C6.21395 6.98199 6.41098 7.19635 6.70864 7.46479C7.19301 7.9016 8.18265 8.61127 9.29424 9.23901L8.50109 11.2671C6.94927 10.5044 5.9002 9.71638 5.23489 9.11639C4.86256 8.78062 4.5965 8.49477 4.41706 8.28281C4.32738 8.17688 4.25946 8.08955 4.21081 8.02383C4.19559 8.00327 4.18226 7.98483 4.17075 7.9686Z" fill="#B2BECD" c-id="38.8.2.4"></path> </svg> <svg viewbox="0 0 512 512" class="Dropdown-arrow" c-id="38.9.1.2"> <path d="M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z" c-id="38.10.2.0"></path> </svg></button> <div role="menu" class="Dropdown-panel" c-id="38.11.0.1">  <section c-id="4.293.4.0"> <a href="//www.jesscamp.com/en/docs/" class="link-active" c-id="4.294.5.0"> 英语<svg viewbox="0 0 512 512" width="14" c-id="4.296.6.1"> <path d="M186.301 339.893L96 249.461l-32 30.507L186.301 402 448 140.506 416 110z" c-id="4.297.7.0"></path> </svg></a> <a href="//www.jesscamp.com/jp/docs/" target="_blank" c-id="4.298.5.1"> 日本語</a> </section> <section c-id="4.300.4.1"> <a href="//www.jesscamp.com/translate" target="_blank" c-id="4.301.5.0"> 翻译</a> </section> <div c-id="4.303.4.2" style="display: none;"> <a href="//www.jesscamp.com/docs/zh" c-id="4.304.5.0"> 中国人</a> <a href="//www.jesscamp.com/docs/fr" c-id="4.306.5.1"> 法国</a> <a href="//www.jesscamp.com/docs/pt" c-id="4.308.5.2"> 葡萄牙语</a> <a href="//www.jesscamp.com/docs/es" c-id="4.310.5.3"> 西班牙语</a> </div> </div> </docs-dropdown> <a href="https://github.com/ionic-team/ionic" target="_blank" c-id="4.312.3.4"> <ion-icon class="lg-only sc-ion-icon-h md hydrated" role="img" aria-label="logo github" name="logo-github" c-id="4.313.4.0" s-id="39">  <div class="icon-inner sc-ion-icon" c-id="39.0.0.0"></div> </ion-icon><span class="sm-only" c-id="4.314.4.1"> GitHub<svg viewbox="0 0 512 512" class="Dropdown-arrow" c-id="4.316.5.1"> <path d="M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z" c-id="4.317.6.0"></path> </svg></span></a> <a href="https://twitter.com/ionicframework" target="_blank" c-id="4.318.3.5"> <ion-icon class="lg-only sc-ion-icon-h md hydrated" role="img" aria-label="logo twitter" name="logo-twitter" c-id="4.319.4.0" s-id="40">  <div class="icon-inner sc-ion-icon" c-id="40.0.0.0"></div> </ion-icon><span class="sm-only" c-id="4.320.4.1"> 推特<svg viewbox="0 0 512 512" class="Dropdown-arrow" c-id="4.322.5.1"> <path d="M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z" c-id="4.323.6.0"></path> </svg></span></a> </nav> </div> </header-mobile-collapse> </header> </docs-header> <docs-menu class="hydrated" c-id="1.3.1.2" s-id="41">  <header c-id="41.0.0.0"> <docs-menu-toggle role="button" tabindex="0" aria-label="Toggle Menu" class="hydrated" c-id="41.1.1.0" s-id="42">  <svg viewbox="0 0 512 512" c-id="42.0.0.0"> <path d="M64 384h384v-42.666H64V384zm0-106.666h384v-42.667H64v42.667zM64 128v42.665h384V128H64z" c-id="42.1.1.0"></path> </svg> </docs-menu-toggle> <stencil-route-link class="hydrated" c-id="41.2.1.1" s-id="43">   <a class="link-active" href="//www.jesscamp.com/docs/" c-id="43.0.0.0">  <svg viewbox="0 0 78 25" fill="currentColor" class="MenuLogo" c-id="41.3.2.0"> <title c-id="41.4.3.0">< !——t.41.5.4.0 >betway东盟体育app www.jesscamp.com</标题><path d="M19.8517 8.01728C21.2289 8.01728 22.3454 6.9008 22.3454 5.52354C22.3454 4.14628 21.2289 3.02979 19.8517 3.02979C18.4744 3.02979 17.3579 4.14628 17.3579 5.52354C17.3579 6.9008 18.4744 8.01728 19.8517 8.01728Z" c-id="41.6.3.1"></path> <path d="M22.9219 8.02656L22.8187 7.79688L22.65 7.98438C22.2422 8.44844 21.7219 8.80469 21.1453 9.02031L20.9859 9.08125L21.0516 9.23594C21.5484 10.4312 21.8016 11.6969 21.8016 12.9953C21.8016 18.4 17.4047 22.8016 11.9953 22.8016C6.58594 22.8016 2.19375 18.4047 2.19375 13C2.19375 7.59531 6.59531 3.19375 12 3.19375C13.4672 3.19375 14.8828 3.5125 16.2 4.14062L16.3547 4.21562L16.4203 4.06094C16.6594 3.49844 17.0437 2.99687 17.5266 2.60781L17.7234 2.44844L17.4984 2.33125C15.7875 1.45 13.9359 1 12 1C5.38125 1 0 6.38125 0 13C0 19.6187 5.38125 25 12 25C18.6187 25 24 19.6187 24 13C24 11.2703 23.6391 9.59687 22.9219 8.02656Z" c-id="41.7.3.2"></path> <path d="M12.1829 7.53447C9.02353 7.43134 6.43134 10.0235 6.53447 13.1829C6.62822 16.047 8.95322 18.3767 11.8173 18.4657C14.9767 18.5688 17.5688 15.9767 17.4657 12.8173C17.372 9.95322 15.047 7.62822 12.1829 7.53447Z" c-id="41.8.3.3"></path> <text font-size="18" font-weight="bold" letter-spacing="-0.02em" c-id="41.9.3.4" style="white-space: pre;"> <tspan x="27.5" y="19.5" c-id="41.10.4.0"> 译文</TS.pan> </text> </svg></a> </stencil-route-link> </header> <stencil-route-switch group="7477-5068-8092-3170" class="hydrated" c-id="41.12.0.1" s-id="44">      <stencil-route class="hydrated" group="7477-5068-8092-3170" c-id="41.13.1.0" s-id="45" style="display: none;">  </stencil-route> <stencil-route class="hydrated" group="7477-5068-8092-3170" c-id="41.14.1.1" s-id="46" style="display: none;">  </stencil-route> <stencil-route group="7477-5068-8092-3170" class="hydrated" c-id="41.15.1.2" s-id="47">  <section class="MenuControls" c-id="41.16.2.0"> <framework-select class="hydrated" c-id="41.17.3.0" s-id="48">  <docs-select class="FrameworkSelect Select hydrated" c-id="48.0.0.0" s-id="49">  <docs-dropdown tabindex="0" class="Dropdown Dropdown--left hydrated" c-id="49.0.0.0" s-id="50">      <button tabindex="-1" class="Dropdown-button" aria-haspopup="menu" aria-expanded="false" c-id="50.0.0.0"><span class="Dropdown-button-label" c-id="50.1.1.0"> <div class="FrameworkSelect-framework" c-id="50.2.2.0"> <svg viewbox="0 0 14 14" fill="none" class="FrameworkSelect-icon" c-id="50.3.3.0"> <circle cx="7" cy="7" r="7" fill="#1A232F" c-id="50.4.4.0"></circle> <path d="M7.891 7c0 .497-.399.9-.89.9a.895.895 0 0 1-.892-.9c0-.497.399-.9.891-.9s.891.403.891.9z" fill="#5ADBFF" c-id="50.5.4.1"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.564 3.223c.144.118.29.25.436.393a6.61 6.61 0 0 1 .436-.393c.371-.305.74-.529 1.085-.641.345-.113.689-.12.979.049.29.169.456.473.531.83.076.358.069.793-.007 1.27-.03.185-.07.377-.12.577.197.056.382.117.555.184.448.172.825.383 1.093.628.27.245.448.542.448.88 0 .338-.179.635-.448.88-.268.245-.645.456-1.093.628a6.559 6.559 0 0 1-.554.184c.05.2.09.392.119.577.076.477.083.912.008 1.27-.076.357-.242.661-.532.83-.29.17-.634.162-.98.05-.344-.113-.713-.337-1.084-.642A6.635 6.635 0 0 1 7 10.384a6.635 6.635 0 0 1-.436.393c-.371.305-.74.529-1.085.641-.345.113-.689.12-.979-.049-.29-.169-.456-.473-.532-.83-.075-.358-.068-.793.008-1.27.03-.185.07-.377.12-.577a6.55 6.55 0 0 1-.555-.184c-.448-.172-.825-.383-1.093-.628C2.178 7.635 2 7.338 2 7c0-.338.179-.635.448-.88.268-.245.645-.456 1.093-.628a6.55 6.55 0 0 1 .554-.184c-.05-.2-.09-.392-.119-.577-.076-.477-.083-.912-.008-1.27.076-.357.242-.661.532-.83.29-.17.634-.162.98-.05.344.113.713.337 1.084.642zm3.042.33c-.06-.285-.177-.457-.323-.542-.147-.086-.353-.102-.628-.012-.276.09-.598.28-.945.564-.134.11-.27.232-.407.367.287.312.572.669.847 1.06.474.045.922.116 1.333.21a6.26 6.26 0 0 0 .111-.539c.071-.446.073-.822.012-1.107zm-3.316.01c.134.11.27.232.407.367a10.49 10.49 0 0 0-.847 1.06c-.474.045-.922.116-1.333.21a6.26 6.26 0 0 1-.112-.539c-.07-.446-.072-.822-.011-1.107.06-.286.177-.458.323-.543.147-.086.353-.102.628-.012.276.09.598.28.945.564zm2.177 1.904c.316.04.617.092.897.156a9.763 9.763 0 0 1-.315.862 12.941 12.941 0 0 0-.582-1.018zm1.32.263c-.125.406-.289.834-.488 1.27.2.436.363.864.488 1.27.184-.053.357-.11.517-.172.418-.161.742-.348.957-.544.215-.196.304-.383.304-.554 0-.17-.089-.358-.304-.554-.215-.196-.538-.383-.957-.544a6.117 6.117 0 0 0-.517-.172zm-1.394.458c.156.273.298.544.426.812a12.345 12.345 0 0 1-.91 1.59 12.086 12.086 0 0 1-1.818 0A12.323 12.323 0 0 1 5.18 7a12.345 12.345 0 0 1 .91-1.59 12.086 12.086 0 0 1 1.818 0c.166.246.328.506.484.778zm.377 1.843c-.099.172-.2.34-.303.502.316-.04.617-.092.897-.156a9.763 9.763 0 0 0-.315-.862c-.088.172-.18.344-.28.516zM7 9.062c.197 0 .391-.005.582-.013A9.686 9.686 0 0 1 7 9.755a9.688 9.688 0 0 1-.582-.706c.19.008.385.013.582.013zm1.15-.053c-.275.392-.56.749-.847 1.061.137.135.273.257.407.367.347.284.669.474.945.564.275.09.481.074.628-.012.146-.085.263-.257.323-.543.061-.285.06-.661-.011-1.107a6.26 6.26 0 0 0-.112-.539c-.411.094-.86.165-1.333.21zm-2.3 0c.275.392.56.749.847 1.061a6.17 6.17 0 0 1-.407.367c-.347.284-.669.474-.945.564-.275.09-.481.074-.628-.012-.146-.085-.263-.257-.323-.543-.061-.285-.06-.661.011-1.107a6.26 6.26 0 0 1 .112-.539c.411.094.86.165 1.333.21zm-.317-.476a9.539 9.539 0 0 1-.897-.156c.086-.277.19-.565.315-.862a12.941 12.941 0 0 0 .582 1.018zM5.23 5.97c-.098.172-.191.344-.28.516a9.763 9.763 0 0 1-.314-.862c.28-.064.58-.116.897-.156-.103.162-.204.33-.303.502zM4.213 8.27c.125-.406.289-.834.488-1.27a10.567 10.567 0 0 1-.488-1.27c-.184.053-.357.11-.517.172-.419.161-.742.348-.957.544-.215.196-.304.383-.304.554 0 .17.089.358.304.554.215.196.538.383.957.544.16.062.333.12.517.172zM7 4.938a12.7 12.7 0 0 0-.582.013c.192-.256.387-.492.582-.706.195.214.39.45.582.706A12.698 12.698 0 0 0 7 4.938z" fill="#5ADBFF" c-id="50.6.4.2"></path> </svg> <span c-id="50.7.3.1"> 反应</span> </div></span> <svg viewbox="0 0 512 512" class="Dropdown-arrow" c-id="50.9.1.1"> <path d="M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z" c-id="50.10.2.0"></path> </svg></button> <div role="menu" class="Dropdown-panel" c-id="50.11.0.1">  <div class="Select-option Select-option--selected" role="menuitemradio" aria-checked="true" tabindex="0" c-id="49.1.1.0"> <div class="FrameworkSelect-framework" c-id="49.2.2.0"> <svg viewbox="0 0 14 14" fill="none" class="FrameworkSelect-icon" c-id="49.3.3.0"> <circle cx="7" cy="7" r="7" fill="#1A232F" c-id="49.4.4.0"></circle> <path d="M7.891 7c0 .497-.399.9-.89.9a.895.895 0 0 1-.892-.9c0-.497.399-.9.891-.9s.891.403.891.9z" fill="#5ADBFF" c-id="49.5.4.1"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.564 3.223c.144.118.29.25.436.393a6.61 6.61 0 0 1 .436-.393c.371-.305.74-.529 1.085-.641.345-.113.689-.12.979.049.29.169.456.473.531.83.076.358.069.793-.007 1.27-.03.185-.07.377-.12.577.197.056.382.117.555.184.448.172.825.383 1.093.628.27.245.448.542.448.88 0 .338-.179.635-.448.88-.268.245-.645.456-1.093.628a6.559 6.559 0 0 1-.554.184c.05.2.09.392.119.577.076.477.083.912.008 1.27-.076.357-.242.661-.532.83-.29.17-.634.162-.98.05-.344-.113-.713-.337-1.084-.642A6.635 6.635 0 0 1 7 10.384a6.635 6.635 0 0 1-.436.393c-.371.305-.74.529-1.085.641-.345.113-.689.12-.979-.049-.29-.169-.456-.473-.532-.83-.075-.358-.068-.793.008-1.27.03-.185.07-.377.12-.577a6.55 6.55 0 0 1-.555-.184c-.448-.172-.825-.383-1.093-.628C2.178 7.635 2 7.338 2 7c0-.338.179-.635.448-.88.268-.245.645-.456 1.093-.628a6.55 6.55 0 0 1 .554-.184c-.05-.2-.09-.392-.119-.577-.076-.477-.083-.912-.008-1.27.076-.357.242-.661.532-.83.29-.17.634-.162.98-.05.344.113.713.337 1.084.642zm3.042.33c-.06-.285-.177-.457-.323-.542-.147-.086-.353-.102-.628-.012-.276.09-.598.28-.945.564-.134.11-.27.232-.407.367.287.312.572.669.847 1.06.474.045.922.116 1.333.21a6.26 6.26 0 0 0 .111-.539c.071-.446.073-.822.012-1.107zm-3.316.01c.134.11.27.232.407.367a10.49 10.49 0 0 0-.847 1.06c-.474.045-.922.116-1.333.21a6.26 6.26 0 0 1-.112-.539c-.07-.446-.072-.822-.011-1.107.06-.286.177-.458.323-.543.147-.086.353-.102.628-.012.276.09.598.28.945.564zm2.177 1.904c.316.04.617.092.897.156a9.763 9.763 0 0 1-.315.862 12.941 12.941 0 0 0-.582-1.018zm1.32.263c-.125.406-.289.834-.488 1.27.2.436.363.864.488 1.27.184-.053.357-.11.517-.172.418-.161.742-.348.957-.544.215-.196.304-.383.304-.554 0-.17-.089-.358-.304-.554-.215-.196-.538-.383-.957-.544a6.117 6.117 0 0 0-.517-.172zm-1.394.458c.156.273.298.544.426.812a12.345 12.345 0 0 1-.91 1.59 12.086 12.086 0 0 1-1.818 0A12.323 12.323 0 0 1 5.18 7a12.345 12.345 0 0 1 .91-1.59 12.086 12.086 0 0 1 1.818 0c.166.246.328.506.484.778zm.377 1.843c-.099.172-.2.34-.303.502.316-.04.617-.092.897-.156a9.763 9.763 0 0 0-.315-.862c-.088.172-.18.344-.28.516zM7 9.062c.197 0 .391-.005.582-.013A9.686 9.686 0 0 1 7 9.755a9.688 9.688 0 0 1-.582-.706c.19.008.385.013.582.013zm1.15-.053c-.275.392-.56.749-.847 1.061.137.135.273.257.407.367.347.284.669.474.945.564.275.09.481.074.628-.012.146-.085.263-.257.323-.543.061-.285.06-.661-.011-1.107a6.26 6.26 0 0 0-.112-.539c-.411.094-.86.165-1.333.21zm-2.3 0c.275.392.56.749.847 1.061a6.17 6.17 0 0 1-.407.367c-.347.284-.669.474-.945.564-.275.09-.481.074-.628-.012-.146-.085-.263-.257-.323-.543-.061-.285-.06-.661.011-1.107a6.26 6.26 0 0 1 .112-.539c.411.094.86.165 1.333.21zm-.317-.476a9.539 9.539 0 0 1-.897-.156c.086-.277.19-.565.315-.862a12.941 12.941 0 0 0 .582 1.018zM5.23 5.97c-.098.172-.191.344-.28.516a9.763 9.763 0 0 1-.314-.862c.28-.064.58-.116.897-.156-.103.162-.204.33-.303.502zM4.213 8.27c.125-.406.289-.834.488-1.27a10.567 10.567 0 0 1-.488-1.27c-.184.053-.357.11-.517.172-.419.161-.742.348-.957.544-.215.196-.304.383-.304.554 0 .17.089.358.304.554.215.196.538.383.957.544.16.062.333.12.517.172zM7 4.938a12.7 12.7 0 0 0-.582.013c.192-.256.387-.492.582-.706.195.214.39.45.582.706A12.698 12.698 0 0 0 7 4.938z" fill="#5ADBFF" c-id="49.6.4.2"></path> </svg> <span c-id="49.7.3.1"> 反应</span> </div> </div> <div class="Select-option" role="menuitemradio" aria-checked="false" tabindex="0" c-id="49.9.1.1"> <div class="FrameworkSelect-framework" c-id="49.10.2.0"> <svg viewbox="0 0 14 14" fill="none" class="FrameworkSelect-icon" c-id="49.11.3.0"> <path d="M5.674 7h2.651L7 4.208 5.674 7z" fill="#E13535" c-id="49.12.4.0"></path> <path d="M7 0L0 2.5 1.441 11 7 14l5.555-3L14 2.5 7 0zm2.75 10l-.83-1.75H5.08L4.25 10H3l4-8.75L11 10H9.75z" fill="#E13535" c-id="49.13.4.1"></path> </svg> <span c-id="49.14.3.1"> 棱角</span> </div> </div> <div class="Select-option" role="menuitemradio" aria-checked="false" tabindex="0" c-id="49.16.1.2"> <div class="FrameworkSelect-framework" c-id="49.17.2.0"> <svg viewbox="0 0 13 13" fill="none" class="FrameworkSelect-icon" c-id="49.18.3.0"> <path fill="#FFD12F" d="M0 0h13v13H0z" c-id="49.19.4.0"></path> <path d="M7.357 6.114H6.286v3.018c0 .747-.242.956-.662.956-.197 0-.374-.036-.512-.087L5 10.885c.197.072.499.115.735.115.965 0 1.622-.481 1.622-1.86V6.113zM9.694 6C8.657 6 8 6.625 8 7.451c0 .711.506 1.157 1.24 1.444.532.201.743.381.743.675 0 .324-.243.532-.703.532-.427 0-.814-.151-1.077-.302L8 10.698c.25.15.716.302 1.221.302C10.435 11 11 10.31 11 9.498c0-.69-.361-1.135-1.142-1.45-.578-.245-.82-.381-.82-.69 0-.245.21-.467.643-.467.426 0 .72.152.89.245l.257-.909C10.56 6.103 10.198 6 9.694 6z" fill="#0E151F" c-id="49.20.4.1"></path> </svg> <span c-id="49.21.3.1"> javascript.</span> </div> </div> <div class="Select-option" role="menuitemradio" aria-checked="false" tabindex="0" c-id="49.23.1.3"> <div class="FrameworkSelect-framework" c-id="49.24.2.0"> <svg viewbox="0 0 14 13" fill="none" class="FrameworkSelect-icon" c-id="49.25.3.0"> <path d="M8.618 0L7 3.005 5.382 0H0l7 13 7-13H8.618z" fill="#4DB684" c-id="49.26.4.0"></path> <path d="M8.618 0L7 3.005 5.382 0h-2.58L7 7.8 11.198 0h-2.58z" fill="#36495D" c-id="49.27.4.1"></path> </svg> <span c-id="49.28.3.1"> Vue</span> </div> </div> </div> </docs-dropdown> </docs-select> </framework-select> </section> </stencil-route> </stencil-route-switch> <stencil-route-switch class="Menu hydrated" group="9395-7721-7009-0045" c-id="41.18.0.2" s-id="51">         <stencil-route group="9395-7721-7009-0045" class="hydrated" c-id="41.19.1.0" s-id="52">  <docs-nav role="navigation" class="hydrated" c-id="52.0.0.0" s-id="53">  <ul class="Nav" c-id="53.0.0.0"> <li c-id="53.1.1.0"> <section c-id="53.2.2.0"> <header class="Nav-header" c-id="53.3.3.0"> 动作表单</header> <ul class="Nav-subnav" c-id="53.5.3.1" style="--level: 1;"> <li c-id="53.6.4.0"> <stencil-route-link class="hydrated" c-id="53.7.5.0" s-id="54">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/action-sheet" c-id="54.0.0.0"> <span c-id="53.8.6.0"> 离子动作板</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.10.1.1"> <section c-id="53.11.2.0"> <header class="Nav-header" c-id="53.12.3.0"> 警报</header> <ul class="Nav-subnav" c-id="53.14.3.1" style="--level: 1;"> <li c-id="53.15.4.0"> <stencil-route-link class="hydrated" c-id="53.16.5.0" s-id="55">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/alert" c-id="55.0.0.0"> <span c-id="53.17.6.0"> ion-alert</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.19.1.2"> <section c-id="53.20.2.0"> <header class="Nav-header" c-id="53.21.3.0"> 徽章</header> <ul class="Nav-subnav" c-id="53.23.3.1" style="--level: 1;"> <li c-id="53.24.4.0"> <stencil-route-link class="hydrated" c-id="53.25.5.0" s-id="56">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/badge" c-id="56.0.0.0"> <span c-id="53.26.6.0"> 离子徽章</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.28.1.3"> <section c-id="53.29.2.0"> <header class="Nav-header" c-id="53.30.3.0"> 按钮</header> <ul class="Nav-subnav" c-id="53.32.3.1" style="--level: 1;"> <li c-id="53.33.4.0"> <stencil-route-link class="hydrated" c-id="53.34.5.0" s-id="57">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/button" c-id="57.0.0.0"> <span c-id="53.35.6.0"> ion-button</span></a> </stencil-route-link></li> <li c-id="53.37.4.1"> <stencil-route-link class="hydrated" c-id="53.38.5.0" s-id="58">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/ripple-effect" c-id="58.0.0.0"> <span c-id="53.39.6.0"> ion-ripple-effect</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.41.1.4"> <section c-id="53.42.2.0"> <header class="Nav-header" c-id="53.43.3.0"> 卡</header> <ul class="Nav-subnav" c-id="53.45.3.1" style="--level: 1;"> <li c-id="53.46.4.0"> <stencil-route-link class="hydrated" c-id="53.47.5.0" s-id="59">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/card" c-id="59.0.0.0"> <span c-id="53.48.6.0"> ion-card</span></a> </stencil-route-link></li> <li c-id="53.50.4.1"> <stencil-route-link class="hydrated" c-id="53.51.5.0" s-id="60">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/card-content" c-id="60.0.0.0"> <span c-id="53.52.6.0"> ion-card-content</span></a> </stencil-route-link></li> <li c-id="53.54.4.2"> <stencil-route-link class="hydrated" c-id="53.55.5.0" s-id="61">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/card-header" c-id="61.0.0.0"> <span c-id="53.56.6.0"> 离子卡头</span></a> </stencil-route-link></li> <li c-id="53.58.4.3"> <stencil-route-link class="hydrated" c-id="53.59.5.0" s-id="62">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/card-subtitle" c-id="62.0.0.0"> <span c-id="53.60.6.0"> ion-card-subtitle</span></a> </stencil-route-link></li> <li c-id="53.62.4.4"> <stencil-route-link class="hydrated" c-id="53.63.5.0" s-id="63">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/card-title" c-id="63.0.0.0"> <span c-id="53.64.6.0"> ion-card-title</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.66.1.5"> <section c-id="53.67.2.0"> <header class="Nav-header" c-id="53.68.3.0"> 复选框</header> <ul class="Nav-subnav" c-id="53.70.3.1" style="--level: 1;"> <li c-id="53.71.4.0"> <stencil-route-link class="hydrated" c-id="53.72.5.0" s-id="64">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/checkbox" c-id="64.0.0.0"> <span c-id="53.73.6.0"> 离子复选框</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.75.1.6"> <section c-id="53.76.2.0"> <header class="Nav-header" c-id="53.77.3.0"> 芯片</header> <ul class="Nav-subnav" c-id="53.79.3.1" style="--level: 1;"> <li c-id="53.80.4.0"> <stencil-route-link class="hydrated" c-id="53.81.5.0" s-id="65">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/chip" c-id="65.0.0.0"> <span c-id="53.82.6.0"> 离子芯片</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.84.1.7"> <section c-id="53.85.2.0"> <header class="Nav-header" c-id="53.86.3.0"> 内容</header> <ul class="Nav-subnav" c-id="53.88.3.1" style="--level: 1;"> <li c-id="53.89.4.0"> <stencil-route-link class="hydrated" c-id="53.90.5.0" s-id="66">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/app" c-id="66.0.0.0"> <span c-id="53.91.6.0"> ion-app</span></a> </stencil-route-link></li> <li c-id="53.93.4.1"> <stencil-route-link class="hydrated" c-id="53.94.5.0" s-id="67">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/content" c-id="67.0.0.0"> <span c-id="53.95.6.0"> 离子内容</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.97.1.8"> <section c-id="53.98.2.0"> <header class="Nav-header" c-id="53.99.3.0"> 日期和时间选择器</header> <ul class="Nav-subnav" c-id="53.101.3.1" style="--level: 1;"> <li c-id="53.102.4.0"> <stencil-route-link class="hydrated" c-id="53.103.5.0" s-id="68">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/datetime" c-id="68.0.0.0"> <span c-id="53.104.6.0"> 离子数据倍数</span></a> </stencil-route-link></li> <li c-id="53.106.4.1"> <stencil-route-link class="hydrated" c-id="53.107.5.0" s-id="69">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/picker" c-id="69.0.0.0"> <span c-id="53.108.6.0"> 离子选择器</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.110.1.9"> <section c-id="53.111.2.0"> <header class="Nav-header" c-id="53.112.3.0"> 浮动操作按钮</header> <ul class="Nav-subnav" c-id="53.114.3.1" style="--level: 1;"> <li c-id="53.115.4.0"> <stencil-route-link class="hydrated" c-id="53.116.5.0" s-id="70">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/fab" c-id="70.0.0.0"> <span c-id="53.117.6.0"> 离子制造</span></a> </stencil-route-link></li> <li c-id="53.119.4.1"> <stencil-route-link class="hydrated" c-id="53.120.5.0" s-id="71">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/fab-button" c-id="71.0.0.0"> <span c-id="53.121.6.0"> ion-fab-button</span></a> </stencil-route-link></li> <li c-id="53.123.4.2"> <stencil-route-link class="hydrated" c-id="53.124.5.0" s-id="72">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/fab-list" c-id="72.0.0.0"> <span c-id="53.125.6.0"> ion-fab-list</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.127.1.10"> <section c-id="53.128.2.0"> <header class="Nav-header" c-id="53.129.3.0"> 网格</header> <ul class="Nav-subnav" c-id="53.131.3.1" style="--level: 1;"> <li c-id="53.132.4.0"> <stencil-route-link class="hydrated" c-id="53.133.5.0" s-id="73">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/grid" c-id="73.0.0.0"> <span c-id="53.134.6.0"> ion-grid</span></a> </stencil-route-link></li> <li c-id="53.136.4.1"> <stencil-route-link class="hydrated" c-id="53.137.5.0" s-id="74">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/col" c-id="74.0.0.0"> <span c-id="53.138.6.0"> ion-col</span></a> </stencil-route-link></li> <li c-id="53.140.4.2"> <stencil-route-link class="hydrated" c-id="53.141.5.0" s-id="75">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/row" c-id="75.0.0.0"> <span c-id="53.142.6.0"> ion-row</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.144.1.11"> <section c-id="53.145.2.0"> <header class="Nav-header" c-id="53.146.3.0"> 无限滚动</header> <ul class="Nav-subnav" c-id="53.148.3.1" style="--level: 1;"> <li c-id="53.149.4.0"> <stencil-route-link class="hydrated" c-id="53.150.5.0" s-id="76">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/infinite-scroll" c-id="76.0.0.0"> <span c-id="53.151.6.0"> ion-infinite-scroll</span></a> </stencil-route-link></li> <li c-id="53.153.4.1"> <stencil-route-link class="hydrated" c-id="53.154.5.0" s-id="77">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/infinite-scroll-content" c-id="77.0.0.0"> <span c-id="53.155.6.0"> ion-infinite-scroll-content</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.157.1.12"> <section c-id="53.158.2.0"> <header class="Nav-header" c-id="53.159.3.0"> 图标</header> <ul class="Nav-subnav" c-id="53.161.3.1" style="--level: 1;"> <li c-id="53.162.4.0"><a href="https://ionic.io/ionicons" target="_blank" class="Nav-link outbound" c-id="53.163.5.0"><span c-id="53.164.6.0"> 离子图标</span>  <svg viewbox="0 0 512 512" c-id="53.167.6.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="53.168.7.0"></path> </svg></a></li> </ul> </section></li> <li c-id="53.169.1.13"> <section c-id="53.170.2.0"> <header class="Nav-header" c-id="53.171.3.0"> 输入</header> <ul class="Nav-subnav" c-id="53.173.3.1" style="--level: 1;"> <li c-id="53.174.4.0"> <stencil-route-link class="hydrated" c-id="53.175.5.0" s-id="78">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/input" c-id="78.0.0.0"> <span c-id="53.176.6.0"> ion-input</span></a> </stencil-route-link></li> <li c-id="53.178.4.1"> <stencil-route-link class="hydrated" c-id="53.179.5.0" s-id="79">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/textarea" c-id="79.0.0.0"> <span c-id="53.180.6.0"> ion-textarea</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.182.1.14"> <section c-id="53.183.2.0"> <header class="Nav-header" c-id="53.184.3.0"> 物品</header> <ul class="Nav-subnav" c-id="53.186.3.1" style="--level: 1;"> <li c-id="53.187.4.0"> <stencil-route-link class="hydrated" c-id="53.188.5.0" s-id="80">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/item" c-id="80.0.0.0"> <span c-id="53.189.6.0"> ion-item</span></a> </stencil-route-link></li> <li c-id="53.191.4.1"> <stencil-route-link class="hydrated" c-id="53.192.5.0" s-id="81">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/item-divider" c-id="81.0.0.0"> <span c-id="53.193.6.0"> ion-item-divider</span></a> </stencil-route-link></li> <li c-id="53.195.4.2"> <stencil-route-link class="hydrated" c-id="53.196.5.0" s-id="82">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/item-group" c-id="82.0.0.0"> <span c-id="53.197.6.0"> ion-item-group</span></a> </stencil-route-link></li> <li c-id="53.199.4.3"> <stencil-route-link class="hydrated" c-id="53.200.5.0" s-id="83">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/item-sliding" c-id="83.0.0.0"> <span c-id="53.201.6.0"> ion-item-sliding</span></a> </stencil-route-link></li> <li c-id="53.203.4.4"> <stencil-route-link class="hydrated" c-id="53.204.5.0" s-id="84">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/item-options" c-id="84.0.0.0"> <span c-id="53.205.6.0"> ion-item-options</span></a> </stencil-route-link></li> <li c-id="53.207.4.5"> <stencil-route-link class="hydrated" c-id="53.208.5.0" s-id="85">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/item-option" c-id="85.0.0.0"> <span c-id="53.209.6.0"> ion-item-option</span></a> </stencil-route-link></li> <li c-id="53.211.4.6"> <stencil-route-link class="hydrated" c-id="53.212.5.0" s-id="86">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/label" c-id="86.0.0.0"> <span c-id="53.213.6.0"> ion-label</span></a> </stencil-route-link></li> <li c-id="53.215.4.7"> <stencil-route-link class="hydrated" c-id="53.216.5.0" s-id="87">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/note" c-id="87.0.0.0"> <span c-id="53.217.6.0"> 离子纸币</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.219.1.15"> <section c-id="53.220.2.0"> <header class="Nav-header" c-id="53.221.3.0"> 列表</header> <ul class="Nav-subnav" c-id="53.223.3.1" style="--level: 1;"> <li c-id="53.224.4.0"> <stencil-route-link class="hydrated" c-id="53.225.5.0" s-id="88">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/list" c-id="88.0.0.0"> <span c-id="53.226.6.0"> 离子清单</span></a> </stencil-route-link></li> <li c-id="53.228.4.1"> <stencil-route-link class="hydrated" c-id="53.229.5.0" s-id="89">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/list-header" c-id="89.0.0.0"> <span c-id="53.230.6.0"> ion-list-header</span></a> </stencil-route-link></li> <li c-id="53.232.4.2"> <stencil-route-link class="hydrated" c-id="53.233.5.0" s-id="90">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/virtual-scroll" c-id="90.0.0.0"> <span c-id="53.234.6.0"> ion-virtual-scroll</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.236.1.16"> <section c-id="53.237.2.0"> <header class="Nav-header" c-id="53.238.3.0"> 媒体</header> <ul class="Nav-subnav" c-id="53.240.3.1" style="--level: 1;"> <li c-id="53.241.4.0"> <stencil-route-link class="hydrated" c-id="53.242.5.0" s-id="91">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/avatar" c-id="91.0.0.0"> <span c-id="53.243.6.0"> ion-avatar</span></a> </stencil-route-link></li> <li c-id="53.245.4.1"><a href="https://ionic.io/ionicons" target="_blank" class="Nav-link outbound" c-id="53.246.5.0"><span c-id="53.247.6.0"> 离子图标</span>  <svg viewbox="0 0 512 512" c-id="53.250.6.2"> <path d="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" c-id="53.251.7.0"></path> </svg></a></li> <li c-id="53.252.4.2"> <stencil-route-link class="hydrated" c-id="53.253.5.0" s-id="92">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/img" c-id="92.0.0.0"> <span c-id="53.254.6.0"> ion-img</span></a> </stencil-route-link></li> <li c-id="53.256.4.3"> <stencil-route-link class="hydrated" c-id="53.257.5.0" s-id="93">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/thumbnail" c-id="93.0.0.0"> <span c-id="53.258.6.0"> ion-thumbnail</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.260.1.17"> <section c-id="53.261.2.0"> <header class="Nav-header" c-id="53.262.3.0"> 菜单</header> <ul class="Nav-subnav" c-id="53.264.3.1" style="--level: 1;"> <li c-id="53.265.4.0"> <stencil-route-link class="hydrated" c-id="53.266.5.0" s-id="94">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/menu" c-id="94.0.0.0"> <span c-id="53.267.6.0"> ion-menu</span></a> </stencil-route-link></li> <li c-id="53.269.4.1"> <stencil-route-link class="hydrated" c-id="53.270.5.0" s-id="95">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/menu-button" c-id="95.0.0.0"> <span c-id="53.271.6.0"> 离子菜单按钮</span></a> </stencil-route-link></li> <li c-id="53.273.4.2"> <stencil-route-link class="hydrated" c-id="53.274.5.0" s-id="96">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/menu-toggle" c-id="96.0.0.0"> <span c-id="53.275.6.0"> 离子菜单 - 切换</span></a> </stencil-route-link></li> <li c-id="53.277.4.3"> <stencil-route-link class="hydrated" c-id="53.278.5.0" s-id="97">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/split-pane" c-id="97.0.0.0"> <span c-id="53.279.6.0"> ion-split-pane</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.281.1.18"> <section c-id="53.282.2.0"> <header class="Nav-header" c-id="53.283.3.0"> 莫代尔</header> <ul class="Nav-subnav" c-id="53.285.3.1" style="--level: 1;"> <li c-id="53.286.4.0"> <stencil-route-link class="hydrated" c-id="53.287.5.0" s-id="98">   <a class="Nav-link--active Nav-link" href="//www.jesscamp.com/docs/api/modal" c-id="98.0.0.0"> <span c-id="53.288.6.0"> ion-modal</span></a> </stencil-route-link></li> <li c-id="53.290.4.1"> <stencil-route-link class="hydrated" c-id="53.291.5.0" s-id="99">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/backdrop" c-id="99.0.0.0"> <span c-id="53.292.6.0"> ion-backdrop</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.294.1.19"> <section c-id="53.295.2.0"> <header class="Nav-header" c-id="53.296.3.0"> 导航</header> <ul class="Nav-subnav" c-id="53.298.3.1" style="--level: 1;"> <li c-id="53.299.4.0"> <stencil-route-link class="hydrated" c-id="53.300.5.0" s-id="100">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/nav" c-id="100.0.0.0"> <span c-id="53.301.6.0"> ion-nav</span></a> </stencil-route-link></li> <li c-id="53.303.4.1"> <stencil-route-link class="hydrated" c-id="53.304.5.0" s-id="101">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/nav-link" c-id="101.0.0.0"> <span c-id="53.305.6.0"> 离子导航链接</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.307.1.20"> <section c-id="53.308.2.0"> <header class="Nav-header" c-id="53.309.3.0"> 弹出窗口</header> <ul class="Nav-subnav" c-id="53.311.3.1" style="--level: 1;"> <li c-id="53.312.4.0"> <stencil-route-link class="hydrated" c-id="53.313.5.0" s-id="102">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/popover" c-id="102.0.0.0"> <span c-id="53.314.6.0"> ion-popover</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.316.1.21"> <section c-id="53.317.2.0"> <header class="Nav-header" c-id="53.318.3.0"> 进度指标</header> <ul class="Nav-subnav" c-id="53.320.3.1" style="--level: 1;"> <li c-id="53.321.4.0"> <stencil-route-link class="hydrated" c-id="53.322.5.0" s-id="103">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/loading" c-id="103.0.0.0"> <span c-id="53.323.6.0"> 离子装载</span></a> </stencil-route-link></li> <li c-id="53.325.4.1"> <stencil-route-link class="hydrated" c-id="53.326.5.0" s-id="104">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/progress-bar" c-id="104.0.0.0"> <span c-id="53.327.6.0"> 离子进展条</span></a> </stencil-route-link></li> <li c-id="53.329.4.2"> <stencil-route-link class="hydrated" c-id="53.330.5.0" s-id="105">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/skeleton-text" c-id="105.0.0.0"> <span c-id="53.331.6.0"> ion-skeleton-text</span></a> </stencil-route-link></li> <li c-id="53.333.4.3"> <stencil-route-link class="hydrated" c-id="53.334.5.0" s-id="106">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/spinner" c-id="106.0.0.0"> <span c-id="53.335.6.0"> ion-spinner</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.337.1.22"> <section c-id="53.338.2.0"> <header class="Nav-header" c-id="53.339.3.0"> 广播</header> <ul class="Nav-subnav" c-id="53.341.3.1" style="--level: 1;"> <li c-id="53.342.4.0"> <stencil-route-link class="hydrated" c-id="53.343.5.0" s-id="107">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/radio" c-id="107.0.0.0"> <span c-id="53.344.6.0"> ion-radio</span></a> </stencil-route-link></li> <li c-id="53.346.4.1"> <stencil-route-link class="hydrated" c-id="53.347.5.0" s-id="108">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/radio-group" c-id="108.0.0.0"> <span c-id="53.348.6.0"> ion-radio-group</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.350.1.23"> <section c-id="53.351.2.0"> <header class="Nav-header" c-id="53.352.3.0"> 范围</header> <ul class="Nav-subnav" c-id="53.354.3.1" style="--level: 1;"> <li c-id="53.355.4.0"> <stencil-route-link class="hydrated" c-id="53.356.5.0" s-id="109">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/range" c-id="109.0.0.0"> <span c-id="53.357.6.0"> ion-range</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.359.1.24"> <section c-id="53.360.2.0"> <header class="Nav-header" c-id="53.361.3.0"> 复习</header> <ul class="Nav-subnav" c-id="53.363.3.1" style="--level: 1;"> <li c-id="53.364.4.0"> <stencil-route-link class="hydrated" c-id="53.365.5.0" s-id="110">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/refresher" c-id="110.0.0.0"> <span c-id="53.366.6.0"> 离子复习</span></a> </stencil-route-link></li> <li c-id="53.368.4.1"> <stencil-route-link class="hydrated" c-id="53.369.5.0" s-id="111">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/refresher-content" c-id="111.0.0.0"> <span c-id="53.370.6.0"> ion-refresher-content</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.372.1.25"> <section c-id="53.373.2.0"> <header class="Nav-header" c-id="53.374.3.0"> 重新排序</header> <ul class="Nav-subnav" c-id="53.376.3.1" style="--level: 1;"> <li c-id="53.377.4.0"> <stencil-route-link class="hydrated" c-id="53.378.5.0" s-id="112">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/reorder" c-id="112.0.0.0"> <span c-id="53.379.6.0"> 离子重新排序</span></a> </stencil-route-link></li> <li c-id="53.381.4.1"> <stencil-route-link class="hydrated" c-id="53.382.5.0" s-id="113">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/reorder-group" c-id="113.0.0.0"> <span c-id="53.383.6.0"> ion-reorder-group</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.385.1.26"> <section c-id="53.386.2.0"> <header class="Nav-header" c-id="53.387.3.0"> 路由</header> <ul class="Nav-subnav" c-id="53.389.3.1" style="--level: 1;"> <li c-id="53.390.4.0"> <stencil-route-link class="hydrated" c-id="53.391.5.0" s-id="114">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/router" c-id="114.0.0.0"> <span c-id="53.392.6.0"> ion-router</span></a> </stencil-route-link></li> <li c-id="53.394.4.1"> <stencil-route-link class="hydrated" c-id="53.395.5.0" s-id="115">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/router-link" c-id="115.0.0.0"> <span c-id="53.396.6.0"> 离子路由器链接</span></a> </stencil-route-link></li> <li c-id="53.398.4.2"> <stencil-route-link class="hydrated" c-id="53.399.5.0" s-id="116">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/router-outlet" c-id="116.0.0.0"> <span c-id="53.400.6.0"> 离子路由器出口</span></a> </stencil-route-link></li> <li c-id="53.402.4.3"> <stencil-route-link class="hydrated" c-id="53.403.5.0" s-id="117">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/route" c-id="117.0.0.0"> <span c-id="53.404.6.0"> ion-route</span></a> </stencil-route-link></li> <li c-id="53.406.4.4"> <stencil-route-link class="hydrated" c-id="53.407.5.0" s-id="118">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/route-redirect" c-id="118.0.0.0"> <span c-id="53.408.6.0"> ion-route-redirect</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.410.1.27"> <section c-id="53.411.2.0"> <header class="Nav-header" c-id="53.412.3.0"> Searchbar</header> <ul class="Nav-subnav" c-id="53.414.3.1" style="--level: 1;"> <li c-id="53.415.4.0"> <stencil-route-link class="hydrated" c-id="53.416.5.0" s-id="119">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/searchbar" c-id="119.0.0.0"> <span c-id="53.417.6.0"> 离子搜索栏</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.419.1.28"> <section c-id="53.420.2.0"> <header class="Nav-header" c-id="53.421.3.0"> 段</header> <ul class="Nav-subnav" c-id="53.423.3.1" style="--level: 1;"> <li c-id="53.424.4.0"> <stencil-route-link class="hydrated" c-id="53.425.5.0" s-id="120">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/segment" c-id="120.0.0.0"> <span c-id="53.426.6.0"> ion-segment</span></a> </stencil-route-link></li> <li c-id="53.428.4.1"> <stencil-route-link class="hydrated" c-id="53.429.5.0" s-id="121">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/segment-button" c-id="121.0.0.0"> <span c-id="53.430.6.0"> 离子段 - 按钮</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.432.1.29"> <section c-id="53.433.2.0"> <header class="Nav-header" c-id="53.434.3.0"> 选择</header> <ul class="Nav-subnav" c-id="53.436.3.1" style="--level: 1;"> <li c-id="53.437.4.0"> <stencil-route-link class="hydrated" c-id="53.438.5.0" s-id="122">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/select" c-id="122.0.0.0"> <span c-id="53.439.6.0"> ion-select</span></a> </stencil-route-link></li> <li c-id="53.441.4.1"> <stencil-route-link class="hydrated" c-id="53.442.5.0" s-id="123">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/select-option" c-id="123.0.0.0"> <span c-id="53.443.6.0"> ion-select-option</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.445.1.30"> <section c-id="53.446.2.0"> <header class="Nav-header" c-id="53.447.3.0"> 幻灯片</header> <ul class="Nav-subnav" c-id="53.449.3.1" style="--level: 1;"> <li c-id="53.450.4.0"> <stencil-route-link class="hydrated" c-id="53.451.5.0" s-id="124">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/slides" c-id="124.0.0.0"> <span c-id="53.452.6.0"> ion-slides</span></a> </stencil-route-link></li> <li c-id="53.454.4.1"> <stencil-route-link class="hydrated" c-id="53.455.5.0" s-id="125">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/slide" c-id="125.0.0.0"> <span c-id="53.456.6.0"> ion-slide</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.458.1.31"> <section c-id="53.459.2.0"> <header class="Nav-header" c-id="53.460.3.0"> 选项卡</header> <ul class="Nav-subnav" c-id="53.462.3.1" style="--level: 1;"> <li c-id="53.463.4.0"> <stencil-route-link class="hydrated" c-id="53.464.5.0" s-id="126">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/tabs" c-id="126.0.0.0"> <span c-id="53.465.6.0"> ion-tabs</span></a> </stencil-route-link></li> <li c-id="53.467.4.1"> <stencil-route-link class="hydrated" c-id="53.468.5.0" s-id="127">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/tab" c-id="127.0.0.0"> <span c-id="53.469.6.0"> 离子标签</span></a> </stencil-route-link></li> <li c-id="53.471.4.2"> <stencil-route-link class="hydrated" c-id="53.472.5.0" s-id="128">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/tab-bar" c-id="128.0.0.0"> <span c-id="53.473.6.0"> 离子标签杆</span></a> </stencil-route-link></li> <li c-id="53.475.4.3"> <stencil-route-link class="hydrated" c-id="53.476.5.0" s-id="129">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/tab-button" c-id="129.0.0.0"> <span c-id="53.477.6.0"> ion-tab-button</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.479.1.32"> <section c-id="53.480.2.0"> <header class="Nav-header" c-id="53.481.3.0"> 吐司</header> <ul class="Nav-subnav" c-id="53.483.3.1" style="--level: 1;"> <li c-id="53.484.4.0"> <stencil-route-link class="hydrated" c-id="53.485.5.0" s-id="130">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/toast" c-id="130.0.0.0"> <span c-id="53.486.6.0"> ion-toast</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.488.1.33"> <section c-id="53.489.2.0"> <header class="Nav-header" c-id="53.490.3.0"> 拨动</header> <ul class="Nav-subnav" c-id="53.492.3.1" style="--level: 1;"> <li c-id="53.493.4.0"> <stencil-route-link class="hydrated" c-id="53.494.5.0" s-id="131">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/toggle" c-id="131.0.0.0"> <span c-id="53.495.6.0"> ion-toggle</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.497.1.34"> <section c-id="53.498.2.0"> <header class="Nav-header" c-id="53.499.3.0"> 工具栏</header> <ul class="Nav-subnav" c-id="53.501.3.1" style="--level: 1;"> <li c-id="53.502.4.0"> <stencil-route-link class="hydrated" c-id="53.503.5.0" s-id="132">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/toolbar" c-id="132.0.0.0"> <span c-id="53.504.6.0"> 离子工具栏</span></a> </stencil-route-link></li> <li c-id="53.506.4.1"> <stencil-route-link class="hydrated" c-id="53.507.5.0" s-id="133">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/header" c-id="133.0.0.0"> <span c-id="53.508.6.0"> 离子标题</span></a> </stencil-route-link></li> <li c-id="53.510.4.2"> <stencil-route-link class="hydrated" c-id="53.511.5.0" s-id="134">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/footer" c-id="134.0.0.0"> <span c-id="53.512.6.0"> ion-footer</span></a> </stencil-route-link></li> <li c-id="53.514.4.3"> <stencil-route-link class="hydrated" c-id="53.515.5.0" s-id="135">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/title" c-id="135.0.0.0"> <span c-id="53.516.6.0"> ion-title</span></a> </stencil-route-link></li> <li c-id="53.518.4.4"> <stencil-route-link class="hydrated" c-id="53.519.5.0" s-id="136">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/buttons" c-id="136.0.0.0"> <span c-id="53.520.6.0"> 离子按钮</span></a> </stencil-route-link></li> <li c-id="53.522.4.5"> <stencil-route-link class="hydrated" c-id="53.523.5.0" s-id="137">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/back-button" c-id="137.0.0.0"> <span c-id="53.524.6.0"> ion-back-button</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.526.1.35"> <section c-id="53.527.2.0"> <header class="Nav-header" c-id="53.528.3.0"> 排版</header> <ul class="Nav-subnav" c-id="53.530.3.1" style="--level: 1;"> <li c-id="53.531.4.0"> <stencil-route-link class="hydrated" c-id="53.532.5.0" s-id="138">   <a class="Nav-link" href="//www.jesscamp.com/docs/api/text" c-id="138.0.0.0"> <span c-id="53.533.6.0"> 离子文本</span></a> </stencil-route-link></li> </ul> </section></li> <li c-id="53.535.1.36"> <section c-id="53.536.2.0"> <header class="Nav-header" c-id="53.537.3.0"> 资源</header> <ul class="Nav-subnav" c-id="53.539.3.1" style="--level: 1;"> <li c-id="53.540.4.0"> <stencil-route-link class="hydrated" c-id="53.541.5.0" s-id="139">   <a class="Nav-link" href="//www.jesscamp.com/docs/api" c-id="139.0.0.0"> <span c-id="53.542.6.0"> API指数</span></a> </stencil-route-link></li> </ul> </section></li> </ul> </docs-nav> </stencil-route> <stencil-route class="hydrated" group="9395-7721-7009-0045" c-id="41.20.1.1" s-id="140" style="display: none;">  </stencil-route> <stencil-route class="hydrated" group="9395-7721-7009-0045" c-id="41.21.1.2" s-id="141" style="display: none;">  </stencil-route> <stencil-route class="hydrated" group="9395-7721-7009-0045" c-id="41.22.1.3" s-id="142" style="display: none;">  </stencil-route> <stencil-route class="hydrated" group="9395-7721-7009-0045" c-id="41.23.1.4" s-id="143" style="display: none;">  </stencil-route> <stencil-route class="hydrated" group="9395-7721-7009-0045" c-id="41.24.1.5" s-id="144" style="display: none;">  </stencil-route> </stencil-route-switch> </docs-menu> <stencil-route class="hydrated" c-id="1.4.1.3" s-id="145">  <docs-page class="page-api-modal hydrated" c-id="145.0.0.0" s-id="146">  <main class="has-demo" c-id="146.0.0.0"> <article c-id="146.1.1.0"> <a href="//www.jesscamp.com/docs/reference/glossary" class="page-heading-encapsulation" c-id="146.2.2.0"> 作用域</a> <h1 c-id="146.4.2.1"> ion-modal</h1><div类＝＂page-meta" c-id="146.6.2.2"> <docs-table-of-contents class="hydrated" c-id="146.7.3.0" s-id="147">  <strong class="Nav-header" c-id="147.0.0.0"> 内容</strong> <nav c-id="147.2.0.1"> <ul class="Nav-subnav" c-id="147.3.1.0"> <li c-id="147.4.2.0"> <stencil-route-link class="Nav-link hydrated" c-id="147.5.3.0" s-id="148">   <a href="//www.jesscamp.com/docs/api/modal" c-id="148.0.0.0">  解雇</a> </stencil-route-link></li> <li c-id="147.7.2.1"> <stencil-route-link class="Nav-link hydrated" c-id="147.8.3.0" s-id="149">   <a href="//www.jesscamp.com/docs/api/modal" c-id="149.0.0.0">  定制</a> </stencil-route-link></li> <li c-id="147.10.2.2"> <stencil-route-link class="Nav-link hydrated" c-id="147.11.3.0" s-id="150">   <a href="//www.jesscamp.com/docs/api/modal" c-id="150.0.0.0">  界面</a> </stencil-route-link></li> <li c-id="147.13.2.3"> <stencil-route-link class="Nav-link hydrated" c-id="147.14.3.0" s-id="151">   <a href="//www.jesscamp.com/docs/api/modal" c-id="151.0.0.0">  使用</a> </stencil-route-link></li> <li c-id="147.16.2.4"> <stencil-route-link class="Nav-link hydrated" c-id="147.17.3.0" s-id="152">   <a href="//www.jesscamp.com/docs/api/modal" c-id="152.0.0.0">  特性</a> </stencil-route-link></li> <li c-id="147.19.2.5"> <stencil-route-link class="Nav-link hydrated" c-id="147.20.3.0" s-id="153">   <a href="//www.jesscamp.com/docs/api/modal" c-id="153.0.0.0">  事件</a> </stencil-route-link></li> <li c-id="147.22.2.6"> <stencil-route-link class="Nav-link hydrated" c-id="147.23.3.0" s-id="154">   <a href="//www.jesscamp.com/docs/api/modal" c-id="154.0.0.0">  方法</a> </stencil-route-link></li> <li c-id="147.25.2.7"> <stencil-route-link class="Nav-link hydrated" c-id="147.26.3.0" s-id="155">   <a href="//www.jesscamp.com/docs/api/modal" c-id="155.0.0.0">  CSS自定义属性</a> </stencil-route-link></li> </ul> </nav> </docs-table-of-contents> <internal-ad class="hydrated" c-id="146.8.3.1" s-id="156">  </internal-ad> </div> <section class="markdown-content" c-id="146.9.2.3"> <div c-id="146.10.3.0"> <p class="intro" c-id="146.11.4.0"> Modal是一个出现在应用程序内容顶部的对话框，在恢复交互之前必须被应用程序取消。当有很多选项可供选择时，或者在列表中筛选项目时，以及在许多其他用例时，它作为选择组件非常有用。</p> <h2 id="dismissing" c-id="146.14.4.2"> <a href="#dismissing" c-id="146.16.5.1"> 解雇</a> </h2>  <p c-id="146.20.4.4"> 创建后，可以通过调用<code c-id="146.22.5.1"> 把()</code> 方法在模态控制器上。的<code c-id="146.25.5.3"> ondiddismiss.</code> 可以调用函数以在拆除模态后执行操作。</p> <h2 id="customization" c-id="146.29.4.6"> <a href="#customization" c-id="146.31.5.1"> 定制</a> </h2>  <p c-id="146.35.4.8"> Modal使用限定范围的封装，这意味着它会通过在运行时为每个样式添加一个额外的类来自动限定CSS的范围。在CSS中重写作用域选择器需要<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity" c-id="146.37.5.1"> 高特异性</a> 选择器。</p> <p c-id="146.41.4.10"> 我们建议将自定义类传递给<code c-id="146.43.5.1"> CSSCLASS.</code> 在<code c-id="146.46.5.3"> 创建</code> 方法，并使用该方法向宿主元素和内部元素添加自定义样式。这个属性还可以接受由空格分隔的多个类。查看<stencil-route-link class="hydrated" c-id="146.49.5.5" s-id="157">   <a href="//www.jesscamp.com/docs/api/modal/" c-id="157.0.0.0">  使用</a> </stencil-route-link> 节提供了如何使用传入类的示例<code c-id="146.52.5.7"> CSSCLASS.</code> ．</p> <docs-code language="css" class="hydrated" c-id="146.56.4.12" s-id="158">   <pre c-id="146.58.5.1"><code c-id="146.59.6.0"><span class="token comment" c-id="146.60.7.0"> /*不工作-不够具体*/</span> <span class="token selector" c-id="146.63.7.2"> .modal-wrapper</span> <span class="token punctuation" c-id="146.66.7.4"> ｛</span> <span class="token property" c-id="146.69.7.6"> 背景</span><span class="token punctuation" c-id="146.71.7.7"> ：</span> ＃222<span class="token punctuation" c-id="146.74.7.9"> ；</span> <span class="token punctuation" c-id="146.77.7.11"> ｝</span> <span class="token comment" c-id="146.80.7.13"> /*工作-在cssClass中传递“my-custom-class”来增加特异性*/</span> <span class="token selector" c-id="146.83.7.15"> .my-custom-class .modal-wrapper</span> <span class="token punctuation" c-id="146.86.7.17"> ｛</span> <span class="token property" c-id="146.89.7.19"> 背景</span><span class="token punctuation" c-id="146.91.7.20"> ：</span> ＃222<span class="token punctuation" c-id="146.94.7.22"> ；</span> <span class="token punctuation" c-id="146.97.7.24"> ｝</span></code></pre>  <div class="code-text__copy" c-id="158.0.0.0"> <a class="code-text__copy-link" c-id="158.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="158.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="158.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="158.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <p c-id="146.101.4.14"> 任何定义的<stencil-route-link class="hydrated" c-id="146.103.5.1" s-id="159">   <a href="//www.jesscamp.com/docs/api/modal/" c-id="159.0.0.0">  CSS自定义属性</a> </stencil-route-link> 可以用于样式的模态，而无需针对单个元素:</p> <docs-code language="css" class="hydrated" c-id="146.107.4.16" s-id="160">   <pre c-id="146.109.5.1"><code c-id="146.110.6.0"><span class="token selector" c-id="146.111.7.0"> .my-定制课程</span> <span class="token punctuation" c-id="146.114.7.2"> ｛</span> <span class="token property" c-id="146.117.7.4"> - 背景</span><span class="token punctuation" c-id="146.119.7.5"> ：</span> ＃222<span class="token punctuation" c-id="146.122.7.7"> ；</span> <span class="token punctuation" c-id="146.125.7.9"> ｝</span></code></pre>  <div class="code-text__copy" c-id="160.0.0.0"> <a class="code-text__copy-link" c-id="160.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="160.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="160.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="160.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <blockquote c-id="146.129.4.18">  <p c-id="146.131.5.1"> 如果你正在构建一个Ionic Angular应betway东盟体育app用，样式需要添加到一个全局样式表文件中。读<stencil-route-link class="hydrated" c-id="146.133.6.1" s-id="161">   <a href="//www.jesscamp.com/docs/api/modal/" c-id="161.0.0.0">  风格安排</a> </stencil-route-link> 在下面的角度部分以获取更多信息。</p> </blockquote>  <blockquote c-id="146.138.4.20">  <p c-id="146.140.5.1"><code c-id="146.141.6.0"> ion-modal</code> 在假设堆叠模块的规模下工作是相同的。结果，每个后续的模态都没有盒子阴影和反背景不透明度<code c-id="146.144.6.2"> 0</code> ．这是为了避免阴影和背景随着每一个添加模态而变暗的效果。可以通过设置<code c-id="146.147.6.4"> ——不必</code> 和<code c-id="146.150.6.6"> ——backdrop-opacity</code> CSS变量:</p> </blockquote>  <docs-code language="" class="hydrated" c-id="146.155.4.22" s-id="162">   <pre c-id="146.157.5.1"><code c-id="146.158.6.0"> ION-MODAL.STACK-MOLAL { - 框阴影：0 28px 48px RGBA（0,0,0,0.4）;- 无透明度：var（ - 离子背景不透明度，0.32）;｝</code></pre>  <div class="code-text__copy" c-id="162.0.0.0"> <a class="code-text__copy-link" c-id="162.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="162.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="162.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="162.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <h2 id="interfaces" c-id="146.162.4.24"> <a href="#interfaces" c-id="146.164.5.1"> 界面</a> </h2>  <h3 id="modaloptions" c-id="146.168.4.26"> <a href="#modaloptions" c-id="146.170.5.1"> modalOptions.</a> </h3>  <docs-code language="typescript" class="hydrated" c-id="146.174.4.28" s-id="163">   <pre c-id="146.176.5.1"><code c-id="146.177.6.0"><span class="token keyword" c-id="146.178.7.0"> 接口</span> <span class="token class-name" c-id="146.181.7.2"> modalOptions.</span><span class="token operator" c-id="146.183.7.3"> <</span><span class="token constant" c-id="146.185.7.4"> T</span> <span class="token keyword" c-id="146.188.7.6"> 延伸</span> <span class="token class-name" c-id="146.191.7.8"> Componentref.</span> <span class="token operator" c-id="146.194.7.10"> ＝</span> Componentref.<span class="token operator" c-id="146.197.7.12"> ></span> <span class="token punctuation" c-id="146.200.7.14"> ｛</span> 组件<span class="token operator" c-id="146.203.7.16"> ：</span> <span class="token constant" c-id="146.206.7.18"> T</span><span class="token punctuation" c-id="146.208.7.19"> ；</span> 组成份额<span class="token operator" c-id="146.211.7.21"> ？</span><span class="token operator" c-id="146.213.7.22"> ：</span> ComponentProps<span class="token operator" c-id="146.216.7.24"> <</span><span class="token constant" c-id="146.218.7.25"> T</span><span class="token operator" c-id="146.220.7.26"> ></span><span class="token punctuation" c-id="146.222.7.27"> ；</span> 呈现<span class="token operator" c-id="146.225.7.29"> ？</span><span class="token operator" c-id="146.227.7.30"> ：</span> HTMLElement<span class="token punctuation" c-id="146.230.7.32"> ；</span> ShowBackDrop.<span class="token operator" c-id="146.233.7.34"> ？</span><span class="token operator" c-id="146.235.7.35"> ：</span> <span class="token builtin" c-id="146.238.7.37"> 布尔</span><span class="token punctuation" c-id="146.240.7.38"> ；</span> backdropDismiss<span class="token operator" c-id="146.243.7.40"> ？</span><span class="token operator" c-id="146.245.7.41"> ：</span> <span class="token builtin" c-id="146.248.7.43"> 布尔</span><span class="token punctuation" c-id="146.250.7.44"> ；</span> CSSCLASS.<span class="token operator" c-id="146.253.7.46"> ？</span><span class="token operator" c-id="146.255.7.47"> ：</span> <span class="token builtin" c-id="146.258.7.49"> 细绳</span> <span class="token operator" c-id="146.261.7.51"> |</span> <span class="token builtin" c-id="146.264.7.53"> 细绳</span><span class="token punctuation" c-id="146.266.7.54"> ［</span><span class="token punctuation" c-id="146.268.7.55"> ］</span><span class="token punctuation" c-id="146.270.7.56"> ；</span> 动画<span class="token operator" c-id="146.273.7.58"> ？</span><span class="token operator" c-id="146.275.7.59"> ：</span> <span class="token builtin" c-id="146.278.7.61"> 布尔</span><span class="token punctuation" c-id="146.280.7.62"> ；</span> swipeToClose<span class="token operator" c-id="146.283.7.64"> ？</span><span class="token operator" c-id="146.285.7.65"> ：</span> <span class="token builtin" c-id="146.288.7.67"> 布尔</span><span class="token punctuation" c-id="146.290.7.68"> ；</span> 模式<span class="token operator" c-id="146.293.7.70"> ？</span><span class="token operator" c-id="146.295.7.71"> ：</span> 模式<span class="token punctuation" c-id="146.298.7.73"> ；</span> keyboardClose<span class="token operator" c-id="146.301.7.75"> ？</span><span class="token operator" c-id="146.303.7.76"> ：</span> <span class="token builtin" c-id="146.306.7.78"> 布尔</span><span class="token punctuation" c-id="146.308.7.79"> ；</span> id<span class="token operator" c-id="146.311.7.81"> ？</span><span class="token operator" c-id="146.313.7.82"> ：</span> <span class="token builtin" c-id="146.316.7.84"> 细绳</span><span class="token punctuation" c-id="146.318.7.85"> ；</span> htmlAttributes<span class="token operator" c-id="146.321.7.87"> ？</span><span class="token operator" c-id="146.323.7.88"> ：</span> ModalAttributes<span class="token punctuation" c-id="146.326.7.90"> ；</span> 肠炎<span class="token operator" c-id="146.329.7.92"> ？</span><span class="token operator" c-id="146.331.7.93"> ：</span> AmimationBuilder.<span class="token punctuation" c-id="146.334.7.95"> ；</span> leaveAnimation<span class="token operator" c-id="146.337.7.97"> ？</span><span class="token operator" c-id="146.339.7.98"> ：</span> AmimationBuilder.<span class="token punctuation" c-id="146.342.7.100"> ；</span> <span class="token punctuation" c-id="146.345.7.102"> ｝</span></code></pre>  <div class="code-text__copy" c-id="163.0.0.0"> <a class="code-text__copy-link" c-id="163.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="163.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="163.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="163.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <h3 id="modalattributes" c-id="146.349.4.30"> <a href="#modalattributes" c-id="146.351.5.1"> ModalAttributes</a> </h3>  <docs-code language="typescript" class="hydrated" c-id="146.355.4.32" s-id="164">   <pre c-id="146.357.5.1"><code c-id="146.358.6.0"><span class="token keyword" c-id="146.359.7.0"> 接口</span> <span class="token class-name" c-id="146.362.7.2"> ModalAttributes</span> <span class="token keyword" c-id="146.365.7.4"> 延伸</span> <span class="token class-name" c-id="146.368.7.6"> JSXBase.<span class="token punctuation" c-id="146.370.8.1"> ．</span> HTMLAttributes</span><span class="token operator" c-id="146.373.7.7"> <</span> HTMLElement<span class="token operator" c-id="146.376.7.9"> ></span> <span class="token punctuation" c-id="146.379.7.11"> ｛</span><span class="token punctuation" c-id="146.381.7.12"> ｝</span></code></pre>  <div class="code-text__copy" c-id="164.0.0.0"> <a class="code-text__copy-link" c-id="164.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="164.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="164.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="164.5.3.0"></path> </svg> 复制</span> </div> </docs-code> </div> </section> <section c-id="146.384.2.4"> <h2 id="usage" c-id="146.385.3.0"><a href="#usage" c-id="146.386.4.0"> 使用</a></h2> <docs-tabs listen-for="ionic-docs:framework" role="tablist" class="Tabs hydrated" c-id="146.388.3.1" s-id="165">       <header class="Tabs-header" c-id="165.0.0.0"></header>  <docs-tab role="tabpanel" class="Tabs-tab hydrated" tab="angular" c-id="146.389.4.0" s-id="166">    <div c-id="146.390.5.0"> <docs-code language="typescript" class="hydrated" c-id="146.391.6.0" s-id="167">   <pre c-id="146.393.7.1"><code c-id="146.394.8.0"><span class="token keyword" c-id="146.395.9.0"> 进口</span> <span class="token punctuation" c-id="146.398.9.2"> ｛</span> 组件<span class="token punctuation" c-id="146.401.9.4"> ｝</span> <span class="token keyword" c-id="146.404.9.6"> 从</span> <span class="token string" c-id="146.407.9.8"> “@angular /核心”</span><span class="token punctuation" c-id="146.409.9.9"> ；</span> <span class="token keyword" c-id="146.412.9.11"> 进口</span> <span class="token punctuation" c-id="146.415.9.13"> ｛</span> ModalController.<span class="token punctuation" c-id="146.418.9.15"> ｝</span> <span class="token keyword" c-id="146.421.9.17"> 从</span> <span class="token string" c-id="146.424.9.19"> “@betway东盟体育appionic /角”</span><span class="token punctuation" c-id="146.426.9.20"> ；</span> <span class="token keyword" c-id="146.429.9.22"> 进口</span> <span class="token punctuation" c-id="146.432.9.24"> ｛</span> modalpage.<span class="token punctuation" c-id="146.435.9.26"> ｝</span> <span class="token keyword" c-id="146.438.9.28"> 从</span> <span class="token string" c-id="146.441.9.30"> '../modal/modal.page'</span><span class="token punctuation" c-id="146.443.9.31"> ；</span> ＠<span class="token function" c-id="146.446.9.33"> 组件</span><span class="token punctuation" c-id="146.448.9.34"> （</span><span class="token punctuation" c-id="146.450.9.35"> ｛</span> 选择器<span class="token operator" c-id="146.453.9.37"> ：</span> <span class="token string" c-id="146.456.9.39"> 'Modal-example'</span><span class="token punctuation" c-id="146.458.9.40"> ，</span> templateUrl<span class="token operator" c-id="146.461.9.42"> ：</span> <span class="token string" c-id="146.464.9.44"> “modal-example.html”</span><span class="token punctuation" c-id="146.466.9.45"> ，</span> 样式堡垒<span class="token operator" c-id="146.469.9.47"> ：</span> <span class="token punctuation" c-id="146.472.9.49"> ［</span><span class="token string" c-id="146.474.9.50"> './modal-example.css'</span><span class="token punctuation" c-id="146.476.9.51"> ］</span> <span class="token punctuation" c-id="146.479.9.53"> ｝</span><span class="token punctuation" c-id="146.481.9.54"> ）</span> <span class="token keyword" c-id="146.484.9.56"> 出口</span> <span class="token keyword" c-id="146.487.9.58"> 类</span> <span class="token class-name" c-id="146.490.9.60"> ModalExample</span> <span class="token punctuation" c-id="146.493.9.62"> ｛</span> <span class="token keyword" c-id="146.496.9.64"> 构造函数</span><span class="token punctuation" c-id="146.498.9.65"> （</span><span class="token parameter" c-id="146.500.9.66"><span class="token keyword" c-id="146.501.10.0"> 公共</span> ModalController.<span class="token operator" c-id="146.504.10.2"> ：</span> ModalController.</span><span class="token punctuation" c-id="146.507.9.67"> ）</span> <span class="token punctuation" c-id="146.510.9.69"> ｛</span> <span class="token punctuation" c-id="146.513.9.71"> ｝</span> <span class="token keyword" c-id="146.516.9.73"> 异步</span> <span class="token function" c-id="146.519.9.75"> TheertModal.</span><span class="token punctuation" c-id="146.521.9.76"> （</span><span class="token punctuation" c-id="146.523.9.77"> ）</span> <span class="token punctuation" c-id="146.526.9.79"> ｛</span> <span class="token keyword" c-id="146.529.9.81"> Const.</span> 模态<span class="token operator" c-id="146.532.9.83"> ＝</span> <span class="token keyword" c-id="146.535.9.85"> 等待</span> <span class="token keyword" c-id="146.538.9.87"> 这个</span><span class="token punctuation" c-id="146.540.9.88"> ．</span> ModalController.<span class="token punctuation" c-id="146.543.9.90"> ．</span><span class="token function" c-id="146.545.9.91"> 创建</span><span class="token punctuation" c-id="146.547.9.92"> （</span><span class="token punctuation" c-id="146.549.9.93"> ｛</span> 组件<span class="token operator" c-id="146.552.9.95"> ：</span> modalpage.<span class="token punctuation" c-id="146.555.9.97"> ，</span> CSSCLASS.<span class="token operator" c-id="146.558.9.99"> ：</span> <span class="token string" c-id="146.561.9.101"> '我的自定义班'</span> <span class="token punctuation" c-id="146.564.9.103"> ｝</span><span class="token punctuation" c-id="146.566.9.104"> ）</span><span class="token punctuation" c-id="146.568.9.105"> ；</span> <span class="token keyword" c-id="146.571.9.107"> 返回</span> <span class="token keyword" c-id="146.574.9.109"> 等待</span> 模态<span class="token punctuation" c-id="146.577.9.111"> ．</span><span class="token function" c-id="146.579.9.112"> 展示</span><span class="token punctuation" c-id="146.581.9.113"> （</span><span class="token punctuation" c-id="146.583.9.114"> ）</span><span class="token punctuation" c-id="146.585.9.115"> ；</span> <span class="token punctuation" c-id="146.588.9.117"> ｝</span> <span class="token punctuation" c-id="146.591.9.119"> ｝</span></code></pre>  <div class="code-text__copy" c-id="167.0.0.0"> <a class="code-text__copy-link" c-id="167.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="167.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="167.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="167.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <docs-code language="typescript" class="hydrated" c-id="146.595.6.2" s-id="168">   <pre c-id="146.597.7.1"><code c-id="146.598.8.0"><span class="token keyword" c-id="146.599.9.0"> 进口</span> <span class="token punctuation" c-id="146.602.9.2"> ｛</span> 组件<span class="token punctuation" c-id="146.605.9.4"> ，</span> 输入<span class="token punctuation" c-id="146.608.9.6"> ｝</span> <span class="token keyword" c-id="146.611.9.8"> 从</span> <span class="token string" c-id="146.614.9.10"> “@angular /核心”</span><span class="token punctuation" c-id="146.616.9.11"> ；</span> ＠<span class="token function" c-id="146.619.9.13"> 组件</span><span class="token punctuation" c-id="146.621.9.14"> （</span><span class="token punctuation" c-id="146.623.9.15"> ｛</span> 选择器<span class="token operator" c-id="146.626.9.17"> ：</span> <span class="token string" c-id="146.629.9.19"> “modal-page”</span><span class="token punctuation" c-id="146.631.9.20"> ，</span> <span class="token punctuation" c-id="146.634.9.22"> ｝</span><span class="token punctuation" c-id="146.636.9.23"> ）</span> <span class="token keyword" c-id="146.639.9.25"> 出口</span> <span class="token keyword" c-id="146.642.9.27"> 类</span> <span class="token class-name" c-id="146.645.9.29"> modalpage.</span> <span class="token punctuation" c-id="146.648.9.31"> ｛</span> <span class="token keyword" c-id="146.651.9.33"> 构造函数</span><span class="token punctuation" c-id="146.653.9.34"> （</span><span class="token punctuation" c-id="146.655.9.35"> ）</span> <span class="token punctuation" c-id="146.658.9.37"> ｛</span><span class="token punctuation" c-id="146.660.9.38"> ｝</span> <span class="token punctuation" c-id="146.663.9.40"> ｝</span></code></pre>  <div class="code-text__copy" c-id="168.0.0.0"> <a class="code-text__copy-link" c-id="168.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="168.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="168.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="168.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <blockquote c-id="146.667.6.4">  <p c-id="146.669.7.1"> 如果您需要在您的模态组件中使用包装器元素，我们建议使用<code c-id="146.671.8.1"> < div class = " ion-page”></code> 这样组件的尺寸仍然可以正确计算。</p> </blockquote>  <h3 id="passing-data" c-id="146.676.6.6"> <a href="#passing-data" c-id="146.678.7.1"> 通过数据</a> </h3>  <p c-id="146.682.6.8"> 在创建模态期间，数据可以通过<code c-id="146.684.7.1"> 组成份额</code> ．上面的例子可以包含数据:</p> <docs-code language="typescript" class="hydrated" c-id="146.688.6.10" s-id="169">   <pre c-id="146.690.7.1"><code c-id="146.691.8.0"><span class="token keyword" c-id="146.692.9.0"> 异步</span> <span class="token function" c-id="146.695.9.2"> TheertModal.</span><span class="token punctuation" c-id="146.697.9.3"> （</span><span class="token punctuation" c-id="146.699.9.4"> ）</span> <span class="token punctuation" c-id="146.702.9.6"> ｛</span> <span class="token keyword" c-id="146.705.9.8"> Const.</span> 模态<span class="token operator" c-id="146.708.9.10"> ＝</span> <span class="token keyword" c-id="146.711.9.12"> 等待</span> <span class="token keyword" c-id="146.714.9.14"> 这个</span><span class="token punctuation" c-id="146.716.9.15"> ．</span> ModalController.<span class="token punctuation" c-id="146.719.9.17"> ．</span><span class="token function" c-id="146.721.9.18"> 创建</span><span class="token punctuation" c-id="146.723.9.19"> （</span><span class="token punctuation" c-id="146.725.9.20"> ｛</span> 组件<span class="token operator" c-id="146.728.9.22"> ：</span> modalpage.<span class="token punctuation" c-id="146.731.9.24"> ，</span> CSSCLASS.<span class="token operator" c-id="146.734.9.26"> ：</span> <span class="token string" c-id="146.737.9.28"> '我的自定义班'</span><span class="token punctuation" c-id="146.739.9.29"> ，</span> 组成份额<span class="token operator" c-id="146.742.9.31"> ：</span> <span class="token punctuation" c-id="146.745.9.33"> ｛</span> <span class="token string" c-id="146.748.9.35"> '名'</span><span class="token operator" c-id="146.750.9.36"> ：</span> <span class="token string" c-id="146.753.9.38"> '道格拉斯'</span><span class="token punctuation" c-id="146.755.9.39"> ，</span> <span class="token string" c-id="146.758.9.41"> “姓”</span><span class="token operator" c-id="146.760.9.42"> ：</span> <span class="token string" c-id="146.763.9.44"> “亚当斯”</span><span class="token punctuation" c-id="146.765.9.45"> ，</span> <span class="token string" c-id="146.768.9.47"> '中间初始'</span><span class="token operator" c-id="146.770.9.48"> ：</span> <span class="token string" c-id="146.773.9.50"> “N”</span> <span class="token punctuation" c-id="146.776.9.52"> ｝</span> <span class="token punctuation" c-id="146.779.9.54"> ｝</span><span class="token punctuation" c-id="146.781.9.55"> ）</span><span class="token punctuation" c-id="146.783.9.56"> ；</span> <span class="token keyword" c-id="146.786.9.58"> 返回</span> <span class="token keyword" c-id="146.789.9.60"> 等待</span> 模态<span class="token punctuation" c-id="146.792.9.62"> ．</span><span class="token function" c-id="146.794.9.63"> 展示</span><span class="token punctuation" c-id="146.796.9.64"> （</span><span class="token punctuation" c-id="146.798.9.65"> ）</span><span class="token punctuation" c-id="146.800.9.66"> ；</span> <span class="token punctuation" c-id="146.803.9.68"> ｝</span></code></pre>  <div class="code-text__copy" c-id="169.0.0.0"> <a class="code-text__copy-link" c-id="169.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="169.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="169.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="169.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <p c-id="146.807.6.12"> 将数据传递到<code c-id="146.809.7.1"> 组成份额</code> ，将它设置为<code c-id="146.812.7.3"> @输入</code> ：</p> <docs-code language="typescript" class="hydrated" c-id="146.816.6.14" s-id="170">   <pre c-id="146.818.7.1"><code c-id="146.819.8.0"><span class="token keyword" c-id="146.820.9.0"> 出口</span> <span class="token keyword" c-id="146.823.9.2"> 类</span> <span class="token class-name" c-id="146.826.9.4"> modalpage.</span> <span class="token punctuation" c-id="146.829.9.6"> ｛</span> <span class="token comment" c-id="146.832.9.8"> // ComponentProps传递的数据</span> ＠<span class="token function" c-id="146.835.9.10"> 输入</span><span class="token punctuation" c-id="146.837.9.11"> （</span><span class="token punctuation" c-id="146.839.9.12"> ）</span> 名<span class="token operator" c-id="146.842.9.14"> ：</span> <span class="token builtin" c-id="146.845.9.16"> 细绳</span><span class="token punctuation" c-id="146.847.9.17"> ；</span> ＠<span class="token function" c-id="146.850.9.19"> 输入</span><span class="token punctuation" c-id="146.852.9.20"> （</span><span class="token punctuation" c-id="146.854.9.21"> ）</span> 姓<span class="token operator" c-id="146.857.9.23"> ：</span> <span class="token builtin" c-id="146.860.9.25"> 细绳</span><span class="token punctuation" c-id="146.862.9.26"> ；</span> ＠<span class="token function" c-id="146.865.9.28"> 输入</span><span class="token punctuation" c-id="146.867.9.29"> （</span><span class="token punctuation" c-id="146.869.9.30"> ）</span> middleInitial<span class="token operator" c-id="146.872.9.32"> ：</span> <span class="token builtin" c-id="146.875.9.34"> 细绳</span><span class="token punctuation" c-id="146.877.9.35"> ；</span> <span class="token punctuation" c-id="146.880.9.37"> ｝</span></code></pre>  <div class="code-text__copy" c-id="170.0.0.0"> <a class="code-text__copy-link" c-id="170.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="170.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="170.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="170.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <h3 id="dismissing-a-modal" c-id="146.884.6.16"> <a href="#dismissing-a-modal" c-id="146.886.7.1"> 解雇一个模态</a> </h3>  <p c-id="146.890.6.18"> 可以通过在模态控制器上调用DISPISS方法并可选择从模态传递任何数据来解除模态。</p> <docs-code language="javascript" class="hydrated" c-id="146.893.6.20" s-id="171">   <pre c-id="146.895.7.1"><code c-id="146.896.8.0"><span class="token keyword" c-id="146.897.9.0"> 出口</span> <span class="token keyword" c-id="146.900.9.2"> 类</span> <span class="token class-name" c-id="146.903.9.4"> modalpage.</span> <span class="token punctuation" c-id="146.906.9.6"> ｛</span> <span class="token operator" c-id="146.909.9.8"> ......</span> <span class="token function" c-id="146.912.9.10"> 驳回</span><span class="token punctuation" c-id="146.914.9.11"> （</span><span class="token punctuation" c-id="146.916.9.12"> ）</span> <span class="token punctuation" c-id="146.919.9.14"> ｛</span> <span class="token comment" c-id="146.922.9.16"> //使用注入的ModalController</span> <span class="token comment" c-id="146.925.9.18"> //可以“解散”自己，并可选地传递回数据</span> <span class="token keyword" c-id="146.928.9.20"> 这个</span><span class="token punctuation" c-id="146.930.9.21"> ．</span> ModalController.<span class="token punctuation" c-id="146.933.9.23"> ．</span><span class="token function" c-id="146.935.9.24"> 驳回</span><span class="token punctuation" c-id="146.937.9.25"> （</span><span class="token punctuation" c-id="146.939.9.26"> ｛</span> <span class="token string" c-id="146.942.9.28"> “开除”</span><span class="token operator" c-id="146.944.9.29"> ：</span> <span class="token boolean" c-id="146.947.9.31"> 真的</span> <span class="token punctuation" c-id="146.950.9.33"> ｝</span><span class="token punctuation" c-id="146.952.9.34"> ）</span><span class="token punctuation" c-id="146.954.9.35"> ；</span> <span class="token punctuation" c-id="146.957.9.37"> ｝</span> <span class="token punctuation" c-id="146.960.9.39"> ｝</span></code></pre>  <div class="code-text__copy" c-id="171.0.0.0"> <a class="code-text__copy-link" c-id="171.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="171.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="171.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="171.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <p c-id="146.964.6.22"> 删除后，数据可以通过<code c-id="146.966.7.1"> onWillDismiss</code> 或者<code c-id="146.969.7.3"> ondiddismiss.</code> 创建后附加到模态：</p> <docs-code language="javascript" class="hydrated" c-id="146.973.6.24" s-id="172">   <pre c-id="146.975.7.1"><code c-id="146.976.8.0"><span class="token keyword" c-id="146.977.9.0"> Const.</span> <span class="token punctuation" c-id="146.980.9.2"> ｛</span> 数据<span class="token punctuation" c-id="146.983.9.4"> ｝</span> <span class="token operator" c-id="146.986.9.6"> ＝</span> <span class="token keyword" c-id="146.989.9.8"> 等待</span> 模态<span class="token punctuation" c-id="146.992.9.10"> ．</span><span class="token function" c-id="146.994.9.11"> onWillDismiss</span><span class="token punctuation" c-id="146.996.9.12"> （</span><span class="token punctuation" c-id="146.998.9.13"> ）</span><span class="token punctuation" c-id="146.1000.9.14"> ；</span> 安慰<span class="token punctuation" c-id="146.1003.9.16"> ．</span><span class="token function" c-id="146.1005.9.17"> 日志</span><span class="token punctuation" c-id="146.1007.9.18"> （</span> 数据<span class="token punctuation" c-id="146.1010.9.20"> ）</span><span class="token punctuation" c-id="146.1012.9.21"> ；</span></code></pre>  <div class="code-text__copy" c-id="172.0.0.0"> <a class="code-text__copy-link" c-id="172.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="172.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="172.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="172.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <h4 id="lazy-loading" c-id="146.1016.6.26"> <a href="#lazy-loading" c-id="146.1018.7.1"> 懒惰的装载</a> </h4>  <p c-id="146.1022.6.28"> 当懒惰加载模态时，重要的是要注意，在打开时不会加载模态，而是加载导入模块的模块时的模块。</p> <p c-id="146.1025.6.30"> 例如，假设存在一个<code c-id="146.1027.7.1"> CalendarComponent.</code> 和一个<code c-id="146.1030.7.3"> EventModal</code> ．控件中的一个按钮显示该模式<code c-id="146.1033.7.5"> CalendarComponent.</code> ．在角,<code c-id="146.1036.7.7"> EventModalModule</code> 需要包括在<code c-id="146.1039.7.9"> CalendarComponentModule.</code> 由于模态在中创建<code c-id="146.1042.7.11"> CalendarComponent.</code> ：</p> <docs-code language="typescript" class="hydrated" c-id="146.1046.6.32" s-id="173">   <pre c-id="146.1048.7.1"><code c-id="146.1049.8.0"><span class="token keyword" c-id="146.1050.9.0"> 进口</span> <span class="token punctuation" c-id="146.1053.9.2"> ｛</span> NgModule<span class="token punctuation" c-id="146.1056.9.4"> ｝</span> <span class="token keyword" c-id="146.1059.9.6"> 从</span> <span class="token string" c-id="146.1062.9.8"> “@angular /核心”</span><span class="token punctuation" c-id="146.1064.9.9"> ；</span> <span class="token keyword" c-id="146.1067.9.11"> 进口</span> <span class="token punctuation" c-id="146.1070.9.13"> ｛</span> commonmodule.<span class="token punctuation" c-id="146.1073.9.15"> ｝</span> <span class="token keyword" c-id="146.1076.9.17"> 从</span> <span class="token string" c-id="146.1079.9.19"> '@ Angular / Common'</span><span class="token punctuation" c-id="146.1081.9.20"> ；</span> <span class="token keyword" c-id="146.1084.9.22"> 进口</span> <span class="token punctuation" c-id="146.1087.9.24"> ｛</span> betway东盟体育appIonicModule<span class="token punctuation" c-id="146.1090.9.26"> ｝</span> <span class="token keyword" c-id="146.1093.9.28"> 从</span> <span class="token string" c-id="146.1096.9.30"> “@betway东盟体育appionic /角”</span><span class="token punctuation" c-id="146.1098.9.31"> ；</span> <span class="token keyword" c-id="146.1101.9.33"> 进口</span> <span class="token punctuation" c-id="146.1104.9.35"> ｛</span> CalendarComponent.<span class="token punctuation" c-id="146.1107.9.37"> ｝</span> <span class="token keyword" c-id="146.1110.9.39"> 从</span> <span class="token string" c-id="146.1113.9.41"> ”。/ calendar.component '</span><span class="token punctuation" c-id="146.1115.9.42"> ；</span> <span class="token keyword" c-id="146.1118.9.44"> 进口</span> <span class="token punctuation" c-id="146.1121.9.46"> ｛</span> EventModalModule<span class="token punctuation" c-id="146.1124.9.48"> ｝</span> <span class="token keyword" c-id="146.1127.9.50"> 从</span> <span class="token string" c-id="146.1130.9.52"> '../modals/event/event.module'</span><span class="token punctuation" c-id="146.1132.9.53"> ；</span> ＠<span class="token function" c-id="146.1135.9.55"> NgModule</span><span class="token punctuation" c-id="146.1137.9.56"> （</span><span class="token punctuation" c-id="146.1139.9.57"> ｛</span> 宣言<span class="token operator" c-id="146.1142.9.59"> ：</span> <span class="token punctuation" c-id="146.1145.9.61"> ［</span> CalendarComponent.<span class="token punctuation" c-id="146.1148.9.63"> ］</span><span class="token punctuation" c-id="146.1150.9.64"> ，</span> 进口<span class="token operator" c-id="146.1153.9.66"> ：</span> <span class="token punctuation" c-id="146.1156.9.68"> ［</span> betway东盟体育appIonicModule<span class="token punctuation" c-id="146.1159.9.70"> ，</span> commonmodule.<span class="token punctuation" c-id="146.1162.9.72"> ，</span> EventModalModule<span class="token punctuation" c-id="146.1165.9.74"> ］</span><span class="token punctuation" c-id="146.1167.9.75"> ，</span> 出口<span class="token operator" c-id="146.1170.9.77"> ：</span> <span class="token punctuation" c-id="146.1173.9.79"> ［</span> CalendarComponent.<span class="token punctuation" c-id="146.1176.9.81"> ］</span> <span class="token punctuation" c-id="146.1179.9.83"> ｝</span><span class="token punctuation" c-id="146.1181.9.84"> ）</span> <span class="token keyword" c-id="146.1184.9.86"> 出口</span> <span class="token keyword" c-id="146.1187.9.88"> 类</span> <span class="token class-name" c-id="146.1190.9.90"> CalendarComponentModule.</span> <span class="token punctuation" c-id="146.1193.9.92"> ｛</span><span class="token punctuation" c-id="146.1195.9.93"> ｝</span></code></pre>  <div class="code-text__copy" c-id="173.0.0.0"> <a class="code-text__copy-link" c-id="173.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="173.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="173.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="173.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <h3 id="swipeable-modals" c-id="146.1199.6.34"> <a href="#swipeable-modals" c-id="146.1201.7.1"> 可擦拭模块</a> </h3>  <p c-id="146.1205.6.36"> iOS模式的模块具有能够以卡式呈现并刷新以关闭。卡式演示文稿和刷新到闭合手势不是互斥的，这意味着您可以选择和选择要使用的功能。例如，您可以使用无法刷新的卡式模态或可以刷新的全尺寸模态。</p> <blockquote c-id="146.1208.6.38">  <p c-id="146.1210.7.1"> 在iphone大小的设备上运行的卡片样式模态没有背景。因此，<code c-id="146.1212.8.1"> ——backdrop-opacity</code> 变量不会有任何效果。</p> </blockquote>  <p c-id="146.1217.6.40"> 如果您正在创建的应用程序使用<code c-id="146.1219.7.1"> ion-tabs</code> ，建议你得到父母<code c-id="146.1222.7.3"> 离子路由器出口</code> 使用<code c-id="146.1225.7.5"> this.routerOutlet.parentOutlet.nativeEl</code> ，否则选项卡在模式打开时不会缩小。</p> <docs-code language="javascript" class="hydrated" c-id="146.1229.6.42" s-id="174">   <pre c-id="146.1231.7.1"><code c-id="146.1232.8.0"><span class="token keyword" c-id="146.1233.9.0"> 进口</span> <span class="token punctuation" c-id="146.1236.9.2"> ｛</span> IonRoutOutlet.<span class="token punctuation" c-id="146.1239.9.4"> ｝</span> <span class="token keyword" c-id="146.1242.9.6"> 从</span> <span class="token string" c-id="146.1245.9.8"> “@betway东盟体育appionic /角”</span><span class="token punctuation" c-id="146.1247.9.9"> ；</span> <span class="token function" c-id="146.1250.9.11"> 构造函数</span><span class="token punctuation" c-id="146.1252.9.12"> （</span><span class="token parameter" c-id="146.1254.9.13"><span class="token keyword" c-id="146.1255.10.0"> 私人</span> routerOutlet<span class="token operator" c-id="146.1258.10.2"> ：</span> IonRoutOutlet.</span><span class="token punctuation" c-id="146.1261.9.14"> ）</span> <span class="token punctuation" c-id="146.1264.9.16"> ｛</span><span class="token punctuation" c-id="146.1266.9.17"> ｝</span> <span class="token keyword" c-id="146.1269.9.19"> 异步</span> <span class="token function" c-id="146.1272.9.21"> TheertModal.</span><span class="token punctuation" c-id="146.1274.9.22"> （</span><span class="token punctuation" c-id="146.1276.9.23"> ）</span> <span class="token punctuation" c-id="146.1279.9.25"> ｛</span> <span class="token keyword" c-id="146.1282.9.27"> Const.</span> 模态<span class="token operator" c-id="146.1285.9.29"> ＝</span> <span class="token keyword" c-id="146.1288.9.31"> 等待</span> <span class="token keyword" c-id="146.1291.9.33"> 这个</span><span class="token punctuation" c-id="146.1293.9.34"> ．</span> ModalController.<span class="token punctuation" c-id="146.1296.9.36"> ．</span><span class="token function" c-id="146.1298.9.37"> 创建</span><span class="token punctuation" c-id="146.1300.9.38"> （</span><span class="token punctuation" c-id="146.1302.9.39"> ｛</span> 组件<span class="token operator" c-id="146.1305.9.41"> ：</span> modalpage.<span class="token punctuation" c-id="146.1308.9.43"> ，</span> CSSCLASS.<span class="token operator" c-id="146.1311.9.45"> ：</span> <span class="token string" c-id="146.1314.9.47"> '我的自定义班'</span><span class="token punctuation" c-id="146.1316.9.48"> ，</span> swipeToClose<span class="token operator" c-id="146.1319.9.50"> ：</span> <span class="token boolean" c-id="146.1322.9.52"> 真的</span><span class="token punctuation" c-id="146.1324.9.53"> ，</span> 呈现<span class="token operator" c-id="146.1327.9.55"> ：</span> <span class="token keyword" c-id="146.1330.9.57"> 这个</span><span class="token punctuation" c-id="146.1332.9.58"> ．</span> routerOutlet<span class="token punctuation" c-id="146.1335.9.60"> ．</span> 母语<span class="token punctuation" c-id="146.1338.9.62"> ｝</span><span class="token punctuation" c-id="146.1340.9.63"> ）</span><span class="token punctuation" c-id="146.1342.9.64"> ；</span> <span class="token keyword" c-id="146.1345.9.66"> 返回</span> <span class="token keyword" c-id="146.1348.9.68"> 等待</span> 模态<span class="token punctuation" c-id="146.1351.9.70"> ．</span><span class="token function" c-id="146.1353.9.71"> 展示</span><span class="token punctuation" c-id="146.1355.9.72"> （</span><span class="token punctuation" c-id="146.1357.9.73"> ）</span><span class="token punctuation" c-id="146.1359.9.74"> ；</span> <span class="token punctuation" c-id="146.1362.9.76"> ｝</span></code></pre>  <div class="code-text__copy" c-id="174.0.0.0"> <a class="code-text__copy-link" c-id="174.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="174.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="174.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="174.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <p c-id="146.1366.6.44"> 在大多数情况下，使用<code c-id="146.1368.7.1"> 离子路由器出口</code> 元素作为<code c-id="146.1371.7.3"> 呈现</code> 很好。在您在另一个模态中呈现的卡式模态的情况下，您应该通过顶级<code c-id="146.1374.7.5"> ion-modal</code> 元素作为<code c-id="146.1377.7.7"> 呈现</code> ．</p> <docs-code language="javascript" class="hydrated" c-id="146.1381.6.46" s-id="175">   <pre c-id="146.1383.7.1"><code c-id="146.1384.8.0"><span class="token keyword" c-id="146.1385.9.0"> 进口</span> <span class="token punctuation" c-id="146.1388.9.2"> ｛</span> ModalController.<span class="token punctuation" c-id="146.1391.9.4"> ｝</span> <span class="token keyword" c-id="146.1394.9.6"> 从</span> <span class="token string" c-id="146.1397.9.8"> “@betway东盟体育appionic /角”</span><span class="token punctuation" c-id="146.1399.9.9"> ；</span> <span class="token function" c-id="146.1402.9.11"> 构造函数</span><span class="token punctuation" c-id="146.1404.9.12"> （</span><span class="token parameter" c-id="146.1406.9.13"><span class="token keyword" c-id="146.1407.10.0"> 私人</span> ModalController.<span class="token operator" c-id="146.1410.10.2"> ：</span> ModalController.</span><span class="token punctuation" c-id="146.1413.9.14"> ）</span> <span class="token punctuation" c-id="146.1416.9.16"> ｛</span><span class="token punctuation" c-id="146.1418.9.17"> ｝</span> <span class="token keyword" c-id="146.1421.9.19"> 异步</span> <span class="token function" c-id="146.1424.9.21"> TheertModal.</span><span class="token punctuation" c-id="146.1426.9.22"> （</span><span class="token punctuation" c-id="146.1428.9.23"> ）</span> <span class="token punctuation" c-id="146.1431.9.25"> ｛</span> <span class="token keyword" c-id="146.1434.9.27"> Const.</span> 模态<span class="token operator" c-id="146.1437.9.29"> ＝</span> <span class="token keyword" c-id="146.1440.9.31"> 等待</span> <span class="token keyword" c-id="146.1443.9.33"> 这个</span><span class="token punctuation" c-id="146.1445.9.34"> ．</span> ModalController.<span class="token punctuation" c-id="146.1448.9.36"> ．</span><span class="token function" c-id="146.1450.9.37"> 创建</span><span class="token punctuation" c-id="146.1452.9.38"> （</span><span class="token punctuation" c-id="146.1454.9.39"> ｛</span> 组件<span class="token operator" c-id="146.1457.9.41"> ：</span> modalpage.<span class="token punctuation" c-id="146.1460.9.43"> ，</span> CSSCLASS.<span class="token operator" c-id="146.1463.9.45"> ：</span> <span class="token string" c-id="146.1466.9.47"> '我的自定义班'</span><span class="token punctuation" c-id="146.1468.9.48"> ，</span> swipeToClose<span class="token operator" c-id="146.1471.9.50"> ：</span> <span class="token boolean" c-id="146.1474.9.52"> 真的</span><span class="token punctuation" c-id="146.1476.9.53"> ，</span> 呈现<span class="token operator" c-id="146.1479.9.55"> ：</span> <span class="token keyword" c-id="146.1482.9.57"> 等待</span> <span class="token keyword" c-id="146.1485.9.59"> 这个</span><span class="token punctuation" c-id="146.1487.9.60"> ．</span> ModalController.<span class="token punctuation" c-id="146.1490.9.62"> ．</span><span class="token function" c-id="146.1492.9.63"> getTop</span><span class="token punctuation" c-id="146.1494.9.64"> （</span><span class="token punctuation" c-id="146.1496.9.65"> ）</span> <span class="token comment" c-id="146.1499.9.67"> //获取最顶层的离子模态</span> <span class="token punctuation" c-id="146.1502.9.69"> ｝</span><span class="token punctuation" c-id="146.1504.9.70"> ）</span><span class="token punctuation" c-id="146.1506.9.71"> ；</span> <span class="token keyword" c-id="146.1509.9.73"> 返回</span> <span class="token keyword" c-id="146.1512.9.75"> 等待</span> 模态<span class="token punctuation" c-id="146.1515.9.77"> ．</span><span class="token function" c-id="146.1517.9.78"> 展示</span><span class="token punctuation" c-id="146.1519.9.79"> （</span><span class="token punctuation" c-id="146.1521.9.80"> ）</span><span class="token punctuation" c-id="146.1523.9.81"> ；</span> <span class="token punctuation" c-id="146.1526.9.83"> ｝</span></code></pre>  <div class="code-text__copy" c-id="175.0.0.0"> <a class="code-text__copy-link" c-id="175.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="175.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="175.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="175.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <h3 id="style-placement" c-id="146.1530.6.48"> <a href="#style-placement" c-id="146.1532.7.1"> 风格安排</a> </h3>  <p c-id="146.1536.6.50"> 在Angular中，特定页面的CSS仅作用于该页面的元素。虽然Modal可以在页面中显示，但是<code c-id="146.1538.7.1"> ion-modal</code> 元素附加到当前页之外。这意味着任何自定义样式都需要放在全局样式表文件中。在离子角起动betway东盟体育app器中，这可能是<code c-id="146.1541.7.3"> src / global.scss</code> 文件，或者您可以通过<a href="https://angular.io/guide/workspace-config" c-id="146.1544.7.5"> 增加了<code c-id="146.1546.8.1"> 风格</code> 构建选项<code c-id="146.1549.8.3"> angular.json</code></a> ．</p></div></docs-tab> <docs-tab role="tabpanel" class="Tabs-tab hydrated" tab="javascript" c-id="146.1552.4.1" s-id="176">    <div c-id="146.1553.5.0"> <docs-code language="javascript" class="hydrated" c-id="146.1554.6.0" s-id="177">   <pre c-id="146.1556.7.1"><code c-id="146.1557.8.0"> customElements<span class="token punctuation" c-id="146.1559.9.1"> ．</span><span class="token function" c-id="146.1561.9.2"> 定义</span><span class="token punctuation" c-id="146.1563.9.3"> （</span><span class="token string" c-id="146.1565.9.4"> “modal-page”</span><span class="token punctuation" c-id="146.1567.9.5"> ，</span> <span class="token keyword" c-id="146.1570.9.7"> 类</span> <span class="token class-name" c-id="146.1573.9.9"> 延伸</span> HTMLElement<span class="token punctuation" c-id="146.1576.9.11"> ｛</span> <span class="token function" c-id="146.1579.9.13"> connectedCallback</span><span class="token punctuation" c-id="146.1581.9.14"> （</span><span class="token punctuation" c-id="146.1583.9.15"> ）</span> <span class="token punctuation" c-id="146.1586.9.17"> ｛</span> <span class="token keyword" c-id="146.1589.9.19"> 这个</span><span class="token punctuation" c-id="146.1591.9.20"> ．</span> innerHTML<span class="token operator" c-id="146.1594.9.22"> ＝</span> <span class="token template-string" c-id="146.1597.9.24"><span class="token template-punctuation string" c-id="146.1598.10.0"> ｀</span><span class="token string" c-id="146.1600.10.1"> <ion-header> <ion-toolbar> <ion-title>Modal Header</ion-title> <ion-button slot="primary"> <ion-button onClick="dismissModal()＂><离子图标slot="icon-only" name="close"></ion-icon> </ion-button> </ion-buttons> </ion-toolbar> </ion-header> <ion-content class="ion-padding"> Modal Content </ion-content></span><span class="token template-punctuation string" c-id="146.1602.10.2"> ｀</span></span><span class="token punctuation" c-id="146.1604.9.25"> ；</span> <span class="token punctuation" c-id="146.1607.9.27"> ｝</span> <span class="token punctuation" c-id="146.1610.9.29"> ｝</span><span class="token punctuation" c-id="146.1612.9.30"> ）</span><span class="token punctuation" c-id="146.1614.9.31"> ；</span> <span class="token keyword" c-id="146.1617.9.33"> 函数</span> <span class="token function" c-id="146.1620.9.35"> TheertModal.</span><span class="token punctuation" c-id="146.1622.9.36"> （</span><span class="token punctuation" c-id="146.1624.9.37"> ）</span> <span class="token punctuation" c-id="146.1627.9.39"> ｛</span> <span class="token comment" c-id="146.1630.9.41"> //使用`modal-page`组件创建模态</span> <span class="token keyword" c-id="146.1633.9.43"> Const.</span> modalElement<span class="token operator" c-id="146.1636.9.45"> ＝</span> 文档<span class="token punctuation" c-id="146.1639.9.47"> ．</span><span class="token function" c-id="146.1641.9.48"> createElement</span><span class="token punctuation" c-id="146.1643.9.49"> （</span><span class="token string" c-id="146.1645.9.50"> '离子模态'</span><span class="token punctuation" c-id="146.1647.9.51"> ）</span><span class="token punctuation" c-id="146.1649.9.52"> ；</span> modalElement<span class="token punctuation" c-id="146.1652.9.54"> ．</span> 组件<span class="token operator" c-id="146.1655.9.56"> ＝</span> <span class="token string" c-id="146.1658.9.58"> “modal-page”</span><span class="token punctuation" c-id="146.1660.9.59"> ；</span> modalElement<span class="token punctuation" c-id="146.1663.9.61"> ．</span> CSSCLASS.<span class="token operator" c-id="146.1666.9.63"> ＝</span> <span class="token string" c-id="146.1669.9.65"> '我的自定义班'</span><span class="token punctuation" c-id="146.1671.9.66"> ；</span> <span class="token comment" c-id="146.1674.9.68"> //呈现模态</span> 文档<span class="token punctuation" c-id="146.1677.9.70"> ．</span> 身体<span class="token punctuation" c-id="146.1680.9.72"> ．</span><span class="token function" c-id="146.1682.9.73"> 列表末尾</span><span class="token punctuation" c-id="146.1684.9.74"> （</span> modalElement<span class="token punctuation" c-id="146.1687.9.76"> ）</span><span class="token punctuation" c-id="146.1689.9.77"> ；</span> <span class="token keyword" c-id="146.1692.9.79"> 返回</span> modalElement<span class="token punctuation" c-id="146.1695.9.81"> ．</span><span class="token function" c-id="146.1697.9.82"> 展示</span><span class="token punctuation" c-id="146.1699.9.83"> （</span><span class="token punctuation" c-id="146.1701.9.84"> ）</span><span class="token punctuation" c-id="146.1703.9.85"> ；</span> <span class="token punctuation" c-id="146.1706.9.87"> ｝</span></code></pre>  <div class="code-text__copy" c-id="177.0.0.0"> <a class="code-text__copy-link" c-id="177.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="177.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="177.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="177.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <blockquote c-id="146.1710.6.2">  <p c-id="146.1712.7.1"> 如果您需要在您的模态组件中使用包装器元素，我们建议使用<code c-id="146.1714.8.1"> < div class = " ion-page”></code> 这样组件的尺寸仍然可以正确计算。</p> </blockquote>  <h3 id="passing-data" c-id="146.1719.6.4"> <a href="#passing-data" c-id="146.1721.7.1"> 通过数据</a> </h3>  <p c-id="146.1725.6.6"> 在创建模态期间，数据可以通过<code c-id="146.1727.7.1"> 组成份额</code> ．上面的例子可以包含数据:</p> <docs-code language="javascript" class="hydrated" c-id="146.1731.6.8" s-id="178">   <pre c-id="146.1733.7.1"><code c-id="146.1734.8.0"><span class="token keyword" c-id="146.1735.9.0"> Const.</span> modalElement<span class="token operator" c-id="146.1738.9.2"> ＝</span> 文档<span class="token punctuation" c-id="146.1741.9.4"> ．</span><span class="token function" c-id="146.1743.9.5"> createElement</span><span class="token punctuation" c-id="146.1745.9.6"> （</span><span class="token string" c-id="146.1747.9.7"> '离子模态'</span><span class="token punctuation" c-id="146.1749.9.8"> ）</span><span class="token punctuation" c-id="146.1751.9.9"> ；</span> modalElement<span class="token punctuation" c-id="146.1754.9.11"> ．</span> 组件<span class="token operator" c-id="146.1757.9.13"> ＝</span> <span class="token string" c-id="146.1760.9.15"> “modal-page”</span><span class="token punctuation" c-id="146.1762.9.16"> ；</span> modalElement<span class="token punctuation" c-id="146.1765.9.18"> ．</span> CSSCLASS.<span class="token operator" c-id="146.1768.9.20"> ＝</span> <span class="token string" c-id="146.1771.9.22"> '我的自定义班'</span><span class="token punctuation" c-id="146.1773.9.23"> ；</span> modalElement<span class="token punctuation" c-id="146.1776.9.25"> ．</span> 组成份额<span class="token operator" c-id="146.1779.9.27"> ＝</span> <span class="token punctuation" c-id="146.1782.9.29"> ｛</span> <span class="token string" c-id="146.1785.9.31"> '名'</span><span class="token operator" c-id="146.1787.9.32"> ：</span> <span class="token string" c-id="146.1790.9.34"> '道格拉斯'</span><span class="token punctuation" c-id="146.1792.9.35"> ，</span> <span class="token string" c-id="146.1795.9.37"> “姓”</span><span class="token operator" c-id="146.1797.9.38"> ：</span> <span class="token string" c-id="146.1800.9.40"> “亚当斯”</span><span class="token punctuation" c-id="146.1802.9.41"> ，</span> <span class="token string" c-id="146.1805.9.43"> '中间初始'</span><span class="token operator" c-id="146.1807.9.44"> ：</span> <span class="token string" c-id="146.1810.9.46"> “N”</span> <span class="token punctuation" c-id="146.1813.9.48"> ｝</span><span class="token punctuation" c-id="146.1815.9.49"> ；</span></code></pre>  <div class="code-text__copy" c-id="178.0.0.0"> <a class="code-text__copy-link" c-id="178.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="178.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="178.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="178.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <p c-id="146.1819.6.10"> 将数据传递到<code c-id="146.1821.7.1"> 组成份额</code> ，查询<code c-id="146.1824.7.3"> 莫代尔页面</code> ：</p> <docs-code language="js" class="hydrated" c-id="146.1828.6.12" s-id="179">   <pre c-id="146.1830.7.1"><code c-id="146.1831.8.0"> customElements<span class="token punctuation" c-id="146.1833.9.1"> ．</span><span class="token function" c-id="146.1835.9.2"> 定义</span><span class="token punctuation" c-id="146.1837.9.3"> （</span><span class="token string" c-id="146.1839.9.4"> “modal-page”</span><span class="token punctuation" c-id="146.1841.9.5"> ，</span> <span class="token keyword" c-id="146.1844.9.7"> 类</span> <span class="token class-name" c-id="146.1847.9.9"> 延伸</span> HTMLElement<span class="token punctuation" c-id="146.1850.9.11"> ｛</span> <span class="token function" c-id="146.1853.9.13"> connectedCallback</span><span class="token punctuation" c-id="146.1855.9.14"> （</span><span class="token punctuation" c-id="146.1857.9.15"> ）</span> <span class="token punctuation" c-id="146.1860.9.17"> ｛</span> <span class="token keyword" c-id="146.1863.9.19"> Const.</span> modalElement<span class="token operator" c-id="146.1866.9.21"> ＝</span> 文档<span class="token punctuation" c-id="146.1869.9.23"> ．</span><span class="token function" c-id="146.1871.9.24"> QuerySelector.</span><span class="token punctuation" c-id="146.1873.9.25"> （</span><span class="token string" c-id="146.1875.9.26"> '离子模态'</span><span class="token punctuation" c-id="146.1877.9.27"> ）</span><span class="token punctuation" c-id="146.1879.9.28"> ；</span> 安慰<span class="token punctuation" c-id="146.1882.9.30"> ．</span><span class="token function" c-id="146.1884.9.31"> 日志</span><span class="token punctuation" c-id="146.1886.9.32"> （</span> modalElement<span class="token punctuation" c-id="146.1889.9.34"> ．</span> 组成份额<span class="token punctuation" c-id="146.1892.9.36"> ．</span> 名<span class="token punctuation" c-id="146.1895.9.38"> ）</span><span class="token punctuation" c-id="146.1897.9.39"> ；</span> <span class="token operator" c-id="146.1900.9.41"> ......</span> <span class="token punctuation" c-id="146.1903.9.43"> ｝</span> <span class="token punctuation" c-id="146.1906.9.45"> ｝</span></code></pre>  <div class="code-text__copy" c-id="179.0.0.0"> <a class="code-text__copy-link" c-id="179.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="179.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="179.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="179.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <h3 id="dismissing-a-modal" c-id="146.1910.6.14"> <a href="#dismissing-a-modal" c-id="146.1912.7.1"> 解雇一个模态</a> </h3>  <p c-id="146.1916.6.16"> 通过调用DISMISS方法并可选择从模态传递任何数据，可以解除模态。</p> <docs-code language="javascript" class="hydrated" c-id="146.1919.6.18" s-id="180">   <pre c-id="146.1921.7.1"><code c-id="146.1922.8.0"><span class="token keyword" c-id="146.1923.9.0"> 异步</span> <span class="token keyword" c-id="146.1926.9.2"> 函数</span> <span class="token function" c-id="146.1929.9.4"> 解雇</span><span class="token punctuation" c-id="146.1931.9.5"> （</span><span class="token punctuation" c-id="146.1933.9.6"> ）</span> <span class="token punctuation" c-id="146.1936.9.8"> ｛</span> <span class="token keyword" c-id="146.1939.9.10"> 等待</span> 模态<span class="token punctuation" c-id="146.1942.9.12"> ．</span><span class="token function" c-id="146.1944.9.13"> 驳回</span><span class="token punctuation" c-id="146.1946.9.14"> （</span><span class="token punctuation" c-id="146.1948.9.15"> ｛</span> <span class="token string" c-id="146.1951.9.17"> “开除”</span><span class="token operator" c-id="146.1953.9.18"> ：</span> <span class="token boolean" c-id="146.1956.9.20"> 真的</span> <span class="token punctuation" c-id="146.1959.9.22"> ｝</span><span class="token punctuation" c-id="146.1961.9.23"> ）</span><span class="token punctuation" c-id="146.1963.9.24"> ；</span> <span class="token punctuation" c-id="146.1966.9.26"> ｝</span></code></pre>  <div class="code-text__copy" c-id="180.0.0.0"> <a class="code-text__copy-link" c-id="180.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="180.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="180.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="180.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <p c-id="146.1970.6.20"> 删除后，数据可以通过<code c-id="146.1972.7.1"> onWillDismiss</code> 或者<code c-id="146.1975.7.3"> ondiddismiss.</code> 创建后附加到模态：</p> <docs-code language="javascript" class="hydrated" c-id="146.1979.6.22" s-id="181">   <pre c-id="146.1981.7.1"><code c-id="146.1982.8.0"><span class="token keyword" c-id="146.1983.9.0"> Const.</span> <span class="token punctuation" c-id="146.1986.9.2"> ｛</span> 数据<span class="token punctuation" c-id="146.1989.9.4"> ｝</span> <span class="token operator" c-id="146.1992.9.6"> ＝</span> <span class="token keyword" c-id="146.1995.9.8"> 等待</span> modalElement<span class="token punctuation" c-id="146.1998.9.10"> ．</span><span class="token function" c-id="146.2000.9.11"> onWillDismiss</span><span class="token punctuation" c-id="146.2002.9.12"> （</span><span class="token punctuation" c-id="146.2004.9.13"> ）</span><span class="token punctuation" c-id="146.2006.9.14"> ；</span> 安慰<span class="token punctuation" c-id="146.2009.9.16"> ．</span><span class="token function" c-id="146.2011.9.17"> 日志</span><span class="token punctuation" c-id="146.2013.9.18"> （</span> 数据<span class="token punctuation" c-id="146.2016.9.20"> ）</span><span class="token punctuation" c-id="146.2018.9.21"> ；</span></code></pre>  <div class="code-text__copy" c-id="181.0.0.0"> <a class="code-text__copy-link" c-id="181.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="181.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="181.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="181.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <h3 id="swipeable-modals" c-id="146.2022.6.24"> <a href="#swipeable-modals" c-id="146.2024.7.1"> 可擦拭模块</a> </h3>  <p c-id="146.2028.6.26"> iOS模式的模块具有能够以卡式呈现并刷新以关闭。卡式演示文稿和刷新到闭合手势不是互斥的，这意味着您可以选择和选择要使用的功能。例如，您可以使用无法刷新的卡式模态或可以刷新的全尺寸模态。</p> <blockquote c-id="146.2031.6.28">  <p c-id="146.2033.7.1"> 在iphone大小的设备上运行的卡片样式模态没有背景。因此，<code c-id="146.2035.8.1"> ——backdrop-opacity</code> 变量不会有任何效果。</p> </blockquote>  <docs-code language="javascript" class="hydrated" c-id="146.2040.6.30" s-id="182">   <pre c-id="146.2042.7.1"><code c-id="146.2043.8.0"><span class="token keyword" c-id="146.2044.9.0"> Const.</span> modalElement<span class="token operator" c-id="146.2047.9.2"> ＝</span> 文档<span class="token punctuation" c-id="146.2050.9.4"> ．</span><span class="token function" c-id="146.2052.9.5"> createElement</span><span class="token punctuation" c-id="146.2054.9.6"> （</span><span class="token string" c-id="146.2056.9.7"> '离子模态'</span><span class="token punctuation" c-id="146.2058.9.8"> ）</span><span class="token punctuation" c-id="146.2060.9.9"> ；</span> modalElement<span class="token punctuation" c-id="146.2063.9.11"> ．</span> 组件<span class="token operator" c-id="146.2066.9.13"> ＝</span> <span class="token string" c-id="146.2069.9.15"> “modal-page”</span><span class="token punctuation" c-id="146.2071.9.16"> ；</span> modalElement<span class="token punctuation" c-id="146.2074.9.18"> ．</span> CSSCLASS.<span class="token operator" c-id="146.2077.9.20"> ＝</span> <span class="token string" c-id="146.2080.9.22"> '我的自定义班'</span><span class="token punctuation" c-id="146.2082.9.23"> ；</span> modalElement<span class="token punctuation" c-id="146.2085.9.25"> ．</span> swipeToClose<span class="token operator" c-id="146.2088.9.27"> ＝</span> <span class="token boolean" c-id="146.2091.9.29"> 真的</span><span class="token punctuation" c-id="146.2093.9.30"> ；</span> modalElement<span class="token punctuation" c-id="146.2096.9.32"> ．</span> 呈现<span class="token operator" c-id="146.2099.9.34"> ＝</span> 文档<span class="token punctuation" c-id="146.2102.9.36"> ．</span><span class="token function" c-id="146.2104.9.37"> QuerySelector.</span><span class="token punctuation" c-id="146.2106.9.38"> （</span><span class="token string" c-id="146.2108.9.39"> “ion-nav”</span><span class="token punctuation" c-id="146.2110.9.40"> ）</span><span class="token punctuation" c-id="146.2112.9.41"> ；</span></code></pre>  <div class="code-text__copy" c-id="182.0.0.0"> <a class="code-text__copy-link" c-id="182.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="182.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="182.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="182.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <p c-id="146.2116.6.32"> 在大多数情况下，使用<code c-id="146.2118.7.1"> ion-nav</code> 元素作为<code c-id="146.2121.7.3"> 呈现</code> 很好。如果你在一个模态中呈现一个卡片样式的模态，你应该在最上面传递<code c-id="146.2124.7.5"> ion-modal</code> 元素作为<code c-id="146.2127.7.7"> 呈现</code> ．</p> <docs-code language="javascript" class="hydrated" c-id="146.2131.6.34" s-id="183">   <pre c-id="146.2133.7.1"><code c-id="146.2134.8.0"><span class="token keyword" c-id="146.2135.9.0"> Const.</span> modalElement<span class="token operator" c-id="146.2138.9.2"> ＝</span> 文档<span class="token punctuation" c-id="146.2141.9.4"> ．</span><span class="token function" c-id="146.2143.9.5"> createElement</span><span class="token punctuation" c-id="146.2145.9.6"> （</span><span class="token string" c-id="146.2147.9.7"> '离子模态'</span><span class="token punctuation" c-id="146.2149.9.8"> ）</span><span class="token punctuation" c-id="146.2151.9.9"> ；</span> modalElement<span class="token punctuation" c-id="146.2154.9.11"> ．</span> 组件<span class="token operator" c-id="146.2157.9.13"> ＝</span> <span class="token string" c-id="146.2160.9.15"> “modal-page”</span><span class="token punctuation" c-id="146.2162.9.16"> ；</span> modalElement<span class="token punctuation" c-id="146.2165.9.18"> ．</span> CSSCLASS.<span class="token operator" c-id="146.2168.9.20"> ＝</span> <span class="token string" c-id="146.2171.9.22"> '我的自定义班'</span><span class="token punctuation" c-id="146.2173.9.23"> ；</span> modalElement<span class="token punctuation" c-id="146.2176.9.25"> ．</span> swipeToClose<span class="token operator" c-id="146.2179.9.27"> ＝</span> <span class="token boolean" c-id="146.2182.9.29"> 真的</span><span class="token punctuation" c-id="146.2184.9.30"> ；</span> modalElement<span class="token punctuation" c-id="146.2187.9.32"> ．</span> 呈现<span class="token operator" c-id="146.2190.9.34"> ＝</span> <span class="token keyword" c-id="146.2193.9.36"> 等待</span> ModalController.<span class="token punctuation" c-id="146.2196.9.38"> ．</span><span class="token function" c-id="146.2198.9.39"> getTop</span><span class="token punctuation" c-id="146.2200.9.40"> （</span><span class="token punctuation" c-id="146.2202.9.41"> ）</span><span class="token punctuation" c-id="146.2204.9.42"> ；</span> <span class="token comment" c-id="146.2207.9.44"> //获取最顶层的离子模态</span></code></pre>  <div class="code-text__copy" c-id="183.0.0.0"> <a class="code-text__copy-link" c-id="183.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="183.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="183.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="183.5.3.0"></path> </svg> 复制</span> </div> </docs-code> </div> </docs-tab> <docs-tab role="tabpanel" class="Tabs-tab hydrated" tab="react" selected c-id="146.2210.4.2" s-id="184">    <div c-id="146.2211.5.0"> <docs-code language="tsx" class="hydrated" c-id="146.2212.6.0" s-id="185">   <pre c-id="146.2214.7.1"><code c-id="146.2215.8.0"><span class="token comment" c-id="146.2216.9.0"> /*使用useIonModal钩子*/</span> <span class="token keyword" c-id="146.2219.9.2"> 进口</span> 反应<span class="token punctuation" c-id="146.2222.9.4"> ，</span> <span class="token punctuation" c-id="146.2225.9.6"> ｛</span> useState<span class="token punctuation" c-id="146.2228.9.8"> ｝</span> <span class="token keyword" c-id="146.2231.9.10"> 从</span> <span class="token string" c-id="146.2234.9.12"> '反应'</span><span class="token punctuation" c-id="146.2236.9.13"> ；</span> <span class="token keyword" c-id="146.2239.9.15"> 进口</span> <span class="token punctuation" c-id="146.2242.9.17"> ｛</span> IonButton<span class="token punctuation" c-id="146.2245.9.19"> ，</span> 离子联系<span class="token punctuation" c-id="146.2248.9.21"> ，</span> IonPage<span class="token punctuation" c-id="146.2251.9.23"> ，</span> useIonModal<span class="token punctuation" c-id="146.2254.9.25"> ｝</span> <span class="token keyword" c-id="146.2257.9.27"> 从</span> <span class="token string" c-id="146.2260.9.29"> “@betway东盟体育appionic /反应”</span><span class="token punctuation" c-id="146.2262.9.30"> ；</span> <span class="token keyword" c-id="146.2265.9.32"> Const.</span> 身体<span class="token operator" c-id="146.2268.9.34"> ：</span> 反应<span class="token punctuation" c-id="146.2271.9.36"> ．</span><span class="token constant" c-id="146.2273.9.37"> 足球俱乐部</span><span class="token operator" c-id="146.2275.9.38"> <</span><span class="token punctuation" c-id="146.2277.9.39"> ｛</span> 数<span class="token operator" c-id="146.2280.9.41"> ：</span> <span class="token builtin" c-id="146.2283.9.43"> 数量</span><span class="token punctuation" c-id="146.2285.9.44"> ；</span> <span class="token function-variable function" c-id="146.2288.9.46"> onDismiss</span><span class="token operator" c-id="146.2290.9.47"> ：</span> <span class="token punctuation" c-id="146.2293.9.49"> （</span><span class="token punctuation" c-id="146.2295.9.50"> ）</span> <span class="token operator" c-id="146.2298.9.52"> ＝＞</span> <span class="token keyword" c-id="146.2301.9.54"> 无效</span><span class="token punctuation" c-id="146.2303.9.55"> ；</span> <span class="token function-variable function" c-id="146.2306.9.57"> 奴役</span><span class="token operator" c-id="146.2308.9.58"> ：</span> <span class="token punctuation" c-id="146.2311.9.60"> （</span><span class="token punctuation" c-id="146.2313.9.61"> ）</span> <span class="token operator" c-id="146.2316.9.63"> ＝＞</span> <span class="token keyword" c-id="146.2319.9.65"> 无效</span><span class="token punctuation" c-id="146.2321.9.66"> ；</span> <span class="token punctuation" c-id="146.2324.9.68"> ｝</span><span class="token operator" c-id="146.2326.9.69"> ></span> <span class="token operator" c-id="146.2329.9.71"> ＝</span> <span class="token punctuation" c-id="146.2332.9.73"> （</span><span class="token parameter" c-id="146.2334.9.74"><span class="token punctuation" c-id="146.2335.10.0"> ｛</span> 数<span class="token punctuation" c-id="146.2338.10.2"> ，</span> onDismiss<span class="token punctuation" c-id="146.2341.10.4"> ，</span> 奴役<span class="token punctuation" c-id="146.2344.10.6"> ｝</span></span><span class="token punctuation" c-id="146.2346.9.75"> ）</span> <span class="token operator" c-id="146.2349.9.77"> ＝＞</span> <span class="token punctuation" c-id="146.2352.9.79"> （</span> <span class="token tag" c-id="146.2355.9.81"><span class="token tag" c-id="146.2356.10.0"><span class="token punctuation" c-id="146.2357.11.0"> <</span> div</span><span class="token punctuation" c-id="146.2360.10.1"> ></span></span><span class="token plain-text" c-id="146.2362.9.82"> 数数：</span><span class="token punctuation" c-id="146.2364.9.83"> ｛</span> 数<span class="token punctuation" c-id="146.2367.9.85"> ｝</span><span class="token plain-text" c-id="146.2369.9.86"> </span><span class="token tag" c-id="146.2371.9.87"><span class="token tag" c-id="146.2372.10.0"><span class="token punctuation" c-id="146.2373.11.0"> <</span><span class="token class-name" c-id="146.2375.11.1"> IonButton</span></span> <span class="token attr-name" c-id="146.2378.10.2"> 扩张</span><span class="token attr-value" c-id="146.2380.10.3"><span class="token punctuation" c-id="146.2381.11.0"> ＝</span><span class="token punctuation" c-id="146.2383.11.1"> ＂</span> 块<span class="token punctuation" c-id="146.2386.11.3"> ＂</span></span> <span class="token attr-name" c-id="146.2389.10.5"> onClick</span><span class="token script language-javascript" c-id="146.2391.10.6"><span class="token script-punctuation punctuation" c-id="146.2392.11.0"> ＝</span><span class="token punctuation" c-id="146.2394.11.1"> ｛</span><span class="token punctuation" c-id="146.2396.11.2"> （</span><span class="token punctuation" c-id="146.2398.11.3"> ）</span> <span class="token operator" c-id="146.2401.11.5"> ＝＞</span> <span class="token function" c-id="146.2404.11.7"> 奴役</span><span class="token punctuation" c-id="146.2406.11.8"> （</span><span class="token punctuation" c-id="146.2408.11.9"> ）</span><span class="token punctuation" c-id="146.2410.11.10"> ｝</span></span><span class="token punctuation" c-id="146.2412.10.7"> ></span></span><span class="token plain-text" c-id="146.2414.9.88"> 增量计算</span><span class="token tag" c-id="146.2416.9.89"><span class="token tag" c-id="146.2417.10.0"><span class="token punctuation" c-id="146.2418.11.0"> </</span><span class="token class-name" c-id="146.2420.11.1"> IonButton</span></span><span class="token punctuation" c-id="146.2422.10.1"> ></span></span><span class="token plain-text" c-id="146.2424.9.90"> </span><span class="token tag" c-id="146.2426.9.91"><span class="token tag" c-id="146.2427.10.0"><span class="token punctuation" c-id="146.2428.11.0"> <</span><span class="token class-name" c-id="146.2430.11.1"> IonButton</span></span> <span class="token attr-name" c-id="146.2433.10.2"> 扩张</span><span class="token attr-value" c-id="146.2435.10.3"><span class="token punctuation" c-id="146.2436.11.0"> ＝</span><span class="token punctuation" c-id="146.2438.11.1"> ＂</span> 块<span class="token punctuation" c-id="146.2441.11.3"> ＂</span></span> <span class="token attr-name" c-id="146.2444.10.5"> onClick</span><span class="token script language-javascript" c-id="146.2446.10.6"><span class="token script-punctuation punctuation" c-id="146.2447.11.0"> ＝</span><span class="token punctuation" c-id="146.2449.11.1"> ｛</span><span class="token punctuation" c-id="146.2451.11.2"> （</span><span class="token punctuation" c-id="146.2453.11.3"> ）</span> <span class="token operator" c-id="146.2456.11.5"> ＝＞</span> <span class="token function" c-id="146.2459.11.7"> onDismiss</span><span class="token punctuation" c-id="146.2461.11.8"> （</span><span class="token punctuation" c-id="146.2463.11.9"> ）</span><span class="token punctuation" c-id="146.2465.11.10"> ｝</span></span><span class="token punctuation" c-id="146.2467.10.7"> ></span></span><span class="token plain-text" c-id="146.2469.9.92"> 关闭</span><span class="token tag" c-id="146.2471.9.93"><span class="token tag" c-id="146.2472.10.0"><span class="token punctuation" c-id="146.2473.11.0"> </</span><span class="token class-name" c-id="146.2475.11.1"> IonButton</span></span><span class="token punctuation" c-id="146.2477.10.1"> ></span></span><span class="token plain-text" c-id="146.2479.9.94"> </span><span class="token tag" c-id="146.2481.9.95"><span class="token tag" c-id="146.2482.10.0"><span class="token punctuation" c-id="146.2483.11.0"> </</span> div</span><span class="token punctuation" c-id="146.2486.10.1"> ></span></span> <span class="token punctuation" c-id="146.2489.9.97"> ）</span><span class="token punctuation" c-id="146.2491.9.98"> ；</span> <span class="token keyword" c-id="146.2494.9.100"> Const.</span> ModalExample<span class="token operator" c-id="146.2497.9.102"> ：</span> 反应<span class="token punctuation" c-id="146.2500.9.104"> ．</span><span class="token function-variable function" c-id="146.2502.9.105"> 足球俱乐部</span> <span class="token operator" c-id="146.2505.9.107"> ＝</span> <span class="token punctuation" c-id="146.2508.9.109"> （</span><span class="token punctuation" c-id="146.2510.9.110"> ）</span> <span class="token operator" c-id="146.2513.9.112"> ＝＞</span> <span class="token punctuation" c-id="146.2516.9.114"> ｛</span> <span class="token keyword" c-id="146.2519.9.116"> Const.</span> <span class="token punctuation" c-id="146.2522.9.118"> ［</span> 数<span class="token punctuation" c-id="146.2525.9.120"> ，</span> setcount.<span class="token punctuation" c-id="146.2528.9.122"> ］</span> <span class="token operator" c-id="146.2531.9.124"> ＝</span> <span class="token function" c-id="146.2534.9.126"> useState</span><span class="token punctuation" c-id="146.2536.9.127"> （</span><span class="token number" c-id="146.2538.9.128"> 0</span><span class="token punctuation" c-id="146.2540.9.129"> ）</span><span class="token punctuation" c-id="146.2542.9.130"> ；</span> <span class="token keyword" c-id="146.2545.9.132"> Const.</span> <span class="token function-variable function" c-id="146.2548.9.134"> 手柄征收</span> <span class="token operator" c-id="146.2551.9.136"> ＝</span> <span class="token punctuation" c-id="146.2554.9.138"> （</span><span class="token punctuation" c-id="146.2556.9.139"> ）</span> <span class="token operator" c-id="146.2559.9.141"> ＝＞</span> <span class="token punctuation" c-id="146.2562.9.143"> ｛</span> <span class="token function" c-id="146.2565.9.145"> setcount.</span><span class="token punctuation" c-id="146.2567.9.146"> （</span> 数<span class="token operator" c-id="146.2570.9.148"> +</span> <span class="token number" c-id="146.2573.9.150"> 1</span><span class="token punctuation" c-id="146.2575.9.151"> ）</span><span class="token punctuation" c-id="146.2577.9.152"> ；</span> <span class="token punctuation" c-id="146.2580.9.154"> ｝</span><span class="token punctuation" c-id="146.2582.9.155"> ；</span> <span class="token keyword" c-id="146.2585.9.157"> Const.</span> <span class="token function-variable function" c-id="146.2588.9.159"> handleDismiss</span> <span class="token operator" c-id="146.2591.9.161"> ＝</span> <span class="token punctuation" c-id="146.2594.9.163"> （</span><span class="token punctuation" c-id="146.2596.9.164"> ）</span> <span class="token operator" c-id="146.2599.9.166"> ＝＞</span> <span class="token punctuation" c-id="146.2602.9.168"> ｛</span> <span class="token function" c-id="146.2605.9.170"> 驳回</span><span class="token punctuation" c-id="146.2607.9.171"> （</span><span class="token punctuation" c-id="146.2609.9.172"> ）</span><span class="token punctuation" c-id="146.2611.9.173"> ；</span> <span class="token punctuation" c-id="146.2614.9.175"> ｝</span><span class="token punctuation" c-id="146.2616.9.176"> ；</span> <span class="token comment" c-id="146.2619.9.178"> /** *第一个参数是要显示的组件，第二个是要传递的道具*/</span> <span class="token keyword" c-id="146.2622.9.180"> Const.</span> <span class="token punctuation" c-id="146.2625.9.182"> ［</span> 展示<span class="token punctuation" c-id="146.2628.9.184"> ，</span> 驳回<span class="token punctuation" c-id="146.2631.9.186"> ］</span> <span class="token operator" c-id="146.2634.9.188"> ＝</span> <span class="token function" c-id="146.2637.9.190"> useIonModal</span><span class="token punctuation" c-id="146.2639.9.191"> （</span> 身体<span class="token punctuation" c-id="146.2642.9.193"> ，</span> <span class="token punctuation" c-id="146.2645.9.195"> ｛</span> 数<span class="token punctuation" c-id="146.2648.9.197"> ，</span> onDismiss<span class="token operator" c-id="146.2651.9.199"> ：</span> handleDismiss<span class="token punctuation" c-id="146.2654.9.201"> ，</span> 奴役<span class="token operator" c-id="146.2657.9.203"> ：</span> 手柄征收<span class="token punctuation" c-id="146.2660.9.205"> ，</span> <span class="token punctuation" c-id="146.2663.9.207"> ｝</span><span class="token punctuation" c-id="146.2665.9.208"> ）</span><span class="token punctuation" c-id="146.2667.9.209"> ；</span> <span class="token keyword" c-id="146.2670.9.211"> 返回</span> <span class="token punctuation" c-id="146.2673.9.213"> （</span> <span class="token tag" c-id="146.2676.9.215"><span class="token tag" c-id="146.2677.10.0"><span class="token punctuation" c-id="146.2678.11.0"> <</span><span class="token class-name" c-id="146.2680.11.1"> IonPage</span></span><span class="token punctuation" c-id="146.2682.10.1"> ></span></span><span class="token plain-text" c-id="146.2684.9.216"> </span><span class="token tag" c-id="146.2686.9.217"><span class="token tag" c-id="146.2687.10.0"><span class="token punctuation" c-id="146.2688.11.0"> <</span><span class="token class-name" c-id="146.2690.11.1"> 离子联系</span></span> <span class="token attr-name" c-id="146.2693.10.2"> 全屏</span><span class="token punctuation" c-id="146.2695.10.3"> ></span></span><span class="token plain-text" c-id="146.2697.9.218"> </span><span class="token tag" c-id="146.2699.9.219"><span class="token tag" c-id="146.2700.10.0"><span class="token punctuation" c-id="146.2701.11.0"> <</span><span class="token class-name" c-id="146.2703.11.1"> IonButton</span></span> <span class="token attr-name" c-id="146.2706.10.2"> 扩张</span><span class="token attr-value" c-id="146.2708.10.3"><span class="token punctuation" c-id="146.2709.11.0"> ＝</span><span class="token punctuation" c-id="146.2711.11.1"> ＂</span> 块<span class="token punctuation" c-id="146.2714.11.3"> ＂</span></span> <span class="token attr-name" c-id="146.2717.10.5"> onClick</span><span class="token script language-javascript" c-id="146.2719.10.6"><span class="token script-punctuation punctuation" c-id="146.2720.11.0"> ＝</span><span class="token punctuation" c-id="146.2722.11.1"> ｛</span><span class="token punctuation" c-id="146.2724.11.2"> （</span><span class="token punctuation" c-id="146.2726.11.3"> ）</span> <span class="token operator" c-id="146.2729.11.5"> ＝＞</span> <span class="token punctuation" c-id="146.2732.11.7"> ｛</span> <span class="token function" c-id="146.2735.11.9"> 展示</span><span class="token punctuation" c-id="146.2737.11.10"> （</span><span class="token punctuation" c-id="146.2739.11.11"> ｛</span> CSSCLASS.<span class="token operator" c-id="146.2742.11.13"> ：</span> <span class="token string" c-id="146.2745.11.15"> '我的课'</span><span class="token punctuation" c-id="146.2747.11.16"> ，</span> <span class="token punctuation" c-id="146.2750.11.18"> ｝</span><span class="token punctuation" c-id="146.2752.11.19"> ）</span><span class="token punctuation" c-id="146.2754.11.20"> ；</span> <span class="token punctuation" c-id="146.2757.11.22"> ｝</span><span class="token punctuation" c-id="146.2759.11.23"> ｝</span></span> <span class="token punctuation" c-id="146.2762.10.8"> ></span></span><span class="token plain-text" c-id="146.2764.9.220"> 显示模式</span><span class="token tag" c-id="146.2766.9.221"><span class="token tag" c-id="146.2767.10.0"><span class="token punctuation" c-id="146.2768.11.0"> </</span><span class="token class-name" c-id="146.2770.11.1"> IonButton</span></span><span class="token punctuation" c-id="146.2772.10.1"> ></span></span><span class="token plain-text" c-id="146.2774.9.222"> </span><span class="token tag" c-id="146.2776.9.223"><span class="token tag" c-id="146.2777.10.0"><span class="token punctuation" c-id="146.2778.11.0"> <</span> div</span><span class="token punctuation" c-id="146.2781.10.1"> ></span></span><span class="token plain-text" c-id="146.2783.9.224"> 数:</span><span class="token punctuation" c-id="146.2785.9.225"> ｛</span> 数<span class="token punctuation" c-id="146.2788.9.227"> ｝</span><span class="token tag" c-id="146.2790.9.228"><span class="token tag" c-id="146.2791.10.0"><span class="token punctuation" c-id="146.2792.11.0"> </</span> div</span><span class="token punctuation" c-id="146.2795.10.1"> ></span></span><span class="token plain-text" c-id="146.2797.9.229"> </span><span class="token tag" c-id="146.2799.9.230"><span class="token tag" c-id="146.2800.10.0"><span class="token punctuation" c-id="146.2801.11.0"> </</span><span class="token class-name" c-id="146.2803.11.1"> 离子联系</span></span><span class="token punctuation" c-id="146.2805.10.1"> ></span></span><span class="token plain-text" c-id="146.2807.9.231"> </span><span class="token tag" c-id="146.2809.9.232"><span class="token tag" c-id="146.2810.10.0"><span class="token punctuation" c-id="146.2811.11.0"> </</span><span class="token class-name" c-id="146.2813.11.1"> IonPage</span></span><span class="token punctuation" c-id="146.2815.10.1"> ></span></span> <span class="token punctuation" c-id="146.2818.9.234"> ）</span><span class="token punctuation" c-id="146.2820.9.235"> ；</span> <span class="token punctuation" c-id="146.2823.9.237"> ｝</span><span class="token punctuation" c-id="146.2825.9.238"> ；</span></code></pre>  <div class="code-text__copy" c-id="185.0.0.0"> <a class="code-text__copy-link" c-id="185.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="185.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="185.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="185.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <docs-code language="tsx" class="hydrated" c-id="146.2829.6.2" s-id="186">   <pre c-id="146.2831.7.1"><code c-id="146.2832.8.0"><span class="token comment" c-id="146.2833.9.0"> / *使用离子阳极组分* /</span> <span class="token keyword" c-id="146.2836.9.2"> 进口</span> 反应<span class="token punctuation" c-id="146.2839.9.4"> ，</span> <span class="token punctuation" c-id="146.2842.9.6"> ｛</span> useState<span class="token punctuation" c-id="146.2845.9.8"> ｝</span> <span class="token keyword" c-id="146.2848.9.10"> 从</span> <span class="token string" c-id="146.2851.9.12"> '反应'</span><span class="token punctuation" c-id="146.2853.9.13"> ；</span> <span class="token keyword" c-id="146.2856.9.15"> 进口</span> <span class="token punctuation" c-id="146.2859.9.17"> ｛</span> IonModal<span class="token punctuation" c-id="146.2862.9.19"> ，</span> IonButton<span class="token punctuation" c-id="146.2865.9.21"> ，</span> 离子联系<span class="token punctuation" c-id="146.2868.9.23"> ｝</span> <span class="token keyword" c-id="146.2871.9.25"> 从</span> <span class="token string" c-id="146.2874.9.27"> “@betway东盟体育appionic /反应”</span><span class="token punctuation" c-id="146.2876.9.28"> ；</span> <span class="token keyword" c-id="146.2879.9.30"> 出口</span> <span class="token keyword" c-id="146.2882.9.32"> Const.</span> ModalExample<span class="token operator" c-id="146.2885.9.34"> ：</span> 反应<span class="token punctuation" c-id="146.2888.9.36"> ．</span><span class="token function-variable function" c-id="146.2890.9.37"> 足球俱乐部</span> <span class="token operator" c-id="146.2893.9.39"> ＝</span> <span class="token punctuation" c-id="146.2896.9.41"> （</span><span class="token punctuation" c-id="146.2898.9.42"> ）</span> <span class="token operator" c-id="146.2901.9.44"> ＝＞</span> <span class="token punctuation" c-id="146.2904.9.46"> ｛</span> <span class="token keyword" c-id="146.2907.9.48"> Const.</span> <span class="token punctuation" c-id="146.2910.9.50"> ［</span> showModal<span class="token punctuation" c-id="146.2913.9.52"> ，</span> setshowmodal.<span class="token punctuation" c-id="146.2916.9.54"> ］</span> <span class="token operator" c-id="146.2919.9.56"> ＝</span> <span class="token function" c-id="146.2922.9.58"> useState</span><span class="token punctuation" c-id="146.2924.9.59"> （</span><span class="token boolean" c-id="146.2926.9.60"> 假</span><span class="token punctuation" c-id="146.2928.9.61"> ）</span><span class="token punctuation" c-id="146.2930.9.62"> ；</span> <span class="token keyword" c-id="146.2933.9.64"> 返回</span> <span class="token punctuation" c-id="146.2936.9.66"> （</span> <span class="token tag" c-id="146.2939.9.68"><span class="token tag" c-id="146.2940.10.0"><span class="token punctuation" c-id="146.2941.11.0"> <</span><span class="token class-name" c-id="146.2943.11.1"> 离子联系</span></span><span class="token punctuation" c-id="146.2945.10.1"> ></span></span><span class="token plain-text" c-id="146.2947.9.69"> </span><span class="token tag" c-id="146.2949.9.70"><span class="token tag" c-id="146.2950.10.0"><span class="token punctuation" c-id="146.2951.11.0"> <</span><span class="token class-name" c-id="146.2953.11.1"> IonModal</span></span> <span class="token attr-name" c-id="146.2956.10.2"> isOpen</span><span class="token script language-javascript" c-id="146.2958.10.3"><span class="token script-punctuation punctuation" c-id="146.2959.11.0"> ＝</span><span class="token punctuation" c-id="146.2961.11.1"> ｛</span> showModal<span class="token punctuation" c-id="146.2964.11.3"> ｝</span></span> <span class="token attr-name" c-id="146.2967.10.5"> CSSCLASS.</span><span class="token attr-value" c-id="146.2969.10.6"><span class="token punctuation" c-id="146.2970.11.0"> ＝</span><span class="token punctuation" c-id="146.2972.11.1"> ＇</span> my-custom-class<span class="token punctuation" c-id="146.2975.11.3"> ＇</span></span><span class="token punctuation" c-id="146.2977.10.7"> ></span></span><span class="token plain-text" c-id="146.2979.9.71"> </span><span class="token tag" c-id="146.2981.9.72"><span class="token tag" c-id="146.2982.10.0"><span class="token punctuation" c-id="146.2983.11.0"> <</span> p</span><span class="token punctuation" c-id="146.2986.10.1"> ></span></span><span class="token plain-text" c-id="146.2988.9.73"> 这是模态内容</span><span class="token tag" c-id="146.2990.9.74"><span class="token tag" c-id="146.2991.10.0"><span class="token punctuation" c-id="146.2992.11.0"> </</span> p</span><span class="token punctuation" c-id="146.2995.10.1"> ></span></span><span class="token plain-text" c-id="146.2997.9.75"> </span><span class="token tag" c-id="146.2999.9.76"><span class="token tag" c-id="146.3000.10.0"><span class="token punctuation" c-id="146.3001.11.0"> <</span><span class="token class-name" c-id="146.3003.11.1"> IonButton</span></span> <span class="token attr-name" c-id="146.3006.10.2"> onClick</span><span class="token script language-javascript" c-id="146.3008.10.3"><span class="token script-punctuation punctuation" c-id="146.3009.11.0"> ＝</span><span class="token punctuation" c-id="146.3011.11.1"> ｛</span><span class="token punctuation" c-id="146.3013.11.2"> （</span><span class="token punctuation" c-id="146.3015.11.3"> ）</span> <span class="token operator" c-id="146.3018.11.5"> ＝＞</span> <span class="token function" c-id="146.3021.11.7"> setshowmodal.</span><span class="token punctuation" c-id="146.3023.11.8"> （</span><span class="token boolean" c-id="146.3025.11.9"> 假</span><span class="token punctuation" c-id="146.3027.11.10"> ）</span><span class="token punctuation" c-id="146.3029.11.11"> ｝</span></span><span class="token punctuation" c-id="146.3031.10.4"> ></span></span><span class="token plain-text" c-id="146.3033.9.77"> 关闭模态</span><span class="token tag" c-id="146.3035.9.78"><span class="token tag" c-id="146.3036.10.0"><span class="token punctuation" c-id="146.3037.11.0"> </</span><span class="token class-name" c-id="146.3039.11.1"> IonButton</span></span><span class="token punctuation" c-id="146.3041.10.1"> ></span></span><span class="token plain-text" c-id="146.3043.9.79"> </span><span class="token tag" c-id="146.3045.9.80"><span class="token tag" c-id="146.3046.10.0"><span class="token punctuation" c-id="146.3047.11.0"> </</span><span class="token class-name" c-id="146.3049.11.1"> IonModal</span></span><span class="token punctuation" c-id="146.3051.10.1"> ></span></span><span class="token plain-text" c-id="146.3053.9.81"> </span><span class="token tag" c-id="146.3055.9.82"><span class="token tag" c-id="146.3056.10.0"><span class="token punctuation" c-id="146.3057.11.0"> <</span><span class="token class-name" c-id="146.3059.11.1"> IonButton</span></span> <span class="token attr-name" c-id="146.3062.10.2"> onClick</span><span class="token script language-javascript" c-id="146.3064.10.3"><span class="token script-punctuation punctuation" c-id="146.3065.11.0"> ＝</span><span class="token punctuation" c-id="146.3067.11.1"> ｛</span><span class="token punctuation" c-id="146.3069.11.2"> （</span><span class="token punctuation" c-id="146.3071.11.3"> ）</span> <span class="token operator" c-id="146.3074.11.5"> ＝＞</span> <span class="token function" c-id="146.3077.11.7"> setshowmodal.</span><span class="token punctuation" c-id="146.3079.11.8"> （</span><span class="token boolean" c-id="146.3081.11.9"> 真的</span><span class="token punctuation" c-id="146.3083.11.10"> ）</span><span class="token punctuation" c-id="146.3085.11.11"> ｝</span></span><span class="token punctuation" c-id="146.3087.10.4"> ></span></span><span class="token plain-text" c-id="146.3089.9.83"> 显示模式</span><span class="token tag" c-id="146.3091.9.84"><span class="token tag" c-id="146.3092.10.0"><span class="token punctuation" c-id="146.3093.11.0"> </</span><span class="token class-name" c-id="146.3095.11.1"> IonButton</span></span><span class="token punctuation" c-id="146.3097.10.1"> ></span></span><span class="token plain-text" c-id="146.3099.9.85"> </span><span class="token tag" c-id="146.3101.9.86"><span class="token tag" c-id="146.3102.10.0"><span class="token punctuation" c-id="146.3103.11.0"> </</span><span class="token class-name" c-id="146.3105.11.1"> 离子联系</span></span><span class="token punctuation" c-id="146.3107.10.1"> ></span></span> <span class="token punctuation" c-id="146.3110.9.88"> ）</span><span class="token punctuation" c-id="146.3112.9.89"> ；</span> <span class="token punctuation" c-id="146.3115.9.91"> ｝</span><span class="token punctuation" c-id="146.3117.9.92"> ；</span></code></pre>  <div class="code-text__copy" c-id="186.0.0.0"> <a class="code-text__copy-link" c-id="186.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="186.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="186.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="186.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <h3 id="swipeable-modals" c-id="146.3121.6.4"> <a href="#swipeable-modals" c-id="146.3123.7.1"> 可擦拭模块</a> </h3>  <p c-id="146.3127.6.6"> iOS模式的模块具有能够以卡式呈现并刷新以关闭。卡式演示文稿和刷新到闭合手势不是互斥的，这意味着您可以选择和选择要使用的功能。例如，您可以使用无法刷新的卡式模态或可以刷新的全尺寸模态。</p> <blockquote c-id="146.3130.6.8">  <p c-id="146.3132.7.1"> 在iphone大小的设备上运行的卡片样式模态没有背景。因此，<code c-id="146.3134.8.1"> ——backdrop-opacity</code> 变量不会有任何效果。</p> </blockquote>  <docs-code language="tsx" class="hydrated" c-id="146.3139.6.10" s-id="187">   <pre c-id="146.3141.7.1"><code c-id="146.3142.8.0"><span class="token keyword" c-id="146.3143.9.0"> Const.</span> 应用程序<span class="token operator" c-id="146.3146.9.2"> ：</span> 反应<span class="token punctuation" c-id="146.3149.9.4"> ．</span><span class="token function-variable function" c-id="146.3151.9.5"> 足球俱乐部</span> <span class="token operator" c-id="146.3154.9.7"> ＝</span> <span class="token punctuation" c-id="146.3157.9.9"> （</span><span class="token punctuation" c-id="146.3159.9.10"> ）</span> <span class="token operator" c-id="146.3162.9.12"> ＝＞</span> <span class="token punctuation" c-id="146.3165.9.14"> ｛</span> <span class="token keyword" c-id="146.3168.9.16"> Const.</span> REREREREF.<span class="token operator" c-id="146.3171.9.18"> ＝</span> useRef<span class="token operator" c-id="146.3174.9.20"> <</span> htmlionrouteroutletelement.<span class="token operator" c-id="146.3177.9.22"> |</span> <span class="token keyword" c-id="146.3180.9.24"> 空值</span><span class="token operator" c-id="146.3182.9.25"> ></span><span class="token punctuation" c-id="146.3184.9.26"> （</span><span class="token keyword" c-id="146.3186.9.27"> 空值</span><span class="token punctuation" c-id="146.3188.9.28"> ）</span><span class="token punctuation" c-id="146.3190.9.29"> ；</span> <span class="token keyword" c-id="146.3193.9.31"> 返回</span> <span class="token punctuation" c-id="146.3196.9.33"> （</span> <span class="token tag" c-id="146.3199.9.35"><span class="token tag" c-id="146.3200.10.0"><span class="token punctuation" c-id="146.3201.11.0"> <</span><span class="token class-name" c-id="146.3203.11.1"> IonApp</span></span><span class="token punctuation" c-id="146.3205.10.1"> ></span></span><span class="token plain-text" c-id="146.3207.9.36"> </span><span class="token tag" c-id="146.3209.9.37"><span class="token tag" c-id="146.3210.10.0"><span class="token punctuation" c-id="146.3211.11.0"> <</span><span class="token class-name" c-id="146.3213.11.1"> IonReactRouter</span></span><span class="token punctuation" c-id="146.3215.10.1"> ></span></span><span class="token plain-text" c-id="146.3217.9.38"> </span><span class="token tag" c-id="146.3219.9.39"><span class="token tag" c-id="146.3220.10.0"><span class="token punctuation" c-id="146.3221.11.0"> <</span><span class="token class-name" c-id="146.3223.11.1"> IonRoutOutlet.</span></span> <span class="token attr-name" c-id="146.3226.10.2"> 裁判</span><span class="token script language-javascript" c-id="146.3228.10.3"><span class="token script-punctuation punctuation" c-id="146.3229.11.0"> ＝</span><span class="token punctuation" c-id="146.3231.11.1"> ｛</span> REREREREF.<span class="token punctuation" c-id="146.3234.11.3"> ｝</span></span><span class="token punctuation" c-id="146.3236.10.4"> ></span></span><span class="token plain-text" c-id="146.3238.9.40"> </span><span class="token tag" c-id="146.3240.9.41"><span class="token tag" c-id="146.3241.10.0"><span class="token punctuation" c-id="146.3242.11.0"> <</span><span class="token class-name" c-id="146.3244.11.1"> 路线</span></span> <span class="token attr-name" c-id="146.3247.10.2"> 路径</span><span class="token attr-value" c-id="146.3249.10.3"><span class="token punctuation" c-id="146.3250.11.0"> ＝</span><span class="token punctuation" c-id="146.3252.11.1"> ＂</span> /家庭<span class="token punctuation" c-id="146.3255.11.3"> ＂</span></span> <span class="token attr-name" c-id="146.3258.10.5"> 使成为</span><span class="token script language-javascript" c-id="146.3260.10.6"><span class="token script-punctuation punctuation" c-id="146.3261.11.0"> ＝</span><span class="token punctuation" c-id="146.3263.11.1"> ｛</span><span class="token punctuation" c-id="146.3265.11.2"> （</span><span class="token punctuation" c-id="146.3267.11.3"> ）</span> <span class="token operator" c-id="146.3270.11.5"> ＝＞</span> <span class="token tag" c-id="146.3273.11.7"><span class="token tag" c-id="146.3274.12.0"><span class="token punctuation" c-id="146.3275.13.0"> <</span><span class="token class-name" c-id="146.3277.13.1"> 首页</span></span> <span class="token attr-name" c-id="146.3280.12.2"> 路由器</span><span class="token script language-javascript" c-id="146.3282.12.3"><span class="token script-punctuation punctuation" c-id="146.3283.13.0"> ＝</span><span class="token punctuation" c-id="146.3285.13.1"> ｛</span> REREREREF.<span class="token punctuation" c-id="146.3288.13.3"> ．</span> 当前的<span class="token punctuation" c-id="146.3291.13.5"> ｝</span></span> <span class="token punctuation" c-id="146.3294.12.5"> /></span></span><span class="token punctuation" c-id="146.3296.11.8"> ｝</span></span> <span class="token attr-name" c-id="146.3299.10.8"> 确切的</span><span class="token script language-javascript" c-id="146.3301.10.9"><span class="token script-punctuation punctuation" c-id="146.3302.11.0"> ＝</span><span class="token punctuation" c-id="146.3304.11.1"> ｛</span><span class="token boolean" c-id="146.3306.11.2"> 真的</span><span class="token punctuation" c-id="146.3308.11.3"> ｝</span></span> <span class="token punctuation" c-id="146.3311.10.11"> /></span></span><span class="token plain-text" c-id="146.3313.9.42"> </span><span class="token tag" c-id="146.3315.9.43"><span class="token tag" c-id="146.3316.10.0"><span class="token punctuation" c-id="146.3317.11.0"> </</span><span class="token class-name" c-id="146.3319.11.1"> IonRoutOutlet.</span></span><span class="token punctuation" c-id="146.3321.10.1"> ></span></span><span class="token plain-text" c-id="146.3323.9.44"> </span><span class="token tag" c-id="146.3325.9.45"><span class="token tag" c-id="146.3326.10.0"><span class="token punctuation" c-id="146.3327.11.0"> </</span><span class="token class-name" c-id="146.3329.11.1"> IonReactRouter</span></span><span class="token punctuation" c-id="146.3331.10.1"> ></span></span><span class="token plain-text" c-id="146.3333.9.46"> </span><span class="token tag" c-id="146.3335.9.47"><span class="token tag" c-id="146.3336.10.0"><span class="token punctuation" c-id="146.3337.11.0"> </</span><span class="token class-name" c-id="146.3339.11.1"> IonApp</span></span><span class="token punctuation" c-id="146.3341.10.1"> ></span></span> <span class="token punctuation" c-id="146.3344.9.49"> ）</span> <span class="token punctuation" c-id="146.3347.9.51"> ｝</span><span class="token punctuation" c-id="146.3349.9.52"> ；</span> <span class="token operator" c-id="146.3352.9.54"> ......</span> <span class="token keyword" c-id="146.3355.9.56"> 接口</span> <span class="token class-name" c-id="146.3358.9.58"> HomePageProps</span> <span class="token punctuation" c-id="146.3361.9.60"> ｛</span> 路由器<span class="token operator" c-id="146.3364.9.62"> ：</span> htmlionrouteroutletelement.<span class="token operator" c-id="146.3367.9.64"> |</span> <span class="token keyword" c-id="146.3370.9.66"> 空值</span><span class="token punctuation" c-id="146.3372.9.67"> ；</span> <span class="token punctuation" c-id="146.3375.9.69"> ｝</span> <span class="token keyword" c-id="146.3378.9.71"> Const.</span> 首页<span class="token operator" c-id="146.3381.9.73"> ：</span> 反应<span class="token punctuation" c-id="146.3384.9.75"> ．</span><span class="token constant" c-id="146.3386.9.76"> 足球俱乐部</span><span class="token tag" c-id="146.3388.9.77"><span class="token tag" c-id="146.3389.10.0"><span class="token punctuation" c-id="146.3390.11.0"> <</span><span class="token class-name" c-id="146.3392.11.1"> HomePageProps</span></span><span class="token punctuation" c-id="146.3394.10.1"> ></span></span><span class="token plain-text" c-id="146.3396.9.78"> =（{路由器}）=></span><span class="token punctuation" c-id="146.3398.9.79"> ｛</span> <span class="token keyword" c-id="146.3401.9.81"> Const.</span> <span class="token punctuation" c-id="146.3404.9.83"> ［</span> showModal<span class="token punctuation" c-id="146.3407.9.85"> ，</span> setshowmodal.<span class="token punctuation" c-id="146.3410.9.87"> ］</span> <span class="token operator" c-id="146.3413.9.89"> ＝</span> <span class="token function" c-id="146.3416.9.91"> useState</span><span class="token punctuation" c-id="146.3418.9.92"> （</span><span class="token boolean" c-id="146.3420.9.93"> 假</span><span class="token punctuation" c-id="146.3422.9.94"> ）</span><span class="token punctuation" c-id="146.3424.9.95"> ；</span> <span class="token keyword" c-id="146.3427.9.97"> 返回</span> <span class="token punctuation" c-id="146.3430.9.99"> （</span> <span class="token operator" c-id="146.3433.9.101"> ......</span> <span class="token tag" c-id="146.3436.9.103"><span class="token tag" c-id="146.3437.10.0"><span class="token punctuation" c-id="146.3438.11.0"> <</span><span class="token class-name" c-id="146.3440.11.1"> IonModal</span></span> <span class="token attr-name" c-id="146.3443.10.2"> isOpen</span><span class="token script language-javascript" c-id="146.3445.10.3"><span class="token script-punctuation punctuation" c-id="146.3446.11.0"> ＝</span><span class="token punctuation" c-id="146.3448.11.1"> ｛</span> showModal<span class="token punctuation" c-id="146.3451.11.3"> ｝</span></span> <span class="token attr-name" c-id="146.3454.10.5"> CSSCLASS.</span><span class="token attr-value" c-id="146.3456.10.6"><span class="token punctuation" c-id="146.3457.11.0"> ＝</span><span class="token punctuation" c-id="146.3459.11.1"> ＇</span> my-custom-class<span class="token punctuation" c-id="146.3462.11.3"> ＇</span></span> <span class="token attr-name" c-id="146.3465.10.8"> swipeToClose</span><span class="token script language-javascript" c-id="146.3467.10.9"><span class="token script-punctuation punctuation" c-id="146.3468.11.0"> ＝</span><span class="token punctuation" c-id="146.3470.11.1"> ｛</span><span class="token boolean" c-id="146.3472.11.2"> 真的</span><span class="token punctuation" c-id="146.3474.11.3"> ｝</span></span> <span class="token attr-name" c-id="146.3477.10.11"> 呈现</span><span class="token script language-javascript" c-id="146.3479.10.12"><span class="token script-punctuation punctuation" c-id="146.3480.11.0"> ＝</span><span class="token punctuation" c-id="146.3482.11.1"> ｛</span> 路由器<span class="token operator" c-id="146.3485.11.3"> ||</span> <span class="token keyword" c-id="146.3488.11.5"> 不明确的</span><span class="token punctuation" c-id="146.3490.11.6"> ｝</span></span> <span class="token attr-name" c-id="146.3493.10.14"> ondiddismiss.</span><span class="token script language-javascript" c-id="146.3495.10.15"><span class="token script-punctuation punctuation" c-id="146.3496.11.0"> ＝</span><span class="token punctuation" c-id="146.3498.11.1"> ｛</span><span class="token punctuation" c-id="146.3500.11.2"> （</span><span class="token punctuation" c-id="146.3502.11.3"> ）</span> <span class="token operator" c-id="146.3505.11.5"> ＝＞</span> <span class="token function" c-id="146.3508.11.7"> setshowmodal.</span><span class="token punctuation" c-id="146.3510.11.8"> （</span><span class="token boolean" c-id="146.3512.11.9"> 假</span><span class="token punctuation" c-id="146.3514.11.10"> ）</span><span class="token punctuation" c-id="146.3516.11.11"> ｝</span></span><span class="token punctuation" c-id="146.3518.10.16"> ></span></span><span class="token plain-text" c-id="146.3520.9.104"> </span><span class="token tag" c-id="146.3522.9.105"><span class="token tag" c-id="146.3523.10.0"><span class="token punctuation" c-id="146.3524.11.0"> <</span> p</span><span class="token punctuation" c-id="146.3527.10.1"> ></span></span><span class="token plain-text" c-id="146.3529.9.106"> 这是模态内容</span><span class="token tag" c-id="146.3531.9.107"><span class="token tag" c-id="146.3532.10.0"><span class="token punctuation" c-id="146.3533.11.0"> </</span> p</span><span class="token punctuation" c-id="146.3536.10.1"> ></span></span><span class="token plain-text" c-id="146.3538.9.108"> </span><span class="token tag" c-id="146.3540.9.109"><span class="token tag" c-id="146.3541.10.0"><span class="token punctuation" c-id="146.3542.11.0"> </</span><span class="token class-name" c-id="146.3544.11.1"> IonModal</span></span><span class="token punctuation" c-id="146.3546.10.1"> ></span></span> <span class="token operator" c-id="146.3549.9.111"> ......</span> <span class="token punctuation" c-id="146.3552.9.113"> ）</span><span class="token punctuation" c-id="146.3554.9.114"> ；</span> <span class="token punctuation" c-id="146.3557.9.116"> ｝</span><span class="token plain-text" c-id="146.3559.9.117"> ；</span></code></pre>  <div class="code-text__copy" c-id="187.0.0.0"> <a class="code-text__copy-link" c-id="187.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="187.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="187.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="187.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <p c-id="146.3563.6.12"> 在大多数情况下，设置一个参考<code c-id="146.3565.7.1"> IonRoutOutlet.</code> 并传递裁判<code c-id="146.3568.7.3"> 当前的</code> 价值<code c-id="146.3571.7.5"> 呈现</code> 很好。在您在另一个模态中呈现的卡式模态的情况下，您应该通过顶级<code c-id="146.3574.7.7"> ion-modal</code> 裁判的<code c-id="146.3577.7.9"> 呈现</code> ．</p> <docs-code language="tsx" class="hydrated" c-id="146.3581.6.14" s-id="188">   <pre c-id="146.3583.7.1"><code c-id="146.3584.8.0"><span class="token tag" c-id="146.3585.9.0"><span class="token tag" c-id="146.3586.10.0"><span class="token punctuation" c-id="146.3587.11.0"> <</span><span class="token class-name" c-id="146.3589.11.1"> IonModal</span></span> <span class="token attr-name" c-id="146.3592.10.2"> 裁判</span><span class="token script language-javascript" c-id="146.3594.10.3"><span class="token script-punctuation punctuation" c-id="146.3595.11.0"> ＝</span><span class="token punctuation" c-id="146.3597.11.1"> ｛</span> Firstmodalref.<span class="token punctuation" c-id="146.3600.11.3"> ｝</span></span> <span class="token attr-name" c-id="146.3603.10.5"> isOpen</span><span class="token script language-javascript" c-id="146.3605.10.6"><span class="token script-punctuation punctuation" c-id="146.3606.11.0"> ＝</span><span class="token punctuation" c-id="146.3608.11.1"> ｛</span> showModal<span class="token punctuation" c-id="146.3611.11.3"> ｝</span></span> <span class="token attr-name" c-id="146.3614.10.8"> CSSCLASS.</span><span class="token attr-value" c-id="146.3616.10.9"><span class="token punctuation" c-id="146.3617.11.0"> ＝</span><span class="token punctuation" c-id="146.3619.11.1"> ＇</span> my-custom-class<span class="token punctuation" c-id="146.3622.11.3"> ＇</span></span> <span class="token attr-name" c-id="146.3625.10.11"> swipeToClose</span><span class="token script language-javascript" c-id="146.3627.10.12"><span class="token script-punctuation punctuation" c-id="146.3628.11.0"> ＝</span><span class="token punctuation" c-id="146.3630.11.1"> ｛</span><span class="token boolean" c-id="146.3632.11.2"> 真的</span><span class="token punctuation" c-id="146.3634.11.3"> ｝</span></span> <span class="token attr-name" c-id="146.3637.10.14"> 呈现</span><span class="token script language-javascript" c-id="146.3639.10.15"><span class="token script-punctuation punctuation" c-id="146.3640.11.0"> ＝</span><span class="token punctuation" c-id="146.3642.11.1"> ｛</span> 路由器<span class="token operator" c-id="146.3645.11.3"> ||</span> <span class="token keyword" c-id="146.3648.11.5"> 不明确的</span><span class="token punctuation" c-id="146.3650.11.6"> ｝</span></span> <span class="token attr-name" c-id="146.3653.10.17"> ondiddismiss.</span><span class="token script language-javascript" c-id="146.3655.10.18"><span class="token script-punctuation punctuation" c-id="146.3656.11.0"> ＝</span><span class="token punctuation" c-id="146.3658.11.1"> ｛</span><span class="token punctuation" c-id="146.3660.11.2"> （</span><span class="token punctuation" c-id="146.3662.11.3"> ）</span> <span class="token operator" c-id="146.3665.11.5"> ＝＞</span> <span class="token function" c-id="146.3668.11.7"> setshowmodal.</span><span class="token punctuation" c-id="146.3670.11.8"> （</span><span class="token boolean" c-id="146.3672.11.9"> 假</span><span class="token punctuation" c-id="146.3674.11.10"> ）</span><span class="token punctuation" c-id="146.3676.11.11"> ｝</span></span><span class="token punctuation" c-id="146.3678.10.19"> ></span></span><span class="token plain-text" c-id="146.3680.9.1"> </span><span class="token tag" c-id="146.3682.9.2"><span class="token tag" c-id="146.3683.10.0"><span class="token punctuation" c-id="146.3684.11.0"> <</span> p</span><span class="token punctuation" c-id="146.3687.10.1"> ></span></span><span class="token plain-text" c-id="146.3689.9.3"> 这是模态内容</span><span class="token tag" c-id="146.3691.9.4"><span class="token tag" c-id="146.3692.10.0"><span class="token punctuation" c-id="146.3693.11.0"> </</span> p</span><span class="token punctuation" c-id="146.3696.10.1"> ></span></span><span class="token plain-text" c-id="146.3698.9.5"> </span><span class="token tag" c-id="146.3700.9.6"><span class="token tag" c-id="146.3701.10.0"><span class="token punctuation" c-id="146.3702.11.0"> <</span><span class="token class-name" c-id="146.3704.11.1"> IonButton</span></span> <span class="token attr-name" c-id="146.3707.10.2"> onClick</span><span class="token script language-javascript" c-id="146.3709.10.3"><span class="token script-punctuation punctuation" c-id="146.3710.11.0"> ＝</span><span class="token punctuation" c-id="146.3712.11.1"> ｛</span><span class="token punctuation" c-id="146.3714.11.2"> （</span><span class="token punctuation" c-id="146.3716.11.3"> ）</span> <span class="token operator" c-id="146.3719.11.5"> ＝＞</span> <span class="token function" c-id="146.3722.11.7"> setShow2ndModal</span><span class="token punctuation" c-id="146.3724.11.8"> （</span><span class="token boolean" c-id="146.3726.11.9"> 真的</span><span class="token punctuation" c-id="146.3728.11.10"> ）</span><span class="token punctuation" c-id="146.3730.11.11"> ｝</span></span><span class="token punctuation" c-id="146.3732.10.4"> ></span></span><span class="token plain-text" c-id="146.3734.9.7"> 展示第二次莫代尔</span><span class="token tag" c-id="146.3736.9.8"><span class="token tag" c-id="146.3737.10.0"><span class="token punctuation" c-id="146.3738.11.0"> </</span><span class="token class-name" c-id="146.3740.11.1"> IonButton</span></span><span class="token punctuation" c-id="146.3742.10.1"> ></span></span><span class="token plain-text" c-id="146.3744.9.9"> </span><span class="token tag" c-id="146.3746.9.10"><span class="token tag" c-id="146.3747.10.0"><span class="token punctuation" c-id="146.3748.11.0"> <</span><span class="token class-name" c-id="146.3750.11.1"> IonButton</span></span> <span class="token attr-name" c-id="146.3753.10.2"> onClick</span><span class="token script language-javascript" c-id="146.3755.10.3"><span class="token script-punctuation punctuation" c-id="146.3756.11.0"> ＝</span><span class="token punctuation" c-id="146.3758.11.1"> ｛</span><span class="token punctuation" c-id="146.3760.11.2"> （</span><span class="token punctuation" c-id="146.3762.11.3"> ）</span> <span class="token operator" c-id="146.3765.11.5"> ＝＞</span> <span class="token function" c-id="146.3768.11.7"> setshowmodal.</span><span class="token punctuation" c-id="146.3770.11.8"> （</span><span class="token boolean" c-id="146.3772.11.9"> 假</span><span class="token punctuation" c-id="146.3774.11.10"> ）</span><span class="token punctuation" c-id="146.3776.11.11"> ｝</span></span><span class="token punctuation" c-id="146.3778.10.4"> ></span></span><span class="token plain-text" c-id="146.3780.9.11"> 关闭模态</span><span class="token tag" c-id="146.3782.9.12"><span class="token tag" c-id="146.3783.10.0"><span class="token punctuation" c-id="146.3784.11.0"> </</span><span class="token class-name" c-id="146.3786.11.1"> IonButton</span></span><span class="token punctuation" c-id="146.3788.10.1"> ></span></span><span class="token plain-text" c-id="146.3790.9.13"> </span><span class="token tag" c-id="146.3792.9.14"><span class="token tag" c-id="146.3793.10.0"><span class="token punctuation" c-id="146.3794.11.0"> </</span><span class="token class-name" c-id="146.3796.11.1"> IonModal</span></span><span class="token punctuation" c-id="146.3798.10.1"> ></span></span> <span class="token tag" c-id="146.3801.9.16"><span class="token tag" c-id="146.3802.10.0"><span class="token punctuation" c-id="146.3803.11.0"> <</span><span class="token class-name" c-id="146.3805.11.1"> IonModal</span></span> <span class="token attr-name" c-id="146.3808.10.2"> isOpen</span><span class="token script language-javascript" c-id="146.3810.10.3"><span class="token script-punctuation punctuation" c-id="146.3811.11.0"> ＝</span><span class="token punctuation" c-id="146.3813.11.1"> ｛</span> show2ndModal<span class="token punctuation" c-id="146.3816.11.3"> ｝</span></span> <span class="token attr-name" c-id="146.3819.10.5"> CSSCLASS.</span><span class="token attr-value" c-id="146.3821.10.6"><span class="token punctuation" c-id="146.3822.11.0"> ＝</span><span class="token punctuation" c-id="146.3824.11.1"> ＇</span> my-custom-class<span class="token punctuation" c-id="146.3827.11.3"> ＇</span></span> <span class="token attr-name" c-id="146.3830.10.8"> 呈现</span><span class="token script language-javascript" c-id="146.3832.10.9"><span class="token script-punctuation punctuation" c-id="146.3833.11.0"> ＝</span><span class="token punctuation" c-id="146.3835.11.1"> ｛</span> Firstmodalref.<span class="token punctuation" c-id="146.3838.11.3"> ．</span> 当前的<span class="token punctuation" c-id="146.3841.11.5"> ｝</span></span> <span class="token attr-name" c-id="146.3844.10.11"> swipeToClose</span><span class="token script language-javascript" c-id="146.3846.10.12"><span class="token script-punctuation punctuation" c-id="146.3847.11.0"> ＝</span><span class="token punctuation" c-id="146.3849.11.1"> ｛</span><span class="token boolean" c-id="146.3851.11.2"> 真的</span><span class="token punctuation" c-id="146.3853.11.3"> ｝</span></span> <span class="token attr-name" c-id="146.3856.10.14"> ondiddismiss.</span><span class="token script language-javascript" c-id="146.3858.10.15"><span class="token script-punctuation punctuation" c-id="146.3859.11.0"> ＝</span><span class="token punctuation" c-id="146.3861.11.1"> ｛</span><span class="token punctuation" c-id="146.3863.11.2"> （</span><span class="token punctuation" c-id="146.3865.11.3"> ）</span> <span class="token operator" c-id="146.3868.11.5"> ＝＞</span> <span class="token function" c-id="146.3871.11.7"> setShow2ndModal</span><span class="token punctuation" c-id="146.3873.11.8"> （</span><span class="token boolean" c-id="146.3875.11.9"> 假</span><span class="token punctuation" c-id="146.3877.11.10"> ）</span><span class="token punctuation" c-id="146.3879.11.11"> ｝</span></span><span class="token punctuation" c-id="146.3881.10.16"> ></span></span><span class="token plain-text" c-id="146.3883.9.17"> </span><span class="token tag" c-id="146.3885.9.18"><span class="token tag" c-id="146.3886.10.0"><span class="token punctuation" c-id="146.3887.11.0"> <</span> p</span><span class="token punctuation" c-id="146.3890.10.1"> ></span></span><span class="token plain-text" c-id="146.3892.9.19"> 这是更多的模态内容</span><span class="token tag" c-id="146.3894.9.20"><span class="token tag" c-id="146.3895.10.0"><span class="token punctuation" c-id="146.3896.11.0"> </</span> p</span><span class="token punctuation" c-id="146.3899.10.1"> ></span></span><span class="token plain-text" c-id="146.3901.9.21"> </span><span class="token tag" c-id="146.3903.9.22"><span class="token tag" c-id="146.3904.10.0"><span class="token punctuation" c-id="146.3905.11.0"> <</span><span class="token class-name" c-id="146.3907.11.1"> IonButton</span></span> <span class="token attr-name" c-id="146.3910.10.2"> onClick</span><span class="token script language-javascript" c-id="146.3912.10.3"><span class="token script-punctuation punctuation" c-id="146.3913.11.0"> ＝</span><span class="token punctuation" c-id="146.3915.11.1"> ｛</span><span class="token punctuation" c-id="146.3917.11.2"> （</span><span class="token punctuation" c-id="146.3919.11.3"> ）</span> <span class="token operator" c-id="146.3922.11.5"> ＝＞</span> <span class="token function" c-id="146.3925.11.7"> setShow2ndModal</span><span class="token punctuation" c-id="146.3927.11.8"> （</span><span class="token boolean" c-id="146.3929.11.9"> 假</span><span class="token punctuation" c-id="146.3931.11.10"> ）</span><span class="token punctuation" c-id="146.3933.11.11"> ｝</span></span><span class="token punctuation" c-id="146.3935.10.4"> ></span></span><span class="token plain-text" c-id="146.3937.9.23"> 关闭模态</span><span class="token tag" c-id="146.3939.9.24"><span class="token tag" c-id="146.3940.10.0"><span class="token punctuation" c-id="146.3941.11.0"> </</span><span class="token class-name" c-id="146.3943.11.1"> IonButton</span></span><span class="token punctuation" c-id="146.3945.10.1"> ></span></span><span class="token plain-text" c-id="146.3947.9.25"> </span><span class="token tag" c-id="146.3949.9.26"><span class="token tag" c-id="146.3950.10.0"><span class="token punctuation" c-id="146.3951.11.0"> </</span><span class="token class-name" c-id="146.3953.11.1"> IonModal</span></span><span class="token punctuation" c-id="146.3955.10.1"> ></span></span></code></pre>  <div class="code-text__copy" c-id="188.0.0.0"> <a class="code-text__copy-link" c-id="188.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="188.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="188.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="188.5.3.0"></path> </svg> 复制</span> </div> </docs-code> </div> </docs-tab> <docs-tab role="tabpanel" class="Tabs-tab hydrated" tab="stencil" c-id="146.3958.4.3" s-id="189">    <div c-id="146.3959.5.0"> <docs-code language="tsx" class="hydrated" c-id="146.3960.6.0" s-id="190">   <pre c-id="146.3962.7.1"><code c-id="146.3963.8.0"><span class="token keyword" c-id="146.3964.9.0"> 进口</span> <span class="token punctuation" c-id="146.3967.9.2"> ｛</span> 组件<span class="token punctuation" c-id="146.3970.9.4"> ，</span> h<span class="token punctuation" c-id="146.3973.9.6"> ｝</span> <span class="token keyword" c-id="146.3976.9.8"> 从</span> <span class="token string" c-id="146.3979.9.10"> '@模板/核心'</span><span class="token punctuation" c-id="146.3981.9.11"> ；</span> <span class="token keyword" c-id="146.3984.9.13"> 进口</span> <span class="token punctuation" c-id="146.3987.9.15"> ｛</span> ModalController.<span class="token punctuation" c-id="146.3990.9.17"> ｝</span> <span class="token keyword" c-id="146.3993.9.19"> 从</span> <span class="token string" c-id="146.3996.9.21"> '@betway东盟体育app离子/核心'</span><span class="token punctuation" c-id="146.3998.9.22"> ；</span> ＠<span class="token function" c-id="146.4001.9.24"> 组件</span><span class="token punctuation" c-id="146.4003.9.25"> （</span><span class="token punctuation" c-id="146.4005.9.26"> ｛</span> 标签<span class="token operator" c-id="146.4008.9.28"> ：</span> <span class="token string" c-id="146.4011.9.30"> 'Modal-example'</span><span class="token punctuation" c-id="146.4013.9.31"> ，</span> styleurl.<span class="token operator" c-id="146.4016.9.33"> ：</span> <span class="token string" c-id="146.4019.9.35"> “modal-example.css”</span> <span class="token punctuation" c-id="146.4022.9.37"> ｝</span><span class="token punctuation" c-id="146.4024.9.38"> ）</span> <span class="token keyword" c-id="146.4027.9.40"> 出口</span> <span class="token keyword" c-id="146.4030.9.42"> 类</span> <span class="token class-name" c-id="146.4033.9.44"> ModalExample</span> <span class="token punctuation" c-id="146.4036.9.46"> ｛</span> <span class="token keyword" c-id="146.4039.9.48"> 异步</span> <span class="token function" c-id="146.4042.9.50"> TheertModal.</span><span class="token punctuation" c-id="146.4044.9.51"> （</span><span class="token punctuation" c-id="146.4046.9.52"> ）</span> <span class="token punctuation" c-id="146.4049.9.54"> ｛</span> <span class="token keyword" c-id="146.4052.9.56"> Const.</span> 模态<span class="token operator" c-id="146.4055.9.58"> ＝</span> <span class="token keyword" c-id="146.4058.9.60"> 等待</span> ModalController.<span class="token punctuation" c-id="146.4061.9.62"> ．</span><span class="token function" c-id="146.4063.9.63"> 创建</span><span class="token punctuation" c-id="146.4065.9.64"> （</span><span class="token punctuation" c-id="146.4067.9.65"> ｛</span> 组件<span class="token operator" c-id="146.4070.9.67"> ：</span> <span class="token string" c-id="146.4073.9.69"> “page-modal”</span><span class="token punctuation" c-id="146.4075.9.70"> ，</span> CSSCLASS.<span class="token operator" c-id="146.4078.9.72"> ：</span> <span class="token string" c-id="146.4081.9.74"> '我的自定义班'</span> <span class="token punctuation" c-id="146.4084.9.76"> ｝</span><span class="token punctuation" c-id="146.4086.9.77"> ）</span><span class="token punctuation" c-id="146.4088.9.78"> ；</span> <span class="token keyword" c-id="146.4091.9.80"> 等待</span> 模态<span class="token punctuation" c-id="146.4094.9.82"> ．</span><span class="token function" c-id="146.4096.9.83"> 展示</span><span class="token punctuation" c-id="146.4098.9.84"> （</span><span class="token punctuation" c-id="146.4100.9.85"> ）</span><span class="token punctuation" c-id="146.4102.9.86"> ；</span> <span class="token punctuation" c-id="146.4105.9.88"> ｝</span> <span class="token punctuation" c-id="146.4108.9.90"> ｝</span></code></pre>  <div class="code-text__copy" c-id="190.0.0.0"> <a class="code-text__copy-link" c-id="190.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="190.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="190.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="190.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <docs-code language="tsx" class="hydrated" c-id="146.4112.6.2" s-id="191">   <pre c-id="146.4114.7.1"><code c-id="146.4115.8.0"><span class="token keyword" c-id="146.4116.9.0"> 进口</span> <span class="token punctuation" c-id="146.4119.9.2"> ｛</span> 组件<span class="token punctuation" c-id="146.4122.9.4"> ，</span> h<span class="token punctuation" c-id="146.4125.9.6"> ｝</span> <span class="token keyword" c-id="146.4128.9.8"> 从</span> <span class="token string" c-id="146.4131.9.10"> '@模板/核心'</span><span class="token punctuation" c-id="146.4133.9.11"> ；</span> ＠<span class="token function" c-id="146.4136.9.13"> 组件</span><span class="token punctuation" c-id="146.4138.9.14"> （</span><span class="token punctuation" c-id="146.4140.9.15"> ｛</span> 标签<span class="token operator" c-id="146.4143.9.17"> ：</span> <span class="token string" c-id="146.4146.9.19"> “page-modal”</span><span class="token punctuation" c-id="146.4148.9.20"> ，</span> styleurl.<span class="token operator" c-id="146.4151.9.22"> ：</span> <span class="token string" c-id="146.4154.9.24"> “page-modal.css”</span><span class="token punctuation" c-id="146.4156.9.25"> ，</span> <span class="token punctuation" c-id="146.4159.9.27"> ｝</span><span class="token punctuation" c-id="146.4161.9.28"> ）</span> <span class="token keyword" c-id="146.4164.9.30"> 出口</span> <span class="token keyword" c-id="146.4167.9.32"> 类</span> <span class="token class-name" c-id="146.4170.9.34"> PageModal.</span> <span class="token punctuation" c-id="146.4173.9.36"> ｛</span> <span class="token function" c-id="146.4176.9.38"> 使成为</span><span class="token punctuation" c-id="146.4178.9.39"> （</span><span class="token punctuation" c-id="146.4180.9.40"> ）</span> <span class="token punctuation" c-id="146.4183.9.42"> ｛</span> <span class="token keyword" c-id="146.4186.9.44"> 返回</span> <span class="token punctuation" c-id="146.4189.9.46"> ［</span> <span class="token tag" c-id="146.4192.9.48"><span class="token tag" c-id="146.4193.10.0"><span class="token punctuation" c-id="146.4194.11.0"> <</span> 离子清单</span><span class="token punctuation" c-id="146.4197.10.1"> ></span></span><span class="token plain-text" c-id="146.4199.9.49"> </span><span class="token tag" c-id="146.4201.9.50"><span class="token tag" c-id="146.4202.10.0"><span class="token punctuation" c-id="146.4203.11.0"> <</span> ion-item</span><span class="token punctuation" c-id="146.4206.10.1"> ></span></span><span class="token plain-text" c-id="146.4208.9.51"> </span><span class="token tag" c-id="146.4210.9.52"><span class="token tag" c-id="146.4211.10.0"><span class="token punctuation" c-id="146.4212.11.0"> <</span> ion-label</span><span class="token punctuation" c-id="146.4215.10.1"> ></span></span><span class="token plain-text" c-id="146.4217.9.53"> 文档</span><span class="token tag" c-id="146.4219.9.54"><span class="token tag" c-id="146.4220.10.0"><span class="token punctuation" c-id="146.4221.11.0"> </</span> ion-label</span><span class="token punctuation" c-id="146.4224.10.1"> ></span></span><span class="token plain-text" c-id="146.4226.9.55"> </span><span class="token tag" c-id="146.4228.9.56"><span class="token tag" c-id="146.4229.10.0"><span class="token punctuation" c-id="146.4230.11.0"> </</span> ion-item</span><span class="token punctuation" c-id="146.4233.10.1"> ></span></span><span class="token plain-text" c-id="146.4235.9.57"> </span><span class="token tag" c-id="146.4237.9.58"><span class="token tag" c-id="146.4238.10.0"><span class="token punctuation" c-id="146.4239.11.0"> <</span> ion-item</span><span class="token punctuation" c-id="146.4242.10.1"> ></span></span><span class="token plain-text" c-id="146.4244.9.59"> </span><span class="token tag" c-id="146.4246.9.60"><span class="token tag" c-id="146.4247.10.0"><span class="token punctuation" c-id="146.4248.11.0"> <</span> ion-label</span><span class="token punctuation" c-id="146.4251.10.1"> ></span></span><span class="token plain-text" c-id="146.4253.9.61"> 反馈</span><span class="token tag" c-id="146.4255.9.62"><span class="token tag" c-id="146.4256.10.0"><span class="token punctuation" c-id="146.4257.11.0"> </</span> ion-label</span><span class="token punctuation" c-id="146.4260.10.1"> ></span></span><span class="token plain-text" c-id="146.4262.9.63"> </span><span class="token tag" c-id="146.4264.9.64"><span class="token tag" c-id="146.4265.10.0"><span class="token punctuation" c-id="146.4266.11.0"> </</span> ion-item</span><span class="token punctuation" c-id="146.4269.10.1"> ></span></span><span class="token plain-text" c-id="146.4271.9.65"> </span><span class="token tag" c-id="146.4273.9.66"><span class="token tag" c-id="146.4274.10.0"><span class="token punctuation" c-id="146.4275.11.0"> <</span> ion-item</span><span class="token punctuation" c-id="146.4278.10.1"> ></span></span><span class="token plain-text" c-id="146.4280.9.67"> </span><span class="token tag" c-id="146.4282.9.68"><span class="token tag" c-id="146.4283.10.0"><span class="token punctuation" c-id="146.4284.11.0"> <</span> ion-label</span><span class="token punctuation" c-id="146.4287.10.1"> ></span></span><span class="token plain-text" c-id="146.4289.9.69"> 设置</span><span class="token tag" c-id="146.4291.9.70"><span class="token tag" c-id="146.4292.10.0"><span class="token punctuation" c-id="146.4293.11.0"> </</span> ion-label</span><span class="token punctuation" c-id="146.4296.10.1"> ></span></span><span class="token plain-text" c-id="146.4298.9.71"> </span><span class="token tag" c-id="146.4300.9.72"><span class="token tag" c-id="146.4301.10.0"><span class="token punctuation" c-id="146.4302.11.0"> </</span> ion-item</span><span class="token punctuation" c-id="146.4305.10.1"> ></span></span><span class="token plain-text" c-id="146.4307.9.73"> </span><span class="token tag" c-id="146.4309.9.74"><span class="token tag" c-id="146.4310.10.0"><span class="token punctuation" c-id="146.4311.11.0"> </</span> 离子清单</span><span class="token punctuation" c-id="146.4314.10.1"> ></span></span> <span class="token punctuation" c-id="146.4317.9.76"> ］</span><span class="token punctuation" c-id="146.4319.9.77"> ；</span> <span class="token punctuation" c-id="146.4322.9.79"> ｝</span> <span class="token punctuation" c-id="146.4325.9.81"> ｝</span></code></pre>  <div class="code-text__copy" c-id="191.0.0.0"> <a class="code-text__copy-link" c-id="191.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="191.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="191.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="191.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <blockquote c-id="146.4329.6.4">  <p c-id="146.4331.7.1"> 如果您需要在您的模态组件中使用包装器元素，我们建议使用<code c-id="146.4333.8.1"> < div class = " ion-page”></code> 这样组件的尺寸仍然可以正确计算。</p> </blockquote>  <h3 id="passing-data" c-id="146.4338.6.6"> <a href="#passing-data" c-id="146.4340.7.1"> 通过数据</a> </h3>  <p c-id="146.4344.6.8"> 在创建模态期间，数据可以通过<code c-id="146.4346.7.1"> 组成份额</code> ．上面的例子可以包含数据:</p> <docs-code language="tsx" class="hydrated" c-id="146.4350.6.10" s-id="192">   <pre c-id="146.4352.7.1"><code c-id="146.4353.8.0"><span class="token keyword" c-id="146.4354.9.0"> 异步</span> <span class="token function" c-id="146.4357.9.2"> TheertModal.</span><span class="token punctuation" c-id="146.4359.9.3"> （</span><span class="token punctuation" c-id="146.4361.9.4"> ）</span> <span class="token punctuation" c-id="146.4364.9.6"> ｛</span> <span class="token keyword" c-id="146.4367.9.8"> Const.</span> 模态<span class="token operator" c-id="146.4370.9.10"> ＝</span> <span class="token keyword" c-id="146.4373.9.12"> 等待</span> ModalController.<span class="token punctuation" c-id="146.4376.9.14"> ．</span><span class="token function" c-id="146.4378.9.15"> 创建</span><span class="token punctuation" c-id="146.4380.9.16"> （</span><span class="token punctuation" c-id="146.4382.9.17"> ｛</span> 组件<span class="token operator" c-id="146.4385.9.19"> ：</span> <span class="token string" c-id="146.4388.9.21"> “page-modal”</span><span class="token punctuation" c-id="146.4390.9.22"> ，</span> CSSCLASS.<span class="token operator" c-id="146.4393.9.24"> ：</span> <span class="token string" c-id="146.4396.9.26"> '我的自定义班'</span><span class="token punctuation" c-id="146.4398.9.27"> ，</span> 组成份额<span class="token operator" c-id="146.4401.9.29"> ：</span> <span class="token punctuation" c-id="146.4404.9.31"> ｛</span> <span class="token string" c-id="146.4407.9.33"> '名'</span><span class="token operator" c-id="146.4409.9.34"> ：</span> <span class="token string" c-id="146.4412.9.36"> '道格拉斯'</span><span class="token punctuation" c-id="146.4414.9.37"> ，</span> <span class="token string" c-id="146.4417.9.39"> “姓”</span><span class="token operator" c-id="146.4419.9.40"> ：</span> <span class="token string" c-id="146.4422.9.42"> “亚当斯”</span><span class="token punctuation" c-id="146.4424.9.43"> ，</span> <span class="token string" c-id="146.4427.9.45"> '中间初始'</span><span class="token operator" c-id="146.4429.9.46"> ：</span> <span class="token string" c-id="146.4432.9.48"> “N”</span> <span class="token punctuation" c-id="146.4435.9.50"> ｝</span> <span class="token punctuation" c-id="146.4438.9.52"> ｝</span><span class="token punctuation" c-id="146.4440.9.53"> ）</span><span class="token punctuation" c-id="146.4442.9.54"> ；</span> <span class="token keyword" c-id="146.4445.9.56"> 等待</span> 模态<span class="token punctuation" c-id="146.4448.9.58"> ．</span><span class="token function" c-id="146.4450.9.59"> 展示</span><span class="token punctuation" c-id="146.4452.9.60"> （</span><span class="token punctuation" c-id="146.4454.9.61"> ）</span><span class="token punctuation" c-id="146.4456.9.62"> ；</span> <span class="token punctuation" c-id="146.4459.9.64"> ｝</span></code></pre>  <div class="code-text__copy" c-id="192.0.0.0"> <a class="code-text__copy-link" c-id="192.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="192.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="192.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="192.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <p c-id="146.4463.6.12"> 将数据传递到<code c-id="146.4465.7.1"> 组成份额</code> ，将每个人设置为一个<code c-id="146.4468.7.3"> @Prop</code> ：</p> <docs-code language="tsx" class="hydrated" c-id="146.4472.6.14" s-id="193">   <pre c-id="146.4474.7.1"><code c-id="146.4475.8.0"><span class="token keyword" c-id="146.4476.9.0"> 进口</span> <span class="token punctuation" c-id="146.4479.9.2"> ｛</span> 组件<span class="token punctuation" c-id="146.4482.9.4"> ，</span> 道具<span class="token punctuation" c-id="146.4485.9.6"> ，</span> h<span class="token punctuation" c-id="146.4488.9.8"> ｝</span> <span class="token keyword" c-id="146.4491.9.10"> 从</span> <span class="token string" c-id="146.4494.9.12"> '@模板/核心'</span><span class="token punctuation" c-id="146.4496.9.13"> ；</span> ＠<span class="token function" c-id="146.4499.9.15"> 组件</span><span class="token punctuation" c-id="146.4501.9.16"> （</span><span class="token punctuation" c-id="146.4503.9.17"> ｛</span> 标签<span class="token operator" c-id="146.4506.9.19"> ：</span> <span class="token string" c-id="146.4509.9.21"> “page-modal”</span><span class="token punctuation" c-id="146.4511.9.22"> ，</span> styleurl.<span class="token operator" c-id="146.4514.9.24"> ：</span> <span class="token string" c-id="146.4517.9.26"> “page-modal.css”</span><span class="token punctuation" c-id="146.4519.9.27"> ，</span> <span class="token punctuation" c-id="146.4522.9.29"> ｝</span><span class="token punctuation" c-id="146.4524.9.30"> ）</span> <span class="token keyword" c-id="146.4527.9.32"> 出口</span> <span class="token keyword" c-id="146.4530.9.34"> 类</span> <span class="token class-name" c-id="146.4533.9.36"> PageModal.</span> <span class="token punctuation" c-id="146.4536.9.38"> ｛</span> <span class="token comment" c-id="146.4539.9.40"> // ComponentProps传递的数据</span> ＠<span class="token function" c-id="146.4542.9.42"> 道具</span><span class="token punctuation" c-id="146.4544.9.43"> （</span><span class="token punctuation" c-id="146.4546.9.44"> ）</span> 名<span class="token operator" c-id="146.4549.9.46"> ：</span> <span class="token builtin" c-id="146.4552.9.48"> 细绳</span><span class="token punctuation" c-id="146.4554.9.49"> ；</span> ＠<span class="token function" c-id="146.4557.9.51"> 道具</span><span class="token punctuation" c-id="146.4559.9.52"> （</span><span class="token punctuation" c-id="146.4561.9.53"> ）</span> 姓<span class="token operator" c-id="146.4564.9.55"> ：</span> <span class="token builtin" c-id="146.4567.9.57"> 细绳</span><span class="token punctuation" c-id="146.4569.9.58"> ；</span> ＠<span class="token function" c-id="146.4572.9.60"> 道具</span><span class="token punctuation" c-id="146.4574.9.61"> （</span><span class="token punctuation" c-id="146.4576.9.62"> ）</span> middleInitial<span class="token operator" c-id="146.4579.9.64"> ：</span> <span class="token builtin" c-id="146.4582.9.66"> 细绳</span><span class="token punctuation" c-id="146.4584.9.67"> ；</span> <span class="token punctuation" c-id="146.4587.9.69"> ｝</span></code></pre>  <div class="code-text__copy" c-id="193.0.0.0"> <a class="code-text__copy-link" c-id="193.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="193.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="193.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="193.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <h3 id="dismissing-a-modal" c-id="146.4591.6.16"> <a href="#dismissing-a-modal" c-id="146.4593.7.1"> 解雇一个模态</a> </h3>  <p c-id="146.4597.6.18"> 可以通过在模态控制器上调用DISPISS方法并可选择从模态传递任何数据来解除模态。</p> <docs-code language="tsx" class="hydrated" c-id="146.4600.6.20" s-id="194">   <pre c-id="146.4602.7.1"><code c-id="146.4603.8.0"><span class="token keyword" c-id="146.4604.9.0"> 出口</span> <span class="token keyword" c-id="146.4607.9.2"> 类</span> <span class="token class-name" c-id="146.4610.9.4"> modalpage.</span> <span class="token punctuation" c-id="146.4613.9.6"> ｛</span> <span class="token operator" c-id="146.4616.9.8"> ......</span> <span class="token function" c-id="146.4619.9.10"> 驳回</span><span class="token punctuation" c-id="146.4621.9.11"> （</span><span class="token parameter" c-id="146.4623.9.12"> 数据<span class="token operator" c-id="146.4625.10.1"> ？</span><span class="token operator" c-id="146.4627.10.2"> ：</span> <span class="token builtin" c-id="146.4630.10.4"> 任何</span></span><span class="token punctuation" c-id="146.4632.9.13"> ）</span> <span class="token punctuation" c-id="146.4635.9.15"> ｛</span> <span class="token comment" c-id="146.4638.9.17"> //关闭最近的模态并返回数据</span> <span class="token punctuation" c-id="146.4641.9.19"> （</span><span class="token keyword" c-id="146.4643.9.20"> 这个</span><span class="token punctuation" c-id="146.4645.9.21"> ．</span> 埃尔<span class="token punctuation" c-id="146.4648.9.23"> ．</span><span class="token function" c-id="146.4650.9.24"> 最近的</span><span class="token punctuation" c-id="146.4652.9.25"> （</span><span class="token string" c-id="146.4654.9.26"> '离子模态'</span><span class="token punctuation" c-id="146.4656.9.27"> ）</span> <span class="token keyword" c-id="146.4659.9.29"> 作为</span> <span class="token builtin" c-id="146.4662.9.31"> 任何</span><span class="token punctuation" c-id="146.4664.9.32"> ）</span><span class="token punctuation" c-id="146.4666.9.33"> ．</span><span class="token function" c-id="146.4668.9.34"> 驳回</span><span class="token punctuation" c-id="146.4670.9.35"> （</span><span class="token punctuation" c-id="146.4672.9.36"> ｛</span> <span class="token string" c-id="146.4675.9.38"> “开除”</span><span class="token operator" c-id="146.4677.9.39"> ：</span> <span class="token boolean" c-id="146.4680.9.41"> 真的</span> <span class="token punctuation" c-id="146.4683.9.43"> ｝</span><span class="token punctuation" c-id="146.4685.9.44"> ）</span><span class="token punctuation" c-id="146.4687.9.45"> ；</span> <span class="token punctuation" c-id="146.4690.9.47"> ｝</span> <span class="token punctuation" c-id="146.4693.9.49"> ｝</span></code></pre>  <div class="code-text__copy" c-id="194.0.0.0"> <a class="code-text__copy-link" c-id="194.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="194.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="194.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="194.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <p c-id="146.4697.6.22"> 删除后，数据可以通过<code c-id="146.4699.7.1"> onWillDismiss</code> 或者<code c-id="146.4702.7.3"> ondiddismiss.</code> 创建后附加到模态：</p> <docs-code language="tsx" class="hydrated" c-id="146.4706.6.24" s-id="195">   <pre c-id="146.4708.7.1"><code c-id="146.4709.8.0"><span class="token keyword" c-id="146.4710.9.0"> Const.</span> <span class="token punctuation" c-id="146.4713.9.2"> ｛</span> 数据<span class="token punctuation" c-id="146.4716.9.4"> ｝</span> <span class="token operator" c-id="146.4719.9.6"> ＝</span> <span class="token keyword" c-id="146.4722.9.8"> 等待</span> 模态<span class="token punctuation" c-id="146.4725.9.10"> ．</span><span class="token function" c-id="146.4727.9.11"> onWillDismiss</span><span class="token punctuation" c-id="146.4729.9.12"> （</span><span class="token punctuation" c-id="146.4731.9.13"> ）</span><span class="token punctuation" c-id="146.4733.9.14"> ；</span> <span class="token builtin" c-id="146.4736.9.16"> 安慰</span><span class="token punctuation" c-id="146.4738.9.17"> ．</span><span class="token function" c-id="146.4740.9.18"> 日志</span><span class="token punctuation" c-id="146.4742.9.19"> （</span> 数据<span class="token punctuation" c-id="146.4745.9.21"> ）</span><span class="token punctuation" c-id="146.4747.9.22"> ；</span></code></pre>  <div class="code-text__copy" c-id="195.0.0.0"> <a class="code-text__copy-link" c-id="195.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="195.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="195.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="195.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <h3 id="swipeable-modals" c-id="146.4751.6.26"> <a href="#swipeable-modals" c-id="146.4753.7.1"> 可擦拭模块</a> </h3>  <p c-id="146.4757.6.28"> iOS模式的模块具有能够以卡式呈现并刷新以关闭。卡式演示文稿和刷新到闭合手势不是互斥的，这意味着您可以选择和选择要使用的功能。例如，您可以使用无法刷新的卡式模态或可以刷新的全尺寸模态。</p> <blockquote c-id="146.4760.6.30">  <p c-id="146.4762.7.1"> 在iphone大小的设备上运行的卡片样式模态没有背景。因此，<code c-id="146.4764.8.1"> ——backdrop-opacity</code> 变量不会有任何效果。</p> </blockquote>  <docs-code language="tsx" class="hydrated" c-id="146.4769.6.32" s-id="196">   <pre c-id="146.4771.7.1"><code c-id="146.4772.8.0"><span class="token keyword" c-id="146.4773.9.0"> 进口</span> <span class="token punctuation" c-id="146.4776.9.2"> ｛</span> 组件<span class="token punctuation" c-id="146.4779.9.4"> ，</span> 元素<span class="token punctuation" c-id="146.4782.9.6"> ，</span> h<span class="token punctuation" c-id="146.4785.9.8"> ｝</span> <span class="token keyword" c-id="146.4788.9.10"> 从</span> <span class="token string" c-id="146.4791.9.12"> '@模板/核心'</span><span class="token punctuation" c-id="146.4793.9.13"> ；</span> <span class="token keyword" c-id="146.4796.9.15"> 进口</span> <span class="token punctuation" c-id="146.4799.9.17"> ｛</span> ModalController.<span class="token punctuation" c-id="146.4802.9.19"> ｝</span> <span class="token keyword" c-id="146.4805.9.21"> 从</span> <span class="token string" c-id="146.4808.9.23"> '@betway东盟体育app离子/核心'</span><span class="token punctuation" c-id="146.4810.9.24"> ；</span> ＠<span class="token function" c-id="146.4813.9.26"> 组件</span><span class="token punctuation" c-id="146.4815.9.27"> （</span><span class="token punctuation" c-id="146.4817.9.28"> ｛</span> 标签<span class="token operator" c-id="146.4820.9.30"> ：</span> <span class="token string" c-id="146.4823.9.32"> 'Modal-example'</span><span class="token punctuation" c-id="146.4825.9.33"> ，</span> styleurl.<span class="token operator" c-id="146.4828.9.35"> ：</span> <span class="token string" c-id="146.4831.9.37"> “modal-example.css”</span> <span class="token punctuation" c-id="146.4834.9.39"> ｝</span><span class="token punctuation" c-id="146.4836.9.40"> ）</span> <span class="token keyword" c-id="146.4839.9.42"> 出口</span> <span class="token keyword" c-id="146.4842.9.44"> 类</span> <span class="token class-name" c-id="146.4845.9.46"> ModalExample</span> <span class="token punctuation" c-id="146.4848.9.48"> ｛</span> ＠<span class="token function" c-id="146.4851.9.50"> 元素</span><span class="token punctuation" c-id="146.4853.9.51"> （</span><span class="token punctuation" c-id="146.4855.9.52"> ）</span> 埃尔<span class="token operator" c-id="146.4858.9.54"> ：</span> <span class="token builtin" c-id="146.4861.9.56"> 任何</span><span class="token punctuation" c-id="146.4863.9.57"> ；</span> <span class="token keyword" c-id="146.4866.9.59"> 异步</span> <span class="token function" c-id="146.4869.9.61"> TheertModal.</span><span class="token punctuation" c-id="146.4871.9.62"> （</span><span class="token punctuation" c-id="146.4873.9.63"> ）</span> <span class="token punctuation" c-id="146.4876.9.65"> ｛</span> <span class="token keyword" c-id="146.4879.9.67"> Const.</span> 模态<span class="token operator" c-id="146.4882.9.69"> ＝</span> <span class="token keyword" c-id="146.4885.9.71"> 等待</span> ModalController.<span class="token punctuation" c-id="146.4888.9.73"> ．</span><span class="token function" c-id="146.4890.9.74"> 创建</span><span class="token punctuation" c-id="146.4892.9.75"> （</span><span class="token punctuation" c-id="146.4894.9.76"> ｛</span> 组件<span class="token operator" c-id="146.4897.9.78"> ：</span> <span class="token string" c-id="146.4900.9.80"> “page-modal”</span><span class="token punctuation" c-id="146.4902.9.81"> ，</span> CSSCLASS.<span class="token operator" c-id="146.4905.9.83"> ：</span> <span class="token string" c-id="146.4908.9.85"> '我的自定义班'</span><span class="token punctuation" c-id="146.4910.9.86"> ，</span> swipeToClose<span class="token operator" c-id="146.4913.9.88"> ：</span> <span class="token boolean" c-id="146.4916.9.90"> 真的</span><span class="token punctuation" c-id="146.4918.9.91"> ，</span> 呈现<span class="token operator" c-id="146.4921.9.93"> ：</span> <span class="token keyword" c-id="146.4924.9.95"> 这个</span><span class="token punctuation" c-id="146.4926.9.96"> ．</span> 埃尔<span class="token punctuation" c-id="146.4929.9.98"> ．</span><span class="token function" c-id="146.4931.9.99"> 最近的</span><span class="token punctuation" c-id="146.4933.9.100"> （</span><span class="token string" c-id="146.4935.9.101"> '离子路由器 - 出口'</span><span class="token punctuation" c-id="146.4937.9.102"> ）</span><span class="token punctuation" c-id="146.4939.9.103"> ，</span> <span class="token punctuation" c-id="146.4942.9.105"> ｝</span><span class="token punctuation" c-id="146.4944.9.106"> ）</span><span class="token punctuation" c-id="146.4946.9.107"> ；</span> <span class="token keyword" c-id="146.4949.9.109"> 等待</span> 模态<span class="token punctuation" c-id="146.4952.9.111"> ．</span><span class="token function" c-id="146.4954.9.112"> 展示</span><span class="token punctuation" c-id="146.4956.9.113"> （</span><span class="token punctuation" c-id="146.4958.9.114"> ）</span><span class="token punctuation" c-id="146.4960.9.115"> ；</span> <span class="token punctuation" c-id="146.4963.9.117"> ｝</span> <span class="token punctuation" c-id="146.4966.9.119"> ｝</span></code></pre>  <div class="code-text__copy" c-id="196.0.0.0"> <a class="code-text__copy-link" c-id="196.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="196.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="196.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="196.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <p c-id="146.4970.6.34"> 在大多数情况下，使用<code c-id="146.4972.7.1"> 离子路由器出口</code> 元素作为<code c-id="146.4975.7.3"> 呈现</code> 很好。在您在另一个模态中呈现的卡式模态的情况下，您应该通过顶级<code c-id="146.4978.7.5"> ion-modal</code> 元素作为<code c-id="146.4981.7.7"> 呈现</code> ．</p> <docs-code language="tsx" class="hydrated" c-id="146.4985.6.36" s-id="197">   <pre c-id="146.4987.7.1"><code c-id="146.4988.8.0"><span class="token keyword" c-id="146.4989.9.0"> 异步</span> <span class="token function" c-id="146.4992.9.2"> TheertModal.</span><span class="token punctuation" c-id="146.4994.9.3"> （</span><span class="token punctuation" c-id="146.4996.9.4"> ）</span> <span class="token punctuation" c-id="146.4999.9.6"> ｛</span> <span class="token keyword" c-id="146.5002.9.8"> Const.</span> 模态<span class="token operator" c-id="146.5005.9.10"> ＝</span> <span class="token keyword" c-id="146.5008.9.12"> 等待</span> ModalController.<span class="token punctuation" c-id="146.5011.9.14"> ．</span><span class="token function" c-id="146.5013.9.15"> 创建</span><span class="token punctuation" c-id="146.5015.9.16"> （</span><span class="token punctuation" c-id="146.5017.9.17"> ｛</span> 组件<span class="token operator" c-id="146.5020.9.19"> ：</span> <span class="token string" c-id="146.5023.9.21"> “page-modal”</span><span class="token punctuation" c-id="146.5025.9.22"> ，</span> CSSCLASS.<span class="token operator" c-id="146.5028.9.24"> ：</span> <span class="token string" c-id="146.5031.9.26"> '我的自定义班'</span><span class="token punctuation" c-id="146.5033.9.27"> ，</span> swipeToClose<span class="token operator" c-id="146.5036.9.29"> ：</span> <span class="token boolean" c-id="146.5039.9.31"> 真的</span><span class="token punctuation" c-id="146.5041.9.32"> ，</span> 呈现<span class="token operator" c-id="146.5044.9.34"> ：</span> <span class="token keyword" c-id="146.5047.9.36"> 等待</span> ModalController.<span class="token punctuation" c-id="146.5050.9.38"> ．</span><span class="token function" c-id="146.5052.9.39"> getTop</span><span class="token punctuation" c-id="146.5054.9.40"> （</span><span class="token punctuation" c-id="146.5056.9.41"> ）</span> <span class="token comment" c-id="146.5059.9.43"> //获取最顶层的离子模态</span> <span class="token punctuation" c-id="146.5062.9.45"> ｝</span><span class="token punctuation" c-id="146.5064.9.46"> ）</span><span class="token punctuation" c-id="146.5066.9.47"> ；</span> <span class="token keyword" c-id="146.5069.9.49"> 等待</span> 模态<span class="token punctuation" c-id="146.5072.9.51"> ．</span><span class="token function" c-id="146.5074.9.52"> 展示</span><span class="token punctuation" c-id="146.5076.9.53"> （</span><span class="token punctuation" c-id="146.5078.9.54"> ）</span><span class="token punctuation" c-id="146.5080.9.55"> ；</span> <span class="token punctuation" c-id="146.5083.9.57"> ｝</span></code></pre>  <div class="code-text__copy" c-id="197.0.0.0"> <a class="code-text__copy-link" c-id="197.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="197.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="197.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="197.5.3.0"></path> </svg> 复制</span> </div> </docs-code> </div> </docs-tab> <docs-tab role="tabpanel" class="Tabs-tab hydrated" tab="vue" c-id="146.5086.4.4" s-id="198">    <div c-id="146.5087.5.0"> <docs-code language="html" class="hydrated" c-id="146.5088.6.0" s-id="199">   <pre c-id="146.5090.7.1"><code c-id="146.5091.8.0"><span class="token tag" c-id="146.5092.9.0"><span class="token tag" c-id="146.5093.10.0"><span class="token punctuation" c-id="146.5094.11.0"> <</span> 模板</span><span class="token punctuation" c-id="146.5097.10.1"> ></span></span> <span class="token tag" c-id="146.5100.9.2"><span class="token tag" c-id="146.5101.10.0"><span class="token punctuation" c-id="146.5102.11.0"> <</span> 离子标题</span><span class="token punctuation" c-id="146.5105.10.1"> ></span></span> <span class="token tag" c-id="146.5108.9.4"><span class="token tag" c-id="146.5109.10.0"><span class="token punctuation" c-id="146.5110.11.0"> <</span> 离子工具栏</span><span class="token punctuation" c-id="146.5113.10.1"> ></span></span> <span class="token tag" c-id="146.5116.9.6"><span class="token tag" c-id="146.5117.10.0"><span class="token punctuation" c-id="146.5118.11.0"> <</span> ion-title</span><span class="token punctuation" c-id="146.5121.10.1"> ></span></span> {{标题}}<span class="token tag" c-id="146.5124.9.8"><span class="token tag" c-id="146.5125.10.0"><span class="token punctuation" c-id="146.5126.11.0"> </</span> ion-title</span><span class="token punctuation" c-id="146.5129.10.1"> ></span></span> <span class="token tag" c-id="146.5132.9.10"><span class="token tag" c-id="146.5133.10.0"><span class="token punctuation" c-id="146.5134.11.0"> </</span> 离子工具栏</span><span class="token punctuation" c-id="146.5137.10.1"> ></span></span> <span class="token tag" c-id="146.5140.9.12"><span class="token tag" c-id="146.5141.10.0"><span class="token punctuation" c-id="146.5142.11.0"> </</span> 离子标题</span><span class="token punctuation" c-id="146.5145.10.1"> ></span></span> <span class="token tag" c-id="146.5148.9.14"><span class="token tag" c-id="146.5149.10.0"><span class="token punctuation" c-id="146.5150.11.0"> <</span> 离子内容</span> <span class="token attr-name" c-id="146.5154.10.2"> 类</span><span class="token attr-value" c-id="146.5156.10.3"><span class="token punctuation" c-id="146.5157.11.0"> ＝</span><span class="token punctuation" c-id="146.5159.11.1"> ＂</span> 离子填充<span class="token punctuation" c-id="146.5162.11.3"> ＂</span></span><span class="token punctuation" c-id="146.5164.10.4"> ></span></span> {{ 内容 }}<span class="token tag" c-id="146.5167.9.16"><span class="token tag" c-id="146.5168.10.0"><span class="token punctuation" c-id="146.5169.11.0"> </</span> 离子内容</span><span class="token punctuation" c-id="146.5172.10.1"> ></span></span> <span class="token tag" c-id="146.5175.9.18"><span class="token tag" c-id="146.5176.10.0"><span class="token punctuation" c-id="146.5177.11.0"> </</span> 模板</span><span class="token punctuation" c-id="146.5180.10.1"> ></span></span> <span class="token tag" c-id="146.5183.9.20"><span class="token tag" c-id="146.5184.10.0"><span class="token punctuation" c-id="146.5185.11.0"> <</span> 脚本</span><span class="token punctuation" c-id="146.5188.10.1"> ></span></span><span class="token script" c-id="146.5190.9.21"><span class="token language-javascript" c-id="146.5191.10.0"> <span class="token keyword" c-id="146.5193.11.1"> 进口</span> <span class="token punctuation" c-id="146.5196.11.3"> ｛</span> 离子联系<span class="token punctuation" c-id="146.5199.11.5"> ，</span> IonHeader<span class="token punctuation" c-id="146.5202.11.7"> ，</span> IonTitle<span class="token punctuation" c-id="146.5205.11.9"> ，</span> Iontoolbar.<span class="token punctuation" c-id="146.5208.11.11"> ｝</span> <span class="token keyword" c-id="146.5211.11.13"> 从</span> <span class="token string" c-id="146.5214.11.15"> '@betway东盟体育app ionic / vue'</span><span class="token punctuation" c-id="146.5216.11.16"> ；</span> <span class="token keyword" c-id="146.5219.11.18"> 进口</span> <span class="token punctuation" c-id="146.5222.11.20"> ｛</span> defineComponent<span class="token punctuation" c-id="146.5225.11.22"> ｝</span> <span class="token keyword" c-id="146.5228.11.24"> 从</span> <span class="token string" c-id="146.5231.11.26"> 'vue'</span><span class="token punctuation" c-id="146.5233.11.27"> ；</span> <span class="token keyword" c-id="146.5236.11.29"> 出口</span> <span class="token keyword" c-id="146.5239.11.31"> 默认</span> <span class="token function" c-id="146.5242.11.33"> defineComponent</span><span class="token punctuation" c-id="146.5244.11.34"> （</span><span class="token punctuation" c-id="146.5246.11.35"> ｛</span> 姓名<span class="token operator" c-id="146.5249.11.37"> ：</span> <span class="token string" c-id="146.5252.11.39"> '模态'</span><span class="token punctuation" c-id="146.5254.11.40"> ，</span> 道具<span class="token operator" c-id="146.5257.11.42"> ：</span> <span class="token punctuation" c-id="146.5260.11.44"> ｛</span> 标题<span class="token operator" c-id="146.5263.11.46"> ：</span> <span class="token punctuation" c-id="146.5266.11.48"> ｛</span> 类型<span class="token operator" c-id="146.5269.11.50"> ：</span> 字符串<span class="token punctuation" c-id="146.5272.11.52"> ，</span> <span class="token keyword" c-id="146.5275.11.54"> 默认</span><span class="token operator" c-id="146.5277.11.55"> ：</span> <span class="token string" c-id="146.5280.11.57"> '超级模态'</span> <span class="token punctuation" c-id="146.5283.11.59"> ｝</span><span class="token punctuation" c-id="146.5285.11.60"> ，</span> <span class="token punctuation" c-id="146.5288.11.62"> ｝</span><span class="token punctuation" c-id="146.5290.11.63"> ，</span> <span class="token function" c-id="146.5293.11.65"> 数据</span><span class="token punctuation" c-id="146.5295.11.66"> （</span><span class="token punctuation" c-id="146.5297.11.67"> ）</span> <span class="token punctuation" c-id="146.5300.11.69"> ｛</span> <span class="token keyword" c-id="146.5303.11.71"> 返回</span> <span class="token punctuation" c-id="146.5306.11.73"> ｛</span> 内容<span class="token operator" c-id="146.5309.11.75"> ：</span> <span class="token string" c-id="146.5312.11.77"> “内容”</span><span class="token punctuation" c-id="146.5314.11.78"> ，</span> <span class="token punctuation" c-id="146.5317.11.80"> ｝</span> <span class="token punctuation" c-id="146.5320.11.82"> ｝</span><span class="token punctuation" c-id="146.5322.11.83"> ，</span> 成分<span class="token operator" c-id="146.5325.11.85"> ：</span> <span class="token punctuation" c-id="146.5328.11.87"> ｛</span> 离子联系<span class="token punctuation" c-id="146.5331.11.89"> ，</span> IonHeader<span class="token punctuation" c-id="146.5334.11.91"> ，</span> IonTitle<span class="token punctuation" c-id="146.5337.11.93"> ，</span> Iontoolbar.<span class="token punctuation" c-id="146.5340.11.95"> ｝</span> <span class="token punctuation" c-id="146.5343.11.97"> ｝</span><span class="token punctuation" c-id="146.5345.11.98"> ）</span><span class="token punctuation" c-id="146.5347.11.99"> ；</span> </span></span><span class="token tag" c-id="146.5350.9.22"><span class="token tag" c-id="146.5351.10.0"><span class="token punctuation" c-id="146.5352.11.0"> </</span> 脚本</span><span class="token punctuation" c-id="146.5355.10.1"> ></span></span></code></pre>  <div class="code-text__copy" c-id="199.0.0.0"> <a class="code-text__copy-link" c-id="199.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="199.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="199.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="199.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <docs-code language="html" class="hydrated" c-id="146.5359.6.2" s-id="200">   <pre c-id="146.5361.7.1"><code c-id="146.5362.8.0"><span class="token tag" c-id="146.5363.9.0"><span class="token tag" c-id="146.5364.10.0"><span class="token punctuation" c-id="146.5365.11.0"> <</span> 模板</span><span class="token punctuation" c-id="146.5368.10.1"> ></span></span> <span class="token tag" c-id="146.5371.9.2"><span class="token tag" c-id="146.5372.10.0"><span class="token punctuation" c-id="146.5373.11.0"> <</span> ion-page</span><span class="token punctuation" c-id="146.5376.10.1"> ></span></span> <span class="token tag" c-id="146.5379.9.4"><span class="token tag" c-id="146.5380.10.0"><span class="token punctuation" c-id="146.5381.11.0"> <</span> 离子内容</span> <span class="token attr-name" c-id="146.5385.10.2"> 类</span><span class="token attr-value" c-id="146.5387.10.3"><span class="token punctuation" c-id="146.5388.11.0"> ＝</span><span class="token punctuation" c-id="146.5390.11.1"> ＂</span> 离子填充<span class="token punctuation" c-id="146.5393.11.3"> ＂</span></span><span class="token punctuation" c-id="146.5395.10.4"> ></span></span> <span class="token tag" c-id="146.5398.9.6"><span class="token tag" c-id="146.5399.10.0"><span class="token punctuation" c-id="146.5400.11.0"> <</span> ion-button</span> <span class="token attr-name" c-id="146.5404.10.2"> @click</span><span class="token attr-value" c-id="146.5406.10.3"><span class="token punctuation" c-id="146.5407.11.0"> ＝</span><span class="token punctuation" c-id="146.5409.11.1"> ＂</span> OpenModal.<span class="token punctuation" c-id="146.5412.11.3"> ＂</span></span><span class="token punctuation" c-id="146.5414.10.4"> ></span></span> 开模态<span class="token tag" c-id="146.5417.9.8"><span class="token tag" c-id="146.5418.10.0"><span class="token punctuation" c-id="146.5419.11.0"> </</span> ion-button</span><span class="token punctuation" c-id="146.5422.10.1"> ></span></span> <span class="token tag" c-id="146.5425.9.10"><span class="token tag" c-id="146.5426.10.0"><span class="token punctuation" c-id="146.5427.11.0"> </</span> 离子内容</span><span class="token punctuation" c-id="146.5430.10.1"> ></span></span> <span class="token tag" c-id="146.5433.9.12"><span class="token tag" c-id="146.5434.10.0"><span class="token punctuation" c-id="146.5435.11.0"> </</span> ion-page</span><span class="token punctuation" c-id="146.5438.10.1"> ></span></span> <span class="token tag" c-id="146.5441.9.14"><span class="token tag" c-id="146.5442.10.0"><span class="token punctuation" c-id="146.5443.11.0"> </</span> 模板</span><span class="token punctuation" c-id="146.5446.10.1"> ></span></span> <span class="token tag" c-id="146.5449.9.16"><span class="token tag" c-id="146.5450.10.0"><span class="token punctuation" c-id="146.5451.11.0"> <</span> 脚本</span><span class="token punctuation" c-id="146.5454.10.1"> ></span></span><span class="token script" c-id="146.5456.9.17"><span class="token language-javascript" c-id="146.5457.10.0"> <span class="token keyword" c-id="146.5459.11.1"> 进口</span> <span class="token punctuation" c-id="146.5462.11.3"> ｛</span> IonButton<span class="token punctuation" c-id="146.5465.11.5"> ，</span> 离子联系<span class="token punctuation" c-id="146.5468.11.7"> ，</span> IonPage<span class="token punctuation" c-id="146.5471.11.9"> ，</span> ModalController.<span class="token punctuation" c-id="146.5474.11.11"> ｝</span> <span class="token keyword" c-id="146.5477.11.13"> 从</span> <span class="token string" c-id="146.5480.11.15"> '@betway东盟体育app ionic / vue'</span><span class="token punctuation" c-id="146.5482.11.16"> ；</span> <span class="token keyword" c-id="146.5485.11.18"> 进口</span> 莫代尔<span class="token keyword" c-id="146.5488.11.20"> 从</span> <span class="token string" c-id="146.5491.11.22"> ”。/ modal.vue '</span> <span class="token keyword" c-id="146.5494.11.24"> 出口</span> <span class="token keyword" c-id="146.5497.11.26"> 默认</span> <span class="token punctuation" c-id="146.5500.11.28"> ｛</span> 成分<span class="token operator" c-id="146.5503.11.30"> ：</span> <span class="token punctuation" c-id="146.5506.11.32"> ｛</span> IonButton<span class="token punctuation" c-id="146.5509.11.34"> ，</span> 离子联系<span class="token punctuation" c-id="146.5512.11.36"> ，</span> IonPage<span class="token punctuation" c-id="146.5515.11.38"> ｝</span><span class="token punctuation" c-id="146.5517.11.39"> ，</span> 方法<span class="token operator" c-id="146.5520.11.41"> ：</span> <span class="token punctuation" c-id="146.5523.11.43"> ｛</span> <span class="token keyword" c-id="146.5526.11.45"> 异步</span> <span class="token function" c-id="146.5529.11.47"> OpenModal.</span><span class="token punctuation" c-id="146.5531.11.48"> （</span><span class="token punctuation" c-id="146.5533.11.49"> ）</span> <span class="token punctuation" c-id="146.5536.11.51"> ｛</span> <span class="token keyword" c-id="146.5539.11.53"> Const.</span> 模态<span class="token operator" c-id="146.5542.11.55"> ＝</span> <span class="token keyword" c-id="146.5545.11.57"> 等待</span> ModalController.<span class="token punctuation" c-id="146.5548.11.59"> ．</span><span class="token function" c-id="146.5550.11.60"> 创建</span><span class="token punctuation" c-id="146.5552.11.61"> （</span><span class="token punctuation" c-id="146.5554.11.62"> ｛</span> 组件<span class="token operator" c-id="146.5557.11.64"> ：</span> 莫代尔<span class="token punctuation" c-id="146.5560.11.66"> ，</span> CSSCLASS.<span class="token operator" c-id="146.5563.11.68"> ：</span> <span class="token string" c-id="146.5566.11.70"> '我的自定义班'</span><span class="token punctuation" c-id="146.5568.11.71"> ，</span> 组成份额<span class="token operator" c-id="146.5571.11.73"> ：</span> <span class="token punctuation" c-id="146.5574.11.75"> ｛</span> 标题<span class="token operator" c-id="146.5577.11.77"> ：</span> <span class="token string" c-id="146.5580.11.79"> “新标题”</span> <span class="token punctuation" c-id="146.5583.11.81"> ｝</span><span class="token punctuation" c-id="146.5585.11.82"> ，</span> <span class="token punctuation" c-id="146.5588.11.84"> ｝</span><span class="token punctuation" c-id="146.5590.11.85"> ）</span> <span class="token keyword" c-id="146.5593.11.87"> 返回</span> 模态<span class="token punctuation" c-id="146.5596.11.89"> ．</span><span class="token function" c-id="146.5598.11.90"> 展示</span><span class="token punctuation" c-id="146.5600.11.91"> （</span><span class="token punctuation" c-id="146.5602.11.92"> ）</span><span class="token punctuation" c-id="146.5604.11.93"> ；</span> <span class="token punctuation" c-id="146.5607.11.95"> ｝</span><span class="token punctuation" c-id="146.5609.11.96"> ，</span> <span class="token punctuation" c-id="146.5612.11.98"> ｝</span><span class="token punctuation" c-id="146.5614.11.99"> ，</span> <span class="token punctuation" c-id="146.5617.11.101"> ｝</span> </span></span><span class="token tag" c-id="146.5620.9.18"><span class="token tag" c-id="146.5621.10.0"><span class="token punctuation" c-id="146.5622.11.0"> </</span> 脚本</span><span class="token punctuation" c-id="146.5625.10.1"> ></span></span></code></pre>  <div class="code-text__copy" c-id="200.0.0.0"> <a class="code-text__copy-link" c-id="200.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="200.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="200.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="200.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <p c-id="146.5629.6.4"> 开发人员还可以直接在其模板中使用此组件：</p> <docs-code language="html" class="hydrated" c-id="146.5632.6.6" s-id="201">   <pre c-id="146.5634.7.1"><code c-id="146.5635.8.0"><span class="token tag" c-id="146.5636.9.0"><span class="token tag" c-id="146.5637.10.0"><span class="token punctuation" c-id="146.5638.11.0"> <</span> 模板</span><span class="token punctuation" c-id="146.5641.10.1"> ></span></span> <span class="token tag" c-id="146.5644.9.2"><span class="token tag" c-id="146.5645.10.0"><span class="token punctuation" c-id="146.5646.11.0"> <</span> ion-button</span> <span class="token attr-name" c-id="146.5650.10.2"> @click</span><span class="token attr-value" c-id="146.5652.10.3"><span class="token punctuation" c-id="146.5653.11.0"> ＝</span><span class="token punctuation" c-id="146.5655.11.1"> ＂</span> Setopen（真实）<span class="token punctuation" c-id="146.5658.11.3"> ＂</span></span><span class="token punctuation" c-id="146.5660.10.4"> ></span></span> 显示模式<span class="token tag" c-id="146.5663.9.4"><span class="token tag" c-id="146.5664.10.0"><span class="token punctuation" c-id="146.5665.11.0"> </</span> ion-button</span><span class="token punctuation" c-id="146.5668.10.1"> ></span></span> <span class="token tag" c-id="146.5671.9.6"><span class="token tag" c-id="146.5672.10.0"><span class="token punctuation" c-id="146.5673.11.0"> <</span> ion-modal</span> <span class="token attr-name" c-id="146.5677.10.2"> ：开了</span><span class="token attr-value" c-id="146.5679.10.3"><span class="token punctuation" c-id="146.5680.11.0"> ＝</span><span class="token punctuation" c-id="146.5682.11.1"> ＂</span> isOpenRef<span class="token punctuation" c-id="146.5685.11.3"> ＂</span></span> <span class="token attr-name" c-id="146.5688.10.5"> css类</span><span class="token attr-value" c-id="146.5690.10.6"><span class="token punctuation" c-id="146.5691.11.0"> ＝</span><span class="token punctuation" c-id="146.5693.11.1"> ＂</span> my-custom-class<span class="token punctuation" c-id="146.5696.11.3"> ＂</span></span> <span class="token attr-name" c-id="146.5699.10.8"> @didDismiss</span><span class="token attr-value" c-id="146.5701.10.9"><span class="token punctuation" c-id="146.5702.11.0"> ＝</span><span class="token punctuation" c-id="146.5704.11.1"> ＂</span> setopen（false）<span class="token punctuation" c-id="146.5707.11.3"> ＂</span></span> <span class="token punctuation" c-id="146.5710.10.11"> ></span></span> <span class="token tag" c-id="146.5713.9.8"><span class="token tag" c-id="146.5714.10.0"><span class="token punctuation" c-id="146.5715.11.0"> <</span> 莫代尔</span> <span class="token attr-name" c-id="146.5719.10.2"> :数据</span><span class="token attr-value" c-id="146.5721.10.3"><span class="token punctuation" c-id="146.5722.11.0"> ＝</span><span class="token punctuation" c-id="146.5724.11.1"> ＂</span> 数据<span class="token punctuation" c-id="146.5727.11.3"> ＂</span></span><span class="token punctuation" c-id="146.5729.10.4"> ></span></span><span class="token tag" c-id="146.5731.9.9"><span class="token tag" c-id="146.5732.10.0"><span class="token punctuation" c-id="146.5733.11.0"> </</span> 莫代尔</span><span class="token punctuation" c-id="146.5736.10.1"> ></span></span> <span class="token tag" c-id="146.5739.9.11"><span class="token tag" c-id="146.5740.10.0"><span class="token punctuation" c-id="146.5741.11.0"> </</span> ion-modal</span><span class="token punctuation" c-id="146.5744.10.1"> ></span></span> <span class="token tag" c-id="146.5747.9.13"><span class="token tag" c-id="146.5748.10.0"><span class="token punctuation" c-id="146.5749.11.0"> </</span> 模板</span><span class="token punctuation" c-id="146.5752.10.1"> ></span></span> <span class="token tag" c-id="146.5755.9.15"><span class="token tag" c-id="146.5756.10.0"><span class="token punctuation" c-id="146.5757.11.0"> <</span> 脚本</span><span class="token punctuation" c-id="146.5760.10.1"> ></span></span><span class="token script" c-id="146.5762.9.16"><span class="token language-javascript" c-id="146.5763.10.0"> <span class="token keyword" c-id="146.5765.11.1"> 进口</span> <span class="token punctuation" c-id="146.5768.11.3"> ｛</span> IonModal<span class="token punctuation" c-id="146.5771.11.5"> ，</span> IonButton<span class="token punctuation" c-id="146.5774.11.7"> ｝</span> <span class="token keyword" c-id="146.5777.11.9"> 从</span> <span class="token string" c-id="146.5780.11.11"> '@betway东盟体育app ionic / vue'</span><span class="token punctuation" c-id="146.5782.11.12"> ；</span> <span class="token keyword" c-id="146.5785.11.14"> 进口</span> <span class="token punctuation" c-id="146.5788.11.16"> ｛</span> defineComponent<span class="token punctuation" c-id="146.5791.11.18"> ，</span> 裁判<span class="token punctuation" c-id="146.5794.11.20"> ｝</span> <span class="token keyword" c-id="146.5797.11.22"> 从</span> <span class="token string" c-id="146.5800.11.24"> 'vue'</span><span class="token punctuation" c-id="146.5802.11.25"> ；</span> <span class="token keyword" c-id="146.5805.11.27"> 进口</span> 莫代尔<span class="token keyword" c-id="146.5808.11.29"> 从</span> <span class="token string" c-id="146.5811.11.31"> ”。/ modal.vue '</span> <span class="token keyword" c-id="146.5814.11.33"> 出口</span> <span class="token keyword" c-id="146.5817.11.35"> 默认</span> <span class="token function" c-id="146.5820.11.37"> defineComponent</span><span class="token punctuation" c-id="146.5822.11.38"> （</span><span class="token punctuation" c-id="146.5824.11.39"> ｛</span> 成分<span class="token operator" c-id="146.5827.11.41"> ：</span> <span class="token punctuation" c-id="146.5830.11.43"> ｛</span> IonModal<span class="token punctuation" c-id="146.5833.11.45"> ，</span> IonButton<span class="token punctuation" c-id="146.5836.11.47"> ，</span> 莫代尔<span class="token punctuation" c-id="146.5839.11.49"> ｝</span><span class="token punctuation" c-id="146.5841.11.50"> ，</span> <span class="token function" c-id="146.5844.11.52"> 设置</span><span class="token punctuation" c-id="146.5846.11.53"> （</span><span class="token punctuation" c-id="146.5848.11.54"> ）</span> <span class="token punctuation" c-id="146.5851.11.56"> ｛</span> <span class="token keyword" c-id="146.5854.11.58"> Const.</span> isOpenRef<span class="token operator" c-id="146.5857.11.60"> ＝</span> <span class="token function" c-id="146.5860.11.62"> 裁判</span><span class="token punctuation" c-id="146.5862.11.63"> （</span><span class="token boolean" c-id="146.5864.11.64"> 假</span><span class="token punctuation" c-id="146.5866.11.65"> ）</span><span class="token punctuation" c-id="146.5868.11.66"> ；</span> <span class="token keyword" c-id="146.5871.11.68"> Const.</span> <span class="token function-variable function" c-id="146.5874.11.70"> setOpen</span> <span class="token operator" c-id="146.5877.11.72"> ＝</span> <span class="token punctuation" c-id="146.5880.11.74"> （</span><span class="token parameter" c-id="146.5882.11.75"> 状态<span class="token operator" c-id="146.5884.12.1"> ：</span> 布尔</span><span class="token punctuation" c-id="146.5887.11.76"> ）</span> <span class="token operator" c-id="146.5890.11.78"> ＝＞</span> isOpenRef<span class="token punctuation" c-id="146.5893.11.80"> ．</span> 价值<span class="token operator" c-id="146.5896.11.82"> ＝</span> 状态<span class="token punctuation" c-id="146.5899.11.84"> ；</span> <span class="token keyword" c-id="146.5902.11.86"> Const.</span> 数据<span class="token operator" c-id="146.5905.11.88"> ＝</span> <span class="token punctuation" c-id="146.5908.11.90"> ｛</span> 内容<span class="token operator" c-id="146.5911.11.92"> ：</span> <span class="token string" c-id="146.5914.11.94"> '新内容'</span> <span class="token punctuation" c-id="146.5917.11.96"> ｝</span><span class="token punctuation" c-id="146.5919.11.97"> ；</span> <span class="token keyword" c-id="146.5922.11.99"> 返回</span> <span class="token punctuation" c-id="146.5925.11.101"> ｛</span> isOpenRef<span class="token punctuation" c-id="146.5928.11.103"> ，</span> setOpen<span class="token punctuation" c-id="146.5931.11.105"> ，</span> 数据<span class="token punctuation" c-id="146.5934.11.107"> ｝</span> <span class="token punctuation" c-id="146.5937.11.109"> ｝</span> <span class="token punctuation" c-id="146.5940.11.111"> ｝</span><span class="token punctuation" c-id="146.5942.11.112"> ）</span><span class="token punctuation" c-id="146.5944.11.113"> ；</span> </span></span><span class="token tag" c-id="146.5947.9.17"><span class="token tag" c-id="146.5948.10.0"><span class="token punctuation" c-id="146.5949.11.0"> </</span> 脚本</span><span class="token punctuation" c-id="146.5952.10.1"> ></span></span></code></pre>  <div class="code-text__copy" c-id="201.0.0.0"> <a class="code-text__copy-link" c-id="201.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="201.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="201.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="201.5.3.0"></path> </svg> 复制</span> </div> </docs-code>  <blockquote c-id="146.5956.6.8">  <p c-id="146.5958.7.1"> 如果您在模态组件内部需要一个包装元素，我们建议使用<code c-id="146.5960.8.1"> < ion-page ></code> 这样组件的尺寸仍然可以正确计算。</p> </blockquote>  <h3 id="swipeable-modals" c-id="146.5965.6.10"> <a href="#swipeable-modals" c-id="146.5967.7.1"> 可擦拭模块</a> </h3>  <p c-id="146.5971.6.12"> iOS模式的模块具有能够以卡式呈现并刷新以关闭。卡式演示文稿和刷新到闭合手势不是互斥的，这意味着您可以选择和选择要使用的功能。例如，您可以使用无法刷新的卡式模态或可以刷新的全尺寸模态。</p> <blockquote c-id="146.5974.6.14">  <p c-id="146.5976.7.1"> 在iphone大小的设备上运行的卡片样式模态没有背景。因此，<code c-id="146.5978.8.1"> ——backdrop-opacity</code> 变量不会有任何效果。</p> </blockquote>  <docs-code language="html" class="hydrated" c-id="146.5983.6.16" s-id="202">   <pre c-id="146.5985.7.1"><code c-id="146.5986.8.0"><span class="token tag" c-id="146.5987.9.0"><span class="token tag" c-id="146.5988.10.0"><span class="token punctuation" c-id="146.5989.11.0"> <</span> 模板</span><span class="token punctuation" c-id="146.5992.10.1"> ></span></span> <span class="token tag" c-id="146.5995.9.2"><span class="token tag" c-id="146.5996.10.0"><span class="token punctuation" c-id="146.5997.11.0"> <</span> ion-page</span><span class="token punctuation" c-id="146.6000.10.1"> ></span></span> <span class="token tag" c-id="146.6003.9.4"><span class="token tag" c-id="146.6004.10.0"><span class="token punctuation" c-id="146.6005.11.0"> <</span> 离子内容</span><span class="token punctuation" c-id="146.6008.10.1"> ></span></span> <span class="token tag" c-id="146.6011.9.6"><span class="token tag" c-id="146.6012.10.0"><span class="token punctuation" c-id="146.6013.11.0"> <</span> ion-button</span> <span class="token attr-name" c-id="146.6017.10.2"> @click</span><span class="token attr-value" c-id="146.6019.10.3"><span class="token punctuation" c-id="146.6020.11.0"> ＝</span><span class="token punctuation" c-id="146.6022.11.1"> ＂</span> Setopen（真实）<span class="token punctuation" c-id="146.6025.11.3"> ＂</span></span><span class="token punctuation" c-id="146.6027.10.4"> ></span></span> 显示模式<span class="token tag" c-id="146.6030.9.8"><span class="token tag" c-id="146.6031.10.0"><span class="token punctuation" c-id="146.6032.11.0"> </</span> ion-button</span><span class="token punctuation" c-id="146.6035.10.1"> ></span></span> <span class="token tag" c-id="146.6038.9.10"><span class="token tag" c-id="146.6039.10.0"><span class="token punctuation" c-id="146.6040.11.0"> <</span> ion-modal</span> <span class="token attr-name" c-id="146.6044.10.2"> ：开了</span><span class="token attr-value" c-id="146.6046.10.3"><span class="token punctuation" c-id="146.6047.11.0"> ＝</span><span class="token punctuation" c-id="146.6049.11.1"> ＂</span> isOpenRef<span class="token punctuation" c-id="146.6052.11.3"> ＂</span></span> <span class="token attr-name" c-id="146.6055.10.5"> css类</span><span class="token attr-value" c-id="146.6057.10.6"><span class="token punctuation" c-id="146.6058.11.0"> ＝</span><span class="token punctuation" c-id="146.6060.11.1"> ＂</span> my-custom-class<span class="token punctuation" c-id="146.6063.11.3"> ＂</span></span> <span class="token attr-name" c-id="146.6066.10.8"> ：刷新关闭</span><span class="token attr-value" c-id="146.6068.10.9"><span class="token punctuation" c-id="146.6069.11.0"> ＝</span><span class="token punctuation" c-id="146.6071.11.1"> ＂</span> 真的<span class="token punctuation" c-id="146.6074.11.3"> ＂</span></span> <span class="token attr-name" c-id="146.6077.10.11"> : presenting-element</span><span class="token attr-value" c-id="146.6079.10.12"><span class="token punctuation" c-id="146.6080.11.0"> ＝</span><span class="token punctuation" c-id="146.6082.11.1"> ＂</span> $父。$ refs.ionrouteroutlet<span class="token punctuation" c-id="146.6085.11.3"> ＂</span></span> <span class="token attr-name" c-id="146.6088.10.14"> @didDismiss</span><span class="token attr-value" c-id="146.6090.10.15"><span class="token punctuation" c-id="146.6091.11.0"> ＝</span><span class="token punctuation" c-id="146.6093.11.1"> ＂</span> setopen（false）<span class="token punctuation" c-id="146.6096.11.3"> ＂</span></span> <span class="token punctuation" c-id="146.6099.10.17"> ></span></span> <span class="token tag" c-id="146.6102.9.12"><span class="token tag" c-id="146.6103.10.0"><span class="token punctuation" c-id="146.6104.11.0"> <</span> 莫代尔</span> <span class="token attr-name" c-id="146.6108.10.2"> :数据</span><span class="token attr-value" c-id="146.6110.10.3"><span class="token punctuation" c-id="146.6111.11.0"> ＝</span><span class="token punctuation" c-id="146.6113.11.1"> ＂</span> 数据<span class="token punctuation" c-id="146.6116.11.3"> ＂</span></span><span class="token punctuation" c-id="146.6118.10.4"> ></span></span><span class="token tag" c-id="146.6120.9.13"><span class="token tag" c-id="146.6121.10.0"><span class="token punctuation" c-id="146.6122.11.0"> </</span> 莫代尔</span><span class="token punctuation" c-id="146.6125.10.1"> ></span></span> <span class="token tag" c-id="146.6128.9.15"><span class="token tag" c-id="146.6129.10.0"><span class="token punctuation" c-id="146.6130.11.0"> </</span> ion-modal</span><span class="token punctuation" c-id="146.6133.10.1"> ></span></span> <span class="token tag" c-id="146.6136.9.17"><span class="token tag" c-id="146.6137.10.0"><span class="token punctuation" c-id="146.6138.11.0"> </</span> 离子内容</span><span class="token punctuation" c-id="146.6141.10.1"> ></span></span> <span class="token tag" c-id="146.6144.9.19"><span class="token tag" c-id="146.6145.10.0"><span class="token punctuation" c-id="146.6146.11.0"> </</span> ion-page</span><span class="token punctuation" c-id="146.6149.10.1"> ></span></span> <span class="token tag" c-id="146.6152.9.21"><span class="token tag" c-id="146.6153.10.0"><span class="token punctuation" c-id="146.6154.11.0"> </</span> 模板</span><span class="token punctuation" c-id="146.6157.10.1"> ></span></span> <span class="token tag" c-id="146.6160.9.23"><span class="token tag" c-id="146.6161.10.0"><span class="token punctuation" c-id="146.6162.11.0"> <</span> 脚本</span> <span class="token attr-name" c-id="146.6166.10.2"> l</span><span class="token attr-value" c-id="146.6168.10.3"><span class="token punctuation" c-id="146.6169.11.0"> ＝</span><span class="token punctuation" c-id="146.6171.11.1"> ＂</span> TS.<span class="token punctuation" c-id="146.6174.11.3"> ＂</span></span><span class="token punctuation" c-id="146.6176.10.4"> ></span></span><span class="token script" c-id="146.6178.9.24"><span class="token language-javascript" c-id="146.6179.10.0"> <span class="token keyword" c-id="146.6181.11.1"> 进口</span> <span class="token punctuation" c-id="146.6184.11.3"> ｛</span> IonModal<span class="token punctuation" c-id="146.6187.11.5"> ，</span> IonButton<span class="token punctuation" c-id="146.6190.11.7"> ，</span> 离子联系<span class="token punctuation" c-id="146.6193.11.9"> ，</span> IonPage<span class="token punctuation" c-id="146.6196.11.11"> ｝</span> <span class="token keyword" c-id="146.6199.11.13"> 从</span> <span class="token string" c-id="146.6202.11.15"> '@betway东盟体育app ionic / vue'</span><span class="token punctuation" c-id="146.6204.11.16"> ；</span> <span class="token keyword" c-id="146.6207.11.18"> 进口</span> <span class="token punctuation" c-id="146.6210.11.20"> ｛</span> defineComponent<span class="token punctuation" c-id="146.6213.11.22"> ，</span> 裁判<span class="token punctuation" c-id="146.6216.11.24"> ｝</span> <span class="token keyword" c-id="146.6219.11.26"> 从</span> <span class="token string" c-id="146.6222.11.28"> 'vue'</span><span class="token punctuation" c-id="146.6224.11.29"> ；</span> <span class="token keyword" c-id="146.6227.11.31"> 进口</span> 莫代尔<span class="token keyword" c-id="146.6230.11.33"> 从</span> <span class="token string" c-id="146.6233.11.35"> ”。/ modal.vue '</span> <span class="token keyword" c-id="146.6236.11.37"> 出口</span> <span class="token keyword" c-id="146.6239.11.39"> 默认</span> <span class="token function" c-id="146.6242.11.41"> defineComponent</span><span class="token punctuation" c-id="146.6244.11.42"> （</span><span class="token punctuation" c-id="146.6246.11.43"> ｛</span> 成分<span class="token operator" c-id="146.6249.11.45"> ：</span> <span class="token punctuation" c-id="146.6252.11.47"> ｛</span> IonModal<span class="token punctuation" c-id="146.6255.11.49"> ，</span> IonButton<span class="token punctuation" c-id="146.6258.11.51"> ，</span> 莫代尔<span class="token punctuation" c-id="146.6261.11.53"> ，</span> 离子联系<span class="token punctuation" c-id="146.6264.11.55"> ，</span> IonPage<span class="token punctuation" c-id="146.6267.11.57"> ｝</span><span class="token punctuation" c-id="146.6269.11.58"> ，</span> <span class="token function" c-id="146.6272.11.60"> 设置</span><span class="token punctuation" c-id="146.6274.11.61"> （</span><span class="token punctuation" c-id="146.6276.11.62"> ）</span> <span class="token punctuation" c-id="146.6279.11.64"> ｛</span> <span class="token keyword" c-id="146.6282.11.66"> Const.</span> isOpenRef<span class="token operator" c-id="146.6285.11.68"> ＝</span> <span class="token function" c-id="146.6288.11.70"> 裁判</span><span class="token punctuation" c-id="146.6290.11.71"> （</span><span class="token boolean" c-id="146.6292.11.72"> 假</span><span class="token punctuation" c-id="146.6294.11.73"> ）</span><span class="token punctuation" c-id="146.6296.11.74"> ；</span> <span class="token keyword" c-id="146.6299.11.76"> Const.</span> <span class="token function-variable function" c-id="146.6302.11.78"> setOpen</span> <span class="token operator" c-id="146.6305.11.80"> ＝</span> <span class="token punctuation" c-id="146.6308.11.82"> （</span><span class="token parameter" c-id="146.6310.11.83"> 状态<span class="token operator" c-id="146.6312.12.1"> ：</span> 布尔</span><span class="token punctuation" c-id="146.6315.11.84"> ）</span> <span class="token operator" c-id="146.6318.11.86"> ＝＞</span> isOpenRef<span class="token punctuation" c-id="146.6321.11.88"> ．</span> 价值<span class="token operator" c-id="146.6324.11.90"> ＝</span> 状态<span class="token punctuation" c-id="146.6327.11.92"> ；</span> <span class="token keyword" c-id="146.6330.11.94"> Const.</span> 数据<span class="token operator" c-id="146.6333.11.96"> ＝</span> <span class="token punctuation" c-id="146.6336.11.98"> ｛</span> 内容<span class="token operator" c-id="146.6339.11.100"> ：</span> <span class="token string" c-id="146.6342.11.102"> '新内容'</span> <span class="token punctuation" c-id="146.6345.11.104"> ｝</span><span class="token punctuation" c-id="146.6347.11.105"> ；</span> <span class="token keyword" c-id="146.6350.11.107"> 返回</span> <span class="token punctuation" c-id="146.6353.11.109"> ｛</span> isOpenRef<span class="token punctuation" c-id="146.6356.11.111"> ，</span> setOpen<span class="token punctuation" c-id="146.6359.11.113"> ，</span> 数据<span class="token punctuation" c-id="146.6362.11.115"> ｝</span> <span class="token punctuation" c-id="146.6365.11.117"> ｝</span> <span class="token punctuation" c-id="146.6368.11.119"> ｝</span><span class="token punctuation" c-id="146.6370.11.120"> ）</span><span class="token punctuation" c-id="146.6372.11.121"> ；</span> </span></span><span class="token tag" c-id="146.6375.9.25"><span class="token tag" c-id="146.6376.10.0"><span class="token punctuation" c-id="146.6377.11.0"> </</span> 脚本</span><span class="token punctuation" c-id="146.6380.10.1"> ></span></span></code></pre>  <div class="code-text__copy" c-id="202.0.0.0"> <a class="code-text__copy-link" c-id="202.1.1.0"> 复制</a> <span class="code-text__copy-confirmation" c-id="202.3.1.1"> <svg viewbox="0 0 512 512" height="26px" width="26px" c-id="202.4.2.0"> <path d="M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" c-id="202.5.3.0"></path> </svg> 复制</span> </div> </docs-code> </div> </docs-tab> </docs-tabs> </section> <section c-id="146.6383.2.5"> <h2 id="properties" c-id="146.6384.3.0"><a href="#properties" c-id="146.6385.4.0"> 特性</a></h2> <docs-reference class="hydrated" c-id="146.6387.3.1" s-id="203">  <table c-id="203.0.0.0"> <thead c-id="203.1.1.0"> <tr c-id="203.2.2.0"> <th colspan="2" c-id="203.3.3.0"><h3 c-id="203.4.4.0"> 动画</h3></th> </tr> </thead> <tbody c-id="203.6.1.1"> <tr c-id="203.7.2.0"> <th c-id="203.8.3.0"> 描述</th> <td c-id="203.10.3.1"> <div c-id="203.11.4.0"> <p>如果<code>真的</code>，模态将会动画。</p></div></td> </tr> <tr c-id="203.12.2.1"> <th c-id="203.13.3.0"> 属性</th> <td c-id="203.15.3.1"><code c-id="203.16.4.0"> 动画</code></td> </tr> <tr c-id="203.18.2.2"> <th c-id="203.19.3.0"> 类型</th> <td c-id="203.21.3.1"><code c-id="203.22.4.0"> 布尔</code></td> </tr> <tr c-id="203.24.2.3"> <th c-id="203.25.3.0"> 默认的</th> <td c-id="203.27.3.1"><code c-id="203.28.4.0"> 真的</code></td> </tr> </tbody> <thead c-id="203.30.1.2"> <tr c-id="203.31.2.0"> <th colspan="2" c-id="203.32.3.0"><h3 c-id="203.33.4.0"> backdropDismiss</h3></th> </tr> </thead> <tbody c-id="203.35.1.3"> <tr c-id="203.36.2.0"> <th c-id="203.37.3.0"> 描述</th> <td c-id="203.39.3.1"> <div c-id="203.40.4.0"> <p>如果<code>真的</code>，当点击背景时，该模式将被取消。</p></div></td> </tr> <tr c-id="203.41.2.1"> <th c-id="203.42.3.0"> 属性</th> <td c-id="203.44.3.1"><code c-id="203.45.4.0"> 背面解雇</code></td> </tr> <tr c-id="203.47.2.2"> <th c-id="203.48.3.0"> 类型</th> <td c-id="203.50.3.1"><code c-id="203.51.4.0"> 布尔</code></td> </tr> <tr c-id="203.53.2.3"> <th c-id="203.54.3.0"> 默认的</th> <td c-id="203.56.3.1"><code c-id="203.57.4.0"> 真的</code></td> </tr> </tbody> <thead c-id="203.59.1.4"> <tr c-id="203.60.2.0"> <th colspan="2" c-id="203.61.3.0"><h3 c-id="203.62.4.0"> 组件</h3></th> </tr> </thead> <tbody c-id="203.64.1.5"> <tr c-id="203.65.2.0"> <th c-id="203.66.3.0"> 描述</th> <td c-id="203.68.3.1"> <div c-id="203.69.4.0"> <p>要显示在模态内部的组件。</p></div></td> </tr> <tr c-id="203.70.2.1"> <th c-id="203.71.3.0"> 属性</th> <td c-id="203.73.3.1"><code c-id="203.74.4.0"> 组件</code></td> </tr> <tr c-id="203.76.2.2"> <th c-id="203.77.3.0"> 类型</th> <td c-id="203.79.3.1"><code c-id="203.80.4.0"> 功能|htmlelement |null |细绳</code></td> </tr> </tbody> <thead c-id="203.82.1.6"> <tr c-id="203.83.2.0"> <th colspan="2" c-id="203.84.3.0"><h3 c-id="203.85.4.0"> 组成份额</h3></th> </tr> </thead> <tbody c-id="203.87.1.7"> <tr c-id="203.88.2.0"> <th c-id="203.89.3.0"> 描述</th> <td c-id="203.91.3.1"> <div c-id="203.92.4.0"> <p>要传递给模态组件的数据。</p></div></td> </tr> <tr c-id="203.93.2.1"> <th c-id="203.94.3.0"> 类型</th> <td c-id="203.96.3.1"><code c-id="203.97.4.0"> Undefined | {[key: string]:任意;｝</code></td> </tr> </tbody> <thead c-id="203.99.1.8"> <tr c-id="203.100.2.0"> <th colspan="2" c-id="203.101.3.0"><h3 c-id="203.102.4.0"> CSSCLASS.</h3></th> </tr> </thead> <tbody c-id="203.104.1.9"> <tr c-id="203.105.2.0"> <th c-id="203.106.3.0"> 描述</th> <td c-id="203.108.3.1"> <div c-id="203.109.4.0"> <p>申请自定义CSS的其他类。如果提供多个类，则应通过空格分隔。</p></div></td> </tr> <tr c-id="203.110.2.1"> <th c-id="203.111.3.0"> 属性</th> <td c-id="203.113.3.1"><code c-id="203.114.4.0"> css类</code></td> </tr> <tr c-id="203.116.2.2"> <th c-id="203.117.3.0"> 类型</th> <td c-id="203.119.3.1"><code c-id="203.120.4.0"> 字符串|字符串[] |不明确的</code></td> </tr> </tbody> <thead c-id="203.122.1.10"> <tr c-id="203.123.2.0"> <th colspan="2" c-id="203.124.3.0"><h3 c-id="203.125.4.0"> 肠炎</h3></th> </tr> </thead> <tbody c-id="203.127.1.11"> <tr c-id="203.128.2.0"> <th c-id="203.129.3.0"> 描述</th> <td c-id="203.131.3.1"> <div c-id="203.132.4.0"> <p>显示模态时使用的动画。</p></div></td> </tr> <tr c-id="203.133.2.1"> <th c-id="203.134.3.0"> 类型</th> <td c-id="203.136.3.1"><code c-id="203.137.4.0"> ((baseEl:任何,选择?：任何）＝＞Animation) | undefined</code></td> </tr> </tbody> <thead c-id="203.139.1.12"> <tr c-id="203.140.2.0"> <th colspan="2" c-id="203.141.3.0"><h3 c-id="203.142.4.0"> htmlAttributes</h3></th> </tr> </thead> <tbody c-id="203.144.1.13"> <tr c-id="203.145.2.0"> <th c-id="203.146.3.0"> 描述</th> <td c-id="203.148.3.1"> <div c-id="203.149.4.0"> <p>要传递给模态的其他属性。</p></div></td> </tr> <tr c-id="203.150.2.1"> <th c-id="203.151.3.0"> 类型</th> <td c-id="203.153.3.1"><code c-id="203.154.4.0"> ModalAttributes |未定义</code></td> </tr> </tbody> <thead c-id="203.156.1.14"> <tr c-id="203.157.2.0"> <th colspan="2" c-id="203.158.3.0"><h3 c-id="203.159.4.0"> keyboardClose</h3></th> </tr> </thead> <tbody c-id="203.161.1.15"> <tr c-id="203.162.2.0"> <th c-id="203.163.3.0"> 描述</th> <td c-id="203.165.3.1"> <div c-id="203.166.4.0"> <p>如果<code>真的</code>，键盘将在呈现叠加时自动拒收。</p></div></td> </tr> <tr c-id="203.167.2.1"> <th c-id="203.168.3.0"> 属性</th> <td c-id="203.170.3.1"><code c-id="203.171.4.0"> keyboard-close</code></td> </tr> <tr c-id="203.173.2.2"> <th c-id="203.174.3.0"> 类型</th> <td c-id="203.176.3.1"><code c-id="203.177.4.0"> 布尔</code></td> </tr> <tr c-id="203.179.2.3"> <th c-id="203.180.3.0"> 默认的</th> <td c-id="203.182.3.1"><code c-id="203.183.4.0"> 真的</code></td> </tr> </tbody> <thead c-id="203.185.1.16"> <tr c-id="203.186.2.0"> <th colspan="2" c-id="203.187.3.0"><h3 c-id="203.188.4.0"> leaveAnimation</h3></th> </tr> </thead> <tbody c-id="203.190.1.17"> <tr c-id="203.191.2.0"> <th c-id="203.192.3.0"> 描述</th> <td c-id="203.194.3.1"> <div c-id="203.195.4.0"> <p>当模态被解雇时使用动画。</p></div></td> </tr> <tr c-id="203.196.2.1"> <th c-id="203.197.3.0"> 类型</th> <td c-id="203.199.3.1"><code c-id="203.200.4.0"> ((baseEl:任何,选择?：任何）＝＞Animation) | undefined</code></td> </tr> </tbody> <thead c-id="203.202.1.18"> <tr c-id="203.203.2.0"> <th colspan="2" c-id="203.204.3.0"><h3 c-id="203.205.4.0"> 模式</h3></th> </tr> </thead> <tbody c-id="203.207.1.19"> <tr c-id="203.208.2.0"> <th c-id="203.209.3.0"> 描述</th> <td c-id="203.211.3.1"> <div c-id="203.212.4.0"> <p>该模式确定要使用的平台样式。</p></div></td> </tr> <tr c-id="203.213.2.1"> <th c-id="203.214.3.0"> 属性</th> <td c-id="203.216.3.1"><code c-id="203.217.4.0"> 模式</code></td> </tr> <tr c-id="203.219.2.2"> <th c-id="203.220.3.0"> 类型</th> <td c-id="203.222.3.1"><code c-id="203.223.4.0"> “ios”|“MD”</code></td> </tr> </tbody> <thead c-id="203.225.1.20"> <tr c-id="203.226.2.0"> <th colspan="2" c-id="203.227.3.0"><h3 c-id="203.228.4.0"> 呈现</h3></th> </tr> </thead> <tbody c-id="203.230.1.21"> <tr c-id="203.231.2.0"> <th c-id="203.232.3.0"> 描述</th> <td c-id="203.234.3.1"> <div c-id="203.235.4.0"> <p>表示模态的元素。这用于卡片显示效果，并将多个模态叠加在一起。仅适用于iOS模式。</p></div></td> </tr> <tr c-id="203.236.2.1"> <th c-id="203.237.3.0"> 类型</th> <td c-id="203.239.3.1"><code c-id="203.240.4.0"> HTMLElement |未定义</code></td> </tr> </tbody> <thead c-id="203.242.1.22"> <tr c-id="203.243.2.0"> <th colspan="2" c-id="203.244.3.0"><h3 c-id="203.245.4.0"> ShowBackDrop.</h3></th> </tr> </thead> <tbody c-id="203.247.1.23"> <tr c-id="203.248.2.0"> <th c-id="203.249.3.0"> 描述</th> <td c-id="203.251.3.1"> <div c-id="203.252.4.0"> <p>如果<code>真的</code>时，一个背景将显示在模态后面。</p></div></td> </tr> <tr c-id="203.253.2.1"> <th c-id="203.254.3.0"> 属性</th> <td c-id="203.256.3.1"><code c-id="203.257.4.0"> 展示背景</code></td> </tr> <tr c-id="203.259.2.2"> <th c-id="203.260.3.0"> 类型</th> <td c-id="203.262.3.1"><code c-id="203.263.4.0"> 布尔</code></td> </tr> <tr c-id="203.265.2.3"> <th c-id="203.266.3.0"> 默认的</th> <td c-id="203.268.3.1"><code c-id="203.269.4.0"> 真的</code></td> </tr> </tbody> <thead c-id="203.271.1.24"> <tr c-id="203.272.2.0"> <th colspan="2" c-id="203.273.3.0"><h3 c-id="203.274.4.0"> swipeToClose</h3></th> </tr> </thead> <tbody c-id="203.276.1.25"> <tr c-id="203.277.2.0"> <th c-id="203.278.3.0"> 描述</th> <td c-id="203.280.3.1"> <div c-id="203.281.4.0"> <p>如果<code>真的</code>时，该模式可滑动取消。仅适用于iOS模式。</p></div></td> </tr> <tr c-id="203.282.2.1"> <th c-id="203.283.3.0"> 属性</th> <td c-id="203.285.3.1"><code c-id="203.286.4.0"> swipe-to-close</code></td> </tr> <tr c-id="203.288.2.2"> <th c-id="203.289.3.0"> 类型</th> <td c-id="203.291.3.1"><code c-id="203.292.4.0"> 布尔</code></td> </tr> <tr c-id="203.294.2.3"> <th c-id="203.295.3.0"> 默认的</th> <td c-id="203.297.3.1"><code c-id="203.298.4.0"> 假</code></td> </tr> </tbody> </table> </docs-reference> </section> <section c-id="146.6388.2.6"> <h2 id="events" c-id="146.6389.3.0"><a href="#events" c-id="146.6390.4.0"> 事件</a></h2> <table c-id="146.6392.3.1"> <thead c-id="146.6393.4.0"> <tr c-id="146.6394.5.0"> <th c-id="146.6395.6.0"> 姓名</th> <th c-id="146.6397.6.1"> 描述</th> </tr> </thead> <tbody c-id="146.6399.4.1"> <tr c-id="146.6400.5.0"> <td c-id="146.6401.6.0"><code c-id="146.6402.7.0"> Ionmodaldiddismiss</code></td> <td c-id="146.6404.6.1"> 在莫代尔解雇后发出。</td> </tr> <tr c-id="146.6406.5.1"> <td c-id="146.6407.6.0"><code c-id="146.6408.7.0"> Ionmodaldidpresent</code></td> <td c-id="146.6410.6.1"> 在模态出现后触发。</td> </tr> <tr c-id="146.6412.5.2"> <td c-id="146.6413.6.0"><code c-id="146.6414.7.0"> ionModalWillDismiss</code></td> <td c-id="146.6416.6.1"> 在模态解散之前发出。</td> </tr> <tr c-id="146.6418.5.3"> <td c-id="146.6419.6.0"><code c-id="146.6420.7.0"> ionModalWillPresent</code></td> <td c-id="146.6422.6.1"> 在模态提出之前发出。</td> </tr> </tbody> </table> </section> <section c-id="146.6424.2.7"> <h2 id="methods" c-id="146.6425.3.0"><a href="#methods" c-id="146.6426.4.0"> 方法</a></h2> <docs-reference class="hydrated" c-id="146.6428.3.1" s-id="204">  <table c-id="204.0.0.0"> <thead c-id="204.1.1.0"> <tr c-id="204.2.2.0"> <th colspan="2" c-id="204.3.3.0"><h3 c-id="204.4.4.0"> 驳回</h3></th> </tr> </thead> <tbody c-id="204.6.1.1"> <tr c-id="204.7.2.0"> <th c-id="204.8.3.0"> 描述</th> <td c-id="204.10.3.1"> <div c-id="204.11.4.0"> <p>取消模态覆盖后，它已经被提出。</p></div></td> </tr> <tr c-id="204.12.2.1"> <th c-id="204.13.3.0"> 签名</th> <td c-id="204.15.3.1"><code c-id="204.16.4.0"> 解雇（数据？：任何，角色？：String |未定义）=> promise <boolean></code></td> </tr> </tbody> <thead c-id="204.18.1.2"> <tr c-id="204.19.2.0"> <th colspan="2" c-id="204.20.3.0"><h3 c-id="204.21.4.0"> ondiddismiss.</h3></th> </tr> </thead> <tbody c-id="204.23.1.3"> <tr c-id="204.24.2.0"> <th c-id="204.25.3.0"> 描述</th> <td c-id="204.27.3.1"> <div c-id="204.28.4.0"> <p>返回一个承诺，该承诺在模态被解散时解析。</p></div></td> </tr> <tr c-id="204.29.2.1"> <th c-id="204.30.3.0"> 签名</th> <td c-id="204.32.3.1"><code c-id="204.33.4.0"> ondiddismiss <t =任何>（）=> promise <reploadayeventdetail <t >></code></td> </tr> </tbody> <thead c-id="204.35.1.4"> <tr c-id="204.36.2.0"> <th colspan="2" c-id="204.37.3.0"><h3 c-id="204.38.4.0"> onWillDismiss</h3></th> </tr> </thead> <tbody c-id="204.40.1.5"> <tr c-id="204.41.2.0"> <th c-id="204.42.3.0"> 描述</th> <td c-id="204.44.3.1"> <div c-id="204.45.4.0"> <p>返回一个承诺，该承诺将在模态关闭时解析。</p></div></td> </tr> <tr c-id="204.46.2.1"> <th c-id="204.47.3.0"> 签名</th> <td c-id="204.49.3.1"><code c-id="204.50.4.0"> onwilldismiss <t = any>（）=> promise <reploadayeventdetail <t >></code></td> </tr> </tbody> <thead c-id="204.52.1.6"> <tr c-id="204.53.2.0"> <th colspan="2" c-id="204.54.3.0"><h3 c-id="204.55.4.0"> 展示</h3></th> </tr> </thead> <tbody c-id="204.57.1.7"> <tr c-id="204.58.2.0"> <th c-id="204.59.3.0"> 描述</th> <td c-id="204.61.3.1"> <div c-id="204.62.4.0"> <p>在创建后呈现模态叠加。</p></div></td> </tr> <tr c-id="204.63.2.1"> <th c-id="204.64.3.0"> 签名</th> <td c-id="204.66.3.1"><code c-id="204.67.4.0"> 呈现（）=>承诺<void></code></td> </tr> </tbody> </table> </docs-reference> </section> <section c-id="146.6429.2.8"> <h2 id="css-custom-properties" c-id="146.6430.3.0"><a href="#css-custom-properties" c-id="146.6431.4.0"> CSS自定义属性</a></h2> <table c-id="146.6433.3.1"> <thead c-id="146.6434.4.0"> <tr c-id="146.6435.5.0"> <th c-id="146.6436.6.0"> 姓名</th> <th c-id="146.6438.6.1"> 描述</th> </tr> </thead> <tbody c-id="146.6440.4.1"> <tr c-id="146.6441.5.0"> <td c-id="146.6442.6.0"><code c-id="146.6443.7.0"> ——backdrop-opacity</code></td> <td c-id="146.6445.6.1"> 背景的不透明度</td> </tr> <tr c-id="146.6447.5.1"> <td c-id="146.6448.6.0"><code c-id="146.6449.7.0"> - 背景</code></td> <td c-id="146.6451.6.1"> 模态内容的背景</td> </tr> <tr c-id="146.6453.5.2"> <td c-id="146.6454.6.0"><code c-id="146.6455.7.0"> - 边框颜色</code></td> <td c-id="146.6457.6.1"> 模态内容的边框颜色</td> </tr> <tr c-id="146.6459.5.3"> <td c-id="146.6460.6.0"><code c-id="146.6461.7.0"> ——这个特性</code></td> <td c-id="146.6463.6.1"> 模态内容的边界半径</td> </tr> <tr c-id="146.6465.5.4"> <td c-id="146.6466.6.0"><code c-id="146.6467.7.0"> ——边框样式</code></td> <td c-id="146.6469.6.1"> 模态内容的边框样式</td> </tr> <tr c-id="146.6471.5.5"> <td c-id="146.6472.6.0"><code c-id="146.6473.7.0"> ——边框宽度</code></td> <td c-id="146.6475.6.1"> 模态内容的边框宽度</td> </tr> <tr c-id="146.6477.5.6"> <td c-id="146.6478.6.0"><code c-id="146.6479.7.0"> ——高度</code></td> <td c-id="146.6481.6.1"> 莫代尔的高度</td> </tr> <tr c-id="146.6483.5.7"> <td c-id="146.6484.6.0"><code c-id="146.6485.7.0"> ——max-height</code></td> <td c-id="146.6487.6.1"> 模态的最大高度</td> </tr> <tr c-id="146.6489.5.8"> <td c-id="146.6490.6.0"><code c-id="146.6491.7.0"> ——max-width</code></td> <td c-id="146.6493.6.1"> 模态的最大宽度</td> </tr> <tr c-id="146.6495.5.9"> <td c-id="146.6496.6.0"><code c-id="146.6497.7.0"> - 米高</code></td> <td c-id="146.6499.6.1"> 模态的最小高度</td> </tr> <tr c-id="146.6501.5.10"> <td c-id="146.6502.6.0"><code c-id="146.6503.7.0"> ——min-width</code></td> <td c-id="146.6505.6.1"> 模态的最小宽度</td> </tr> <tr c-id="146.6507.5.11"> <td c-id="146.6508.6.0"><code c-id="146.6509.7.0"> ——宽度</code></td> <td c-id="146.6511.6.1"> 模态的宽度</td> </tr> </tbody> </table> </section> </article> </main> <docs-demo class="hydrated" c-id="146.6513.0.1" s-id="205">  <div class="docs-demo-mode-toggle" c-id="205.0.0.0"> <button class="is-selected" title="Toggle iOS mode" c-id="205.1.1.0"> iOS</button> <button title="Toggle Android mode" c-id="205.3.1.1"> 安卓</button> </div> <div class="docs-demo-device ios" c-id="205.5.0.1"> <figure c-id="205.6.1.0"> <svg class="docs-demo-device__md-bar" viewbox="0 0 1384.3 40.3" c-id="205.7.2.0"> <path class="st0" d="M1343 5l18.8 32.3c.8 1.3 2.7 1.3 3.5 0L1384 5c.8-1.3-.2-3-1.7-3h-37.6c-1.5 0-2.5 1.7-1.7 3z" c-id="205.8.3.0"></path> <circle class="st0" cx="1299" cy="20.2" r="20" c-id="205.9.3.1"></circle> <path class="st0" d="M1213 1.2h30c2.2 0 4 1.8 4 4v30c0 2.2-1.8 4-4 4h-30c-2.2 0-4-1.8-4-4v-30c0-2.3 1.8-4 4-4zM16 4.2h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H16c-8.8 0-16-7.2-16-16s7.2-16 16-16z" c-id="205.10.3.2"></path> </svg> <svg class="docs-demo-device__ios-notch" viewbox="0 0 219 31" c-id="205.11.2.1"> <path d="M0 1V0h219v1a5 5 0 0 0-5 5v3c0 12.15-9.85 22-22 22H27C14.85 31 5 21.15 5 9V6a5 5 0 0 0-5-5z" fill-rule="evenodd" c-id="205.12.3.0"></path> </svg> <iframe loading="lazy" importance="low" src="//www.jesscamp.com/docs/demos/api/modal/index.html?ionic:mode=ios" c-id="205.13.2.2"></iframe> </figure> </div> <a href="https://github.com/ionic-team/ionic-docs/tree/legacy/src/demos/api/modal/index.html" class="docs-demo-source" target="_blank" title="查看来源＂c-id="205.14.0.2"> <ion-icon class="sc-ion-icon-h md hydrated" role="img" aria-label="open" name="open" c-id="205.15.1.0" s-id="206">  <div class="icon-inner sc-ion-icon" c-id="206.0.0.0"></div> </ion-icon> 查看来源</a> </docs-demo> </docs-page> </stencil-route> </stencil-router> </docs-root> <div style="text-align:center;margin-bottom:5px;"><form action="http://www.baidu.com/baidu" target="_blank"><div bgcolor="#FFFFFF" style="text-align:center;"><input name="tn" type="hidden" value="baidu"><a href="http://www.baidu.com/"><img src="http://img.baidu.com/img/logo-80px.gif" width="80px" height="29px" alt="Baidu" align="bottom" border="0"></a><input type="text" name="word" size="30" placeholder="" value=""><input type="submit" value="百度搜索"></div></form></div><div id="so360" style="text-align:center;margin-bottom:5px;"><form action="https://www.so.com/" target="_blank" id="so360form"><img src="http://p1.qhimg.com/d/_onebox/search.png" width="100px" height="25px"> <input type="text" autocomplete="off" name="q" id="so360_keyword" placeholder="" value=""> <input type="submit" id="so360_submit" value="360搜索"> <input type="hidden" name="ie" value="gbk"><input type="hidden" name="src" value="zz"> <input type="hidden" name="site" value="so.com"> <input type="hidden" name="rg" value="1"></form></div><div id="sogou" style="text-align:center;margin-bottom:5px;"><form action="https://www.sogou.com/" target="_blank" id="so360form"><img src="https://www.sogou.com/web/index/images/logo_440x140.v.4.png" width="100px" height="25px"> <input type="text" autocomplete="off" name="q" id="sogou.com_keyword" placeholder="" value=""> <input type="submit" id="sogou_submit" value="搜狗"> <input type="hidden" name="ie" value="gbk"><input type="hidden" name="src" value="zz"> <input type="hidden" name="site" value="so.com"> <input type="hidden" name="rg" value="1"></form></div></body> </html>