From 346993156bd849f0c626c74566cf02963d0a5512 Mon Sep 17 00:00:00 2001 From: jaredcbaum <61951482+jaredcbaum@users.noreply.github.com> Date: Tue, 7 Dec 2021 10:11:13 -0600 Subject: [PATCH] Feat/docs update (#2108) * init commit * feat(): Custom navbar type working * feat(): Theme switch styled, other small changes * feat(): Added docs demo, centered content * chore(): Remove duplicate styles, etc * chore(navbar): styled icons * fix(): Get search bar to show up * chore(): style toc, markdown width styles, encap pill styles * chore(): Get rid of local theme * chore(styles): Break out style to component partials * chore(): remove docusaurus-theme for now * chore(navbar): Style search * chore(): Style back to top button and sidebar * chore(navbar): spacing * chore(sidebar): Styles * chore(navbar): Styles * fix(api): Link code tabs * chore(sidebar): Styles, mostly spacing * chore(): sidebar/navbar styles * chore(): Navbar/sidebar styles * chore(): Delete legacy files * feat(): Add option to style pages * chore(): Move page styles to components * chore(config): Abstract base url to var * chore(): New Logos * chore(): Delete old logos * chore(meta): Prefer head over frontmatter * chore(meta): Prefer head over frontmatter v2 * chore(): Updated release notes * fix(api): Inline TOC * feat(): Resizable container width from md * chore(navbar): Style navbar-sidebar * chore(): Edit url in TOC and more styles * chore(): Restructure theming components directory * fix(LayeredColorsSelect): Regular Select Box * feat(): Done with NewColorGenerator * chore(): Themed styles for theming components * chore(): Done with input abstraction * chore(): CodeColor API find and replace * chore(): Stepped Color Generator done * chore(): Finished ColorGenerator component * fix(code tabs): GroupIds and v5 docs changes * chore(): Style table of contents * chore(toc): font size * chore(navbar): styles * chore(navbar): style fixes * chore(): styles * chore(): styles * chore(): Warning on swizzle styles, prettierignore * chore(): Small fixes * chore(api list): Make multi version compatible * chore(): Folder structure, pare down theme and separate to components * chore(): Better names for page styles and components * chore(gitignore): No longer worry about src/pages * chore(): Remove src/assets * chore(): contributing.md update * chore(): Delete legacy stencil components and legacy styles * chore(): Remove legacy stencil components pt 2 * chore(): Clean up package.json and unneeded packages * chore(): Remove nojekyll * chore(): Typings * chore(): readme update * chore(): Add back crowdin * chore(): READMES * fix(tsconfig): Don't pass compilerOptions * chore(): Fix docs demo layout * fix(api): encapsulation pill filtering * chore(): Small styles fixes * chore(): mobile style container fix * fix(api script): Better admonition detection * chore(): Better docs demo placement * chore(): Update version dropdown * feat(): Prettier config * chore(): Prettier format all * chore(): Update image paths * chore(): Update styles README * chore(): Ionic framework -> Ionic on landing page * chore(): Page through and fix misc stuff * chore(): Titan updates * fix(): No trailing slash * Revert "fix(): No trailing slash" This reverts commit ec82b1a346672211a5189cdc729ba6bf97b1a68f. * chore(homepage): Manually add canonical --- .gitignore | 2 +- .prettierignore | 13 + .prettierrc.js | 11 + CONTRIBUTING.md | 120 +- README.md | 6 +- docs/README.md | 17 + docs/angular/config.md | 80 +- docs/angular/lifecycle.md | 9 +- docs/angular/navigation.md | 12 +- docs/angular/overview.md | 11 +- docs/angular/platform.md | 47 +- docs/angular/pwa.md | 35 +- docs/angular/slides.md | 84 +- docs/angular/storage.md | 9 +- docs/angular/testing.md | 60 +- docs/angular/virtual-scroll.md | 25 +- docs/angular/your-first-app.md | 29 +- .../angular/your-first-app/2-taking-photos.md | 12 +- docs/angular/your-first-app/7-live-reload.md | 5 +- docs/api.md | 14 +- docs/cli.md | 11 +- docs/cli/configuration.md | 42 +- docs/components.md | 220 +- docs/contributing/how-to-contribute.md | 86 +- docs/core-concepts/cross-platform.md | 6 +- docs/core-concepts/fundamentals.md | 4 - docs/core-concepts/webview.md | 4 +- .../what-are-progressive-web-apps.md | 6 +- docs/deployment/app-store.md | 17 +- docs/deployment/desktop-app.md | 12 +- docs/deployment/play-store.md | 11 +- docs/deployment/progressive-web-app.md | 15 +- docs/developer-resources/books.md | 9 - docs/developer-resources/courses.md | 5 +- docs/developer-resources/guides.md | 2 + .../creating-photo-gallery-device-storage.md | 11 +- .../guides/first-app-v3/intro.md | 9 +- .../guides/first-app-v3/ios-android-camera.md | 8 +- .../realtime-updates-ionic-deploy.md | 58 +- .../track-bugs-ionic-monitoring.md | 27 +- .../creating-photo-gallery-device-storage.md | 11 +- .../guides/first-app-v4/intro.md | 19 +- .../guides/first-app-v4/ios-android-camera.md | 10 +- .../guides/first-app-v4/theming.md | 8 +- docs/developing/android.md | 18 +- docs/developing/hardware-back-button.md | 21 +- docs/developing/ios.md | 9 +- docs/developing/keyboard.md | 5 +- docs/developing/previewing.md | 18 +- docs/developing/tips.md | 36 +- docs/index.md | 75 +- docs/intro/cdn.md | 29 +- docs/intro/cli.md | 21 +- docs/intro/environment.md | 24 +- docs/intro/first-app.md | 10 +- docs/intro/next.md | 10 +- docs/layout/css-utilities.md | 41 +- docs/layout/global-stylesheets.md | 12 +- docs/layout/grid.md | 14 +- docs/layout/structure.md | 13 +- docs/native-community.md | 22 +- docs/native-faq.md | 18 +- docs/native.md | 210 +- docs/react.md | 49 +- docs/react/config.md | 68 +- docs/react/lifecycle.md | 18 +- docs/react/navigation.md | 23 +- docs/react/overlays.md | 28 +- docs/react/overview.md | 6 +- docs/react/platform.md | 38 +- docs/react/pwa.md | 15 +- docs/react/quickstart.md | 37 +- docs/react/slides.md | 103 +- docs/react/testing.md | 1 - docs/react/virtual-scroll.md | 10 +- docs/react/your-first-app.md | 60 +- docs/react/your-first-app/2-taking-photos.md | 7 +- docs/react/your-first-app/3-saving-photos.md | 5 +- docs/react/your-first-app/5-adding-mobile.md | 5 +- docs/react/your-first-app/7-live-reload.md | 2 +- docs/reference/browser-support.md | 29 +- docs/reference/glossary.md | 762 +- docs/reference/migration.md | 14 +- docs/reference/release-notes.md | 2 +- docs/reference/support.md | 103 +- docs/reference/versioning.md | 1 - docs/studio.md | 10 +- docs/studio/code.md | 22 +- docs/studio/designer.md | 28 +- docs/studio/running.md | 9 +- docs/studio/settings.md | 13 +- docs/studio/setup/installation.md | 6 +- docs/studio/setup/native.md | 12 +- docs/studio/support.md | 6 +- docs/studio/terminal.md | 1 - docs/techniques/security.md | 1 + docs/theming/advanced.md | 36 +- docs/theming/basics.md | 15 +- .../theming/color-generator.md | 6 +- docs/theming/colors.md | 22 +- docs/theming/css-shadow-parts.md | 27 +- docs/theming/css-variables.md | 15 +- docs/theming/dark-mode.md | 25 +- docs/theming/platform-styles.md | 13 +- docs/theming/themes.md | 23 +- docs/troubleshooting/cors.md | 20 +- docs/troubleshooting/debugging.md | 23 +- docs/troubleshooting/native.md | 36 +- docs/utilities/animations.md | 27 +- docs/utilities/gestures.md | 17 +- docs/vue/config.md | 68 +- docs/vue/lifecycle.md | 8 +- docs/vue/navigation.md | 27 +- docs/vue/overview.md | 16 +- docs/vue/performance.md | 40 +- docs/vue/platform.md | 41 +- docs/vue/pwa.md | 7 +- docs/vue/quickstart.md | 42 +- docs/vue/slides.md | 124 +- docs/vue/storage.md | 9 +- docs/vue/troubleshooting.md | 35 +- docs/vue/utility-functions.md | 41 +- docs/vue/virtual-scroll.md | 25 +- docs/vue/your-first-app.md | 20 +- docs/vue/your-first-app/2-taking-photos.md | 7 +- docs/vue/your-first-app/3-saving-photos.md | 5 +- docs/vue/your-first-app/5-adding-mobile.md | 5 +- docs/vue/your-first-app/7-live-reload.md | 2 +- .../.gitignore | 0 docusaurus-theme-classic/package-lock.json | 23149 ++++++++++++++++ docusaurus-theme-classic/package.json | 14 + docusaurus-theme-classic/src/index.js | 48 + docusaurus-theme/package-lock.json | 106 - docusaurus-theme/package.json | 25 - .../src/css/components/_pagination.scss | 53 - docusaurus-theme/src/css/custom.scss | 72 - docusaurus-theme/src/index.js | 15 - docusaurus-theme/src/theme/Backdrop/index.tsx | 17 - .../src/theme/Backdrop/styles.module.scss | 18 - docusaurus-theme/src/theme/DocItem/index.tsx | 156 - .../src/theme/DocItem/styles.module.scss | 70 - .../src/theme/DocSidebar/index.tsx | 357 - .../src/theme/DocSidebar/styles.module.scss | 274 - docusaurus-theme/src/theme/DocStateContext.ts | 12 - .../src/theme/DocStateProvider/index.tsx | 38 - .../src/theme/EditThisPage/index.tsx | 38 - .../src/theme/EditThisPage/styles.module.scss | 6 - .../FrameworkSelector/assets/icon-angular.svg | 5 - .../assets/icon-javascript.svg | 4 - .../FrameworkSelector/assets/icon-react.svg | 5 - .../FrameworkSelector/assets/icon-vue.svg | 5 - .../src/theme/FrameworkSelector/index.tsx | 129 - .../FrameworkSelector/styles.module.scss | 199 - docusaurus-theme/src/theme/Layout/index.tsx | 52 - docusaurus-theme/src/theme/Layout/styles.css | 12 - .../DocSearchButton/DocSearchButton.tsx | 43 - .../DocSearchButton/styles.module.scss | 68 - docusaurus-theme/src/theme/SearchBar/index.js | 209 - .../src/theme/SearchBar/styles.css | 22 - .../src/theme/SearchBar/styles.module.css | 14 - docusaurus-theme/src/theme/TOC/index.tsx | 76 - .../src/theme/TOC/styles.module.scss | 104 - docusaurus-theme/src/theme/Tabs/index.tsx | 172 - .../src/theme/Tabs/styles.module.css | 23 - .../src/theme/VersionSelector/index.tsx | 151 - .../theme/VersionSelector/styles.module.scss | 157 - .../src/theme/hooks/useDocStateContext.ts | 16 - .../src/theme/hooks/useLocalStorage.ts | 37 - docusaurus-theme/src/theme/icons.tsx | 223 - docusaurus-theme/src/theme/mdxOverride.tsx | 20 - docusaurus-theme/src/theme/tokens.ts | 3 - docusaurus.config.js | 198 +- index.d.ts | 10 + legacy-stencil-components/button/button.css | 45 - legacy-stencil-components/button/button.tsx | 36 - legacy-stencil-components/code/code.css | 92 - legacy-stencil-components/code/code.tsx | 51 - .../code/prismjs-shell-theme.css | 26 - .../code/prismjs-theme.css | 127 - .../color-accordion/color-accordion.css | 87 - .../color-accordion/color-accordion.tsx | 94 - .../color-generator/color-generator.css | 24 - .../color-generator/color-generator.tsx | 150 - .../color-gen/color-variables.ts | 50 - legacy-stencil-components/color-gen/color.ts | 188 - .../color-gen/css-text/color-gen-css-text.css | 99 - .../color-gen/css-text/color-gen-css-text.tsx | 81 - .../color-gen/parse-css.ts | 77 - .../color-gen/preview/color-gen-preview.css | 15 - .../color-gen/preview/color-gen-preview.tsx | 48 - .../select-colors/color-gen-select-colors.css | 57 - .../select-colors/color-gen-select-colors.tsx | 78 - .../color-gen-variable-selector.css | 146 - .../color-gen-variable-selector.tsx | 182 - .../command-line/command-cursor.css | 13 - .../command-line/command-cursor.tsx | 19 - .../command-line/command-line.css | 35 - .../command-line/command-line.tsx | 26 - .../command-line/command-output.css | 18 - .../command-line/command-output.tsx | 11 - .../command-line/command-prompt.css | 9 - .../command-line/command-prompt.tsx | 11 - .../contributor-list/contributor-list.css | 36 - .../contributor-list/contributor-list.tsx | 28 - legacy-stencil-components/demo/demo.css | 185 - legacy-stencil-components/demo/demo.tsx | 101 - .../dropdown/dropdown.css | 111 - .../dropdown/dropdown.tsx | 93 - .../header-mobile-collapse.css | 264 - .../header-mobile-collapse.tsx | 104 - legacy-stencil-components/header/header.css | 159 - legacy-stencil-components/header/header.tsx | 155 - .../internal-ad/ad-service.ts | 37 - .../internal-ad/internal-ad.css | 25 - .../internal-ad/internal-ad.tsx | 64 - .../internal-ad/tracking-service.ts | 58 - .../item-list/item-list.css | 31 - .../item-list/item-list.tsx | 11 - legacy-stencil-components/item/item.css | 95 - legacy-stencil-components/item/item.tsx | 64 - legacy-stencil-components/l10n.ts | 32 - .../layered-colors-select.css | 77 - .../layered-colors-select.tsx | 138 - legacy-stencil-components/local-storage.ts | 49 - .../menu/collapsible.css | 47 - .../menu/collapsible.tsx | 53 - .../menu/framework-select.tsx | 69 - legacy-stencil-components/menu/menu.css | 71 - legacy-stencil-components/menu/menu.tsx | 45 - .../menu/templates/cli.tsx | 16 - .../menu/templates/components.tsx | 168 - .../menu/templates/main.tsx | 156 - .../menu/templates/native.css | 5 - .../menu/templates/native.tsx | 36 - .../menu/templates/studio.tsx | 30 - legacy-stencil-components/menu/toggle.css | 25 - legacy-stencil-components/menu/toggle.tsx | 21 - legacy-stencil-components/nav/link.tsx | 44 - legacy-stencil-components/nav/nav.css | 107 - legacy-stencil-components/nav/nav.tsx | 87 - .../new-color-generator.css | 26 - .../new-color-generator.tsx | 96 - .../page-footer/page-footer.css | 21 - .../page-footer/page-footer.tsx | 56 - legacy-stencil-components/page/page.css | 158 - legacy-stencil-components/page/page.tsx | 155 - .../page/templates/api-index.tsx | 28 - .../page/templates/api.tsx | 296 - .../page/templates/cli.tsx | 176 - .../page/templates/default.tsx | 21 - .../page/templates/error.css | 32 - .../page/templates/error.tsx | 45 - .../page/templates/index.ts | 17 - .../page/templates/native.tsx | 215 - .../page/templates/release-notes.tsx | 89 - .../page/to-hypertext.ts | 29 - .../pagination/pagination.css | 88 - .../pagination/pagination.tsx | 62 - .../reference/reference.css | 43 - .../reference/reference.tsx | 47 - legacy-stencil-components/root/root.scss | 37 - legacy-stencil-components/root/root.tsx | 78 - .../search/search-defaults.css | 66 - legacy-stencil-components/search/search.css | 473 - legacy-stencil-components/search/search.tsx | 368 - legacy-stencil-components/select/select.css | 52 - legacy-stencil-components/select/select.tsx | 81 - .../stepped-color-generator/parse-css.ts | 18 - .../stepped-color-generator.css | 42 - .../stepped-color-generator.tsx | 96 - .../table-of-contents/table-of-contents.css | 36 - .../table-of-contents/table-of-contents.tsx | 84 - legacy-stencil-components/tabs/tab.tsx | 22 - legacy-stencil-components/tabs/tabs.css | 64 - legacy-stencil-components/tabs/tabs.tsx | 78 - package-lock.json | 22498 ++------------- package.json | 74 +- scripts/api.js | 68 +- scripts/cli.js | 53 +- scripts/data/cli.json | 1160 +- scripts/data/meta-override.json | 348 + scripts/native.js | 35 +- scripts/release-notes.js | 35 +- scripts/utils.js | 70 +- sidebars.js | 57 +- src/assets/locales/en/messages.json | 243 - src/assets/locales/es/messages.json | 184 - src/assets/locales/fr/messages.json | 184 - src/assets/locales/pt/messages.json | 184 - src/assets/locales/zh/messages.json | 184 - src/components/README.md | 11 + .../global}/Codepen/index.tsx | 2 +- .../global}/DocDemo/android-device-skin.png | Bin .../components/global}/DocDemo/demo.css | 0 .../components/global}/DocDemo/index.js | 15 +- .../global}/DocDemo/iphone-device-skin.png | Bin .../global}/DocsCard/index.tsx | 39 +- .../global}/DocsCard/styles.module.scss | 12 +- .../global}/DocsCards/cards.css | 2 +- .../global}/DocsCards/index.tsx | 0 .../page/api}/APIList/index.tsx | 10 +- .../page/api}/EncapsulationPill/index.tsx | 10 +- .../api}/EncapsulationPill/styles.module.scss | 5 +- .../page/intro/AppWizard/index.module.scss} | 90 +- src/components/page/intro/AppWizard/index.tsx | 23 + .../page/native}/DocsButton/index.tsx | 6 +- .../page/native}/DocsButton/styles.module.css | 2 +- .../NativeEnterpriseCard/index.module.scss | 135 + .../native/NativeEnterpriseCard/index.tsx | 22 + .../page/react/PageStyles/index.module.scss | 71 + .../page/react/PageStyles/index.tsx | 7 + .../page/reference}/ReleaseNotes/index.tsx | 51 +- .../reference/ReleaseNotes/release-notes.json | 182 + .../reference}/ReleaseNotes/styles.module.css | 3 +- .../page/theming/CodeColor/index.module.scss} | 2 +- .../page/theming/CodeColor/index.tsx | 21 + .../page/theming}/ColorAccordion/index.tsx | 49 +- .../theming}/ColorAccordion/styles.module.css | 0 .../page/theming/ColorDot/index.module.scss | 14 + .../page/theming/ColorDot/index.tsx | 23 + .../page/theming/ColorGenerator/index.tsx | 138 + .../theming/ColorGenerator/styles.module.scss | 134 + .../page/theming/ColorInput/index.module.scss | 46 + .../page/theming/ColorInput/index.tsx | 35 + .../theming/InputWrapper/index.module.scss | 57 + .../page/theming/InputWrapper/index.tsx | 22 + .../theming/LayeredColorsSelect/index.tsx | 111 + .../LayeredColorsSelect/styles.module.scss} | 71 +- .../NewColorGenerator/index.module.scss | 46 + .../page/theming/NewColorGenerator/index.tsx | 61 + .../SteppedColorGenerator/index.module.scss | 28 + .../theming/SteppedColorGenerator/index.tsx | 57 + .../page/theming/_utils}/color-variables.ts | 0 .../page/theming/_utils}/color.ts | 56 +- .../page/theming/_utils/index.tsx} | 23 +- src/definitions.ts | 21 - src/manifest.json | 12 +- src/styles.bak/base.css | 298 - src/styles.bak/global.scss | 13 - src/styles.bak/ionic.css | 115 - src/styles.bak/pages/appflow.css | 27 - src/styles.bak/pages/browser-support.css | 3 - src/styles.bak/pages/components.css | 8 - src/styles.bak/pages/frameworks.css | 85 - src/styles.bak/pages/guides.css | 22 - src/styles.bak/pages/index.css | 0 src/styles.bak/pages/native-ee.css | 326 - src/styles.bak/pages/native.css | 37 - src/styles.bak/pages/release-notes.css | 211 - src/styles.bak/pages/studio.css | 3 - src/styles/README.md | 6 + src/styles/components/README.md | 37 + .../styles}/components/_admonition.scss | 0 .../components/_back-to-top-button.scss | 8 + .../css => src/styles}/components/_code.scss | 40 +- src/styles/components/_doc-item.scss | 72 + src/styles/components/_doc-page.scss | 21 + src/styles/components/_doc-sidebar.scss | 166 + src/styles/components/_edit-this-page.scss | 24 + .../styles}/components/_markdown.scss | 16 +- src/styles/components/_navbar-sidebar.scss | 62 + src/styles/components/_navbar.scss | 222 + src/styles/components/_pagination.scss | 56 + src/styles/components/_search.scss | 91 + .../css => src/styles}/components/_table.scss | 6 +- .../css => src/styles}/components/_tabs.scss | 0 .../styles}/components/_theme-toggle.scss | 41 +- src/styles/components/_toc.scss | 81 + src/styles/custom.scss | 111 +- src/styles/pages/browser-support.css | 3 - src/styles/pages/components.css | 8 - src/styles/pages/frameworks.css | 85 - src/styles/pages/guides.css | 17 - src/styles/pages/studio.scss | 8 - src/theme/CodeColor/index.tsx | 22 - .../ColorGenerator/LiveCodeBlock/index.tsx | 73 - .../LiveCodeBlock/styles.module.css | 36 - .../ColorGenerator/SelectColors/index.tsx | 95 - .../SelectColors/styles.module.css | 83 - .../ColorGenerator/VariableSelector/index.tsx | 113 - .../VariableSelector/styles.module.css | 131 - src/theme/ColorGenerator/index.tsx | 164 - src/theme/ColorGenerator/styles.module.css | 19 - src/theme/DocItem/index.tsx | 158 + src/theme/DocItem/styles.module.css | 26 + .../src => src}/theme/DocPage/index.tsx | 145 +- .../theme/DocPage/styles.module.css | 57 +- src/theme/DocSidebar/index.tsx | 14 + src/theme/IconEdit/index.module.scss | 3 + src/theme/IconEdit/index.tsx | 23 + src/theme/LayeredColorsSelect/index.tsx | 146 - src/theme/Logo/index.tsx | 34 - src/theme/Logo/styles.module.css | 3 - src/theme/MDXComponents/index.tsx | 17 + src/theme/Navbar/index.tsx | 243 - src/theme/Navbar/styles.module.scss | 251 - src/theme/NavbarItem/IconLinkNavbarItem.tsx | 56 - src/theme/NavbarItem/NavbarIconLink.tsx | 12 + src/theme/NavbarItem/NavbarSeparator.tsx | 6 + src/theme/NavbarItem/index.tsx | 52 +- src/theme/README.md | 3 + src/theme/ReleaseNotes/release-notes.json | 242 - src/theme/TOC/index.tsx | 17 + src/utils.ts | 23 - src/utils/README.md | 3 + src/{ => utils}/hooks.ts | 38 +- static/.nojekyll | 0 static/README.md | 3 + static/demos/api/accordion/index.html | 618 +- static/demos/api/action-sheet/index.html | 94 +- static/demos/api/alert/index.html | 86 +- static/demos/api/avatar/index.html | 177 +- static/demos/api/back-button/index.html | 77 +- static/demos/api/backdrop/index.html | 64 +- static/demos/api/badge/index.html | 128 +- static/demos/api/breadcrumbs/index.html | 513 +- static/demos/api/button/index.html | 134 +- static/demos/api/card/index.html | 71 +- static/demos/api/checkbox/index.html | 54 +- static/demos/api/chip/index.html | 229 +- static/demos/api/content/index.html | 97 +- static/demos/api/datetime/index.html | 243 +- static/demos/api/fab/index.html | 244 +- static/demos/api/grid/index.html | 206 +- static/demos/api/icon/index.html | 313 +- static/demos/api/infinite-scroll/data.js | 284 +- static/demos/api/infinite-scroll/index.html | 133 +- static/demos/api/input/index.html | 154 +- static/demos/api/item/index.html | 294 +- static/demos/api/list/index.html | 226 +- static/demos/api/loading/index.html | 78 +- static/demos/api/menu/index.html | 153 +- static/demos/api/modal/index.html | 139 +- static/demos/api/nav/index.html | 202 +- static/demos/api/note/index.html | 226 +- static/demos/api/picker/index.html | 169 +- static/demos/api/popover/index.html | 126 +- static/demos/api/progress-bar/index.html | 133 +- static/demos/api/radio/index.html | 149 +- static/demos/api/range/index.html | 114 +- static/demos/api/refresher/index.html | 213 +- static/demos/api/reorder/index.html | 204 +- static/demos/api/router-link/index.html | 202 +- static/demos/api/searchbar/index.html | 160 +- static/demos/api/segment/index.html | 251 +- static/demos/api/select/index.html | 222 +- static/demos/api/skeleton-text/index.html | 533 +- static/demos/api/slides/index.html | 157 +- static/demos/api/spinner/index.html | 142 +- static/demos/api/tabs/index.html | 129 +- static/demos/api/text/index.html | 109 +- static/demos/api/thumbnail/index.html | 167 +- static/demos/api/toast/index.html | 86 +- static/demos/api/toggle/index.html | 129 +- static/demos/api/toolbar/index.html | 213 +- static/img/framework-logo-dark.svg | 19 - static/img/framework-logo.svg | 19 - static/logos/github.svg | 3 + static/logos/ionic-text-docs-dark.svg | 1 + static/logos/ionic-text-docs-light.svg | 1 + static/logos/twitter.svg | 3 + tsconfig.json | 3 +- vercel.json | 60 +- .../version-v5/angular/navigation.md | 3 +- versioned_docs/version-v5/angular/pwa.md | 26 +- versioned_docs/version-v5/angular/testing.md | 48 +- .../version-v5/angular/your-first-app.md | 20 +- .../angular/your-first-app/2-taking-photos.md | 12 +- .../angular/your-first-app/7-live-reload.md | 5 +- versioned_docs/version-v5/api.md | 4 +- versioned_docs/version-v5/api/action-sheet.md | 36 +- versioned_docs/version-v5/api/alert.md | 159 +- versioned_docs/version-v5/api/app.md | 3 +- versioned_docs/version-v5/api/avatar.md | 62 +- versioned_docs/version-v5/api/back-button.md | 229 +- versioned_docs/version-v5/api/backdrop.md | 14 +- versioned_docs/version-v5/api/badge.md | 76 +- versioned_docs/version-v5/api/button.md | 365 +- versioned_docs/version-v5/api/buttons.md | 84 +- versioned_docs/version-v5/api/card-content.md | 17 +- versioned_docs/version-v5/api/card-header.md | 41 +- .../version-v5/api/card-subtitle.md | 33 +- versioned_docs/version-v5/api/card-title.md | 34 +- versioned_docs/version-v5/api/card.md | 248 +- versioned_docs/version-v5/api/checkbox.md | 15 +- versioned_docs/version-v5/api/chip.md | 121 +- versioned_docs/version-v5/api/col.md | 303 +- versioned_docs/version-v5/api/content.md | 261 +- versioned_docs/version-v5/api/datetime.md | 244 +- versioned_docs/version-v5/api/fab-button.md | 289 +- versioned_docs/version-v5/api/fab-list.md | 69 +- versioned_docs/version-v5/api/fab.md | 263 +- versioned_docs/version-v5/api/footer.md | 64 +- versioned_docs/version-v5/api/grid.md | 683 +- versioned_docs/version-v5/api/header.md | 110 +- versioned_docs/version-v5/api/img.md | 131 +- .../version-v5/api/infinite-scroll-content.md | 55 +- .../version-v5/api/infinite-scroll.md | 36 +- versioned_docs/version-v5/api/input.md | 456 +- versioned_docs/version-v5/api/item-divider.md | 262 +- versioned_docs/version-v5/api/item-group.md | 169 +- versioned_docs/version-v5/api/item-option.md | 143 +- versioned_docs/version-v5/api/item-options.md | 25 +- versioned_docs/version-v5/api/item-sliding.md | 541 +- versioned_docs/version-v5/api/item.md | 794 +- versioned_docs/version-v5/api/label.md | 129 +- versioned_docs/version-v5/api/list-header.md | 82 +- versioned_docs/version-v5/api/list.md | 137 +- versioned_docs/version-v5/api/loading.md | 15 +- versioned_docs/version-v5/api/menu-button.md | 117 +- versioned_docs/version-v5/api/menu-toggle.md | 28 +- versioned_docs/version-v5/api/menu.md | 42 +- versioned_docs/version-v5/api/modal.md | 10 +- versioned_docs/version-v5/api/nav-link.md | 53 +- versioned_docs/version-v5/api/nav.md | 197 +- versioned_docs/version-v5/api/note.md | 81 +- versioned_docs/version-v5/api/picker.md | 235 +- versioned_docs/version-v5/api/popover.md | 31 +- versioned_docs/version-v5/api/progress-bar.md | 155 +- versioned_docs/version-v5/api/radio-group.md | 116 +- versioned_docs/version-v5/api/radio.md | 165 +- versioned_docs/version-v5/api/range.md | 295 +- .../version-v5/api/refresher-content.md | 56 +- versioned_docs/version-v5/api/refresher.md | 21 +- .../version-v5/api/reorder-group.md | 305 +- versioned_docs/version-v5/api/reorder.md | 194 +- .../version-v5/api/ripple-effect.md | 50 +- .../version-v5/api/route-redirect.md | 43 +- versioned_docs/version-v5/api/route.md | 35 +- versioned_docs/version-v5/api/router-link.md | 91 +- .../version-v5/api/router-outlet.md | 46 +- versioned_docs/version-v5/api/router.md | 60 +- versioned_docs/version-v5/api/row.md | 5 +- versioned_docs/version-v5/api/searchbar.md | 397 +- .../version-v5/api/segment-button.md | 10 +- versioned_docs/version-v5/api/segment.md | 66 +- .../version-v5/api/select-option.md | 154 +- versioned_docs/version-v5/api/select.md | 152 +- .../version-v5/api/skeleton-text.md | 127 +- versioned_docs/version-v5/api/slide.md | 4 +- versioned_docs/version-v5/api/slides.md | 129 +- versioned_docs/version-v5/api/spinner.md | 93 +- versioned_docs/version-v5/api/split-pane.md | 129 +- versioned_docs/version-v5/api/tab-bar.md | 95 +- versioned_docs/version-v5/api/tab-button.md | 201 +- versioned_docs/version-v5/api/tab.md | 39 +- versioned_docs/version-v5/api/tabs.md | 41 +- versioned_docs/version-v5/api/text.md | 43 +- versioned_docs/version-v5/api/textarea.md | 402 +- versioned_docs/version-v5/api/thumbnail.md | 54 +- versioned_docs/version-v5/api/title.md | 178 +- versioned_docs/version-v5/api/toast.md | 15 +- versioned_docs/version-v5/api/toggle.md | 242 +- versioned_docs/version-v5/api/toolbar.md | 240 +- .../version-v5/api/virtual-scroll.md | 13 +- versioned_docs/version-v5/cli.md | 2 +- .../version-v5/cli/commands/build.md | 276 +- .../version-v5/cli/commands/capacitor-add.md | 42 +- .../cli/commands/capacitor-build.md | 301 +- .../version-v5/cli/commands/capacitor-copy.md | 260 +- .../version-v5/cli/commands/capacitor-open.md | 42 +- .../version-v5/cli/commands/capacitor-run.md | 699 +- .../version-v5/cli/commands/capacitor-sync.md | 260 +- .../cli/commands/capacitor-update.md | 42 +- .../version-v5/cli/commands/completion.md | 6 +- .../version-v5/cli/commands/config-get.md | 180 +- .../version-v5/cli/commands/config-set.md | 251 +- .../version-v5/cli/commands/config-unset.md | 140 +- .../version-v5/cli/commands/cordova-build.md | 412 +- .../cli/commands/cordova-compile.md | 242 +- .../cli/commands/cordova-emulate.md | 1014 +- .../cli/commands/cordova-platform.md | 125 +- .../version-v5/cli/commands/cordova-plugin.md | 165 +- .../cli/commands/cordova-prepare.md | 261 +- .../cli/commands/cordova-requirements.md | 41 +- .../cli/commands/cordova-resources.md | 150 +- .../version-v5/cli/commands/cordova-run.md | 1014 +- .../version-v5/cli/commands/deploy-add.md | 231 +- .../version-v5/cli/commands/deploy-build.md | 137 +- .../cli/commands/deploy-configure.md | 250 +- .../cli/commands/deploy-manifest.md | 4 +- .../version-v5/cli/commands/docs.md | 62 +- .../version-v5/cli/commands/doctor-check.md | 41 +- .../version-v5/cli/commands/doctor-list.md | 6 +- .../version-v5/cli/commands/doctor-treat.md | 41 +- .../cli/commands/enterprise-register.md | 86 +- .../version-v5/cli/commands/generate.md | 79 +- .../version-v5/cli/commands/git-remote.md | 5 +- .../version-v5/cli/commands/info.md | 46 +- .../version-v5/cli/commands/init.md | 260 +- .../cli/commands/integrations-disable.md | 41 +- .../cli/commands/integrations-enable.md | 160 +- .../cli/commands/integrations-list.md | 5 +- .../version-v5/cli/commands/link.md | 43 +- .../version-v5/cli/commands/login.md | 72 +- .../version-v5/cli/commands/logout.md | 5 +- .../version-v5/cli/commands/package-build.md | 367 +- .../version-v5/cli/commands/package-deploy.md | 70 +- .../version-v5/cli/commands/repair.md | 46 +- .../version-v5/cli/commands/serve.md | 790 +- .../version-v5/cli/commands/signup.md | 5 +- .../version-v5/cli/commands/ssh-add.md | 81 +- .../version-v5/cli/commands/ssh-delete.md | 39 +- .../version-v5/cli/commands/ssh-generate.md | 219 +- .../version-v5/cli/commands/ssh-list.md | 46 +- .../version-v5/cli/commands/ssh-setup.md | 5 +- .../version-v5/cli/commands/ssh-use.md | 39 +- .../version-v5/cli/commands/ssl-generate.md | 419 +- .../version-v5/cli/commands/start.md | 496 +- .../version-v5/cli/configuration.md | 42 +- versioned_docs/version-v5/components.md | 218 +- .../contributing/how-to-contribute.md | 88 +- .../core-concepts/cross-platform.md | 6 +- .../version-v5/core-concepts/fundamentals.md | 4 - .../version-v5/core-concepts/webview.md | 4 +- .../what-are-progressive-web-apps.md | 6 +- .../version-v5/deployment/app-store.md | 8 +- .../version-v5/deployment/desktop-app.md | 12 +- .../version-v5/deployment/play-store.md | 2 - .../deployment/progressive-web-app.md | 4 +- .../version-v5/developer-resources/books.md | 9 - .../version-v5/developer-resources/courses.md | 5 +- .../version-v5/developer-resources/guides.md | 2 + .../creating-photo-gallery-device-storage.md | 11 +- .../guides/first-app-v3/intro.md | 9 +- .../guides/first-app-v3/ios-android-camera.md | 8 +- .../realtime-updates-ionic-deploy.md | 58 +- .../track-bugs-ionic-monitoring.md | 27 +- .../creating-photo-gallery-device-storage.md | 11 +- .../guides/first-app-v4/intro.md | 19 +- .../guides/first-app-v4/ios-android-camera.md | 10 +- .../guides/first-app-v4/theming.md | 8 +- .../version-v5/developing/android.md | 64 +- .../developing/hardware-back-button.md | 9 +- versioned_docs/version-v5/developing/ios.md | 76 +- .../version-v5/developing/keyboard.md | 5 +- .../version-v5/developing/previewing.md | 6 +- versioned_docs/version-v5/developing/tips.md | 36 +- versioned_docs/version-v5/index.md | 46 +- versioned_docs/version-v5/intro/cdn.md | 20 +- versioned_docs/version-v5/intro/cli.md | 12 +- .../version-v5/intro/environment.md | 10 +- versioned_docs/version-v5/intro/first-app.md | 10 +- versioned_docs/version-v5/intro/next.md | 10 +- .../version-v5/layout/css-utilities.md | 32 +- .../version-v5/layout/global-stylesheets.md | 3 - versioned_docs/version-v5/layout/structure.md | 4 +- versioned_docs/version-v5/native-community.md | 11 +- versioned_docs/version-v5/native-faq.md | 18 +- versioned_docs/version-v5/native.md | 211 +- versioned_docs/version-v5/native/abbyy-rtr.md | 60 +- .../version-v5/native/action-sheet.md | 65 +- versioned_docs/version-v5/native/adjust.md | 60 +- .../version-v5/native/admob-free.md | 60 +- .../version-v5/native/admob-plus.md | 60 +- versioned_docs/version-v5/native/admob-pro.md | 60 +- versioned_docs/version-v5/native/admob.md | 60 +- versioned_docs/version-v5/native/aes-256.md | 60 +- versioned_docs/version-v5/native/alipay.md | 60 +- .../version-v5/native/all-in-one-sdk.md | 65 +- .../version-v5/native/analytics-firebase.md | 60 +- .../version-v5/native/android-exoplayer.md | 60 +- .../version-v5/native/android-full-screen.md | 66 +- .../version-v5/native/android-notch.md | 65 +- .../version-v5/native/android-permissions.md | 67 +- versioned_docs/version-v5/native/anyline.md | 60 +- .../version-v5/native/app-availability.md | 61 +- .../version-v5/native/app-center-analytics.md | 67 +- .../version-v5/native/app-center-crashes.md | 66 +- .../version-v5/native/app-center-push.md | 66 +- .../version-v5/native/app-launcher.md | 65 +- .../version-v5/native/app-minimize.md | 60 +- .../version-v5/native/app-preferences.md | 61 +- versioned_docs/version-v5/native/app-rate.md | 60 +- .../version-v5/native/app-version.md | 65 +- versioned_docs/version-v5/native/apple-pay.md | 60 +- .../version-v5/native/apple-wallet.md | 60 +- versioned_docs/version-v5/native/appodeal.md | 63 +- versioned_docs/version-v5/native/appsflyer.md | 65 +- .../version-v5/native/audio-management.md | 66 +- versioned_docs/version-v5/native/autostart.md | 60 +- .../version-v5/native/background-fetch.md | 66 +- .../native/background-geolocation.md | 67 +- .../version-v5/native/background-mode.md | 66 +- .../version-v5/native/background-upload.md | 66 +- versioned_docs/version-v5/native/backlight.md | 60 +- versioned_docs/version-v5/native/badge.md | 60 +- .../version-v5/native/baidu-push.md | 65 +- .../version-v5/native/barcode-scanner.md | 66 +- .../version-v5/native/base64-to-gallery.md | 60 +- versioned_docs/version-v5/native/base64.md | 60 +- .../version-v5/native/battery-status.md | 61 +- versioned_docs/version-v5/native/biocatch.md | 60 +- .../version-v5/native/biometric-wrapper.md | 59 +- versioned_docs/version-v5/native/ble.md | 60 +- versioned_docs/version-v5/native/blinkid.md | 60 +- versioned_docs/version-v5/native/blinkup.md | 60 +- .../version-v5/native/bluetooth-le.md | 65 +- .../version-v5/native/bluetooth-serial.md | 61 +- versioned_docs/version-v5/native/braintree.md | 60 +- versioned_docs/version-v5/native/branch-io.md | 65 +- .../version-v5/native/brightness.md | 60 +- .../version-v5/native/broadcaster.md | 60 +- .../version-v5/native/browser-tab.md | 60 +- .../version-v5/native/build-info.md | 60 +- versioned_docs/version-v5/native/calendar.md | 65 +- .../version-v5/native/call-directory.md | 66 +- versioned_docs/version-v5/native/call-log.md | 60 +- .../version-v5/native/call-number.md | 60 +- .../version-v5/native/camera-preview.md | 66 +- versioned_docs/version-v5/native/camera.md | 60 +- versioned_docs/version-v5/native/card-io.md | 60 +- versioned_docs/version-v5/native/chooser.md | 60 +- versioned_docs/version-v5/native/class-kit.md | 65 +- versioned_docs/version-v5/native/clevertap.md | 60 +- versioned_docs/version-v5/native/clipboard.md | 60 +- .../version-v5/native/cloud-settings.md | 61 +- versioned_docs/version-v5/native/clover-go.md | 60 +- versioned_docs/version-v5/native/code-push.md | 60 +- .../version-v5/native/colored-browser-tabs.md | 67 +- versioned_docs/version-v5/native/contacts.md | 60 +- .../version-v5/native/couchbase-lite.md | 66 +- versioned_docs/version-v5/native/crop.md | 60 +- .../version-v5/native/custom-uisdk.md | 60 +- .../version-v5/native/date-picker.md | 65 +- versioned_docs/version-v5/native/db-meter.md | 60 +- versioned_docs/version-v5/native/deeplinks.md | 66 +- .../version-v5/native/device-accounts.md | 60 +- .../version-v5/native/device-feedback.md | 61 +- .../version-v5/native/device-motion.md | 60 +- .../version-v5/native/device-orientation.md | 66 +- versioned_docs/version-v5/native/device.md | 60 +- .../version-v5/native/dfu-update.md | 65 +- .../version-v5/native/diagnostic.md | 60 +- versioned_docs/version-v5/native/dialogs.md | 60 +- versioned_docs/version-v5/native/dns.md | 60 +- .../version-v5/native/document-picker.md | 63 +- .../version-v5/native/document-scanner.md | 66 +- .../version-v5/native/document-viewer.md | 66 +- .../version-v5/native/downloader.md | 66 +- .../version-v5/native/email-composer.md | 61 +- .../version-v5/native/emm-app-config.md | 61 +- .../version-v5/native/estimote-beacons.md | 60 +- .../native/extended-device-information.md | 67 +- versioned_docs/version-v5/native/fabric.md | 60 +- versioned_docs/version-v5/native/facebook.md | 65 +- versioned_docs/version-v5/native/fcm.md | 66 +- .../version-v5/native/file-chooser.md | 60 +- .../version-v5/native/file-encryption.md | 60 +- .../version-v5/native/file-opener.md | 60 +- versioned_docs/version-v5/native/file-path.md | 60 +- .../version-v5/native/file-picker.md | 65 +- .../version-v5/native/file-transfer.md | 60 +- versioned_docs/version-v5/native/file.md | 60 +- .../version-v5/native/firebase-analytics.md | 66 +- .../native/firebase-authentication.md | 68 +- .../version-v5/native/firebase-config.md | 66 +- .../version-v5/native/firebase-crash.md | 66 +- .../version-v5/native/firebase-crashlytics.md | 67 +- .../native/firebase-dynamic-links.md | 65 +- .../version-v5/native/firebase-messaging.md | 66 +- .../version-v5/native/firebase-vision.md | 66 +- .../version-v5/native/firebase-x.md | 60 +- versioned_docs/version-v5/native/firebase.md | 60 +- .../version-v5/native/flashlight.md | 65 +- .../version-v5/native/flurry-analytics.md | 66 +- .../version-v5/native/foreground-service.md | 66 +- versioned_docs/version-v5/native/ftp.md | 60 +- .../version-v5/native/full-screen-image.md | 66 +- .../version-v5/native/gao-de-location.md | 66 +- .../version-v5/native/ge-tui-sdk-plugin.md | 65 +- versioned_docs/version-v5/native/geofence.md | 60 +- .../version-v5/native/geolocation.md | 60 +- .../version-v5/native/globalization.md | 60 +- .../version-v5/native/google-analytics.md | 61 +- .../version-v5/native/google-nearby.md | 65 +- .../native/google-play-games-services.md | 68 +- .../version-v5/native/google-plus.md | 65 +- versioned_docs/version-v5/native/gyroscope.md | 60 +- versioned_docs/version-v5/native/hce.md | 60 +- .../version-v5/native/header-color.md | 60 +- .../version-v5/native/health-kit.md | 60 +- versioned_docs/version-v5/native/health.md | 60 +- versioned_docs/version-v5/native/hotspot.md | 60 +- versioned_docs/version-v5/native/http.md | 65 +- versioned_docs/version-v5/native/httpd.md | 60 +- .../version-v5/native/iamport-cordova.md | 60 +- versioned_docs/version-v5/native/ibeacon.md | 60 +- .../version-v5/native/image-picker.md | 61 +- .../version-v5/native/image-resizer.md | 65 +- versioned_docs/version-v5/native/imap.md | 65 +- .../version-v5/native/in-app-browser.md | 60 +- .../version-v5/native/in-app-purchase-2.md | 60 +- .../version-v5/native/in-app-purchase.md | 66 +- .../version-v5/native/in-app-review.md | 60 +- .../version-v5/native/index-app-content.md | 66 +- versioned_docs/version-v5/native/insomnia.md | 65 +- versioned_docs/version-v5/native/instagram.md | 60 +- .../version-v5/native/intel-security.md | 66 +- versioned_docs/version-v5/native/intercom.md | 60 +- .../version-v5/native/ionic-webview.md | 65 +- .../ios-aswebauthenticationsession-api.md | 67 +- versioned_docs/version-v5/native/is-debug.md | 60 +- .../version-v5/native/janalytics.md | 60 +- versioned_docs/version-v5/native/jins-meme.md | 60 +- versioned_docs/version-v5/native/jumio.md | 60 +- versioned_docs/version-v5/native/keyboard.md | 65 +- .../version-v5/native/keychain-touch-id.md | 66 +- versioned_docs/version-v5/native/keychain.md | 65 +- .../version-v5/native/kommunicate.md | 65 +- versioned_docs/version-v5/native/last-cam.md | 60 +- .../version-v5/native/launch-navigator.md | 62 +- .../version-v5/native/launch-review.md | 60 +- .../version-v5/native/line-login.md | 60 +- .../version-v5/native/local-notifications.md | 67 +- .../version-v5/native/location-accuracy.md | 67 +- .../version-v5/native/lottie-splash-screen.md | 67 +- versioned_docs/version-v5/native/luxand.md | 60 +- .../version-v5/native/magnetometer.md | 60 +- versioned_docs/version-v5/native/market.md | 60 +- .../version-v5/native/media-capture.md | 60 +- versioned_docs/version-v5/native/media.md | 60 +- versioned_docs/version-v5/native/metrix.md | 60 +- versioned_docs/version-v5/native/mixpanel.md | 65 +- .../version-v5/native/mlkit-translate.md | 66 +- .../version-v5/native/mobile-accessibility.md | 67 +- .../version-v5/native/mobile-messaging.md | 66 +- versioned_docs/version-v5/native/ms-adal.md | 65 +- .../native/multiple-document-picker.md | 68 +- .../version-v5/native/music-controls.md | 66 +- .../version-v5/native/native-audio.md | 65 +- .../version-v5/native/native-geocoder.md | 66 +- .../version-v5/native/native-keyboard.md | 66 +- .../native/native-page-transitions.md | 68 +- .../version-v5/native/native-ringtones.md | 66 +- .../version-v5/native/native-storage.md | 65 +- .../version-v5/native/navigation-bar.md | 65 +- .../version-v5/native/network-interface.md | 66 +- versioned_docs/version-v5/native/network.md | 65 +- versioned_docs/version-v5/native/nfc.md | 60 +- versioned_docs/version-v5/native/ocr.md | 65 +- versioned_docs/version-v5/native/onesignal.md | 60 +- .../version-v5/native/open-native-settings.md | 61 +- versioned_docs/version-v5/native/openalpr.md | 60 +- versioned_docs/version-v5/native/paypal.md | 60 +- .../version-v5/native/pdf-generator.md | 60 +- versioned_docs/version-v5/native/pedometer.md | 60 +- .../native/phonegap-local-notification.md | 68 +- .../version-v5/native/photo-library.md | 60 +- .../version-v5/native/photo-viewer.md | 60 +- versioned_docs/version-v5/native/pin-check.md | 60 +- .../version-v5/native/pin-dialog.md | 60 +- versioned_docs/version-v5/native/pinterest.md | 60 +- .../version-v5/native/power-management.md | 66 +- .../version-v5/native/preview-any-file.md | 61 +- versioned_docs/version-v5/native/printer.md | 60 +- .../version-v5/native/pspdfkit-cordova.md | 60 +- versioned_docs/version-v5/native/purchases.md | 60 +- versioned_docs/version-v5/native/push.md | 60 +- .../version-v5/native/pushape-push.md | 60 +- versioned_docs/version-v5/native/qqsdk.md | 60 +- .../version-v5/native/qr-scanner.md | 60 +- versioned_docs/version-v5/native/quikkly.md | 60 +- .../native/regula-document-reader.md | 68 +- versioned_docs/version-v5/native/rollbar.md | 60 +- .../native/safari-view-controller.md | 67 +- .../version-v5/native/screen-orientation.md | 66 +- .../version-v5/native/screenshot.md | 61 +- versioned_docs/version-v5/native/sensors.md | 67 +- versioned_docs/version-v5/native/serial.md | 60 +- .../version-v5/native/service-discovery.md | 65 +- versioned_docs/version-v5/native/shake.md | 60 +- .../version-v5/native/shop-checkout.md | 60 +- .../version-v5/native/sign-in-with-apple.md | 66 +- versioned_docs/version-v5/native/sim.md | 60 +- .../version-v5/native/siri-shortcuts.md | 66 +- versioned_docs/version-v5/native/smartlook.md | 63 +- .../version-v5/native/sms-retriever.md | 66 +- versioned_docs/version-v5/native/sms.md | 60 +- .../version-v5/native/social-sharing.md | 66 +- .../version-v5/native/speech-recognition.md | 66 +- versioned_docs/version-v5/native/speechkit.md | 65 +- .../version-v5/native/spinner-dialog.md | 66 +- .../version-v5/native/splash-screen.md | 60 +- .../version-v5/native/spotify-auth.md | 60 +- .../version-v5/native/sqlite-db-copy.md | 60 +- .../version-v5/native/sqlite-porter.md | 60 +- versioned_docs/version-v5/native/sqlite.md | 60 +- .../version-v5/native/ssh-connect.md | 65 +- versioned_docs/version-v5/native/star-prnt.md | 60 +- .../version-v5/native/status-bar.md | 60 +- .../version-v5/native/stepcounter.md | 60 +- .../version-v5/native/streaming-media.md | 66 +- versioned_docs/version-v5/native/stripe.md | 60 +- versioned_docs/version-v5/native/sum-up.md | 60 +- .../version-v5/native/taptic-engine.md | 65 +- .../version-v5/native/tealium-adidentifier.md | 61 +- .../native/tealium-installreferrer.md | 62 +- versioned_docs/version-v5/native/tealium.md | 60 +- .../version-v5/native/text-to-speech.md | 60 +- .../version-v5/native/theme-detection.md | 66 +- .../version-v5/native/themeable-browser.md | 66 +- .../version-v5/native/three-dee-touch.md | 65 +- versioned_docs/version-v5/native/toast.md | 60 +- versioned_docs/version-v5/native/touch-id.md | 65 +- .../version-v5/native/twitter-connect.md | 60 +- versioned_docs/version-v5/native/uid.md | 60 +- .../version-v5/native/unique-device-id.md | 61 +- .../version-v5/native/unvired-cordova-sdk.md | 62 +- versioned_docs/version-v5/native/uptime.md | 60 +- .../version-v5/native/urbanairship.md | 60 +- .../version-v5/native/usabilla-cordova-sdk.md | 60 +- .../version-v5/native/user-agent.md | 60 +- versioned_docs/version-v5/native/vibes.md | 60 +- versioned_docs/version-v5/native/vibration.md | 60 +- .../version-v5/native/video-capture-plus.md | 66 +- .../version-v5/native/video-editor.md | 60 +- .../version-v5/native/video-player.md | 62 +- .../version-v5/native/web-intent.md | 66 +- .../version-v5/native/web-server.md | 60 +- .../version-v5/native/web-socket-server.md | 66 +- versioned_docs/version-v5/native/webengage.md | 60 +- versioned_docs/version-v5/native/wechat.md | 60 +- .../version-v5/native/wheel-selector.md | 66 +- .../version-v5/native/wifi-wizard-2.md | 60 +- .../version-v5/native/wonderpush.md | 60 +- .../version-v5/native/youtube-video-player.md | 62 +- versioned_docs/version-v5/native/zbar.md | 60 +- versioned_docs/version-v5/native/zeroconf.md | 60 +- versioned_docs/version-v5/native/zip.md | 60 +- versioned_docs/version-v5/native/zoom.md | 60 +- versioned_docs/version-v5/react.md | 38 +- versioned_docs/version-v5/react/lifecycle.md | 9 +- versioned_docs/version-v5/react/navigation.md | 12 +- versioned_docs/version-v5/react/overlays.md | 28 +- versioned_docs/version-v5/react/overview.md | 6 +- versioned_docs/version-v5/react/pwa.md | 15 +- versioned_docs/version-v5/react/quickstart.md | 33 +- versioned_docs/version-v5/react/testing.md | 1 - .../version-v5/react/your-first-app.md | 20 +- .../react/your-first-app/2-taking-photos.md | 7 +- .../react/your-first-app/3-saving-photos.md | 5 +- .../react/your-first-app/5-adding-mobile.md | 5 +- .../react/your-first-app/7-live-reload.md | 2 +- .../version-v5/reference/browser-support.md | 27 +- .../version-v5/reference/glossary.md | 752 +- .../version-v5/reference/migration.md | 5 +- .../version-v5/reference/release-notes.md | 2 +- .../version-v5/reference/support.md | 96 +- .../version-v5/reference/versioning.md | 1 - versioned_docs/version-v5/studio.md | 10 +- versioned_docs/version-v5/studio/code.md | 22 +- versioned_docs/version-v5/studio/designer.md | 28 +- versioned_docs/version-v5/studio/running.md | 9 +- versioned_docs/version-v5/studio/settings.md | 13 +- .../version-v5/studio/setup/installation.md | 6 +- .../version-v5/studio/setup/native.md | 12 +- versioned_docs/version-v5/studio/support.md | 6 +- versioned_docs/version-v5/studio/terminal.md | 1 - .../version-v5/techniques/security.md | 1 + versioned_docs/version-v5/theming/advanced.md | 18 +- versioned_docs/version-v5/theming/basics.md | 4 +- .../version-v5/theming/color-generator.md | 2 +- versioned_docs/version-v5/theming/colors.md | 10 +- .../version-v5/theming/css-shadow-parts.md | 15 +- .../version-v5/theming/css-variables.md | 3 +- .../version-v5/theming/dark-mode.md | 16 +- versioned_docs/version-v5/theming/themes.md | 6 +- .../version-v5/troubleshooting/cors.md | 11 +- .../version-v5/troubleshooting/debugging.md | 26 +- .../version-v5/troubleshooting/native.md | 36 +- .../version-v5/utilities/animations.md | 11 +- .../version-v5/utilities/gestures.md | 5 +- versioned_docs/version-v5/vue/lifecycle.md | 8 +- versioned_docs/version-v5/vue/navigation.md | 20 +- versioned_docs/version-v5/vue/overview.md | 16 +- versioned_docs/version-v5/vue/performance.md | 40 +- versioned_docs/version-v5/vue/pwa.md | 7 +- versioned_docs/version-v5/vue/quickstart.md | 33 +- .../version-v5/vue/troubleshooting.md | 35 +- .../version-v5/vue/your-first-app.md | 20 +- .../vue/your-first-app/2-taking-photos.md | 7 +- .../vue/your-first-app/3-saving-photos.md | 5 +- .../vue/your-first-app/5-adding-mobile.md | 5 +- .../vue/your-first-app/7-live-reload.md | 2 +- versions.json | 4 +- 986 files changed, 59855 insertions(+), 62024 deletions(-) create mode 100644 .prettierignore create mode 100644 .prettierrc.js create mode 100644 docs/README.md rename versioned_docs/version-v5/theming/color-generator.mdx => docs/theming/color-generator.md (77%) rename {docusaurus-theme => docusaurus-theme-classic}/.gitignore (100%) create mode 100644 docusaurus-theme-classic/package-lock.json create mode 100644 docusaurus-theme-classic/package.json create mode 100644 docusaurus-theme-classic/src/index.js delete mode 100644 docusaurus-theme/package-lock.json delete mode 100644 docusaurus-theme/package.json delete mode 100644 docusaurus-theme/src/css/components/_pagination.scss delete mode 100644 docusaurus-theme/src/css/custom.scss delete mode 100644 docusaurus-theme/src/index.js delete mode 100644 docusaurus-theme/src/theme/Backdrop/index.tsx delete mode 100644 docusaurus-theme/src/theme/Backdrop/styles.module.scss delete mode 100644 docusaurus-theme/src/theme/DocItem/index.tsx delete mode 100644 docusaurus-theme/src/theme/DocItem/styles.module.scss delete mode 100644 docusaurus-theme/src/theme/DocSidebar/index.tsx delete mode 100644 docusaurus-theme/src/theme/DocSidebar/styles.module.scss delete mode 100644 docusaurus-theme/src/theme/DocStateContext.ts delete mode 100644 docusaurus-theme/src/theme/DocStateProvider/index.tsx delete mode 100644 docusaurus-theme/src/theme/EditThisPage/index.tsx delete mode 100644 docusaurus-theme/src/theme/EditThisPage/styles.module.scss delete mode 100644 docusaurus-theme/src/theme/FrameworkSelector/assets/icon-angular.svg delete mode 100644 docusaurus-theme/src/theme/FrameworkSelector/assets/icon-javascript.svg delete mode 100644 docusaurus-theme/src/theme/FrameworkSelector/assets/icon-react.svg delete mode 100644 docusaurus-theme/src/theme/FrameworkSelector/assets/icon-vue.svg delete mode 100644 docusaurus-theme/src/theme/FrameworkSelector/index.tsx delete mode 100644 docusaurus-theme/src/theme/FrameworkSelector/styles.module.scss delete mode 100644 docusaurus-theme/src/theme/Layout/index.tsx delete mode 100644 docusaurus-theme/src/theme/Layout/styles.css delete mode 100644 docusaurus-theme/src/theme/SearchBar/DocSearchButton/DocSearchButton.tsx delete mode 100644 docusaurus-theme/src/theme/SearchBar/DocSearchButton/styles.module.scss delete mode 100644 docusaurus-theme/src/theme/SearchBar/index.js delete mode 100644 docusaurus-theme/src/theme/SearchBar/styles.css delete mode 100644 docusaurus-theme/src/theme/SearchBar/styles.module.css delete mode 100644 docusaurus-theme/src/theme/TOC/index.tsx delete mode 100644 docusaurus-theme/src/theme/TOC/styles.module.scss delete mode 100644 docusaurus-theme/src/theme/Tabs/index.tsx delete mode 100644 docusaurus-theme/src/theme/Tabs/styles.module.css delete mode 100644 docusaurus-theme/src/theme/VersionSelector/index.tsx delete mode 100644 docusaurus-theme/src/theme/VersionSelector/styles.module.scss delete mode 100644 docusaurus-theme/src/theme/hooks/useDocStateContext.ts delete mode 100644 docusaurus-theme/src/theme/hooks/useLocalStorage.ts delete mode 100644 docusaurus-theme/src/theme/icons.tsx delete mode 100644 docusaurus-theme/src/theme/mdxOverride.tsx delete mode 100644 docusaurus-theme/src/theme/tokens.ts create mode 100644 index.d.ts delete mode 100644 legacy-stencil-components/button/button.css delete mode 100644 legacy-stencil-components/button/button.tsx delete mode 100644 legacy-stencil-components/code/code.css delete mode 100644 legacy-stencil-components/code/code.tsx delete mode 100644 legacy-stencil-components/code/prismjs-shell-theme.css delete mode 100644 legacy-stencil-components/code/prismjs-theme.css delete mode 100755 legacy-stencil-components/color-accordion/color-accordion.css delete mode 100755 legacy-stencil-components/color-accordion/color-accordion.tsx delete mode 100755 legacy-stencil-components/color-gen/color-generator/color-generator.css delete mode 100755 legacy-stencil-components/color-gen/color-generator/color-generator.tsx delete mode 100755 legacy-stencil-components/color-gen/color-variables.ts delete mode 100755 legacy-stencil-components/color-gen/color.ts delete mode 100755 legacy-stencil-components/color-gen/css-text/color-gen-css-text.css delete mode 100755 legacy-stencil-components/color-gen/css-text/color-gen-css-text.tsx delete mode 100755 legacy-stencil-components/color-gen/parse-css.ts delete mode 100755 legacy-stencil-components/color-gen/preview/color-gen-preview.css delete mode 100755 legacy-stencil-components/color-gen/preview/color-gen-preview.tsx delete mode 100755 legacy-stencil-components/color-gen/select-colors/color-gen-select-colors.css delete mode 100755 legacy-stencil-components/color-gen/select-colors/color-gen-select-colors.tsx delete mode 100755 legacy-stencil-components/color-gen/variable-selector/color-gen-variable-selector.css delete mode 100755 legacy-stencil-components/color-gen/variable-selector/color-gen-variable-selector.tsx delete mode 100755 legacy-stencil-components/command-line/command-cursor.css delete mode 100755 legacy-stencil-components/command-line/command-cursor.tsx delete mode 100755 legacy-stencil-components/command-line/command-line.css delete mode 100755 legacy-stencil-components/command-line/command-line.tsx delete mode 100755 legacy-stencil-components/command-line/command-output.css delete mode 100755 legacy-stencil-components/command-line/command-output.tsx delete mode 100755 legacy-stencil-components/command-line/command-prompt.css delete mode 100755 legacy-stencil-components/command-line/command-prompt.tsx delete mode 100644 legacy-stencil-components/contributor-list/contributor-list.css delete mode 100644 legacy-stencil-components/contributor-list/contributor-list.tsx delete mode 100644 legacy-stencil-components/demo/demo.css delete mode 100644 legacy-stencil-components/demo/demo.tsx delete mode 100644 legacy-stencil-components/dropdown/dropdown.css delete mode 100644 legacy-stencil-components/dropdown/dropdown.tsx delete mode 100644 legacy-stencil-components/header-mobile-collapse/header-mobile-collapse.css delete mode 100644 legacy-stencil-components/header-mobile-collapse/header-mobile-collapse.tsx delete mode 100644 legacy-stencil-components/header/header.css delete mode 100644 legacy-stencil-components/header/header.tsx delete mode 100644 legacy-stencil-components/internal-ad/ad-service.ts delete mode 100644 legacy-stencil-components/internal-ad/internal-ad.css delete mode 100644 legacy-stencil-components/internal-ad/internal-ad.tsx delete mode 100644 legacy-stencil-components/internal-ad/tracking-service.ts delete mode 100644 legacy-stencil-components/item-list/item-list.css delete mode 100644 legacy-stencil-components/item-list/item-list.tsx delete mode 100644 legacy-stencil-components/item/item.css delete mode 100644 legacy-stencil-components/item/item.tsx delete mode 100644 legacy-stencil-components/l10n.ts delete mode 100755 legacy-stencil-components/layered-colors-select/layered-colors-select.css delete mode 100755 legacy-stencil-components/layered-colors-select/layered-colors-select.tsx delete mode 100644 legacy-stencil-components/local-storage.ts delete mode 100644 legacy-stencil-components/menu/collapsible.css delete mode 100644 legacy-stencil-components/menu/collapsible.tsx delete mode 100644 legacy-stencil-components/menu/framework-select.tsx delete mode 100644 legacy-stencil-components/menu/menu.css delete mode 100644 legacy-stencil-components/menu/menu.tsx delete mode 100644 legacy-stencil-components/menu/templates/cli.tsx delete mode 100644 legacy-stencil-components/menu/templates/components.tsx delete mode 100644 legacy-stencil-components/menu/templates/main.tsx delete mode 100644 legacy-stencil-components/menu/templates/native.css delete mode 100644 legacy-stencil-components/menu/templates/native.tsx delete mode 100644 legacy-stencil-components/menu/templates/studio.tsx delete mode 100644 legacy-stencil-components/menu/toggle.css delete mode 100644 legacy-stencil-components/menu/toggle.tsx delete mode 100644 legacy-stencil-components/nav/link.tsx delete mode 100644 legacy-stencil-components/nav/nav.css delete mode 100644 legacy-stencil-components/nav/nav.tsx delete mode 100755 legacy-stencil-components/new-color-generator/new-color-generator.css delete mode 100755 legacy-stencil-components/new-color-generator/new-color-generator.tsx delete mode 100644 legacy-stencil-components/page-footer/page-footer.css delete mode 100644 legacy-stencil-components/page-footer/page-footer.tsx delete mode 100644 legacy-stencil-components/page/page.css delete mode 100644 legacy-stencil-components/page/page.tsx delete mode 100644 legacy-stencil-components/page/templates/api-index.tsx delete mode 100644 legacy-stencil-components/page/templates/api.tsx delete mode 100644 legacy-stencil-components/page/templates/cli.tsx delete mode 100644 legacy-stencil-components/page/templates/default.tsx delete mode 100644 legacy-stencil-components/page/templates/error.css delete mode 100644 legacy-stencil-components/page/templates/error.tsx delete mode 100644 legacy-stencil-components/page/templates/index.ts delete mode 100644 legacy-stencil-components/page/templates/native.tsx delete mode 100644 legacy-stencil-components/page/templates/release-notes.tsx delete mode 100644 legacy-stencil-components/page/to-hypertext.ts delete mode 100644 legacy-stencil-components/pagination/pagination.css delete mode 100644 legacy-stencil-components/pagination/pagination.tsx delete mode 100644 legacy-stencil-components/reference/reference.css delete mode 100644 legacy-stencil-components/reference/reference.tsx delete mode 100644 legacy-stencil-components/root/root.scss delete mode 100644 legacy-stencil-components/root/root.tsx delete mode 100644 legacy-stencil-components/search/search-defaults.css delete mode 100644 legacy-stencil-components/search/search.css delete mode 100644 legacy-stencil-components/search/search.tsx delete mode 100644 legacy-stencil-components/select/select.css delete mode 100644 legacy-stencil-components/select/select.tsx delete mode 100755 legacy-stencil-components/stepped-color-generator/parse-css.ts delete mode 100755 legacy-stencil-components/stepped-color-generator/stepped-color-generator.css delete mode 100755 legacy-stencil-components/stepped-color-generator/stepped-color-generator.tsx delete mode 100644 legacy-stencil-components/table-of-contents/table-of-contents.css delete mode 100644 legacy-stencil-components/table-of-contents/table-of-contents.tsx delete mode 100644 legacy-stencil-components/tabs/tab.tsx delete mode 100755 legacy-stencil-components/tabs/tabs.css delete mode 100755 legacy-stencil-components/tabs/tabs.tsx delete mode 100644 src/assets/locales/en/messages.json delete mode 100644 src/assets/locales/es/messages.json delete mode 100644 src/assets/locales/fr/messages.json delete mode 100644 src/assets/locales/pt/messages.json delete mode 100644 src/assets/locales/zh/messages.json create mode 100644 src/components/README.md rename src/{theme => components/global}/Codepen/index.tsx (91%) rename {docusaurus-theme/src/theme => src/components/global}/DocDemo/android-device-skin.png (100%) rename {docusaurus-theme/src/theme => src/components/global}/DocDemo/demo.css (100%) rename {docusaurus-theme/src/theme => src/components/global}/DocDemo/index.js (91%) rename {docusaurus-theme/src/theme => src/components/global}/DocDemo/iphone-device-skin.png (100%) rename src/{theme => components/global}/DocsCard/index.tsx (65%) rename src/{theme => components/global}/DocsCard/styles.module.scss (92%) rename src/{theme => components/global}/DocsCards/cards.css (89%) rename src/{theme => components/global}/DocsCards/index.tsx (100%) rename src/{theme => components/page/api}/APIList/index.tsx (71%) rename src/{theme => components/page/api}/EncapsulationPill/index.tsx (67%) rename src/{theme => components/page/api}/EncapsulationPill/styles.module.scss (90%) rename src/{styles/pages/cli.css => components/page/intro/AppWizard/index.module.scss} (63%) create mode 100644 src/components/page/intro/AppWizard/index.tsx rename src/{theme => components/page/native}/DocsButton/index.tsx (77%) rename src/{theme => components/page/native}/DocsButton/styles.module.css (96%) create mode 100644 src/components/page/native/NativeEnterpriseCard/index.module.scss create mode 100644 src/components/page/native/NativeEnterpriseCard/index.tsx create mode 100644 src/components/page/react/PageStyles/index.module.scss create mode 100644 src/components/page/react/PageStyles/index.tsx rename src/{theme => components/page/reference}/ReleaseNotes/index.tsx (61%) create mode 100644 src/components/page/reference/ReleaseNotes/release-notes.json rename src/{theme => components/page/reference}/ReleaseNotes/styles.module.css (98%) rename src/{theme/CodeColor/code-color.module.css => components/page/theming/CodeColor/index.module.scss} (86%) mode change 100755 => 100644 create mode 100644 src/components/page/theming/CodeColor/index.tsx rename src/{theme => components/page/theming}/ColorAccordion/index.tsx (74%) rename src/{theme => components/page/theming}/ColorAccordion/styles.module.css (100%) create mode 100644 src/components/page/theming/ColorDot/index.module.scss create mode 100644 src/components/page/theming/ColorDot/index.tsx create mode 100644 src/components/page/theming/ColorGenerator/index.tsx create mode 100644 src/components/page/theming/ColorGenerator/styles.module.scss create mode 100644 src/components/page/theming/ColorInput/index.module.scss create mode 100644 src/components/page/theming/ColorInput/index.tsx create mode 100644 src/components/page/theming/InputWrapper/index.module.scss create mode 100644 src/components/page/theming/InputWrapper/index.tsx create mode 100755 src/components/page/theming/LayeredColorsSelect/index.tsx rename src/{theme/LayeredColorsSelect/styles.module.css => components/page/theming/LayeredColorsSelect/styles.module.scss} (71%) create mode 100755 src/components/page/theming/NewColorGenerator/index.module.scss create mode 100755 src/components/page/theming/NewColorGenerator/index.tsx create mode 100755 src/components/page/theming/SteppedColorGenerator/index.module.scss create mode 100755 src/components/page/theming/SteppedColorGenerator/index.tsx rename src/{theme/ColorGenerator/util => components/page/theming/_utils}/color-variables.ts (100%) rename src/{theme/ColorGenerator/util => components/page/theming/_utils}/color.ts (81%) rename src/{theme/ColorGenerator/util/parse-css.ts => components/page/theming/_utils/index.tsx} (75%) mode change 100755 => 100644 delete mode 100644 src/definitions.ts delete mode 100644 src/styles.bak/base.css delete mode 100644 src/styles.bak/global.scss delete mode 100644 src/styles.bak/ionic.css delete mode 100644 src/styles.bak/pages/appflow.css delete mode 100644 src/styles.bak/pages/browser-support.css delete mode 100644 src/styles.bak/pages/components.css delete mode 100644 src/styles.bak/pages/frameworks.css delete mode 100644 src/styles.bak/pages/guides.css delete mode 100644 src/styles.bak/pages/index.css delete mode 100644 src/styles.bak/pages/native-ee.css delete mode 100644 src/styles.bak/pages/native.css delete mode 100644 src/styles.bak/pages/release-notes.css delete mode 100644 src/styles.bak/pages/studio.css create mode 100644 src/styles/README.md create mode 100644 src/styles/components/README.md rename {docusaurus-theme/src/css => src/styles}/components/_admonition.scss (100%) create mode 100644 src/styles/components/_back-to-top-button.scss rename {docusaurus-theme/src/css => src/styles}/components/_code.scss (79%) create mode 100644 src/styles/components/_doc-item.scss create mode 100644 src/styles/components/_doc-page.scss create mode 100644 src/styles/components/_doc-sidebar.scss create mode 100644 src/styles/components/_edit-this-page.scss rename {docusaurus-theme/src/css => src/styles}/components/_markdown.scss (90%) create mode 100644 src/styles/components/_navbar-sidebar.scss create mode 100644 src/styles/components/_navbar.scss create mode 100644 src/styles/components/_pagination.scss create mode 100644 src/styles/components/_search.scss rename {docusaurus-theme/src/css => src/styles}/components/_table.scss (89%) rename {docusaurus-theme/src/css => src/styles}/components/_tabs.scss (100%) rename {docusaurus-theme/src/css => src/styles}/components/_theme-toggle.scss (69%) create mode 100644 src/styles/components/_toc.scss delete mode 100644 src/styles/pages/browser-support.css delete mode 100644 src/styles/pages/components.css delete mode 100644 src/styles/pages/frameworks.css delete mode 100644 src/styles/pages/guides.css delete mode 100644 src/styles/pages/studio.scss delete mode 100755 src/theme/CodeColor/index.tsx delete mode 100644 src/theme/ColorGenerator/LiveCodeBlock/index.tsx delete mode 100644 src/theme/ColorGenerator/LiveCodeBlock/styles.module.css delete mode 100755 src/theme/ColorGenerator/SelectColors/index.tsx delete mode 100755 src/theme/ColorGenerator/SelectColors/styles.module.css delete mode 100755 src/theme/ColorGenerator/VariableSelector/index.tsx delete mode 100755 src/theme/ColorGenerator/VariableSelector/styles.module.css delete mode 100644 src/theme/ColorGenerator/index.tsx delete mode 100644 src/theme/ColorGenerator/styles.module.css create mode 100644 src/theme/DocItem/index.tsx create mode 100644 src/theme/DocItem/styles.module.css rename {docusaurus-theme/src => src}/theme/DocPage/index.tsx (51%) rename {docusaurus-theme/src => src}/theme/DocPage/styles.module.css (52%) create mode 100644 src/theme/DocSidebar/index.tsx create mode 100644 src/theme/IconEdit/index.module.scss create mode 100644 src/theme/IconEdit/index.tsx delete mode 100755 src/theme/LayeredColorsSelect/index.tsx delete mode 100644 src/theme/Logo/index.tsx delete mode 100644 src/theme/Logo/styles.module.css create mode 100644 src/theme/MDXComponents/index.tsx delete mode 100644 src/theme/Navbar/index.tsx delete mode 100644 src/theme/Navbar/styles.module.scss delete mode 100644 src/theme/NavbarItem/IconLinkNavbarItem.tsx create mode 100644 src/theme/NavbarItem/NavbarIconLink.tsx create mode 100644 src/theme/NavbarItem/NavbarSeparator.tsx create mode 100644 src/theme/README.md delete mode 100644 src/theme/ReleaseNotes/release-notes.json create mode 100644 src/theme/TOC/index.tsx delete mode 100644 src/utils.ts create mode 100644 src/utils/README.md rename src/{ => utils}/hooks.ts (60%) delete mode 100644 static/.nojekyll create mode 100644 static/README.md delete mode 100644 static/img/framework-logo-dark.svg delete mode 100644 static/img/framework-logo.svg create mode 100644 static/logos/github.svg create mode 100644 static/logos/ionic-text-docs-dark.svg create mode 100644 static/logos/ionic-text-docs-light.svg create mode 100644 static/logos/twitter.svg rename docs/theming/color-generator.mdx => versioned_docs/version-v5/theming/color-generator.md (82%) diff --git a/.gitignore b/.gitignore index b62ada0a0ae..aecb6b48f3a 100644 --- a/.gitignore +++ b/.gitignore @@ -18,4 +18,4 @@ npm-debug.log* yarn-debug.log* -yarn-error.log* +yarn-error.log* \ No newline at end of file diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000000..85fee6b4234 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,13 @@ +src/theme/DocItem +src/theme/DocPage +legacy-stencil-components +node_modules +scripts/bak +src/styles.bak +src/pages +docs/api +docs/native +docs/cli/commands + +.docusaurus +.github \ No newline at end of file diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 00000000000..4122fc68e28 --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,11 @@ +module.exports = { + ...require("@ionic/prettier-config"), + overrides: [ + { + files: "*.md", + options: { + "parser": "mdx" + } + } + ] +}; \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 48461475332..7184cf5f7d7 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -7,15 +7,12 @@ Thanks for your interest in contributing to Ionic's documentation! :tada: Check - [Using VS Code on Windows](#using-vs-code-on-windows) - [Project Structure](#project-structure) - [Directories](#directories) - - [Page Templates](#page-templates) - - [Menu Templates](#menu-templates) - [Authoring Content](#authoring-content) - [Authoring Locally](#authoring-locally) - - [Reference Content](#reference-content) - [Translation](#translation) - [Reporting Issues](#reporting-issues) - [Pull Request Guidelines](#pull-request-guidelines) - - [Project Management](#project-management) + - [Deploying](#deploying) - [License](#license) @@ -44,50 +41,25 @@ The Ionic docs were originally built in a Mac-based environment, so Mac-focused ## Project Structure -Ionic's documentation is built using [Stencil](https://stenciljs.com). The content is written as Markdown or pulled in as JSON data from other Ionic repositories. - -At a high level, the production documentation works like this: - -1. At build time, the `build-pages` script reads the Markdown in `src/pages/` and creates a JSON representation of each page at the same path - ``` - pages/ - ├── index.json - └── index.md - ``` -2. At runtime, the `docs-page` component receives the current path (e.g. `/docs`) -3. The `docs-page` component fetches and parses the [JSON representation](https://ionicframework.com/docs/pages/index.json) of that page -4. The `docs-page` component renders that data using a [template](https://github.com/ionic-team/ionic-docs/tree/master/src/components/page/templates) - -> **Note**: most reference content (e.g. APIs, native plugins, CLI commands) is not stored as Markdown. Those pages are created using data provided by other repositories to the `build-pages` script. +Ionic's documentation is built using [Docusaurus](https://docusaurus.io/). The content is either written or generated as Markdown. ### Directories -- `scripts/` - build scripts used to generate JSON representations of each page and other data used in the docs +- `scripts/` - build scripts used to generate markdown or json files - `src/` - source code and content of the docs - - `assets/` - static assets used on the site, like images and fonts - - `components/` - Stencil components used in the documentation UI - - `demos/` - Self-contained demos, optionally presented by pages via `demoUrl` YAML frontmatter - - `pages/` - Markdown content organized by route and uncommitted JSON representation of each page - - `styles/` - Global and page-specific styles (non-component styles) - -### Page Templates - -The [`docs-page`](https://github.com/ionic-team/ionic-docs/blob/master/src/components/page/page.tsx) component is responsible for loading and rendering page content. Page content is rendered using one of the templates exported [here](https://github.com/ionic-team/ionic-docs/blob/master/src/components/page/templates/index.ts). Pages can specify a template via the `template` key in their frontmatter, or the default template will be used. - -```tsx -const Template = templates[page.template] || template.default; -return ``` Finally, we can turn these features on by using the appropriate properties: + ```html ``` - ## Properties - ### buttonType -| | | -| --- | --- | +| | | +| --------------- | ------------------- | | **Description** | The type of button. | -| **Attribute** | `button-type` | -| **Type** | `string` | -| **Default** | `'button'` | - - +| **Attribute** | `button-type` | +| **Type** | `string` | +| **Default** | `'button'` | ### color -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information on colors, see [theming](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `color` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### disabled -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------- | | **Description** | If `true`, the user cannot interact with the button. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | ### download -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | This attribute instructs browsers to download a URL instead of navigating to
it, so the user will be prompted to save it as a local file. If the attribute
has a value, it is used as the pre-filled file name in the Save prompt
(the user can still change the file name if they want). | -| **Attribute** | `download` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `download` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### expand -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------- | | **Description** | Set to `"block"` for a full-width button or to `"full"` for a full-width button
without left and right borders. | -| **Attribute** | `expand` | -| **Type** | `"block" \| "full" \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `expand` | +| **Type** | `"block" \| "full" \| undefined` | +| **Default** | `undefined` | ### fill -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Set to `"clear"` for a transparent button, to `"outline"` for a transparent
button with a border, or to `"solid"`. The default style is `"solid"` except inside of
a toolbar, where the default is `"clear"`. | -| **Attribute** | `fill` | -| **Type** | `"clear" \| "default" \| "outline" \| "solid" \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `fill` | +| **Type** | `"clear" \| "default" \| "outline" \| "solid" \| undefined` | +| **Default** | `undefined` | ### href -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------- | | **Description** | Contains a URL or a URL fragment that the hyperlink points to.
If this property is set, an anchor tag will be rendered. | -| **Attribute** | `href` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `href` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### mode -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------- | | **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - - +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | ### rel -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Specifies the relationship of the target object to the link object.
The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | -| **Attribute** | `rel` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `rel` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### routerAnimation -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------- | | **Description** | When using a router, it specifies the transition animation when navigating to
another page using `href`. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `undefined` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | ### routerDirection -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------- | | **Description** | When using a router, it specifies the transition direction when navigating to
another page using `href`. | -| **Attribute** | `router-direction` | -| **Type** | `"back" \| "forward" \| "root"` | -| **Default** | `'forward'` | - - +| **Attribute** | `router-direction` | +| **Type** | `"back" \| "forward" \| "root"` | +| **Default** | `'forward'` | ### shape -| | | -| --- | --- | -| **Description** | The button shape. | -| **Attribute** | `shape` | -| **Type** | `"round" \| undefined` | -| **Default** | `undefined` | - - +| | | +| --------------- | ---------------------- | +| **Description** | The button shape. | +| **Attribute** | `shape` | +| **Type** | `"round" \| undefined` | +| **Default** | `undefined` | ### size -| | | -| --- | --- | -| **Description** | The button size. | -| **Attribute** | `size` | -| **Type** | `"default" \| "large" \| "small" \| undefined` | -| **Default** | `undefined` | - - +| | | +| --------------- | ---------------------------------------------- | +| **Description** | The button size. | +| **Attribute** | `size` | +| **Type** | `"default" \| "large" \| "small" \| undefined` | +| **Default** | `undefined` | ### strong -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------- | | **Description** | If `true`, activates a button with a heavier font weight. | -| **Attribute** | `strong` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `strong` | +| **Type** | `boolean` | +| **Default** | `false` | ### target -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Specifies where to display the linked URL.
Only applies when an `href` is provided.
Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | -| **Attribute** | `target` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `target` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### type -| | | -| --- | --- | -| **Description** | The type of the button. | -| **Attribute** | `type` | -| **Type** | `"button" \| "reset" \| "submit"` | -| **Default** | `'button'` | - - +| | | +| --------------- | --------------------------------- | +| **Description** | The type of the button. | +| **Attribute** | `type` | +| **Type** | `"button" \| "reset" \| "submit"` | +| **Default** | `'button'` | ## Events -| Name | Description | -| --- | --- | -| `ionBlur` | Emitted when the button loses focus. | -| `ionFocus` | Emitted when the button has focus. | - +| Name | Description | +| ---------- | ------------------------------------ | +| `ionBlur` | Emitted when the button loses focus. | +| `ionFocus` | Emitted when the button has focus. | ## CSS Shadow Parts -| Name | Description | -| --- | --- | +| Name | Description | +| -------- | ----------------------------------------------------------------------- | | `native` | The native HTML button or anchor element that wraps all child elements. | - ## CSS Custom Properties -| Name | Description | -| --- | --- | -| `--background` | Background of the button | -| `--background-activated` | Background of the button when pressed. Note: setting this will interfere with the Material Design ripple. | -| `--background-activated-opacity` | Opacity of the button when pressed | -| `--background-focused` | Background of the button when focused with the tab key | -| `--background-focused-opacity` | Opacity of the button when focused with the tab key | -| `--background-hover` | Background of the button on hover | -| `--background-hover-opacity` | Opacity of the background on hover | -| `--border-color` | Border color of the button | -| `--border-radius` | Border radius of the button | -| `--border-style` | Border style of the button | -| `--border-width` | Border width of the button | -| `--box-shadow` | Box shadow of the button | -| `--color` | Text color of the button | -| `--color-activated` | Text color of the button when pressed | -| `--color-focused` | Text color of the button when focused with the tab key | -| `--color-hover` | Text color of the button when hover | -| `--opacity` | Opacity of the button | -| `--padding-bottom` | Bottom padding of the button | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button | -| `--padding-top` | Top padding of the button | -| `--ripple-color` | Color of the button ripple effect | -| `--transition` | Transition of the button | - +| Name | Description | +| -------------------------------- | --------------------------------------------------------------------------------------------------------- | +| `--background` | Background of the button | +| `--background-activated` | Background of the button when pressed. Note: setting this will interfere with the Material Design ripple. | +| `--background-activated-opacity` | Opacity of the button when pressed | +| `--background-focused` | Background of the button when focused with the tab key | +| `--background-focused-opacity` | Opacity of the button when focused with the tab key | +| `--background-hover` | Background of the button on hover | +| `--background-hover-opacity` | Opacity of the background on hover | +| `--border-color` | Border color of the button | +| `--border-radius` | Border radius of the button | +| `--border-style` | Border style of the button | +| `--border-width` | Border width of the button | +| `--box-shadow` | Box shadow of the button | +| `--color` | Text color of the button | +| `--color-activated` | Text color of the button when pressed | +| `--color-focused` | Text color of the button when focused with the tab key | +| `--color-hover` | Text color of the button when hover | +| `--opacity` | Opacity of the button | +| `--padding-bottom` | Bottom padding of the button | +| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button | +| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button | +| `--padding-top` | Top padding of the button | +| `--ripple-color` | Color of the button ripple effect | +| `--transition` | Transition of the button | ## Slots -| Name | Description | -| --- | --- | -| `` | Content is placed between the named slots if provided without a slot. | -| `end` | Content is placed to the right of the button text in LTR, and to the left in RTL. | -| `icon-only` | Should be used on an icon in a button that has no text. | -| `start` | Content is placed to the left of the button text in LTR, and to the right in RTL. | - +| Name | Description | +| ----------- | --------------------------------------------------------------------------------- | +| `` | Content is placed between the named slots if provided without a slot. | +| `end` | Content is placed to the right of the button text in LTR, and to the left in RTL. | +| `icon-only` | Should be used on an icon in a button that has no text. | +| `start` | Content is placed to the left of the button text in LTR, and to the right in RTL. | diff --git a/versioned_docs/version-v5/api/buttons.md b/versioned_docs/version-v5/api/buttons.md index 5f6dd094c13..fa762f3408a 100644 --- a/versioned_docs/version-v5/api/buttons.md +++ b/versioned_docs/version-v5/api/buttons.md @@ -1,8 +1,9 @@ --- -title: "ion-buttons: Toolbar Element with Named Slots for Buttons" -description: "The Buttons component is a container element. Buttons placed in a toolbar should be inside the ion-buttons element and can be positioned using named slots." -sidebar_label: "ion-buttons" +title: 'ion-buttons: Toolbar Element with Named Slots for Buttons' +description: 'The Buttons component is a container element. Buttons placed in a toolbar should be inside the ion-buttons element and can be positioned using named slots.' +sidebar_label: 'ion-buttons' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -12,18 +13,16 @@ The Buttons component is a container element. Buttons placed in a toolbar should The `` element can be positioned inside of the toolbar using a named slot. The below chart has a description of each slot. -| Slot | Description | -|--------------|----------------------------------------------------------------------------------------------------------| -| `secondary` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` mode. | -| `primary` | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` mode. | -| `start` | Positions to the `left` of the content in LTR, and to the `right` in RTL. | -| `end` | Positions to the `right` of the content in LTR, and to the `left` in RTL. | - +| Slot | Description | +| ----------- | ------------------------------------------------------------------------------------------------------- | +| `secondary` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` mode. | +| `primary` | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` mode. | +| `start` | Positions to the `left` of the content in LTR, and to the `right` in RTL. | +| `end` | Positions to the `right` of the content in LTR, and to the `left` in RTL. | ## Usage - - + @@ -76,7 +75,6 @@ The `` element can be positioned inside of the toolbar using a name - ```html @@ -132,12 +130,20 @@ The `` element can be positioned inside of the toolbar using a name - ```tsx import React from 'react'; -import { IonButtons, IonToolbar, IonBackButton, IonTitle, IonButton, IonIcon, IonMenuButton, IonContent } from '@ionic/react'; +import { + IonButtons, + IonToolbar, + IonBackButton, + IonTitle, + IonButton, + IonIcon, + IonMenuButton, + IonContent, +} from '@ionic/react'; import { personCircle, search, star, ellipsisHorizontal, ellipsisVertical } from 'ionicons/icons'; export const ButtonsExample: React.FC = () => ( @@ -192,7 +198,6 @@ export const ButtonsExample: React.FC = () => ( - ```tsx @@ -200,12 +205,11 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'buttons-example', - styleUrl: 'buttons-example.css' + styleUrl: 'buttons-example.css', }) export class ButtonsExample { - clickedStar() { - console.log("Clicked star button"); + console.log('Clicked star button'); } render() { @@ -253,7 +257,7 @@ export class ButtonsExample { Collapsible Buttons - + , ]; } } @@ -261,7 +265,6 @@ export class ButtonsExample { - ```html @@ -313,19 +316,19 @@ export class ButtonsExample { ``` @@ -335,14 +338,11 @@ export default defineComponent({ ## Properties - ### collapse -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | If true, buttons will disappear when its
parent toolbar has fully collapsed if the toolbar
is not the first toolbar. If the toolbar is the
first toolbar, the buttons will be hidden and will
only be shown once all toolbars have fully collapsed.

Only applies in `ios` mode with `collapse` set to
`true` on `ion-header`.

Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles) | -| **Attribute** | `collapse` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `collapse` | +| **Type** | `boolean` | +| **Default** | `false` | diff --git a/versioned_docs/version-v5/api/card-content.md b/versioned_docs/version-v5/api/card-content.md index e24ed623102..adb32f2e83c 100644 --- a/versioned_docs/version-v5/api/card-content.md +++ b/versioned_docs/version-v5/api/card-content.md @@ -1,6 +1,7 @@ --- -sidebar_label: "ion-card-content" +sidebar_label: 'ion-card-content' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -9,17 +10,13 @@ import TabItem from '@theme/TabItem'; `ion-card-content` is child component of `ion-card` that adds some content padding. It is recommended that any text content for a card should be placed in an `ion-card-content`. - ## Properties - ### mode -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------- | | **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - - +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | diff --git a/versioned_docs/version-v5/api/card-header.md b/versioned_docs/version-v5/api/card-header.md index 5cf00cff0d7..7df2c9078a2 100644 --- a/versioned_docs/version-v5/api/card-header.md +++ b/versioned_docs/version-v5/api/card-header.md @@ -1,6 +1,7 @@ --- -sidebar_label: "ion-card-header" +sidebar_label: 'ion-card-header' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -8,39 +9,31 @@ import TabItem from '@theme/TabItem'; `ion-card-header` is a header component for `ion-card`. - ## Properties - ### color -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information on colors, see [theming](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `color` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### mode -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------- | | **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - - +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | ### translucent -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Description** | If `true`, the card header will be translucent.
Only applies when the mode is `"ios"` and the device supports
[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | -| **Attribute** | `translucent` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `translucent` | +| **Type** | `boolean` | +| **Default** | `false` | diff --git a/versioned_docs/version-v5/api/card-subtitle.md b/versioned_docs/version-v5/api/card-subtitle.md index 9dce002aadc..c6c585fd8a0 100644 --- a/versioned_docs/version-v5/api/card-subtitle.md +++ b/versioned_docs/version-v5/api/card-subtitle.md @@ -1,6 +1,7 @@ --- -sidebar_label: "ion-card-subtitle" +sidebar_label: 'ion-card-subtitle' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -10,32 +11,26 @@ import TabItem from '@theme/TabItem'; ## Properties - ### color -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information on colors, see [theming](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `color` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### mode -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------- | | **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - - +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | ## CSS Custom Properties -| Name | Description | -| --- | --- | +| Name | Description | +| --------- | -------------------------- | | `--color` | Color of the card subtitle | - diff --git a/versioned_docs/version-v5/api/card-title.md b/versioned_docs/version-v5/api/card-title.md index 974ed2e6c89..d425df949c2 100644 --- a/versioned_docs/version-v5/api/card-title.md +++ b/versioned_docs/version-v5/api/card-title.md @@ -1,6 +1,7 @@ --- -sidebar_label: "ion-card-title" +sidebar_label: 'ion-card-title' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -8,35 +9,28 @@ import TabItem from '@theme/TabItem'; `ion-card-title` is a child component of `ion-card` - ## Properties - ### color -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information on colors, see [theming](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `color` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### mode -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------- | | **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - - +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | ## CSS Custom Properties -| Name | Description | -| --- | --- | +| Name | Description | +| --------- | ----------------------- | | `--color` | Color of the card title | - diff --git a/versioned_docs/version-v5/api/card.md b/versioned_docs/version-v5/api/card.md index 11918d09e54..1f612efa174 100644 --- a/versioned_docs/version-v5/api/card.md +++ b/versioned_docs/version-v5/api/card.md @@ -1,8 +1,9 @@ --- -sidebar_label: "ion-card" -demoUrl: "/docs/demos/api/card/index.html" -demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/card/index.html" +sidebar_label: 'ion-card' +demoUrl: '/docs/demos/api/card/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/card/index.html' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -16,8 +17,7 @@ sub-components to reflect this. Please see `ion-card-content`, ## Usage - - + @@ -29,8 +29,8 @@ sub-components to reflect this. Please see `ion-card-content`, - Keep close to Nature's heart... and break clear away, once in awhile, - and climb a mountain or spend a week in the woods. Wash your spirit clean. + Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the + woods. Wash your spirit clean. @@ -42,8 +42,7 @@ sub-components to reflect this. Please see `ion-card-content`, - This is content, without any paragraph or header tags, - within an ion-card-content element. + This is content, without any paragraph or header tags, within an ion-card-content element. @@ -72,7 +71,6 @@ sub-components to reflect this. Please see `ion-card-content`, - ```html @@ -83,8 +81,8 @@ sub-components to reflect this. Please see `ion-card-content`, - Keep close to Nature's heart... and break clear away, once in awhile, - and climb a mountain or spend a week in the woods. Wash your spirit clean. + Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the + woods. Wash your spirit clean. @@ -96,8 +94,7 @@ sub-components to reflect this. Please see `ion-card-content`, - This is content, without any paragraph or header tags, - within an ion-card-content element. + This is content, without any paragraph or header tags, within an ion-card-content element. @@ -126,12 +123,26 @@ sub-components to reflect this. Please see `ion-card-content`, - ```tsx import React from 'react'; -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCardContent, IonItem, IonIcon, IonLabel, IonButton } from '@ionic/react'; +import { + IonContent, + IonHeader, + IonPage, + IonTitle, + IonToolbar, + IonCard, + IonCardHeader, + IonCardSubtitle, + IonCardTitle, + IonCardContent, + IonItem, + IonIcon, + IonLabel, + IonButton, +} from '@ionic/react'; import { pin, wifi, wine, warning, walk } from 'ionicons/icons'; export const CardExamples: React.FC = () => { @@ -150,22 +161,23 @@ export const CardExamples: React.FC = () => { - Keep close to Nature's heart... and break clear away, once in awhile, - and climb a mountain or spend a week in the woods. Wash your spirit clean. - + Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week + in the woods. Wash your spirit clean. + ion-item in a card, icon left, button right - View + + View + - This is content, without any paragraph or header tags, - within an ion-cardContent element. - + This is content, without any paragraph or header tags, within an ion-cardContent element. + @@ -193,12 +205,10 @@ export const CardExamples: React.FC = () => { ); }; - ``` - ```tsx @@ -206,7 +216,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'card-example', - styleUrl: 'card-example.css' + styleUrl: 'card-example.css', }) export class CardExample { render() { @@ -218,8 +228,8 @@ export class CardExample { - Keep close to Nature's heart... and break clear away, once in awhile, - and climb a mountain or spend a week in the woods. Wash your spirit clean. + Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in + the woods. Wash your spirit clean. , @@ -227,12 +237,13 @@ export class CardExample { ion-item in a card, icon left, button right - View + + View + - This is content, without any paragraph or header tags, - within an ion-card-content element. + This is content, without any paragraph or header tags, within an ion-card-content element. , @@ -256,7 +267,7 @@ export class CardExample { Card Button Item 2 - + , ]; } } @@ -264,7 +275,6 @@ export class CardExample { - ```html @@ -276,8 +286,8 @@ export class CardExample { - Keep close to Nature's heart... and break clear away, once in awhile, - and climb a mountain or spend a week in the woods. Wash your spirit clean. + Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the + woods. Wash your spirit clean. @@ -289,8 +299,7 @@ export class CardExample { - This is content, without any paragraph or header tags, - within an ion-card-content element. + This is content, without any paragraph or header tags, within an ion-card-content element. @@ -318,16 +327,16 @@ export class CardExample { ``` @@ -337,139 +346,114 @@ export default defineComponent({ ## Properties - ### button -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------------------------------- | | **Description** | If `true`, a button tag will be rendered and the card will be tappable. | -| **Attribute** | `button` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `button` | +| **Type** | `boolean` | +| **Default** | `false` | ### color -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information on colors, see [theming](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `color` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### disabled -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------- | | **Description** | If `true`, the user cannot interact with the card. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | ### download -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | This attribute instructs browsers to download a URL instead of navigating to
it, so the user will be prompted to save it as a local file. If the attribute
has a value, it is used as the pre-filled file name in the Save prompt
(the user can still change the file name if they want). | -| **Attribute** | `download` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `download` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### href -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------- | | **Description** | Contains a URL or a URL fragment that the hyperlink points to.
If this property is set, an anchor tag will be rendered. | -| **Attribute** | `href` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `href` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### mode -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------- | | **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - - +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | ### rel -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Specifies the relationship of the target object to the link object.
The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | -| **Attribute** | `rel` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `rel` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### routerAnimation -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------- | | **Description** | When using a router, it specifies the transition animation when navigating to
another page using `href`. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `undefined` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | ### routerDirection -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------- | | **Description** | When using a router, it specifies the transition direction when navigating to
another page using `href`. | -| **Attribute** | `router-direction` | -| **Type** | `"back" \| "forward" \| "root"` | -| **Default** | `'forward'` | - - +| **Attribute** | `router-direction` | +| **Type** | `"back" \| "forward" \| "root"` | +| **Default** | `'forward'` | ### target -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Specifies where to display the linked URL.
Only applies when an `href` is provided.
Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | -| **Attribute** | `target` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `target` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### type -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------ | | **Description** | The type of the button. Only used when an `onclick` or `button` property is present. | -| **Attribute** | `type` | -| **Type** | `"button" \| "reset" \| "submit"` | -| **Default** | `'button'` | - - +| **Attribute** | `type` | +| **Type** | `"button" \| "reset" \| "submit"` | +| **Default** | `'button'` | ## CSS Shadow Parts -| Name | Description | -| --- | --- | +| Name | Description | +| -------- | ----------------------------------------------------------------------------- | | `native` | The native HTML button, anchor, or div element that wraps all child elements. | - ## CSS Custom Properties -| Name | Description | -| --- | --- | +| Name | Description | +| -------------- | ---------------------- | | `--background` | Background of the card | -| `--color` | Color of the card | - +| `--color` | Color of the card | diff --git a/versioned_docs/version-v5/api/checkbox.md b/versioned_docs/version-v5/api/checkbox.md index 9ef90d52dd9..f99c29c8e33 100644 --- a/versioned_docs/version-v5/api/checkbox.md +++ b/versioned_docs/version-v5/api/checkbox.md @@ -13,7 +13,7 @@ Checkboxes allow the selection of multiple options from a set of options. They a ## Usage - + @@ -140,10 +140,7 @@ export const CheckboxExamples: React.FC = () => { Default Checkbox Checked: {JSON.stringify(checked)} - setChecked(e.detail.checked)} - /> + setChecked(e.detail.checked)} /> Disabled Checkbox @@ -212,7 +209,7 @@ export class CheckboxExample { // Checkboxes in a List - {this.form.map(entry => ( + {this.form.map((entry) => ( {entry.val} @@ -250,11 +247,7 @@ export class CheckboxExample { {{entry.val}} - + diff --git a/versioned_docs/version-v5/api/chip.md b/versioned_docs/version-v5/api/chip.md index ef1a235afa8..00ad72fa2a9 100644 --- a/versioned_docs/version-v5/api/chip.md +++ b/versioned_docs/version-v5/api/chip.md @@ -1,10 +1,11 @@ --- -title: "ion-chip: Name, Text, Icon and Avatar for Ionic Framework Apps" -description: "ion-chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as names, avatars, text, and icons." -sidebar_label: "ion-chip" -demoUrl: "/docs/demos/api/chip/index.html" -demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/chip/index.html" +title: 'ion-chip: Name, Text, Icon and Avatar for Ionic Framework Apps' +description: 'ion-chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as names, avatars, text, and icons.' +sidebar_label: 'ion-chip' +demoUrl: '/docs/demos/api/chip/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/chip/index.html' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -14,8 +15,7 @@ Chips represent complex entities in small blocks, such as a contact. A chip can ## Usage - - + @@ -59,17 +59,15 @@ Chips represent complex entities in small blocks, such as a contact. A chip can - + Avatar Chip ``` - - ```html @@ -112,22 +110,30 @@ Chips represent complex entities in small blocks, such as a contact. A chip can - + Avatar Chip ``` - - ```tsx import React from 'react'; -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonChip, IonLabel, IonIcon, IonAvatar } from '@ionic/react'; +import { + IonContent, + IonHeader, + IonPage, + IonTitle, + IonToolbar, + IonChip, + IonLabel, + IonIcon, + IonAvatar, +} from '@ionic/react'; import { pin, heart, closeCircle, close } from 'ionicons/icons'; export const ChipExamples: React.FC = () => { @@ -187,13 +193,10 @@ export const ChipExamples: React.FC = () => { ); }; - ``` - - ```tsx @@ -201,7 +204,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'chip-example', - styleUrl: 'chip-example.css' + styleUrl: 'chip-example.css', }) export class ChipExample { render() { @@ -241,11 +244,11 @@ export class ChipExample { - + Avatar Chip - + , ]; } } @@ -253,7 +256,6 @@ export class ChipExample { - ```html @@ -297,7 +299,7 @@ export class ChipExample { - + Avatar Chip @@ -305,76 +307,65 @@ export class ChipExample { ``` - ## Properties - ### color -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information on colors, see [theming](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `color` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### disabled -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------- | | **Description** | If `true`, the user cannot interact with the chip. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | ### mode -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------- | | **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - - +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | ### outline -| | | -| --- | --- | +| | | +| --------------- | -------------------------------- | | **Description** | Display an outline style button. | -| **Attribute** | `outline` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `outline` | +| **Type** | `boolean` | +| **Default** | `false` | ## CSS Custom Properties -| Name | Description | -| --- | --- | +| Name | Description | +| -------------- | ---------------------- | | `--background` | Background of the chip | -| `--color` | Color of the chip | - +| `--color` | Color of the chip | diff --git a/versioned_docs/version-v5/api/col.md b/versioned_docs/version-v5/api/col.md index 99d1c8319d7..cba07ac2f45 100644 --- a/versioned_docs/version-v5/api/col.md +++ b/versioned_docs/version-v5/api/col.md @@ -1,6 +1,7 @@ --- -sidebar_label: "ion-col" +sidebar_label: 'ion-col' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -11,288 +12,236 @@ They will expand to fill their row. All content within a grid should go inside o See [Grid Layout](../layout/grid.md) for more information. - ## Column Alignment By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](../layout/css-utilities.md#flex-item-properties) that can be applied to a column to customize this behavior. - ## Properties - ### offset -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------- | | **Description** | The amount to offset the column, in terms of how many columns it should shift to the end
of the total available. | -| **Attribute** | `offset` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `offset` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### offsetLg -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | **Description** | The amount to offset the column for lg screens, in terms of how many columns it should shift
to the end of the total available. | -| **Attribute** | `offset-lg` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `offset-lg` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### offsetMd -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | **Description** | The amount to offset the column for md screens, in terms of how many columns it should shift
to the end of the total available. | -| **Attribute** | `offset-md` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `offset-md` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### offsetSm -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | **Description** | The amount to offset the column for sm screens, in terms of how many columns it should shift
to the end of the total available. | -| **Attribute** | `offset-sm` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `offset-sm` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### offsetXl -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | **Description** | The amount to offset the column for xl screens, in terms of how many columns it should shift
to the end of the total available. | -| **Attribute** | `offset-xl` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `offset-xl` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### offsetXs -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | **Description** | The amount to offset the column for xs screens, in terms of how many columns it should shift
to the end of the total available. | -| **Attribute** | `offset-xs` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `offset-xs` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### pull -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------- | | **Description** | The amount to pull the column, in terms of how many columns it should shift to the start of
the total available. | -| **Attribute** | `pull` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `pull` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### pullLg -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | **Description** | The amount to pull the column for lg screens, in terms of how many columns it should shift
to the start of the total available. | -| **Attribute** | `pull-lg` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `pull-lg` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### pullMd -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | **Description** | The amount to pull the column for md screens, in terms of how many columns it should shift
to the start of the total available. | -| **Attribute** | `pull-md` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `pull-md` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### pullSm -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | **Description** | The amount to pull the column for sm screens, in terms of how many columns it should shift
to the start of the total available. | -| **Attribute** | `pull-sm` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `pull-sm` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### pullXl -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | **Description** | The amount to pull the column for xl screens, in terms of how many columns it should shift
to the start of the total available. | -| **Attribute** | `pull-xl` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `pull-xl` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### pullXs -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | **Description** | The amount to pull the column for xs screens, in terms of how many columns it should shift
to the start of the total available. | -| **Attribute** | `pull-xs` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `pull-xs` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### push -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------- | | **Description** | The amount to push the column, in terms of how many columns it should shift to the end
of the total available. | -| **Attribute** | `push` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `push` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### pushLg -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The amount to push the column for lg screens, in terms of how many columns it should shift
to the end of the total available. | -| **Attribute** | `push-lg` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `push-lg` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### pushMd -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The amount to push the column for md screens, in terms of how many columns it should shift
to the end of the total available. | -| **Attribute** | `push-md` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `push-md` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### pushSm -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The amount to push the column for sm screens, in terms of how many columns it should shift
to the end of the total available. | -| **Attribute** | `push-sm` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `push-sm` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### pushXl -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The amount to push the column for xl screens, in terms of how many columns it should shift
to the end of the total available. | -| **Attribute** | `push-xl` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `push-xl` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### pushXs -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The amount to push the column for xs screens, in terms of how many columns it should shift
to the end of the total available. | -| **Attribute** | `push-xs` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `push-xs` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### size -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The size of the column, in terms of how many columns it should take up out of the total
available. If `"auto"` is passed, the column will be the size of its content. | -| **Attribute** | `size` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `size` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### sizeLg -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The size of the column for lg screens, in terms of how many columns it should take up out
of the total available. If `"auto"` is passed, the column will be the size of its content. | -| **Attribute** | `size-lg` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `size-lg` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### sizeMd -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The size of the column for md screens, in terms of how many columns it should take up out
of the total available. If `"auto"` is passed, the column will be the size of its content. | -| **Attribute** | `size-md` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `size-md` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### sizeSm -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The size of the column for sm screens, in terms of how many columns it should take up out
of the total available. If `"auto"` is passed, the column will be the size of its content. | -| **Attribute** | `size-sm` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `size-sm` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### sizeXl -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The size of the column for xl screens, in terms of how many columns it should take up out
of the total available. If `"auto"` is passed, the column will be the size of its content. | -| **Attribute** | `size-xl` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `size-xl` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### sizeXs -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The size of the column for xs screens, in terms of how many columns it should take up out
of the total available. If `"auto"` is passed, the column will be the size of its content. | -| **Attribute** | `size-xs` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `size-xs` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ## CSS Custom Properties -| Name | Description | -| --- | --- | -| `--ion-grid-column-padding` | Padding for the Column | +| Name | Description | +| ------------------------------ | ------------------------------------------- | +| `--ion-grid-column-padding` | Padding for the Column | | `--ion-grid-column-padding-lg` | Padding for the Column on lg screens and up | | `--ion-grid-column-padding-md` | Padding for the Column on md screens and up | | `--ion-grid-column-padding-sm` | Padding for the Column on sm screens and up | | `--ion-grid-column-padding-xl` | Padding for the Column on xl screens and up | | `--ion-grid-column-padding-xs` | Padding for the Column on xs screens and up | -| `--ion-grid-columns` | The number of total Columns in the Grid | - +| `--ion-grid-columns` | The number of total Columns in the Grid | diff --git a/versioned_docs/version-v5/api/content.md b/versioned_docs/version-v5/api/content.md index f1938cd951a..ac74bb56cc9 100644 --- a/versioned_docs/version-v5/api/content.md +++ b/versioned_docs/version-v5/api/content.md @@ -1,8 +1,9 @@ --- -sidebar_label: "ion-content" -demoUrl: "/docs/demos/api/content/index.html" -demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/content/index.html" +sidebar_label: 'ion-content' +demoUrl: '/docs/demos/api/content/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/content/index.html' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -14,16 +15,13 @@ view. Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](../layout/css-utilities.md) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties). - ## Fixed Content In order to place elements outside of the scrollable area, `slot="fixed"` can be added to the element. This will absolutely position the element placing it in the top left. In order to place the element in a different position, style it using [top, right, bottom, and left](https://developer.mozilla.org/en-US/docs/Web/CSS/position). - ## Usage - - + @@ -32,20 +30,18 @@ In order to place elements outside of the scrollable area, `slot="fixed"` can be [scrollEvents]="true" (ionScrollStart)="logScrollStart()" (ionScroll)="logScrolling($event)" - (ionScrollEnd)="logScrollEnd()"> -

Main Content

+ (ionScrollEnd)="logScrollEnd()" +> +

Main Content

-
-

Fixed Content

-
+
+

Fixed Content

+
``` - - - ```html @@ -66,10 +62,8 @@ content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail)); content.addEventListener('ionScrollEnd', () => console.log('scroll end')); ``` - - ```tsx @@ -77,24 +71,18 @@ import React from 'react'; import { IonContent } from '@ionic/react'; const ContentExample: React.FC = () => ( - {}} - onIonScroll={() => {}} - onIonScrollEnd={() => {}}> -

Main Content

- -
-

Fixed Content

-
+ {}} onIonScroll={() => {}} onIonScrollEnd={() => {}}> +

Main Content

+ +
+

Fixed Content

+
); ``` - - ```tsx @@ -102,7 +90,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'content-example', - styleUrl: 'content-example.css' + styleUrl: 'content-example.css', }) export class ContentExample { logScrollStart() { @@ -123,22 +111,21 @@ export class ContentExample { scrollEvents={true} onIonScrollStart={() => this.logScrollStart()} onIonScroll={(ev) => this.logScrolling(ev)} - onIonScrollEnd={() => this.logScrollEnd()}> -

Main Content

- -
-

Fixed Content

-
- + onIonScrollEnd={() => this.logScrollEnd()} + > +

Main Content

+ +
+

Fixed Content

+
+ , ]; } } ``` - - ```html @@ -147,182 +134,156 @@ export class ContentExample { :scroll-events="true" @ionScrollStart="logScrollStart()" @ionScroll="logScrolling($event)" - @ionScrollEnd="logScrollEnd()"> -

Main Content

+ @ionScrollEnd="logScrollEnd()" + > +

Main Content

-
-

Fixed Content

-
+
+

Fixed Content

+
- ``` - - ## Properties - ### color -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information on colors, see [theming](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `color` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### forceOverscroll -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.
If the content exceeds the bounds of ionContent, nothing will change.
Note, the does not disable the system bounce on iOS. That is an OS level setting. | -| **Attribute** | `force-overscroll` | -| **Type** | `boolean \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `force-overscroll` | +| **Type** | `boolean \| undefined` | +| **Default** | `undefined` | ### fullscreen -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | If `true`, the content will scroll behind the headers
and footers. This effect can easily be seen by setting the toolbar
to transparent. | -| **Attribute** | `fullscreen` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `fullscreen` | +| **Type** | `boolean` | +| **Default** | `false` | ### scrollEvents -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Because of performance reasons, ionScroll events are disabled by default, in order to enable them
and start listening from (ionScroll), set this property to `true`. | -| **Attribute** | `scroll-events` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `scroll-events` | +| **Type** | `boolean` | +| **Default** | `false` | ### scrollX -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------------------------------------- | | **Description** | If you want to enable the content scrolling in the X axis, set this property to `true`. | -| **Attribute** | `scroll-x` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `scroll-x` | +| **Type** | `boolean` | +| **Default** | `false` | ### scrollY -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------------------------------------------------- | | **Description** | If you want to disable the content scrolling in the Y axis, set this property to `false`. | -| **Attribute** | `scroll-y` | -| **Type** | `boolean` | -| **Default** | `true` | - - +| **Attribute** | `scroll-y` | +| **Type** | `boolean` | +| **Default** | `true` | ## Events -| Name | Description | -| --- | --- | -| `ionScroll` | Emitted while scrolling. This event is disabled by default. -Look at the property: `scrollEvents` | -| `ionScrollEnd` | Emitted when the scroll has ended. | -| `ionScrollStart` | Emitted when the scroll has started. | - +| Name | Description | +| ------------------------------------ | ----------------------------------------------------------- | +| `ionScroll` | Emitted while scrolling. This event is disabled by default. | +| Look at the property: `scrollEvents` | +| `ionScrollEnd` | Emitted when the scroll has ended. | +| `ionScrollStart` | Emitted when the scroll has started. | ## Methods - ### getScrollElement -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Get the element where the actual scrolling takes place.
This element can be used to subscribe to `scroll` events or manually modify
`scrollTop`. However, it's recommended to use the API provided by `ion-content`:

i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events
and `scrollToPoint()` to scroll the content into a certain point. | -| **Signature** | `getScrollElement() => Promise` | - +| **Signature** | `getScrollElement() => Promise` | ### scrollByPoint -| | | -| --- | --- | -| **Description** | Scroll by a specified X/Y distance in the component. | -| **Signature** | `scrollByPoint(x: number, y: number, duration: number) => Promise` | - +| | | +| --------------- | ------------------------------------------------------------------------ | +| **Description** | Scroll by a specified X/Y distance in the component. | +| **Signature** | `scrollByPoint(x: number, y: number, duration: number) => Promise` | ### scrollToBottom -| | | -| --- | --- | -| **Description** | Scroll to the bottom of the component. | -| **Signature** | `scrollToBottom(duration?: number) => Promise` | - +| | | +| --------------- | ---------------------------------------------------- | +| **Description** | Scroll to the bottom of the component. | +| **Signature** | `scrollToBottom(duration?: number) => Promise` | ### scrollToPoint -| | | -| --- | --- | -| **Description** | Scroll to a specified X/Y location in the component. | -| **Signature** | `scrollToPoint(x: number \| undefined \| null, y: number \| undefined \| null, duration?: number) => Promise` | - +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------- | +| **Description** | Scroll to a specified X/Y location in the component. | +| **Signature** | `scrollToPoint(x: number \| undefined \| null, y: number \| undefined \| null, duration?: number) => Promise` | ### scrollToTop -| | | -| --- | --- | -| **Description** | Scroll to the top of the component. | -| **Signature** | `scrollToTop(duration?: number) => Promise` | - - +| | | +| --------------- | ------------------------------------------------- | +| **Description** | Scroll to the top of the component. | +| **Signature** | `scrollToTop(duration?: number) => Promise` | ## CSS Shadow Parts -| Name | Description | -| --- | --- | -| `background` | The background of the content. | -| `scroll` | The scrollable container of the content. | - +| Name | Description | +| ------------ | ---------------------------------------- | +| `background` | The background of the content. | +| `scroll` | The scrollable container of the content. | ## CSS Custom Properties -| Name | Description | -| --- | --- | -| `--background` | Background of the content | -| `--color` | Color of the content | -| `--keyboard-offset` | Keyboard offset of the content | -| `--offset-bottom` | Offset bottom of the content | -| `--offset-top` | Offset top of the content | -| `--padding-bottom` | Bottom padding of the content | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content | -| `--padding-top` | Top padding of the content | - +| Name | Description | +| ------------------- | ---------------------------------------------------------------------------------------------------------- | +| `--background` | Background of the content | +| `--color` | Color of the content | +| `--keyboard-offset` | Keyboard offset of the content | +| `--offset-bottom` | Offset bottom of the content | +| `--offset-top` | Offset top of the content | +| `--padding-bottom` | Bottom padding of the content | +| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content | +| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content | +| `--padding-top` | Top padding of the content | ## Slots -| Name | Description | -| --- | --- | -| `` | Content is placed in the scrollable area if provided without a slot. | -| `fixed` | Should be used for fixed content that should not scroll. | - +| Name | Description | +| ------- | -------------------------------------------------------------------- | +| `` | Content is placed in the scrollable area if provided without a slot. | +| `fixed` | Should be used for fixed content that should not scroll. | diff --git a/versioned_docs/version-v5/api/datetime.md b/versioned_docs/version-v5/api/datetime.md index 398136f0231..5e493d5d540 100644 --- a/versioned_docs/version-v5/api/datetime.md +++ b/versioned_docs/version-v5/api/datetime.md @@ -80,10 +80,7 @@ of the [IANA time zone database](https://www.iana.org/time-zones), such as "Asia "Asia/Kolkata", "America/New_York". In the following example: ```html - + ``` The displayed value will not be converted and will be displayed as provided (UTC). @@ -192,35 +189,24 @@ dates in JavaScript. ## Usage - + ```html MMMM - + MM DD YY - + Disabled - + @@ -256,11 +242,7 @@ dates in JavaScript. MM/DD/YYYY - + @@ -277,22 +259,12 @@ dates in JavaScript. D MMM YYYY H:mm - + DDDD MMM D, YYYY - + @@ -363,28 +335,17 @@ export class MyComponent { ```html MMMM - + MM DD YY - + Disabled - + @@ -420,11 +381,7 @@ export class MyComponent { MM/DD/YYYY - + @@ -441,22 +398,12 @@ export class MyComponent { D MMM YYYY H:mm - + DDDD MMM D, YYYY - + @@ -471,10 +418,7 @@ export class MyComponent { hh:mm A (15 min steps) - + @@ -503,15 +447,7 @@ var yearValuesArray = [2020, 2016, 2008, 2004, 2000, 1996]; var customYearValues = document.getElementById('customYearValues'); customYearValues.yearValues = yearValuesArray; -var dayShortNamesArray = [ - 's\u00f8n', - 'man', - 'tir', - 'ons', - 'tor', - 'fre', - 'l\u00f8r', -]; +var dayShortNamesArray = ['s\u00f8n', 'man', 'tir', 'ons', 'tor', 'fre', 'l\u00f8r']; var customDayShortNames = document.getElementById('customDayShortNames'); customDayShortNames.dayShortNames = dayShortNamesArray; @@ -554,20 +490,10 @@ import { const customYearValues = [2020, 2016, 2008, 2004, 2000, 1996]; -const customDayShortNames = [ - 's\u00f8n', - 'man', - 'tir', - 'ons', - 'tor', - 'fre', - 'l\u00f8r', -]; +const customDayShortNames = ['s\u00f8n', 'man', 'tir', 'ons', 'tor', 'fre', 'l\u00f8r']; export const DateTimeExamples: React.FC = () => { - const [selectedDate, setSelectedDate] = useState( - '2012-12-15T13:47:20.789', - ); + const [selectedDate, setSelectedDate] = useState('2012-12-15T13:47:20.789'); return ( @@ -581,7 +507,7 @@ export const DateTimeExamples: React.FC = () => { setSelectedDate(e.detail.value!)} + onIonChange={(e) => setSelectedDate(e.detail.value!)} > @@ -591,7 +517,7 @@ export const DateTimeExamples: React.FC = () => { displayFormat="MM DD YY" placeholder="Select Date" value={selectedDate} - onIonChange={e => setSelectedDate(e.detail.value!)} + onIonChange={(e) => setSelectedDate(e.detail.value!)} > @@ -602,7 +528,7 @@ export const DateTimeExamples: React.FC = () => { displayFormat="MM DD YY" disabled value={selectedDate} - onIonChange={e => setSelectedDate(e.detail.value!)} + onIonChange={(e) => setSelectedDate(e.detail.value!)} > @@ -629,7 +555,7 @@ export const DateTimeExamples: React.FC = () => { min="1981" max="2002" value={selectedDate} - onIonChange={e => setSelectedDate(e.detail.value!)} + onIonChange={(e) => setSelectedDate(e.detail.value!)} > @@ -640,7 +566,7 @@ export const DateTimeExamples: React.FC = () => { min="1989-06-04" max="2004-08-23" value={selectedDate} - onIonChange={e => setSelectedDate(e.detail.value!)} + onIonChange={(e) => setSelectedDate(e.detail.value!)} > @@ -651,7 +577,7 @@ export const DateTimeExamples: React.FC = () => { min="1994-03-14" max="2012-12-09" value={selectedDate} - onIonChange={e => setSelectedDate(e.detail.value!)} + onIonChange={(e) => setSelectedDate(e.detail.value!)} > @@ -662,7 +588,7 @@ export const DateTimeExamples: React.FC = () => { min="1994-03-14" max="2012-12-09" value={selectedDate} - onIonChange={e => setSelectedDate(e.detail.value!)} + onIonChange={(e) => setSelectedDate(e.detail.value!)} > @@ -675,7 +601,7 @@ export const DateTimeExamples: React.FC = () => { displayFormat="DDD. MMM DD, YY" monthShortNames="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des" value={selectedDate} - onIonChange={e => setSelectedDate(e.detail.value!)} + onIonChange={(e) => setSelectedDate(e.detail.value!)} > @@ -686,7 +612,7 @@ export const DateTimeExamples: React.FC = () => { min="1997" max="2010" value={selectedDate} - onIonChange={e => setSelectedDate(e.detail.value!)} + onIonChange={(e) => setSelectedDate(e.detail.value!)} > @@ -697,7 +623,7 @@ export const DateTimeExamples: React.FC = () => { min="2005" max="2016" value={selectedDate} - onIonChange={e => setSelectedDate(e.detail.value!)} + onIonChange={(e) => setSelectedDate(e.detail.value!)} > @@ -706,7 +632,7 @@ export const DateTimeExamples: React.FC = () => { setSelectedDate(e.detail.value!)} + onIonChange={(e) => setSelectedDate(e.detail.value!)} > @@ -715,7 +641,7 @@ export const DateTimeExamples: React.FC = () => { setSelectedDate(e.detail.value!)} + onIonChange={(e) => setSelectedDate(e.detail.value!)} > @@ -725,7 +651,7 @@ export const DateTimeExamples: React.FC = () => { displayFormat="h:mm A" minuteValues="0,15,30,45" value={selectedDate} - onIonChange={e => setSelectedDate(e.detail.value!)} + onIonChange={(e) => setSelectedDate(e.detail.value!)} > @@ -737,7 +663,7 @@ export const DateTimeExamples: React.FC = () => { monthValues="6,7,8" yearValues={customYearValues} value={selectedDate} - onIonChange={e => setSelectedDate(e.detail.value!)} + onIonChange={(e) => setSelectedDate(e.detail.value!)} > @@ -749,7 +675,7 @@ export const DateTimeExamples: React.FC = () => { dayValues="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" displayFormat="DD/MMM/YYYY" value={selectedDate} - onIonChange={e => setSelectedDate(e.detail.value!)} + onIonChange={(e) => setSelectedDate(e.detail.value!)} > @@ -774,15 +700,7 @@ import { Component, h } from '@stencil/core'; }) export class DatetimeExample { private customYearValues = [2020, 2016, 2008, 2004, 2000, 1996]; - private customDayShortNames = [ - 's\u00f8n', - 'man', - 'tir', - 'ons', - 'tor', - 'fre', - 'l\u00f8r', - ]; + private customDayShortNames = ['s\u00f8n', 'man', 'tir', 'ons', 'tor', 'fre', 'l\u00f8r']; private customPickerOptions = { buttons: [ { @@ -803,28 +721,17 @@ export class DatetimeExample { return [ MMMM - + , MM DD YY - + , Disabled - + , @@ -860,11 +767,7 @@ export class DatetimeExample { MM/DD/YYYY - + , @@ -881,22 +784,12 @@ export class DatetimeExample { D MMM YYYY H:mm - + , DDDD MMM D, YYYY - + , @@ -911,10 +804,7 @@ export class DatetimeExample { hh:mm A (15 min steps) - + , @@ -949,28 +839,17 @@ export class DatetimeExample { ``` - ## Properties - ### activated -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------- | | **Description** | If `true`, the fab list will show all fab buttons in the list. | -| **Attribute** | `activated` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `activated` | +| **Type** | `boolean` | +| **Default** | `false` | ### side -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------- | | **Description** | The side the fab list will show on relative to the main fab button. | -| **Attribute** | `side` | -| **Type** | `"bottom" \| "end" \| "start" \| "top"` | -| **Default** | `'bottom'` | - - +| **Attribute** | `side` | +| **Type** | `"bottom" \| "end" \| "start" \| "top"` | +| **Default** | `'bottom'` | diff --git a/versioned_docs/version-v5/api/fab.md b/versioned_docs/version-v5/api/fab.md index 37f20bf0cd8..52e799dbcfb 100644 --- a/versioned_docs/version-v5/api/fab.md +++ b/versioned_docs/version-v5/api/fab.md @@ -1,10 +1,11 @@ --- -title: "ion-fab: Floating Action Button for Android and iOS Ionic Apps" -description: "Fabs, floating action buttons, are container elements that contain one or more fab buttons. Use ion-fab when creating Android and iOS apps with Ionic Framework." -sidebar_label: "ion-fab" -demoUrl: "/docs/demos/api/fab/index.html" -demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/fab/index.html" +title: 'ion-fab: Floating Action Button for Android and iOS Ionic Apps' +description: 'Fabs, floating action buttons, are container elements that contain one or more fab buttons. Use ion-fab when creating Android and iOS apps with Ionic Framework.' +sidebar_label: 'ion-fab' +demoUrl: '/docs/demos/api/fab/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/fab/index.html' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -14,8 +15,7 @@ Fabs are container elements that contain one or more fab buttons. They should be ## Usage - - + @@ -113,10 +113,8 @@ Fabs are container elements that contain one or more fab buttons. They should be ``` - - ```html @@ -213,16 +211,37 @@ Fabs are container elements that contain one or more fab buttons. They should be ``` - - ```tsx import React from 'react'; -import { IonContent, IonHeader, IonFooter, IonPage, IonTitle, IonToolbar, IonFab, IonFabButton, IonIcon, IonFabList } from '@ionic/react'; -import { add, settings, share, person, arrowForwardCircle, arrowBackCircle, arrowUpCircle, logoVimeo, logoFacebook, logoInstagram, logoTwitter } from 'ionicons/icons'; +import { + IonContent, + IonHeader, + IonFooter, + IonPage, + IonTitle, + IonToolbar, + IonFab, + IonFabButton, + IonIcon, + IonFabList, +} from '@ionic/react'; +import { + add, + settings, + share, + person, + arrowForwardCircle, + arrowBackCircle, + arrowUpCircle, + logoVimeo, + logoFacebook, + logoInstagram, + logoTwitter, +} from 'ionicons/icons'; export const FabExamples: React.FC = () => { return ( @@ -288,7 +307,9 @@ export const FabExamples: React.FC = () => { - + + + @@ -298,16 +319,24 @@ export const FabExamples: React.FC = () => { - + + + - + + + - + + + - + + + @@ -321,10 +350,8 @@ export const FabExamples: React.FC = () => { }; ``` - - ```tsx @@ -332,7 +359,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'fab-example', - styleUrl: 'fab-example.css' + styleUrl: 'fab-example.css', }) export class FabExample { render() { @@ -399,7 +426,9 @@ export class FabExample { - + + + @@ -409,27 +438,33 @@ export class FabExample { - + + + - + + + - + + + - + + + , - - Footer - + Footer - + , ]; } } @@ -437,7 +472,6 @@ export class FabExample { - ```html @@ -536,123 +570,110 @@ export class FabExample { ``` - ## Properties - ### activated -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active.
That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible. | -| **Attribute** | `activated` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `activated` | +| **Type** | `boolean` | +| **Default** | `false` | ### edge -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Description** | If `true`, the fab will display on the edge of the header if
`vertical` is `"top"`, and on the edge of the footer if
it is `"bottom"`. Should be used with a `fixed` slot. | -| **Attribute** | `edge` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `edge` | +| **Type** | `boolean` | +| **Default** | `false` | ### horizontal -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------- | | **Description** | Where to align the fab horizontally in the viewport. | -| **Attribute** | `horizontal` | -| **Type** | `"center" \| "end" \| "start" \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `horizontal` | +| **Type** | `"center" \| "end" \| "start" \| undefined` | +| **Default** | `undefined` | ### vertical -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------- | | **Description** | Where to align the fab vertically in the viewport. | -| **Attribute** | `vertical` | -| **Type** | `"bottom" \| "center" \| "top" \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `vertical` | +| **Type** | `"bottom" \| "center" \| "top" \| undefined` | +| **Default** | `undefined` | ## Methods - ### close -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------- | | **Description** | Close an active FAB list container. | -| **Signature** | `close() => Promise` | - - +| **Signature** | `close() => Promise` | diff --git a/versioned_docs/version-v5/api/footer.md b/versioned_docs/version-v5/api/footer.md index 95acaf59286..a2ffb3b8d35 100644 --- a/versioned_docs/version-v5/api/footer.md +++ b/versioned_docs/version-v5/api/footer.md @@ -1,8 +1,9 @@ --- -title: "Page Footer | Ionic App Footer: Wrapper Root Page Component" -description: "A footer is a root component that sits at the bottom of a page. Ionic footers can be a wrapper for ion-toolbar to make sure the content area is sized correctly." -sidebar_label: "ion-footer" +title: 'Page Footer | Ionic App Footer: Wrapper Root Page Component' +description: 'A footer is a root component that sits at the bottom of a page. Ionic footers can be a wrapper for ion-toolbar to make sure the content area is sized correctly.' +sidebar_label: 'ion-footer' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -13,8 +14,7 @@ Footer can be a wrapper for ion-toolbar to make sure the content area is sized c ## Usage - - + @@ -35,10 +35,8 @@ Footer can be a wrapper for ion-toolbar to make sure the content area is sized c ``` - - ```html @@ -58,10 +56,8 @@ Footer can be a wrapper for ion-toolbar to make sure the content area is sized c ``` - - ```tsx @@ -71,7 +67,7 @@ import { IonContent, IonFooter, IonToolbar, IonTitle } from '@ionic/react'; export const FooterExample: React.FC = () => ( <> - + {/*-- Footer without a border --*/} @@ -88,10 +84,8 @@ export const FooterExample: React.FC = () => ( ); ``` - - ```tsx @@ -99,7 +93,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'footer-example', - styleUrl: 'footer-example.css' + styleUrl: 'footer-example.css', }) export class FooterExample { render() { @@ -117,29 +111,27 @@ export class FooterExample { Footer - + , ]; } } ``` - - ```html ``` - ## Properties - ### mode -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------- | | **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - - +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | ### translucent -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | If `true`, the footer will be translucent.
Only applies when the mode is `"ios"` and the device supports
[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).

Note: In order to scroll content behind the footer, the `fullscreen`
attribute needs to be set on the content. | -| **Attribute** | `translucent` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `translucent` | +| **Type** | `boolean` | +| **Default** | `false` | diff --git a/versioned_docs/version-v5/api/grid.md b/versioned_docs/version-v5/api/grid.md index 081960dfed0..b7e430e896c 100644 --- a/versioned_docs/version-v5/api/grid.md +++ b/versioned_docs/version-v5/api/grid.md @@ -1,16 +1,16 @@ --- -title: "Ion-Grid: Display Grids to Build Mobile-First Custom App Layout" -description: "Ion-Grid is a mobile-first flexbox system to build custom application display layouts with a 12 column layout and different breakpoints based on screen size." -sidebar_label: "ion-grid" -demoUrl: "/docs/demos/api/grid/index.html" -demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/grid/index.html" +title: 'Ion-Grid: Display Grids to Build Mobile-First Custom App Layout' +description: 'Ion-Grid is a mobile-first flexbox system to build custom application display layouts with a 12 column layout and different breakpoints based on screen size.' +sidebar_label: 'ion-grid' +demoUrl: '/docs/demos/api/grid/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/grid/index.html' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; # ion-grid - The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units — a grid, [row(s)](row.md) and [column(s)](col.md). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS. @@ -19,379 +19,222 @@ See the [Responsive Grid documentation](../layout/grid.md) for more information. ## Usage - - + ```html - - ion-col - - - ion-col - - - ion-col - - - ion-col - + ion-col + ion-col + ion-col + ion-col - - ion-col [size="6"] - - - ion-col - - - ion-col - + ion-col [size="6"] + ion-col + ion-col - - ion-col [size="3"] - - - ion-col - - - ion-col [size="3"] - + ion-col [size="3"] + ion-col + ion-col [size="3"] - - ion-col [size="3"] - - - ion-col [size="3"] [offset="3"] - + ion-col [size="3"] + ion-col [size="3"] [offset="3"] + ion-col ion-col +
# ion-col -
# +
#
# ion-col -
# -
# - - - ion-col -
# -
# -
# +
#
#
# - - ion-col [start] - - - ion-col [center] - - - ion-col [end] - + ion-col [start] + ion-col [center] + ion-col [end] ion-col -
# -
# +
#
# - - [start] ion-col - - - [start] ion-col - - - [start] ion-col [end] - + [start] ion-col + [start] ion-col + [start] ion-col [end] ion-col -
# -
# +
#
# - - [center] ion-col - - - [center] ion-col - - - [center] ion-col - + [center] ion-col + [center] ion-col + [center] ion-col ion-col -
# -
# +
#
# - - [end] ion-col - - - [end] ion-col [start] - - - [end] ion-col - + [end] ion-col + [end] ion-col [start] + [end] ion-col ion-col -
# -
# +
#
# - - ion-col [size="12"] [size-sm] - - - ion-col [size="12"] [size-sm] - - - ion-col [size="12"] [size-sm] - - - ion-col [size="12"] [size-sm] - + ion-col [size="12"] [size-sm] + ion-col [size="12"] [size-sm] + ion-col [size="12"] [size-sm] + ion-col [size="12"] [size-sm] - - ion-col [size="12"] [size-md] - - - ion-col [size="12"] [size-md] - - - ion-col [size="12"] [size-md] - - - ion-col [size="12"] [size-md] - + ion-col [size="12"] [size-md] + ion-col [size="12"] [size-md] + ion-col [size="12"] [size-md] + ion-col [size="12"] [size-md] - - ion-col [size="6"] [size-lg] [offset="3"] - - - ion-col [size="3"] [size-lg] - + ion-col [size="6"] [size-lg] [offset="3"] + ion-col [size="3"] [size-lg] ``` - ```html - - ion-col - - - ion-col - - - ion-col - - - ion-col - + ion-col + ion-col + ion-col + ion-col - - ion-col [size="6"] - - - ion-col - - - ion-col - + ion-col [size="6"] + ion-col + ion-col - - ion-col [size="3"] - - - ion-col - - - ion-col [size="3"] - + ion-col [size="3"] + ion-col + ion-col [size="3"] - - ion-col [size="3"] - - - ion-col [size="3"] [offset="3"] - + ion-col [size="3"] + ion-col [size="3"] [offset="3"] + ion-col ion-col +
# ion-col -
# +
#
# ion-col -
# -
# - - - ion-col -
# -
# -
# +
#
#
# - - ion-col [start] - - - ion-col [center] - - - ion-col [end] - + ion-col [start] + ion-col [center] + ion-col [end] ion-col -
# -
# +
#
# - - [start] ion-col - - - [start] ion-col - - - [start] ion-col [end] - + [start] ion-col + [start] ion-col + [start] ion-col [end] ion-col -
# -
# +
#
# - - [center] ion-col - - - [center] ion-col - - - [center] ion-col - + [center] ion-col + [center] ion-col + [center] ion-col ion-col -
# -
# +
#
# - - [end] ion-col - - - [end] ion-col [start] - - - [end] ion-col - + [end] ion-col + [end] ion-col [start] + [end] ion-col ion-col -
# -
# +
#
# - - ion-col [size="12"] [size-sm] - - - ion-col [size="12"] [size-sm] - - - ion-col [size="12"] [size-sm] - - - ion-col [size="12"] [size-sm] - + ion-col [size="12"] [size-sm] + ion-col [size="12"] [size-sm] + ion-col [size="12"] [size-sm] + ion-col [size="12"] [size-sm] - - ion-col [size="12"] [size-md] - - - ion-col [size="12"] [size-md] - - - ion-col [size="12"] [size-md] - - - ion-col [size="12"] [size-md] - + ion-col [size="12"] [size-md] + ion-col [size="12"] [size-md] + ion-col [size="12"] [size-md] + ion-col [size="12"] [size-md] - - ion-col [size="6"] [size-lg] [offset="3"] - - - ion-col [size="3"] [size-lg] - + ion-col [size="6"] [size-lg] [offset="3"] + ion-col [size="3"] [size-lg] ``` - ```tsx @@ -535,7 +378,6 @@ export const GridExample: React.FC = () => ( - ```tsx @@ -543,146 +385,98 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'grid-example', - styleUrl: 'grid-example.css' + styleUrl: 'grid-example.css', }) export class GridExample { render() { return [ - - ion-col - - - ion-col - - - ion-col - - - ion-col - + ion-col + ion-col + ion-col + ion-col - - ion-col [size="6"] - - - ion-col - - - ion-col - + ion-col [size="6"] + ion-col + ion-col - - ion-col [size="3"] - - - ion-col - - - ion-col [size="3"] - + ion-col [size="3"] + ion-col + ion-col [size="3"] - - ion-col [size="3"] - + ion-col [size="3"] ion-col [size="3"] [offset="3"] + ion-col ion-col +
# ion-col -
# - - - ion-col -
# -
# +
# +
# ion-col -
# -
# -
# +
# +
# +
# - - ion-col [start] - - - ion-col [center] - - - ion-col [end] - + ion-col [start] + ion-col [center] + ion-col [end] ion-col -
# -
# +
# +
# - - [start] ion-col - - - [start] ion-col - - - [start] ion-col [end] - + [start] ion-col + [start] ion-col + [start] ion-col [end] ion-col -
# -
# +
# +
# - - [center] ion-col - - - [center] ion-col - - - [center] ion-col - + [center] ion-col + [center] ion-col + [center] ion-col ion-col -
# -
# +
# +
# - - [end] ion-col - - - [end] ion-col [start] - - - [end] ion-col - + [end] ion-col + [end] ion-col [start] + [end] ion-col ion-col -
# -
# +
# +
# @@ -724,206 +518,127 @@ export class GridExample { ion-col [size="3"] [sizeLg] - + , ]; } } ``` - - ```html ``` @@ -933,32 +648,28 @@ export default defineComponent({ ## Properties - ### fixed -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------------------- | | **Description** | If `true`, the grid will have a fixed width based on the screen size. | -| **Attribute** | `fixed` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `fixed` | +| **Type** | `boolean` | +| **Default** | `false` | ## CSS Custom Properties -| Name | Description | -| --- | --- | -| `--ion-grid-padding` | Padding for the Grid | -| `--ion-grid-padding-lg` | Padding for the Grid on lg screens | -| `--ion-grid-padding-md` | Padding for the Grid on md screens | -| `--ion-grid-padding-sm` | Padding for the Grid on sm screens | -| `--ion-grid-padding-xl` | Padding for the Grid on xl screens | -| `--ion-grid-padding-xs` | Padding for the Grid on xs screens | -| `--ion-grid-width` | Width of the fixed Grid | -| `--ion-grid-width-lg` | Width of the fixed Grid on lg screens | -| `--ion-grid-width-md` | Width of the fixed Grid on md screens | -| `--ion-grid-width-sm` | Width of the fixed Grid on sm screens | -| `--ion-grid-width-xl` | Width of the fixed Grid on xl screens | -| `--ion-grid-width-xs` | Width of the fixed Grid on xs screens | - +| Name | Description | +| ----------------------- | ------------------------------------- | +| `--ion-grid-padding` | Padding for the Grid | +| `--ion-grid-padding-lg` | Padding for the Grid on lg screens | +| `--ion-grid-padding-md` | Padding for the Grid on md screens | +| `--ion-grid-padding-sm` | Padding for the Grid on sm screens | +| `--ion-grid-padding-xl` | Padding for the Grid on xl screens | +| `--ion-grid-padding-xs` | Padding for the Grid on xs screens | +| `--ion-grid-width` | Width of the fixed Grid | +| `--ion-grid-width-lg` | Width of the fixed Grid on lg screens | +| `--ion-grid-width-md` | Width of the fixed Grid on md screens | +| `--ion-grid-width-sm` | Width of the fixed Grid on sm screens | +| `--ion-grid-width-xl` | Width of the fixed Grid on xl screens | +| `--ion-grid-width-xs` | Width of the fixed Grid on xs screens | diff --git a/versioned_docs/version-v5/api/header.md b/versioned_docs/version-v5/api/header.md index 3e8fb200cc1..408f8372613 100644 --- a/versioned_docs/version-v5/api/header.md +++ b/versioned_docs/version-v5/api/header.md @@ -1,8 +1,9 @@ --- -title: "ion-header: Header Parent Component for Ionic Framework Apps" +title: 'ion-header: Header Parent Component for Ionic Framework Apps' description: "Ion-header is a parent component that holds the toolbar. It's important to note that ion-header needs to be the one of the three root elements of a page." -sidebar_label: "ion-header" +sidebar_label: 'ion-header' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -11,12 +12,9 @@ import TabItem from '@theme/TabItem'; Header is a parent component that holds the toolbar component. It's important to note that ion-header needs to be the one of the three root elements of a page - - ## Usage - - + @@ -50,10 +48,8 @@ It's important to note that ion-header needs to be the one of the three root ele ``` - - ```html @@ -86,10 +82,8 @@ It's important to note that ion-header needs to be the one of the three root ele ``` - - ```tsx @@ -105,19 +99,19 @@ export const HeaderExample: React.FC = () => ( My Navigation Bar - + Subheader - + {/*-- Header without a border --*/} - - Header - No Border - + + Header - No Border + - + @@ -131,7 +125,6 @@ export const HeaderExample: React.FC = () => ( - ```tsx @@ -139,7 +132,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'header-example', - styleUrl: 'header-example.css' + styleUrl: 'header-example.css', }) export class HeaderExample { render() { @@ -170,16 +163,14 @@ export class HeaderExample { My Navigation Bar - + , ]; } } ``` - - ```html @@ -191,19 +182,19 @@ export class HeaderExample { My Navigation Bar - + Subheader - + Header - No Border - + @@ -214,66 +205,51 @@ export class HeaderExample { ``` - ## Properties - ### collapse -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Describes the scroll effect that will be applied to the header
`condense` only applies in iOS mode.

Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles) | -| **Attribute** | `collapse` | -| **Type** | `"condense" \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `collapse` | +| **Type** | `"condense" \| undefined` | +| **Default** | `undefined` | ### mode -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------- | | **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - - +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | ### translucent -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | If `true`, the header will be translucent.
Only applies when the mode is `"ios"` and the device supports
[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).

Note: In order to scroll content behind the header, the `fullscreen`
attribute needs to be set on the content. | -| **Attribute** | `translucent` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `translucent` | +| **Type** | `boolean` | +| **Default** | `false` | diff --git a/versioned_docs/version-v5/api/img.md b/versioned_docs/version-v5/api/img.md index 2273760bfa0..9be6a58b969 100644 --- a/versioned_docs/version-v5/api/img.md +++ b/versioned_docs/version-v5/api/img.md @@ -1,8 +1,9 @@ --- -title: "Img Tag to Lazy Load Images in Viewport | ion-img Tag" -description: "Img tag lazy loads images whenever the tag is in the viewport. Utilize this component when generating large lists—as images are only loaded when visible." -sidebar_label: "ion-img" +title: 'Img Tag to Lazy Load Images in Viewport | ion-img Tag' +description: 'Img tag lazy loads images whenever the tag is in the viewport. Utilize this component when generating large lists—as images are only loaded when visible.' +sidebar_label: 'ion-img' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -10,11 +11,9 @@ import TabItem from '@theme/TabItem'; Img is a tag that will lazily load an image when ever the tag is in the viewport. This is extremely useful when generating a large list as images are only loaded when they're visible. The component uses [Intersection Observer](https://caniuse.com/#feat=intersectionobserver) internally, which is supported in most modern browser, but falls back to a `setTimeout` when it is not supported. - ## Usage - - + @@ -29,10 +28,8 @@ Img is a tag that will lazily load an image when ever the tag is in the viewport ``` - - ```tsx @@ -63,7 +60,6 @@ export const ImgExample: React.FC = () => ( - ```tsx @@ -71,32 +67,36 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'img-example', - styleUrl: 'img-example.css' + styleUrl: 'img-example.css', }) export class ImgExample { - private items = [{ - 'text': 'Item 1', - 'src': '/path/to/external/file.png' - }, { - 'text': 'Item 2', - 'src': '/path/to/external/file.png' - }, { - 'text': 'Item 3', - 'src': '/path/to/external/file.png' - }]; + private items = [ + { + text: 'Item 1', + src: '/path/to/external/file.png', + }, + { + text: 'Item 2', + src: '/path/to/external/file.png', + }, + { + text: 'Item 3', + src: '/path/to/external/file.png', + }, + ]; render() { return [ - {this.items.map(item => + {this.items.map((item) => ( {item.text} - )} - + ))} + , ]; } } @@ -104,7 +104,6 @@ export class ImgExample { - ```html @@ -120,70 +119,66 @@ export class ImgExample { ``` - ## Properties - ### alt -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | This attribute defines the alternative text describing the image.
Users will see this text displayed if the image URL is wrong,
the image is not in one of the supported formats, or if the image is not yet downloaded. | -| **Attribute** | `alt` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `alt` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### src -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------- | | **Description** | The image URL. This attribute is mandatory for the `` element. | -| **Attribute** | `src` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `src` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ## Events -| Name | Description | -| --- | --- | -| `ionError` | Emitted when the img fails to load | -| `ionImgDidLoad` | Emitted when the image has finished loading | -| `ionImgWillLoad` | Emitted when the img src has been set | - +| Name | Description | +| ---------------- | ------------------------------------------- | +| `ionError` | Emitted when the img fails to load | +| `ionImgDidLoad` | Emitted when the image has finished loading | +| `ionImgWillLoad` | Emitted when the img src has been set | ## CSS Shadow Parts -| Name | Description | -| --- | --- | +| Name | Description | +| ------- | ------------------------ | | `image` | The inner `img` element. | - diff --git a/versioned_docs/version-v5/api/infinite-scroll-content.md b/versioned_docs/version-v5/api/infinite-scroll-content.md index 5cd6fffbe30..2d86064b740 100644 --- a/versioned_docs/version-v5/api/infinite-scroll-content.md +++ b/versioned_docs/version-v5/api/infinite-scroll-content.md @@ -1,6 +1,7 @@ --- -sidebar_label: "ion-infinite-scroll-content" +sidebar_label: 'ion-infinite-scroll-content' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -14,43 +15,34 @@ The `ion-infinite-scroll-content` component is not supported in React. ## Usage - - + ```html - + ``` - - ```html - + ``` - - ```tsx @@ -58,7 +50,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'infinite-scroll-content-example', - styleUrl: 'infinite-scroll-content-example.css' + styleUrl: 'infinite-scroll-content-example.css', }) export class InfiniteScrollContentExample { render() { @@ -67,10 +59,10 @@ export class InfiniteScrollContentExample { - + loadingText="Loading more data..." + > - + , ]; } } @@ -78,7 +70,6 @@ export class InfiniteScrollContentExample { - ```html @@ -114,32 +105,26 @@ export default defineComponent({ }); ``` - ## Properties - ### loadingSpinner -| | | -| --- | --- | -| **Description** | An animated SVG spinner that shows while loading. | -| **Attribute** | `loading-spinner` | -| **Type** | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | -| **Default** | `undefined` | - - +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------- | +| **Description** | An animated SVG spinner that shows while loading. | +| **Attribute** | `loading-spinner` | +| **Type** | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | +| **Default** | `undefined` | ### loadingText -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Optional text to display while loading.
`loadingText` can accept either plaintext or HTML as a string.
To display characters normally reserved for HTML, they
must be escaped. For example `` would become
`<Ionic>`

For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | -| **Attribute** | `loading-text` | -| **Type** | `IonicSafeString \| string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `loading-text` | +| **Type** | `IonicSafeString \| string \| undefined` | +| **Default** | `undefined` | diff --git a/versioned_docs/version-v5/api/infinite-scroll.md b/versioned_docs/version-v5/api/infinite-scroll.md index 6c78a5f501c..b4fc0e0856f 100644 --- a/versioned_docs/version-v5/api/infinite-scroll.md +++ b/versioned_docs/version-v5/api/infinite-scroll.md @@ -25,23 +25,18 @@ Separating the `ion-infinite-scroll` and `ion-infinite-scroll-content` component ## Usage - + ```html - - Toggle Infinite Scroll - + Toggle Infinite Scroll - + @@ -86,17 +81,12 @@ export class InfiniteScrollExample { ```html - - Toggle Infinite Scroll - + Toggle Infinite Scroll - + @@ -183,17 +173,14 @@ export class InfiniteScrollExample { - {this.data.map(item => ( + {this.data.map((item) => ( {item} ))} - (this.infiniteScroll = el)} - onIonInfinite={ev => this.loadData(ev)} - > + (this.infiniteScroll = el)} onIonInfinite={(ev) => this.loadData(ev)}> - - Toggle Infinite Scroll - + Toggle Infinite Scroll @@ -229,10 +214,7 @@ export class InfiniteScrollExample { id="infinite-scroll" :disabled="isDisabled" > - + diff --git a/versioned_docs/version-v5/api/input.md b/versioned_docs/version-v5/api/input.md index d475d31ec68..e0d9bbccfba 100644 --- a/versioned_docs/version-v5/api/input.md +++ b/versioned_docs/version-v5/api/input.md @@ -1,8 +1,9 @@ --- -sidebar_label: "ion-input" -demoUrl: "/docs/demos/api/input/index.html" -demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/input/index.html" +sidebar_label: 'ion-input' +demoUrl: '/docs/demos/api/input/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/input/index.html' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -12,11 +13,9 @@ The input component is a wrapper to the HTML input element with custom styling a It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, and `"url"`. It supports all standard text input events including keyup, keydown, keypress, and more. - ## Usage - - + @@ -66,7 +65,6 @@ It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email - ```html @@ -115,15 +113,24 @@ It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email - ```tsx import React, { useState } from 'react'; -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonInput, IonItem, IonLabel, IonList, IonItemDivider } from '@ionic/react'; +import { + IonContent, + IonHeader, + IonPage, + IonTitle, + IonToolbar, + IonInput, + IonItem, + IonLabel, + IonList, + IonItemDivider, +} from '@ionic/react'; export const InputExamples: React.FC = () => { - const [text, setText] = useState(); const [number, setNumber] = useState(); @@ -138,17 +145,27 @@ export const InputExamples: React.FC = () => { Default Input with Placeholder - setText(e.detail.value!)}> + setText(e.detail.value!)}> Input with clear button when there is a value - setText(e.detail.value!)} clearInput> + setText(e.detail.value!)} + clearInput + > Number type input - setNumber(parseInt(e.detail.value!, 10))}> + setNumber(parseInt(e.detail.value!, 10))} + > Disabled input @@ -191,7 +208,6 @@ export const InputExamples: React.FC = () => { - ```tsx @@ -199,7 +215,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'input-example', - styleUrl: 'input-example.css' + styleUrl: 'input-example.css', }) export class InputExample { render() { @@ -244,7 +260,7 @@ export class InputExample { Stacked Label - + , ]; } } @@ -252,7 +268,6 @@ export class InputExample { - ```html @@ -301,12 +316,12 @@ export class InputExample { ``` @@ -316,357 +331,294 @@ export default defineComponent({ ## Properties - ### accept -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | If the value of the type attribute is `"file"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers. | -| **Attribute** | `accept` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `accept` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### autocapitalize -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`. | -| **Attribute** | `autocapitalize` | -| **Type** | `string` | -| **Default** | `'off'` | - - +| **Attribute** | `autocapitalize` | +| **Type** | `string` | +| **Default** | `'off'` | ### autocomplete -| | | -| --- | --- | -| **Description** | Indicates whether the value of the control can be automatically completed by the browser. | -| **Attribute** | `autocomplete` | -| **Type** | `"on" \| "off" \| "name" \| "honorific-prefix" \| "given-name" \| "additional-name" \| "family-name" \| "honorific-suffix" \| "nickname" \| "email" \| "username" \| "new-password" \| "current-password" \| "one-time-code" \| "organization-title" \| "organization" \| "street-address" \| "address-line1" \| "address-line2" \| "address-line3" \| "address-level4" \| "address-level3" \| "address-level2" \| "address-level1" \| "country" \| "country-name" \| "postal-code" \| "cc-name" \| "cc-given-name" \| "cc-additional-name" \| "cc-family-name" \| "cc-number" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-csc" \| "cc-type" \| "transaction-currency" \| "transaction-amount" \| "language" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "sex" \| "tel" \| "tel-country-code" \| "tel-national" \| "tel-area-code" \| "tel-local" \| "tel-extension" \| "impp" \| "url" \| "photo"` | -| **Default** | `'off'` | - - +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | Indicates whether the value of the control can be automatically completed by the browser. | +| **Attribute** | `autocomplete` | +| **Type** | `"on" \| "off" \| "name" \| "honorific-prefix" \| "given-name" \| "additional-name" \| "family-name" \| "honorific-suffix" \| "nickname" \| "email" \| "username" \| "new-password" \| "current-password" \| "one-time-code" \| "organization-title" \| "organization" \| "street-address" \| "address-line1" \| "address-line2" \| "address-line3" \| "address-level4" \| "address-level3" \| "address-level2" \| "address-level1" \| "country" \| "country-name" \| "postal-code" \| "cc-name" \| "cc-given-name" \| "cc-additional-name" \| "cc-family-name" \| "cc-number" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-csc" \| "cc-type" \| "transaction-currency" \| "transaction-amount" \| "language" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "sex" \| "tel" \| "tel-country-code" \| "tel-national" \| "tel-area-code" \| "tel-local" \| "tel-extension" \| "impp" \| "url" \| "photo"` | +| **Default** | `'off'` | ### autocorrect -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------- | | **Description** | Whether auto correction should be enabled when the user is entering/editing the text value. | -| **Attribute** | `autocorrect` | -| **Type** | `"off" \| "on"` | -| **Default** | `'off'` | - - +| **Attribute** | `autocorrect` | +| **Type** | `"off" \| "on"` | +| **Default** | `'off'` | ### autofocus -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------- | | **Description** | This Boolean attribute lets you specify that a form control should have input focus when the page loads. | -| **Attribute** | `autofocus` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `autofocus` | +| **Type** | `boolean` | +| **Default** | `false` | ### clearInput -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------------------------------------------------------------- | | **Description** | If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. | -| **Attribute** | `clear-input` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `clear-input` | +| **Type** | `boolean` | +| **Default** | `false` | ### clearOnEdit -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. | -| **Attribute** | `clear-on-edit` | -| **Type** | `boolean \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `clear-on-edit` | +| **Type** | `boolean \| undefined` | +| **Default** | `undefined` | ### color -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information on colors, see [theming](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `color` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### debounce -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`. | -| **Attribute** | `debounce` | -| **Type** | `number` | -| **Default** | `0` | - - +| **Attribute** | `debounce` | +| **Type** | `number` | +| **Default** | `0` | ### disabled -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------- | | **Description** | If `true`, the user cannot interact with the input. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | ### enterkeyhint -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | A hint to the browser for which enter key to display.
Possible values: `"enter"`, `"done"`, `"go"`, `"next"`,
`"previous"`, `"search"`, and `"send"`. | -| **Attribute** | `enterkeyhint` | -| **Type** | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `enterkeyhint` | +| **Type** | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined` | +| **Default** | `undefined` | ### inputmode -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | A hint to the browser for which keyboard to display.
Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,
`"email"`, `"numeric"`, `"decimal"`, and `"search"`. | -| **Attribute** | `inputmode` | -| **Type** | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url" \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `inputmode` | +| **Type** | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url" \| undefined` | +| **Default** | `undefined` | ### max -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------------------------------- | | **Description** | The maximum value, which must not be less than its minimum (min attribute) value. | -| **Attribute** | `max` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `max` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### maxlength -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter. | -| **Attribute** | `maxlength` | -| **Type** | `number \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `maxlength` | +| **Type** | `number \| undefined` | +| **Default** | `undefined` | ### min -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------ | | **Description** | The minimum value, which must not be greater than its maximum (max attribute) value. | -| **Attribute** | `min` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `min` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### minlength -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter. | -| **Attribute** | `minlength` | -| **Type** | `number \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `minlength` | +| **Type** | `number \| undefined` | +| **Default** | `undefined` | ### mode -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------- | | **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - - +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | ### multiple -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored. | -| **Attribute** | `multiple` | -| **Type** | `boolean \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `multiple` | +| **Type** | `boolean \| undefined` | +| **Default** | `undefined` | ### name -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------------- | | **Description** | The name of the control, which is submitted with the form data. | -| **Attribute** | `name` | -| **Type** | `string` | -| **Default** | `this.inputId` | - - +| **Attribute** | `name` | +| **Type** | `string` | +| **Default** | `this.inputId` | ### pattern -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Description** | A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, `"date"`, or `"password"`, otherwise it is ignored. When the type attribute is `"date"`, `pattern` will only be used in browsers that do not support the `"date"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information. | -| **Attribute** | `pattern` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `pattern` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### placeholder -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------------------- | | **Description** | Instructional text that shows before the input has a value. | -| **Attribute** | `placeholder` | -| **Type** | `null \| string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `placeholder` | +| **Type** | `null \| string \| undefined` | +| **Default** | `undefined` | ### readonly -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------- | | **Description** | If `true`, the user cannot modify the value. | -| **Attribute** | `readonly` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `readonly` | +| **Type** | `boolean` | +| **Default** | `false` | ### required -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------ | | **Description** | If `true`, the user must fill in a value before submitting a form. | -| **Attribute** | `required` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `required` | +| **Type** | `boolean` | +| **Default** | `false` | ### size -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored. | -| **Attribute** | `size` | -| **Type** | `number \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `size` | +| **Type** | `number \| undefined` | +| **Default** | `undefined` | ### spellcheck -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------ | | **Description** | If `true`, the element will have its spelling and grammar checked. | -| **Attribute** | `spellcheck` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `spellcheck` | +| **Type** | `boolean` | +| **Default** | `false` | ### step -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Works with the min and max attributes to limit the increments at which a value can be set.
Possible values are: `"any"` or a positive floating point number. | -| **Attribute** | `step` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `step` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### type -| | | -| --- | --- | -| **Description** | The type of control to display. The default type is text. | -| **Attribute** | `type` | -| **Type** | `"date" \| "datetime-local" \| "email" \| "month" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "time" \| "url" \| "week"` | -| **Default** | `'text'` | - - +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | The type of control to display. The default type is text. | +| **Attribute** | `type` | +| **Type** | `"date" \| "datetime-local" \| "email" \| "month" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "time" \| "url" \| "week"` | +| **Default** | `'text'` | ### value -| | | -| --- | --- | -| **Description** | The value of the input. | -| **Attribute** | `value` | -| **Type** | `null \| number \| string \| undefined` | -| **Default** | `''` | - - +| | | +| --------------- | --------------------------------------- | +| **Description** | The value of the input. | +| **Attribute** | `value` | +| **Type** | `null \| number \| string \| undefined` | +| **Default** | `''` | ## Events -| Name | Description | -| --- | --- | -| `ionBlur` | Emitted when the input loses focus. | -| `ionChange` | Emitted when the value has changed. | -| `ionFocus` | Emitted when the input has focus. | -| `ionInput` | Emitted when a keyboard input occurred. | - +| Name | Description | +| ----------- | --------------------------------------- | +| `ionBlur` | Emitted when the input loses focus. | +| `ionChange` | Emitted when the value has changed. | +| `ionFocus` | Emitted when the input has focus. | +| `ionInput` | Emitted when a keyboard input occurred. | ## Methods - ### getInputElement -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------- | | **Description** | Returns the native `` element used under the hood. | -| **Signature** | `getInputElement() => Promise` | - +| **Signature** | `getInputElement() => Promise` | ### setFocus -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------ | | **Description** | Sets focus on the native `input` in `ion-input`. Use this method instead of the global
`input.focus()`. | -| **Signature** | `setFocus() => Promise` | - - +| **Signature** | `setFocus() => Promise` | ## CSS Custom Properties -| Name | Description | -| --- | --- | -| `--background` | Background of the input | -| `--color` | Color of the input text | -| `--padding-bottom` | Bottom padding of the input | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input | -| `--padding-top` | Top padding of the input | -| `--placeholder-color` | Color of the input placeholder text | -| `--placeholder-font-style` | Font style of the input placeholder text | -| `--placeholder-font-weight` | Font weight of the input placeholder text | -| `--placeholder-opacity` | Opacity of the input placeholder text | - +| Name | Description | +| --------------------------- | -------------------------------------------------------------------------------------------------------- | +| `--background` | Background of the input | +| `--color` | Color of the input text | +| `--padding-bottom` | Bottom padding of the input | +| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input | +| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input | +| `--padding-top` | Top padding of the input | +| `--placeholder-color` | Color of the input placeholder text | +| `--placeholder-font-style` | Font style of the input placeholder text | +| `--placeholder-font-weight` | Font weight of the input placeholder text | +| `--placeholder-opacity` | Opacity of the input placeholder text | diff --git a/versioned_docs/version-v5/api/item-divider.md b/versioned_docs/version-v5/api/item-divider.md index 6428f622b3d..e1ff65306db 100644 --- a/versioned_docs/version-v5/api/item-divider.md +++ b/versioned_docs/version-v5/api/item-divider.md @@ -1,8 +1,9 @@ --- -title: "Item Divider | List Item Divider Block Element for Ionic Apps" -description: "Item Dividers are block elements that can be used to separate items in a list. They are similar to list headers, but instead, go in between groups of items." -sidebar_label: "ion-item-divider" +title: 'Item Divider | List Item Divider Block Element for Ionic Apps' +description: 'Item Dividers are block elements that can be used to separate items in a list. They are similar to list headers, but instead, go in between groups of items.' +sidebar_label: 'ion-item-divider' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -12,30 +13,23 @@ Item Dividers are block elements that can be used to separate items in a list. T ## Usage - - + ```html - - Basic Item Divider - + Basic Item Divider - - Secondary Item Divider - + Secondary Item Divider - - Section A - + Section A A1 @@ -45,9 +39,7 @@ Item Dividers are block elements that can be used to separate items in a list. T A5 - - Section B - + Section B B1 @@ -58,31 +50,23 @@ Item Dividers are block elements that can be used to separate items in a list. T ``` - - ```html - - Basic Item Divider - + Basic Item Divider - - Secondary Item Divider - + Secondary Item Divider - - Section A - + Section A A1 @@ -92,9 +76,7 @@ Item Dividers are block elements that can be used to separate items in a list. T A5 - - Section B - + Section B B1 @@ -105,10 +87,8 @@ Item Dividers are block elements that can be used to separate items in a list. T ``` - - ```tsx @@ -118,42 +98,54 @@ import { IonItemDivider, IonLabel, IonList, IonItem, IonContent } from '@ionic/r export const ItemDividerExample: React.FC = () => ( - - Basic Item Divider - + Basic Item Divider - - Secondary Item Divider - + Secondary Item Divider {/*-- Item Dividers in a List --*/} - - Section A - + Section A - A1 - A2 - A3 - A4 - A5 + + A1 + + + A2 + + + A3 + + + A4 + + + A5 + - - Section B - + Section B - B1 - B2 - B3 - B4 - B5 + + B1 + + + B2 + + + B3 + + + B4 + + + B5 + ); @@ -161,7 +153,6 @@ export const ItemDividerExample: React.FC = () => ( - ```tsx @@ -169,49 +160,61 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'item-divider-example', - styleUrl: 'item-divider-example.css' + styleUrl: 'item-divider-example.css', }) export class ItemDividerExample { render() { return [ - - Basic Item Divider - + Basic Item Divider , - - Secondary Item Divider - + Secondary Item Divider , // Item Dividers in a List - - Section A - + Section A - A1 - A2 - A3 - A4 - A5 + + A1 + + + A2 + + + A3 + + + A4 + + + A5 + - - Section B - + Section B - B1 - B2 - B3 - B4 - B5 - + + B1 + + + B2 + + + B3 + + + B4 + + + B5 + + , ]; } } @@ -219,29 +222,22 @@ export class ItemDividerExample { - ```html ``` - ## Properties - ### color -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information on colors, see [theming](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `color` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### mode -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------- | | **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - - +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | ### sticky -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Description** | When it's set to `true`, the item-divider will stay visible when it reaches the top
of the viewport until the next `ion-item-divider` replaces it.

This feature relies in `position:sticky`:
https://caniuse.com/#feat=css-sticky | -| **Attribute** | `sticky` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `sticky` | +| **Type** | `boolean` | +| **Default** | `false` | ## CSS Custom Properties -| Name | Description | -| --- | --- | -| `--background` | Background of the item divider | -| `--color` | Color of the item divider | -| `--inner-padding-bottom` | Bottom inner padding of the item divider | -| `--inner-padding-end` | End inner padding of the item divider | -| `--inner-padding-start` | Start inner padding of the item divider | -| `--inner-padding-top` | Top inner padding of the item divider | -| `--padding-bottom` | Bottom padding of the item divider | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider | -| `--padding-top` | Top padding of the item divider | - +| Name | Description | +| ------------------------ | --------------------------------------------------------------------------------------------------------------- | +| `--background` | Background of the item divider | +| `--color` | Color of the item divider | +| `--inner-padding-bottom` | Bottom inner padding of the item divider | +| `--inner-padding-end` | End inner padding of the item divider | +| `--inner-padding-start` | Start inner padding of the item divider | +| `--inner-padding-top` | Top inner padding of the item divider | +| `--padding-bottom` | Bottom padding of the item divider | +| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider | +| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider | +| `--padding-top` | Top padding of the item divider | ## Slots -| Name | Description | -| --- | --- | -| `` | Content is placed between the named slots if provided without a slot. | -| `end` | Content is placed to the right of the divider text in LTR, and to the left in RTL. | +| Name | Description | +| ------- | ---------------------------------------------------------------------------------- | +| `` | Content is placed between the named slots if provided without a slot. | +| `end` | Content is placed to the right of the divider text in LTR, and to the left in RTL. | | `start` | Content is placed to the left of the divider text in LTR, and to the right in RTL. | - diff --git a/versioned_docs/version-v5/api/item-group.md b/versioned_docs/version-v5/api/item-group.md index 832de3c7ba1..933806a402f 100644 --- a/versioned_docs/version-v5/api/item-group.md +++ b/versioned_docs/version-v5/api/item-group.md @@ -1,6 +1,7 @@ --- -sidebar_label: "ion-item-group" +sidebar_label: 'ion-item-group' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -8,13 +9,9 @@ import TabItem from '@theme/TabItem'; Item groups are containers that organize similar items together. They can contain item dividers to divide the items into multiple sections. They can also be used to group sliding items. - - - ## Usage - - + @@ -51,13 +48,10 @@ Item groups are containers that organize similar items together. They can contai - - - Fruits - + Fruits @@ -67,9 +61,7 @@ Item groups are containers that organize similar items together. They can contai - - Favorite - + Favorite @@ -80,18 +72,14 @@ Item groups are containers that organize similar items together. They can contai - - Favorite - + Favorite - - Vegetables - + Vegetables @@ -101,9 +89,7 @@ Item groups are containers that organize similar items together. They can contai - - Favorite - + Favorite @@ -114,18 +100,14 @@ Item groups are containers that organize similar items together. They can contai - - Favorite - + Favorite ``` - - ```html @@ -161,13 +143,10 @@ Item groups are containers that organize similar items together. They can contai - - - Fruits - + Fruits @@ -177,9 +156,7 @@ Item groups are containers that organize similar items together. They can contai - - Favorite - + Favorite @@ -190,18 +167,14 @@ Item groups are containers that organize similar items together. They can contai - - Favorite - + Favorite - - Vegetables - + Vegetables @@ -211,9 +184,7 @@ Item groups are containers that organize similar items together. They can contai - - Favorite - + Favorite @@ -224,24 +195,28 @@ Item groups are containers that organize similar items together. They can contai - - Favorite - + Favorite ``` - - ```tsx import React from 'react'; -import { IonItemGroup, IonItemDivider, IonLabel, IonItem, IonItemSliding, IonItemOptions, IonItemOption } from '@ionic/react'; +import { + IonItemGroup, + IonItemDivider, + IonLabel, + IonItem, + IonItemSliding, + IonItemOptions, + IonItemOption, +} from '@ionic/react'; const Example: React.FC<{}> = () => ( <> @@ -277,13 +252,10 @@ const Example: React.FC<{}> = () => ( - {/*-- They can also be used to group sliding items --*/} - - Fruits - + Fruits @@ -293,9 +265,7 @@ const Example: React.FC<{}> = () => ( - - Favorite - + Favorite @@ -306,18 +276,14 @@ const Example: React.FC<{}> = () => ( - - Favorite - + Favorite - - Vegetables - + Vegetables @@ -327,9 +293,7 @@ const Example: React.FC<{}> = () => ( - - Favorite - + Favorite @@ -340,9 +304,7 @@ const Example: React.FC<{}> = () => ( - - Favorite - + Favorite @@ -352,10 +314,8 @@ const Example: React.FC<{}> = () => ( export default Example; ``` - - ```tsx @@ -476,7 +436,6 @@ export class ItemGroupExample { - ```html @@ -513,13 +472,10 @@ export class ItemGroupExample { - - - Fruits - + Fruits @@ -529,9 +485,7 @@ export class ItemGroupExample { - - Favorite - + Favorite @@ -542,18 +496,14 @@ export class ItemGroupExample { - - Favorite - + Favorite - - Vegetables - + Vegetables @@ -563,9 +513,7 @@ export class ItemGroupExample { - - Favorite - + Favorite @@ -576,40 +524,37 @@ export class ItemGroupExample { - - Favorite - + Favorite ``` - diff --git a/versioned_docs/version-v5/api/item-option.md b/versioned_docs/version-v5/api/item-option.md index 58fa8197733..e7fe775368a 100644 --- a/versioned_docs/version-v5/api/item-option.md +++ b/versioned_docs/version-v5/api/item-option.md @@ -1,6 +1,7 @@ --- -sidebar_label: "ion-item-option" +sidebar_label: 'ion-item-option' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -12,129 +13,107 @@ action for the item. ## Properties - ### color -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information on colors, see [theming](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `color` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### disabled -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------- | | **Description** | If `true`, the user cannot interact with the item option. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | ### download -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | This attribute instructs browsers to download a URL instead of navigating to
it, so the user will be prompted to save it as a local file. If the attribute
has a value, it is used as the pre-filled file name in the Save prompt
(the user can still change the file name if they want). | -| **Attribute** | `download` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `download` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### expandable -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------------------------------------------- | | **Description** | If `true`, the option will expand to take up the available width and cover any other options. | -| **Attribute** | `expandable` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `expandable` | +| **Type** | `boolean` | +| **Default** | `false` | ### href -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------- | | **Description** | Contains a URL or a URL fragment that the hyperlink points to.
If this property is set, an anchor tag will be rendered. | -| **Attribute** | `href` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `href` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### mode -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------- | | **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - - +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | ### rel -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Specifies the relationship of the target object to the link object.
The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | -| **Attribute** | `rel` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `rel` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### target -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Specifies where to display the linked URL.
Only applies when an `href` is provided.
Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | -| **Attribute** | `target` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `target` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### type -| | | -| --- | --- | -| **Description** | The type of the button. | -| **Attribute** | `type` | -| **Type** | `"button" \| "reset" \| "submit"` | -| **Default** | `'button'` | - - +| | | +| --------------- | --------------------------------- | +| **Description** | The type of the button. | +| **Attribute** | `type` | +| **Type** | `"button" \| "reset" \| "submit"` | +| **Default** | `'button'` | ## CSS Shadow Parts -| Name | Description | -| --- | --- | +| Name | Description | +| -------- | ----------------------------------------------------------------------- | | `native` | The native HTML button or anchor element that wraps all child elements. | - ## CSS Custom Properties -| Name | Description | -| --- | --- | +| Name | Description | +| -------------- | ----------------------------- | | `--background` | Background of the item option | -| `--color` | Color of the item option | - +| `--color` | Color of the item option | ## Slots -| Name | Description | -| --- | --- | -| `` | Content is placed between the named slots if provided without a slot. | -| `bottom` | Content is placed below the option text. | -| `end` | Content is placed to the right of the option text in LTR, and to the left in RTL. | -| `icon-only` | Should be used on an icon in an option that has no text. | -| `start` | Content is placed to the left of the option text in LTR, and to the right in RTL. | -| `top` | Content is placed above the option text. | - +| Name | Description | +| ----------- | --------------------------------------------------------------------------------- | +| `` | Content is placed between the named slots if provided without a slot. | +| `bottom` | Content is placed below the option text. | +| `end` | Content is placed to the right of the option text in LTR, and to the left in RTL. | +| `icon-only` | Should be used on an icon in an option that has no text. | +| `start` | Content is placed to the left of the option text in LTR, and to the right in RTL. | +| `top` | Content is placed above the option text. | diff --git a/versioned_docs/version-v5/api/item-options.md b/versioned_docs/version-v5/api/item-options.md index 6f7d237ad0d..238485f673f 100644 --- a/versioned_docs/version-v5/api/item-options.md +++ b/versioned_docs/version-v5/api/item-options.md @@ -1,6 +1,7 @@ --- -sidebar_label: "ion-item-options" +sidebar_label: 'ion-item-options' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -9,32 +10,26 @@ import TabItem from '@theme/TabItem'; The option buttons for an `ion-item-sliding`. These buttons can be placed either on the [start or end side](#side-description). You can combine the `ionSwipe` event plus the `expandable` directive to create a full swipe action for the item. - ## Side Description | Side | Position | Swipe Direction | -|---------|-----------------------------------------------------------------|-------------------------------------------------------------------| +| ------- | --------------------------------------------------------------- | ----------------------------------------------------------------- | | `start` | To the `left` of the content in LTR, and to the `right` in RTL. | From `left` to `right` in LTR, and from `right` to `left` in RTL. | | `end` | To the `right` of the content in LTR, and to the `left` in RTL. | From `right` to `left` in LTR, and from `left` to `right` in RTL. | - ## Properties - ### side -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each. | -| **Attribute** | `side` | -| **Type** | `"end" \| "start"` | -| **Default** | `'end'` | - - +| **Attribute** | `side` | +| **Type** | `"end" \| "start"` | +| **Default** | `'end'` | ## Events -| Name | Description | -| --- | --- | +| Name | Description | +| ---------- | -------------------------------------------- | | `ionSwipe` | Emitted when the item has been fully swiped. | - diff --git a/versioned_docs/version-v5/api/item-sliding.md b/versioned_docs/version-v5/api/item-sliding.md index f0889be253e..6c5e5b76b7f 100644 --- a/versioned_docs/version-v5/api/item-sliding.md +++ b/versioned_docs/version-v5/api/item-sliding.md @@ -1,8 +1,9 @@ --- -title: "Slide Buttons | Slide Right to Left with ion-item-sliding" -description: "ion-item-sliding component contains items that are dragged to reveal buttons. Options are revealed when the sliding item is swiped from left to right." -sidebar_label: "ion-item-sliding" +title: 'Slide Buttons | Slide Right to Left with ion-item-sliding' +description: 'ion-item-sliding component contains items that are dragged to reveal buttons. Options are revealed when the sliding item is swiped from left to right.' +sidebar_label: 'ion-item-sliding' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -10,12 +11,10 @@ import TabItem from '@theme/TabItem'; A sliding item contains an item that can be dragged to reveal buttons. It requires an [item](item.md) component as a child. All options to reveal should be placed in the [item options](item-options.md) element. - ## Swipe Direction By default, the buttons are placed on the `"end"` side. This means that options are revealed when the sliding item is swiped from end to start, i.e. from right to left in LTR, but from left to right in RTL. To place them on the opposite side, so that they are revealed when swiping in the opposite direction, set the `side` attribute to `"start"` on the [`ion-item-options`](item-options.md) element. Up to two `ion-item-options` can be used at the same time in order to reveal two different sets of options depending on the swiping direction. - ## Options Layout By default if an icon is placed with text in the [item option](item-option.md), it will display the icon on top of the text, but the icon slot can be changed to any of the following to position it in the option. @@ -28,16 +27,13 @@ By default if an icon is placed with text in the [item option](item-option.md), | `bottom` | The icon is below the text | | `end` | In LTR, end is the right side of the button, and in RTL it is the left | - ## Expandable Options Options can be expanded to take up the full width of the item if you swipe past a certain point. This can be combined with the `ionSwipe` event to call methods on the class. - ## Usage - - + @@ -62,9 +58,7 @@ Options can be expanded to take up the full width of the item if you swipe past - - Delete - + Delete @@ -72,9 +66,7 @@ Options can be expanded to take up the full width of the item if you swipe past - - Archive - + Archive @@ -86,9 +78,7 @@ Options can be expanded to take up the full width of the item if you swipe past

A new message in your network

Oceanic Next has joined your network

- - 10:45 AM - + 10:45 AM @@ -110,9 +100,7 @@ Options can be expanded to take up the full width of the item if you swipe past - - Sliding Item, Icons Start - + Sliding Item, Icons Start @@ -129,9 +117,7 @@ Options can be expanded to take up the full width of the item if you swipe past - - Sliding Item, Icons End - + Sliding Item, Icons End @@ -148,9 +134,7 @@ Options can be expanded to take up the full width of the item if you swipe past - - Sliding Item, Icons Top - + Sliding Item, Icons Top @@ -167,9 +151,7 @@ Options can be expanded to take up the full width of the item if you swipe past - - Sliding Item, Icons Bottom - + Sliding Item, Icons Bottom @@ -185,10 +167,8 @@ Options can be expanded to take up the full width of the item if you swipe past ``` - - ```html @@ -212,9 +192,7 @@ Options can be expanded to take up the full width of the item if you swipe past - - Delete - + Delete @@ -222,9 +200,7 @@ Options can be expanded to take up the full width of the item if you swipe past - - Archive - + Archive @@ -236,9 +212,7 @@ Options can be expanded to take up the full width of the item if you swipe past

A new message in your network

Oceanic Next has joined your network

- - 10:45 AM - + 10:45 AM @@ -260,9 +234,7 @@ Options can be expanded to take up the full width of the item if you swipe past - - Sliding Item, Icons Start - + Sliding Item, Icons Start @@ -279,9 +251,7 @@ Options can be expanded to take up the full width of the item if you swipe past - - Sliding Item, Icons End - + Sliding Item, Icons End @@ -298,9 +268,7 @@ Options can be expanded to take up the full width of the item if you swipe past - - Sliding Item, Icons Top - + Sliding Item, Icons Top @@ -317,9 +285,7 @@ Options can be expanded to take up the full width of the item if you swipe past - - Sliding Item, Icons Bottom - + Sliding Item, Icons Bottom @@ -335,167 +301,164 @@ Options can be expanded to take up the full width of the item if you swipe past ``` - - ```tsx import React from 'react'; -import { IonList, IonItemSliding, IonItem, IonLabel, IonItemOptions, IonItemOption, IonIcon, IonNote } from '@ionic/react'; +import { + IonList, + IonItemSliding, + IonItem, + IonLabel, + IonItemOptions, + IonItemOption, + IonIcon, + IonNote, +} from '@ionic/react'; import { heart, trash, star, archive, ellipsisHorizontal, ellipsisVertical } from 'ionicons/icons'; export const ItemSlidingExample: React.FC = () => ( - - {/* Sliding item with text options on both sides */} - - - console.log('favorite clicked')}>Favorite - console.log('share clicked')}>Share - - - - Item Options - - - - console.log('unread clicked')}>Unread - - - - {/* Sliding item with expandable options on both sides */} - - - - Delete - - - - - Expandable Options - - - - - Archive - - - - - {/* Multi-line sliding item with icon options on both sides */} - - - -

HubStruck Notifications

-

A new message in your network

-

Oceanic Next has joined your network

- - - 10:45 AM - - - - - - - - - - - - - - - - - - - - {/* Sliding item with icon start options on end side */} - - - - Sliding Item, Icons Start - - - - - - More - - - - Archive - - - - - {/* Sliding item with icon end options on end side */} - - - - Sliding Item, Icons End - - - - - - More - - - - Archive - - - - - {/* Sliding item with icon top options on end side */} - - - - Sliding Item, Icons Top - - - - - - More - - - - Archive - - - - - {/* Sliding item with icon bottom options on end side */} - - - - Sliding Item, Icons Bottom - - - - - - More - - - - Archive - - - - + + {/* Sliding item with text options on both sides */} + + + console.log('favorite clicked')}>Favorite + console.log('share clicked')}> + Share + + + + + Item Options + + + + console.log('unread clicked')}>Unread + + + + {/* Sliding item with expandable options on both sides */} + + + + Delete + + + + + Expandable Options + + + + + Archive + + + + + {/* Multi-line sliding item with icon options on both sides */} + + + +

HubStruck Notifications

+

A new message in your network

+

Oceanic Next has joined your network

+ + 10:45 AM + + + + + + + + + + + + + + + + + + + {/* Sliding item with icon start options on end side */} + + + Sliding Item, Icons Start + + + + + More + + + + Archive + + + + + {/* Sliding item with icon end options on end side */} + + + Sliding Item, Icons End + + + + + More + + + + Archive + + + + + {/* Sliding item with icon top options on end side */} + + + Sliding Item, Icons Top + + + + + More + + + + Archive + + + + + {/* Sliding item with icon bottom options on end side */} + + + Sliding Item, Icons Bottom + + + + + More + + + + Archive + + + + ); ``` - - ```tsx @@ -503,7 +466,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'item-sliding-example', - styleUrl: 'item-sliding-example.css' + styleUrl: 'item-sliding-example.css', }) export class ItemSlidingExample { favorite(ev: any) { @@ -525,7 +488,9 @@ export class ItemSlidingExample { this.favorite(ev)}>Favorite - this.share(ev)}>Share + this.share(ev)}> + Share + @@ -564,9 +529,7 @@ export class ItemSlidingExample {

A new message in your network

Oceanic Next has joined your network

- - 10:45 AM - + 10:45 AM @@ -588,9 +551,7 @@ export class ItemSlidingExample { {/* Sliding item with icon start options on end side */} - - Sliding Item, Icons Start - + Sliding Item, Icons Start @@ -607,9 +568,7 @@ export class ItemSlidingExample { {/* Sliding item with icon end options on end side */} - - Sliding Item, Icons End - + Sliding Item, Icons End @@ -626,9 +585,7 @@ export class ItemSlidingExample { {/* Sliding item with icon top options on end side */} - - Sliding Item, Icons Top - + Sliding Item, Icons Top @@ -645,9 +602,7 @@ export class ItemSlidingExample { {/* Sliding item with icon bottom options on end side */} - - Sliding Item, Icons Bottom - + Sliding Item, Icons Bottom @@ -660,7 +615,7 @@ export class ItemSlidingExample { - + , ]; } } @@ -668,7 +623,6 @@ export class ItemSlidingExample { - ```html @@ -693,9 +647,7 @@ export class ItemSlidingExample { - - Delete - + Delete @@ -703,9 +655,7 @@ export class ItemSlidingExample { - - Archive - + Archive @@ -717,9 +667,7 @@ export class ItemSlidingExample {

A new message in your network

Oceanic Next has joined your network

- - 10:45 AM - + 10:45 AM @@ -741,9 +689,7 @@ export class ItemSlidingExample { - - Sliding Item, Icons Start - + Sliding Item, Icons Start @@ -760,9 +706,7 @@ export class ItemSlidingExample { - - Sliding Item, Icons End - + Sliding Item, Icons End @@ -779,9 +723,7 @@ export class ItemSlidingExample { - - Sliding Item, Icons Top - + Sliding Item, Icons Top @@ -798,9 +740,7 @@ export class ItemSlidingExample { - - Sliding Item, Icons Bottom - + Sliding Item, Icons Bottom @@ -817,115 +757,88 @@ export class ItemSlidingExample { ``` - ## Properties - ### disabled -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------- | | **Description** | If `true`, the user cannot interact with the sliding item. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | ## Events -| Name | Description | -| --- | --- | +| Name | Description | +| --------- | ------------------------------------------ | | `ionDrag` | Emitted when the sliding position changes. | - ## Methods - ### close -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------- | | **Description** | Close the sliding item. Items can also be closed from the [List](list.md). | -| **Signature** | `close() => Promise` | - +| **Signature** | `close() => Promise` | ### closeOpened -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------------- | | **Description** | Close all of the sliding items in the list. Items can also be closed from the [List](list.md). | -| **Signature** | `closeOpened() => Promise` | - +| **Signature** | `closeOpened() => Promise` | ### getOpenAmount -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------ | | **Description** | Get the amount the item is open in pixels. | -| **Signature** | `getOpenAmount() => Promise` | - +| **Signature** | `getOpenAmount() => Promise` | ### getSlidingRatio -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Get the ratio of the open amount of the item compared to the width of the options.
If the number returned is positive, then the options on the right side are open.
If the number returned is negative, then the options on the left side are open.
If the absolute value of the number is greater than 1, the item is open more than
the width of the options. | -| **Signature** | `getSlidingRatio() => Promise` | - +| **Signature** | `getSlidingRatio() => Promise` | ### open -| | | -| --- | --- | -| **Description** | Open the sliding item. | -| **Signature** | `open(side: Side \| undefined) => Promise` | - - +| | | +| --------------- | ------------------------------------------------ | +| **Description** | Open the sliding item. | +| **Signature** | `open(side: Side \| undefined) => Promise` | diff --git a/versioned_docs/version-v5/api/item.md b/versioned_docs/version-v5/api/item.md index f116cf5490b..94fce2549fd 100644 --- a/versioned_docs/version-v5/api/item.md +++ b/versioned_docs/version-v5/api/item.md @@ -1,8 +1,9 @@ --- -sidebar_label: "ion-item" -demoUrl: "/docs/demos/api/item/index.html" -demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/item/index.html" +sidebar_label: 'ion-item' +demoUrl: '/docs/demos/api/item/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/item/index.html' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -32,25 +33,22 @@ See the [theming documentation](../theming/css-variables.md) for more informatio --> - ## Item Placement Item uses named [slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) in order to position content. This logic makes it possible to write a complex item with simple, understandable markup without having to worry about styling and positioning the elements. The below chart details the item slots and where it will place the element inside of the item: -| Slot | Description | -|---------|-----------------------------------------------------------------------------| -| `start` | Placed to the left of all other content in LTR, and to the `right` in RTL. | -| `end` | Placed to the right of all other content in LTR, and to the `left` in RTL. | -| none | Placed inside of the input wrapper. | - +| Slot | Description | +| ------- | -------------------------------------------------------------------------- | +| `start` | Placed to the left of all other content in LTR, and to the `right` in RTL. | +| `end` | Placed to the right of all other content in LTR, and to the `left` in RTL. | +| none | Placed inside of the input wrapper. | ### Text Alignment Items left align text and add an ellipsis when the text is wider than the item. See the [CSS Utilities Documentation](../layout/css-utilities.md) for classes that can be added to `` to transform the text. - ## Input Highlight ### Highlight Height @@ -61,40 +59,30 @@ Items containing an input will highlight the bottom border of the input with a d The highlight color changes based on the item state, but all of the states use Ionic colors by default. When focused, the input highlight will use the `primary` color. If the input is valid it will use the `success` color, and invalid inputs will use the `danger` color. See the [CSS Custom Properties](#css-custom-properties) section below for the highlight color variables. - ## Usage - - + ```html - - Item - + Item - - Button Item - + Button Item - - Anchor Item - + Anchor Item - - Secondary Color Item - + Secondary Color Item ``` @@ -102,21 +90,15 @@ The highlight color changes based on the item state, but all of the states use I ```html - - Standard Item with Detail Arrow - + Standard Item with Detail Arrow - - Button Item with Detail Arrow - + Button Item with Detail Arrow - - Anchor Item with no Detail Arrow - + Anchor Item with no Detail Arrow ``` @@ -125,21 +107,16 @@ The highlight color changes based on the item state, but all of the states use I ```html - - Item - + Item - - No Lines Item - + No Lines Item - Multiline text that should wrap when it is too long - to fit on one line in the item. + Multiline text that should wrap when it is too long to fit on one line in the item. @@ -156,11 +133,8 @@ The highlight color changes based on the item state, but all of the states use I - - Item with Full Lines - + Item with Full Lines - ``` @@ -220,31 +194,26 @@ The highlight color changes based on the item state, but all of the states use I ``` - ### Media Items ```html - + - - Avatar Start, Button Item - + Avatar Start, Button Item - - Thumbnail End, Anchor Item - + Thumbnail End, Anchor Item - + - +

H2 Title Text

@@ -255,7 +224,7 @@ The highlight color changes based on the item state, but all of the states use I - +

H3 Title Text

@@ -269,13 +238,9 @@ The highlight color changes based on the item state, but all of the states use I ```html - - Start - + Start Button Start/End - - End - + End @@ -305,37 +270,27 @@ The highlight color changes based on the item state, but all of the states use I ```html - - Icon End - + Icon End - - Large Icon End - + Large Icon End - - Small Icon End - + Small Icon End - - Icon Start - + Icon Start - - Two Icons End - + Two Icons End @@ -388,38 +343,28 @@ The highlight color changes based on the item state, but all of the states use I ``` - - ```html - - Item - + Item - - Button Item - + Button Item - - Anchor Item - + Anchor Item - - Secondary Color Item - + Secondary Color Item ``` @@ -427,21 +372,15 @@ The highlight color changes based on the item state, but all of the states use I ```html - - Standard Item with Detail Arrow - + Standard Item with Detail Arrow - - Button Item with Detail Arrow - + Button Item with Detail Arrow - - Anchor Item with no Detail Arrow - + Anchor Item with no Detail Arrow ``` @@ -450,21 +389,16 @@ The highlight color changes based on the item state, but all of the states use I ```html - - Item - + Item - - No Lines Item - + No Lines Item - Multiline text that should wrap when it is too long - to fit on one line in the item. + Multiline text that should wrap when it is too long to fit on one line in the item. @@ -481,11 +415,8 @@ The highlight color changes based on the item state, but all of the states use I - - Item with Full Lines - + Item with Full Lines - ``` @@ -545,31 +476,26 @@ The highlight color changes based on the item state, but all of the states use I ``` - ### Media Items ```html - + - - Avatar Start, Button Item - + Avatar Start, Button Item - - Thumbnail End, Anchor Item - + Thumbnail End, Anchor Item - + - +

H2 Title Text

@@ -580,7 +506,7 @@ The highlight color changes based on the item state, but all of the states use I - +

H3 Title Text

@@ -594,13 +520,9 @@ The highlight color changes based on the item state, but all of the states use I ```html - - Start - + Start Button Start/End - - End - + End @@ -630,37 +552,27 @@ The highlight color changes based on the item state, but all of the states use I ```html - - Icon End - + Icon End - - Large Icon End - + Large Icon End - - Small Icon End - + Small Icon End - - Icon Start - + Icon Start - - Two Icons End - + Two Icons End @@ -713,10 +625,8 @@ The highlight color changes based on the item state, but all of the states use I ``` - - ```tsx @@ -1027,10 +937,8 @@ export const ItemExamples: React.FC = () => { }; ``` - - ```tsx @@ -1038,7 +946,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'item-example', - styleUrl: 'item-example.css' + styleUrl: 'item-example.css', }) export class ItemExample { buttonClick() { @@ -1049,30 +957,22 @@ export class ItemExample { return [ // Default Item - - Item - + Item , // Item as a Button this.buttonClick()}> - - Button Item - + Button Item , // Item as an Anchor - - Anchor Item - + Anchor Item , - - Secondary Color Item - - + Secondary Color Item + , ]; } } @@ -1085,7 +985,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'item-example', - styleUrl: 'item-example.css' + styleUrl: 'item-example.css', }) export class ItemExample { buttonClick() { @@ -1095,22 +995,16 @@ export class ItemExample { render() { return [ - - Standard Item with Detail Arrow - + Standard Item with Detail Arrow , this.buttonClick()} detail> - - Button Item with Detail Arrow - + Button Item with Detail Arrow , - - Anchor Item with no Detail Arrow - - + Anchor Item with no Detail Arrow + , ]; } } @@ -1123,31 +1017,26 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'item-example', - styleUrl: 'item-example.css' + styleUrl: 'item-example.css', }) export class ItemExample { render() { return [ - - Item - - , - + Item + + , - - No Lines Item - - , - + No Lines Item + + , - Multiline text that should wrap when it is too long - to fit on one line in the item. + Multiline text that should wrap when it is too long to fit on one line in the item. - , - + + , @@ -1158,14 +1047,12 @@ export class ItemExample {

Paragraph line 2 secondary

 - , - + + , - - Item with Full Lines - + Item with Full Lines - + , ]; } } @@ -1178,7 +1065,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'item-example', - styleUrl: 'item-example.css' + styleUrl: 'item-example.css', }) export class ItemExample { render() { @@ -1233,7 +1120,7 @@ export class ItemExample { No lines Item 3 - + , ]; } } @@ -1246,7 +1133,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'item-example', - styleUrl: 'item-example.css' + styleUrl: 'item-example.css', }) export class ItemExample { testClick() { @@ -1257,43 +1144,41 @@ export class ItemExample { return [ this.testClick()}> - + - - Avatar Start, Button Item - + Avatar Start, Button Item , - - Thumbnail End, Anchor Item - + Thumbnail End, Anchor Item - + , - +

H2 Title Text

Button on right

 - View + + View + , this.testClick()}> - +

H3 Title Text

Icon on right

 - + , ]; } } @@ -1306,19 +1191,15 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'item-example', - styleUrl: 'item-example.css' + styleUrl: 'item-example.css', }) export class ItemExample { render() { return [ - - Start - + Start Button Start/End - - End - + End , @@ -1341,7 +1222,7 @@ export class ItemExample { - + , ]; } } @@ -1354,46 +1235,36 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'item-example', - styleUrl: 'item-example.css' + styleUrl: 'item-example.css', }) export class ItemExample { render() { return [ - - Icon End - + Icon End , - - Large Icon End - + Large Icon End , - - Small Icon End - + Small Icon End , - - Icon Start - + Icon Start , - - Two Icons End - + Two Icons End - + , ]; } } @@ -1406,7 +1277,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'item-example', - styleUrl: 'item-example.css' + styleUrl: 'item-example.css', }) export class ItemExample { render() { @@ -1421,7 +1292,9 @@ export class ItemExample { No Game Console NES - Nintendo64 + + Nintendo64 + PlayStation Sega Genesis Sega Saturn @@ -1452,7 +1325,7 @@ export class ItemExample { Range - + , ]; } } @@ -1460,36 +1333,27 @@ export class ItemExample { - ```html ``` @@ -1499,21 +1363,15 @@ export class ItemExample { ```html ``` @@ -1524,21 +1382,16 @@ export class ItemExample { ``` @@ -1622,32 +1472,27 @@ export class ItemExample { ``` - ### Media Items ```html ``` - ## Properties - ### color -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information on colors, see [theming](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `color` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### lines -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------- | | **Description** | How the bottom border should be displayed on the list header. | -| **Attribute** | `lines` | -| **Type** | `"full" \| "inset" \| "none" \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `lines` | +| **Type** | `"full" \| "inset" \| "none" \| undefined` | +| **Default** | `undefined` | ### mode -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------- | | **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - - +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | ## CSS Custom Properties -| Name | Description | -| --- | --- | -| `--background` | Background of the list header | -| `--border-color` | Color of the list header border | -| `--border-style` | Style of the list header border | -| `--border-width` | Width of the list header border | -| `--color` | Color of the list header text | +| Name | Description | +| ---------------------- | ------------------------------------- | +| `--background` | Background of the list header | +| `--border-color` | Color of the list header border | +| `--border-style` | Style of the list header border | +| `--border-width` | Width of the list header border | +| `--color` | Color of the list header text | | `--inner-border-width` | Width of the inner list header border | - diff --git a/versioned_docs/version-v5/api/list.md b/versioned_docs/version-v5/api/list.md index fe1305d6970..007d2b42236 100644 --- a/versioned_docs/version-v5/api/list.md +++ b/versioned_docs/version-v5/api/list.md @@ -1,8 +1,9 @@ --- -sidebar_label: "ion-list" -demoUrl: "/docs/demos/api/list/index.html" -demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/list/index.html" +sidebar_label: 'ion-list' +demoUrl: '/docs/demos/api/list/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/list/index.html' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -13,11 +14,9 @@ icons, thumbnails, and much more. Lists generally contain items with similar dat Lists support several interactions including swiping items to reveal options, dragging to reorder items within the list, and deleting items. - ## Usage - - + @@ -85,7 +84,6 @@ Lists support several interactions including swiping items to reveal options, dr - ```html @@ -152,12 +150,23 @@ Lists support several interactions including swiping items to reveal options, dr - ```tsx import React from 'react'; -import { IonList, IonItem, IonLabel, IonInput, IonToggle, IonRadio, IonCheckbox, IonItemSliding, IonItemOption, IonItemOptions, IonContent } from '@ionic/react'; +import { + IonList, + IonItem, + IonLabel, + IonInput, + IonToggle, + IonRadio, + IonCheckbox, + IonItemSliding, + IonItemOption, + IonItemOptions, + IonContent, +} from '@ionic/react'; export const ListExample: React.FC = () => ( @@ -224,10 +233,8 @@ export const ListExample: React.FC = () => ( ); ``` - - ```tsx @@ -235,7 +242,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'list-example', - styleUrl: 'list-example.css' + styleUrl: 'list-example.css', }) export class ListExample { unread(ev: Event) { @@ -302,16 +309,14 @@ export class ListExample { this.unread(ev)}>Unread - + , ]; } } ``` - - ```html @@ -378,34 +383,34 @@ export class ListExample { ``` @@ -415,48 +420,38 @@ export default defineComponent({ ## Properties - ### inset -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------- | | **Description** | If `true`, the list will have margin around it and rounded corners. | -| **Attribute** | `inset` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `inset` | +| **Type** | `boolean` | +| **Default** | `false` | ### lines -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------- | | **Description** | How the bottom border should be displayed on all items. | -| **Attribute** | `lines` | -| **Type** | `"full" \| "inset" \| "none" \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `lines` | +| **Type** | `"full" \| "inset" \| "none" \| undefined` | +| **Default** | `undefined` | ### mode -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------- | | **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - - +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | ## Methods - ### closeSlidingItems -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | If `ion-item-sliding` are used inside the list, this method closes
any open sliding item.

Returns `true` if an actual `ion-item-sliding` is closed. | -| **Signature** | `closeSlidingItems() => Promise` | - - +| **Signature** | `closeSlidingItems() => Promise` | diff --git a/versioned_docs/version-v5/api/loading.md b/versioned_docs/version-v5/api/loading.md index d9a68d6a854..ec3606ab74e 100644 --- a/versioned_docs/version-v5/api/loading.md +++ b/versioned_docs/version-v5/api/loading.md @@ -50,7 +50,7 @@ Any of the defined [CSS Custom Properties](#css-custom-properties) can be used t ## Usage - + @@ -163,10 +163,7 @@ const LoadingExample: React.FC = () => { > Show Loading - present('Loading', 2000, 'dots')} - > + present('Loading', 2000, 'dots')}> Show Loading using params @@ -247,12 +244,8 @@ export class LoadingExample { render() { return [ - this.presentLoading()}> - Present Loading - - this.presentLoadingWithOptions()}> - Present Loading: Options - + this.presentLoading()}>Present Loading + this.presentLoadingWithOptions()}>Present Loading: Options , ]; } diff --git a/versioned_docs/version-v5/api/menu-button.md b/versioned_docs/version-v5/api/menu-button.md index a5c201c82df..0fae697af58 100644 --- a/versioned_docs/version-v5/api/menu-button.md +++ b/versioned_docs/version-v5/api/menu-button.md @@ -1,6 +1,7 @@ --- -sidebar_label: "ion-menu-button" +sidebar_label: 'ion-menu-button' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -8,99 +9,83 @@ import TabItem from '@theme/TabItem'; Menu Button is component that automatically creates the icon and functionality to open a menu on a page. - ## Properties - ### autoHide -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------------------------------------- | | **Description** | Automatically hides the menu button when the corresponding menu is not active | -| **Attribute** | `auto-hide` | -| **Type** | `boolean` | -| **Default** | `true` | - - +| **Attribute** | `auto-hide` | +| **Type** | `boolean` | +| **Default** | `true` | ### color -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information on colors, see [theming](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `color` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### disabled -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------- | | **Description** | If `true`, the user cannot interact with the menu button. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | ### menu -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Description** | Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle | -| **Attribute** | `menu` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `menu` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### mode -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------- | | **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - - +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | ### type -| | | -| --- | --- | -| **Description** | The type of the button. | -| **Attribute** | `type` | -| **Type** | `"button" \| "reset" \| "submit"` | -| **Default** | `'button'` | - - +| | | +| --------------- | --------------------------------- | +| **Description** | The type of the button. | +| **Attribute** | `type` | +| **Type** | `"button" \| "reset" \| "submit"` | +| **Default** | `'button'` | ## CSS Shadow Parts -| Name | Description | -| --- | --- | -| `icon` | The menu button icon (uses ion-icon). | +| Name | Description | +| -------- | ------------------------------------------------------------- | +| `icon` | The menu button icon (uses ion-icon). | | `native` | The native HTML button element that wraps all child elements. | - ## CSS Custom Properties -| Name | Description | -| --- | --- | -| `--background` | Background of the menu button | -| `--background-focused` | Background of the menu button when focused with the tab key | -| `--background-focused-opacity` | Opacity of the menu button background when focused with the tab key | -| `--background-hover` | Background of the menu button on hover | -| `--background-hover-opacity` | Opacity of the background on hover | -| `--border-radius` | Border radius of the menu button | -| `--color` | Color of the menu button | -| `--color-focused` | Color of the menu button when focused with the tab key | -| `--color-hover` | Color of the menu button on hover | -| `--padding-bottom` | Bottom padding of the button | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button | -| `--padding-top` | Top padding of the button | - +| Name | Description | +| ------------------------------ | --------------------------------------------------------------------------------------------------------- | +| `--background` | Background of the menu button | +| `--background-focused` | Background of the menu button when focused with the tab key | +| `--background-focused-opacity` | Opacity of the menu button background when focused with the tab key | +| `--background-hover` | Background of the menu button on hover | +| `--background-hover-opacity` | Opacity of the background on hover | +| `--border-radius` | Border radius of the menu button | +| `--color` | Color of the menu button | +| `--color-focused` | Color of the menu button when focused with the tab key | +| `--color-hover` | Color of the menu button on hover | +| `--padding-bottom` | Bottom padding of the button | +| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button | +| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button | +| `--padding-top` | Top padding of the button | diff --git a/versioned_docs/version-v5/api/menu-toggle.md b/versioned_docs/version-v5/api/menu-toggle.md index 46929ce814e..80d144c8b60 100644 --- a/versioned_docs/version-v5/api/menu-toggle.md +++ b/versioned_docs/version-v5/api/menu-toggle.md @@ -1,6 +1,7 @@ --- -sidebar_label: "ion-menu-toggle" +sidebar_label: 'ion-menu-toggle' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -14,25 +15,20 @@ In case it's desired to keep `ion-menu-toggle` always visible, the `autoHide` pr ## Properties - ### autoHide -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Automatically hides the content when the corresponding menu is not active.

By default, it's `true`. Change it to `false` in order to
keep `ion-menu-toggle` always visible regardless the state of the menu. | -| **Attribute** | `auto-hide` | -| **Type** | `boolean` | -| **Default** | `true` | - - +| **Attribute** | `auto-hide` | +| **Type** | `boolean` | +| **Default** | `true` | ### menu -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Optional property that maps to a Menu's `menuId` prop.
Can also be `start` or `end` for the menu side.
This is used to find the correct menu to toggle.

If this property is not used, `ion-menu-toggle` will toggle the
first menu that is active. | -| **Attribute** | `menu` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `menu` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | diff --git a/versioned_docs/version-v5/api/menu.md b/versioned_docs/version-v5/api/menu.md index 9c7d2eda450..e897499f7a8 100644 --- a/versioned_docs/version-v5/api/menu.md +++ b/versioned_docs/version-v5/api/menu.md @@ -18,7 +18,7 @@ These can be controlled from the templates, or programmatically using the MenuCo ## Usage - + @@ -134,12 +134,7 @@ export class MenuExample { - + Custom Menu @@ -180,13 +175,9 @@ export class MenuExample { - Open Start Menu + Open Start Menu Open End Menu - Open Custom Menu + Open Custom Menu @@ -227,16 +218,7 @@ export class MenuExample { ```tsx import React from 'react'; -import { - IonMenu, - IonHeader, - IonToolbar, - IonTitle, - IonContent, - IonList, - IonItem, - IonRouterOutlet, -} from '@ionic/react'; +import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonRouterOutlet } from '@ionic/react'; export const MenuExample: React.FC = () => ( <> @@ -342,12 +324,7 @@ export class MenuExample { , - + Custom Menu @@ -427,12 +404,7 @@ export class MenuExample { - + Custom Menu diff --git a/versioned_docs/version-v5/api/modal.md b/versioned_docs/version-v5/api/modal.md index 534af8c1240..950fd13faf8 100644 --- a/versioned_docs/version-v5/api/modal.md +++ b/versioned_docs/version-v5/api/modal.md @@ -54,7 +54,7 @@ ion-modal.stack-modal { ## Usage - + @@ -242,7 +242,7 @@ customElements.define( Modal Content `; } - }, + } ); function presentModal() { @@ -715,11 +715,7 @@ Developers can also use this component directly in their template: ```html diff --git a/versioned_docs/version-v5/api/nav-link.md b/versioned_docs/version-v5/api/nav-link.md index 8f7a012e990..f17596d480b 100644 --- a/versioned_docs/version-v5/api/nav-link.md +++ b/versioned_docs/version-v5/api/nav-link.md @@ -1,6 +1,7 @@ --- -sidebar_label: "ion-nav-link" +sidebar_label: 'ion-nav-link' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -10,50 +11,40 @@ A navigation link is used to navigate to a specified component. The component ca It is the element form of calling the `push()`, `pop()`, and `setRoot()` methods on the navigation controller. - ## Properties - ### component -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------- | | **Description** | Component to navigate to. Only used if the `routerDirection` is `"forward"` or `"root"`. | -| **Attribute** | `component` | -| **Type** | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `component` | +| **Type** | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | +| **Default** | `undefined` | ### componentProps -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------- | | **Description** | Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`. | -| **Attribute** | `undefined` | -| **Type** | `undefined \| { [key: string]: any; }` | -| **Default** | `undefined` | - - +| **Attribute** | `undefined` | +| **Type** | `undefined \| { [key: string]: any; }` | +| **Default** | `undefined` | ### routerAnimation -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------- | | **Description** | The transition animation when navigating to another page. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `undefined` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | ### routerDirection -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------- | | **Description** | The transition direction when navigating to another page. | -| **Attribute** | `router-direction` | -| **Type** | `"back" \| "forward" \| "root"` | -| **Default** | `'forward'` | - - +| **Attribute** | `router-direction` | +| **Type** | `"back" \| "forward" \| "root"` | +| **Default** | `'forward'` | diff --git a/versioned_docs/version-v5/api/nav.md b/versioned_docs/version-v5/api/nav.md index 42b74c7d2e1..d4660a3c691 100644 --- a/versioned_docs/version-v5/api/nav.md +++ b/versioned_docs/version-v5/api/nav.md @@ -1,10 +1,11 @@ --- -title: "ion-nav | Nav View Component for Ionic Framework Apps" +title: 'ion-nav | Nav View Component for Ionic Framework Apps' description: "ion-nav is a standalone for loading arbitrary, and pushing new, components on to the stack. Loading Nav view, and pushing others, won't affect overall routers." -sidebar_label: "ion-nav" -demoUrl: "/docs/demos/api/nav/index.html" -demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/nav/index.html" +sidebar_label: 'ion-nav' +demoUrl: '/docs/demos/api/nav/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/nav/index.html' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -14,177 +15,149 @@ Nav is a standalone component for loading arbitrary components and pushing new c Unlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL. - ## Properties - ### animated -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------------- | | **Description** | If `true`, the nav should animate the transition of components. | -| **Attribute** | `animated` | -| **Type** | `boolean` | -| **Default** | `true` | - - +| **Attribute** | `animated` | +| **Type** | `boolean` | +| **Default** | `true` | ### animation -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | By default `ion-nav` animates transition between pages based in the mode (ios or material design).
However, this property allows to create custom transition using `AnimateBuilder` functions. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `undefined` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | ### root -| | | -| --- | --- | -| **Description** | Root NavComponent to load | -| **Attribute** | `root` | -| **Type** | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | -| **Default** | `undefined` | - - +| | | +| --------------- | -------------------------------------------------------------------------- | +| **Description** | Root NavComponent to load | +| **Attribute** | `root` | +| **Type** | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | +| **Default** | `undefined` | ### rootParams -| | | -| --- | --- | -| **Description** | Any parameters for the root component | -| **Attribute** | `undefined` | -| **Type** | `undefined \| { [key: string]: any; }` | -| **Default** | `undefined` | - - +| | | +| --------------- | -------------------------------------- | +| **Description** | Any parameters for the root component | +| **Attribute** | `undefined` | +| **Type** | `undefined \| { [key: string]: any; }` | +| **Default** | `undefined` | ### swipeGesture -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------- | | **Description** | If the nav component should allow for swipe-to-go-back. | -| **Attribute** | `swipe-gesture` | -| **Type** | `boolean \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `swipe-gesture` | +| **Type** | `boolean \| undefined` | +| **Default** | `undefined` | ## Events -| Name | Description | -| --- | --- | -| `ionNavDidChange` | Event fired when the nav has changed components | +| Name | Description | +| ------------------ | ----------------------------------------------- | +| `ionNavDidChange` | Event fired when the nav has changed components | | `ionNavWillChange` | Event fired when the nav will change components | - ## Methods - ### canGoBack -| | | -| --- | --- | -| **Description** | Returns `true` if the current view can go back. | -| **Signature** | `canGoBack(view?: ViewController \| undefined) => Promise` | - +| | | +| --------------- | ------------------------------------------------------------------- | +| **Description** | Returns `true` if the current view can go back. | +| **Signature** | `canGoBack(view?: ViewController \| undefined) => Promise` | ### getActive -| | | -| --- | --- | -| **Description** | Get the active view. | -| **Signature** | `getActive() => Promise` | - +| | | +| --------------- | ----------------------------------------------------- | +| **Description** | Get the active view. | +| **Signature** | `getActive() => Promise` | ### getByIndex -| | | -| --- | --- | -| **Description** | Get the view at the specified index. | -| **Signature** | `getByIndex(index: number) => Promise` | - +| | | +| --------------- | ------------------------------------------------------------------- | +| **Description** | Get the view at the specified index. | +| **Signature** | `getByIndex(index: number) => Promise` | ### getPrevious -| | | -| --- | --- | -| **Description** | Get the previous view. | -| **Signature** | `getPrevious(view?: ViewController \| undefined) => Promise` | - +| | | +| --------------- | ----------------------------------------------------------------------------------------- | +| **Description** | Get the previous view. | +| **Signature** | `getPrevious(view?: ViewController \| undefined) => Promise` | ### insert -| | | -| --- | --- | -| **Description** | Inserts a component into the navigation stack at the specified index.
This is useful to add a component at any point in the navigation stack. | -| **Signature** | `insert(insertIndex: number, component: T, componentProps?: ComponentProps \| null \| undefined, opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | - +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | Inserts a component into the navigation stack at the specified index.
This is useful to add a component at any point in the navigation stack. | +| **Signature** | `insert(insertIndex: number, component: T, componentProps?: ComponentProps \| null \| undefined, opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | ### insertPages -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Inserts an array of components into the navigation stack at the specified index.
The last component in the array will become instantiated as a view, and animate
in to become the active view. | -| **Signature** | `insertPages(insertIndex: number, insertComponents: NavComponent[] \| NavComponentWithProps[], opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | - +| **Signature** | `insertPages(insertIndex: number, insertComponents: NavComponent[] \| NavComponentWithProps[], opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | ### pop -| | | -| --- | --- | -| **Description** | Pop a component off of the navigation stack. Navigates back from the current
component. | -| **Signature** | `pop(opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | - +| | | +| --------------- | ------------------------------------------------------------------------------------------------------- | +| **Description** | Pop a component off of the navigation stack. Navigates back from the current
component. | +| **Signature** | `pop(opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | ### popTo -| | | -| --- | --- | -| **Description** | Pop to a specific index in the navigation stack. | -| **Signature** | `popTo(indexOrViewCtrl: number \| ViewController, opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | - +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | Pop to a specific index in the navigation stack. | +| **Signature** | `popTo(indexOrViewCtrl: number \| ViewController, opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | ### popToRoot -| | | -| --- | --- | -| **Description** | Navigate back to the root of the stack, no matter how far back that is. | -| **Signature** | `popToRoot(opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | - +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------- | +| **Description** | Navigate back to the root of the stack, no matter how far back that is. | +| **Signature** | `popToRoot(opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | ### push -| | | -| --- | --- | -| **Description** | Push a new component onto the current navigation stack. Pass any additional
information along as an object. This additional information is accessible
through NavParams. | -| **Signature** | `push(component: T, componentProps?: ComponentProps \| null \| undefined, opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | - +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | Push a new component onto the current navigation stack. Pass any additional
information along as an object. This additional information is accessible
through NavParams. | +| **Signature** | `push(component: T, componentProps?: ComponentProps \| null \| undefined, opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | ### removeIndex -| | | -| --- | --- | -| **Description** | Removes a component from the navigation stack at the specified index. | -| **Signature** | `removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | - +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | Removes a component from the navigation stack at the specified index. | +| **Signature** | `removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | ### setPages -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Set the views of the current navigation stack and navigate to the last view.
By default animations are disabled, but they can be enabled by passing options
to the navigation controller. Navigation parameters can also be passed to the
individual pages in the array. | -| **Signature** | `setPages(views: NavComponent[] \| NavComponentWithProps[], opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | - +| **Signature** | `setPages(views: NavComponent[] \| NavComponentWithProps[], opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | ### setRoot -| | | -| --- | --- | -| **Description** | Set the root for the current navigation stack to a component. | -| **Signature** | `setRoot(component: T, componentProps?: ComponentProps \| null \| undefined, opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | - - +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | Set the root for the current navigation stack to a component. | +| **Signature** | `setRoot(component: T, componentProps?: ComponentProps \| null \| undefined, opts?: NavOptions \| null \| undefined, done?: TransitionDoneFn \| undefined) => Promise` | diff --git a/versioned_docs/version-v5/api/note.md b/versioned_docs/version-v5/api/note.md index 536f4ededb0..96109f1c8da 100644 --- a/versioned_docs/version-v5/api/note.md +++ b/versioned_docs/version-v5/api/note.md @@ -1,8 +1,9 @@ --- -sidebar_label: "ion-note" -demoUrl: "/docs/demos/api/note/index.html" -demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/note/index.html" +sidebar_label: 'ion-note' +demoUrl: '/docs/demos/api/note/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/note/index.html' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -10,11 +11,9 @@ import TabItem from '@theme/TabItem'; Notes are text elements generally used as subtitles that provide more information. Notes are styled to appear grey by default. Notes can be used in an item as metadata text. - ## Usage - - + @@ -43,10 +42,8 @@ Notes are text elements generally used as subtitles that provide more informatio ``` - - ```html @@ -74,10 +71,8 @@ Notes are text elements generally used as subtitles that provide more informatio ``` - - ```tsx @@ -87,14 +82,20 @@ import { IonNote, IonList, IonItem, IonLabel, IonContent } from '@ionic/react'; export const NoteExample: React.FC = () => ( {/*-- Default Note --*/} - Default Note
+ Default Note +
{/*-- Note Colors --*/} - Primary Note
- Secondary Note
- Danger Note
- Light Note
- Dark Note
+ Primary Note +
+ Secondary Note +
+ Danger Note +
+ Light Note +
+ Dark Note +
{/*-- Notes in a List --*/} @@ -114,7 +115,6 @@ export const NoteExample: React.FC = () => ( - ```tsx @@ -122,7 +122,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'note-example', - styleUrl: 'note-example.css' + styleUrl: 'note-example.css', }) export class NoteExample { render() { @@ -148,16 +148,14 @@ export class NoteExample { Off Note (Start) - + , ]; } } ``` - - ```html @@ -187,48 +185,41 @@ export class NoteExample { ``` - ## Properties - ### color -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information on colors, see [theming](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `color` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### mode -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------- | | **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - - +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | ## CSS Custom Properties -| Name | Description | -| --- | --- | +| Name | Description | +| --------- | ----------------- | | `--color` | Color of the note | - diff --git a/versioned_docs/version-v5/api/picker.md b/versioned_docs/version-v5/api/picker.md index 458209a655b..a39534dc134 100644 --- a/versioned_docs/version-v5/api/picker.md +++ b/versioned_docs/version-v5/api/picker.md @@ -1,8 +1,9 @@ --- -sidebar_label: "ion-picker" -demoUrl: "/docs/demos/api/picker/index.html" -demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/picker/index.html" +sidebar_label: 'ion-picker' +demoUrl: '/docs/demos/api/picker/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/picker/index.html' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -10,8 +11,6 @@ import TabItem from '@theme/TabItem'; A Picker is a dialog that displays a row of buttons and columns underneath. It appears on top of the app's content, and at the bottom of the viewport. - - ## Usage ```tsx @@ -34,7 +33,7 @@ const PickerExample: React.FC = () => { { text: 'Confirm', handler: (selected) => { - setValue(selected.animal.value) + setValue(selected.animal.value); }, }, ], @@ -79,7 +78,7 @@ const PickerExample: React.FC = () => { { text: 'Confirm', handler: (selected) => { - setValue(`${selected.animal.value}, ${selected.vehicle.value}`) + setValue(`${selected.animal.value}, ${selected.vehicle.value}`); }, }, ] @@ -88,9 +87,7 @@ const PickerExample: React.FC = () => { > Show Picker using params - {value && ( -
Selected Value: {value}
- )} + {value &&
Selected Value: {value}
} ); @@ -99,197 +96,165 @@ const PickerExample: React.FC = () => { ## Properties - ### animated -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------- | | **Description** | If `true`, the picker will animate. | -| **Attribute** | `animated` | -| **Type** | `boolean` | -| **Default** | `true` | - - +| **Attribute** | `animated` | +| **Type** | `boolean` | +| **Default** | `true` | ### backdropDismiss -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------------------- | | **Description** | If `true`, the picker will be dismissed when the backdrop is clicked. | -| **Attribute** | `backdrop-dismiss` | -| **Type** | `boolean` | -| **Default** | `true` | - - +| **Attribute** | `backdrop-dismiss` | +| **Type** | `boolean` | +| **Default** | `true` | ### buttons -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------- | | **Description** | Array of buttons to be displayed at the top of the picker. | -| **Attribute** | `undefined` | -| **Type** | `PickerButton[]` | -| **Default** | `[]` | - - +| **Attribute** | `undefined` | +| **Type** | `PickerButton[]` | +| **Default** | `[]` | ### columns -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------- | | **Description** | Array of columns to be displayed in the picker. | -| **Attribute** | `undefined` | -| **Type** | `PickerColumn[]` | -| **Default** | `[]` | - - +| **Attribute** | `undefined` | +| **Type** | `PickerColumn[]` | +| **Default** | `[]` | ### cssClass -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------- | | **Description** | Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces. | -| **Attribute** | `css-class` | -| **Type** | `string \| string[] \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `css-class` | +| **Type** | `string \| string[] \| undefined` | +| **Default** | `undefined` | ### duration -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------ | | **Description** | Number of milliseconds to wait before dismissing the picker. | -| **Attribute** | `duration` | -| **Type** | `number` | -| **Default** | `0` | - - +| **Attribute** | `duration` | +| **Type** | `number` | +| **Default** | `0` | ### enterAnimation -| | | -| --- | --- | -| **Description** | Animation to use when the picker is presented. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - - +| | | +| --------------- | ------------------------------------------------------- | +| **Description** | Animation to use when the picker is presented. | +| **Attribute** | `undefined` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | ### keyboardClose -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------- | | **Description** | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | -| **Attribute** | `keyboard-close` | -| **Type** | `boolean` | -| **Default** | `true` | - - +| **Attribute** | `keyboard-close` | +| **Type** | `boolean` | +| **Default** | `true` | ### leaveAnimation -| | | -| --- | --- | -| **Description** | Animation to use when the picker is dismissed. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - - +| | | +| --------------- | ------------------------------------------------------- | +| **Description** | Animation to use when the picker is dismissed. | +| **Attribute** | `undefined` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | ### mode -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------- | | **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - - +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | ### showBackdrop -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------- | | **Description** | If `true`, a backdrop will be displayed behind the picker. | -| **Attribute** | `show-backdrop` | -| **Type** | `boolean` | -| **Default** | `true` | - - +| **Attribute** | `show-backdrop` | +| **Type** | `boolean` | +| **Default** | `true` | ## Events -| Name | Description | -| --- | --- | -| `ionPickerDidDismiss` | Emitted after the picker has dismissed. | -| `ionPickerDidPresent` | Emitted after the picker has presented. | +| Name | Description | +| ---------------------- | ---------------------------------------- | +| `ionPickerDidDismiss` | Emitted after the picker has dismissed. | +| `ionPickerDidPresent` | Emitted after the picker has presented. | | `ionPickerWillDismiss` | Emitted before the picker has dismissed. | | `ionPickerWillPresent` | Emitted before the picker has presented. | - ## Methods - ### dismiss -| | | -| --- | --- | -| **Description** | Dismiss the picker overlay after it has been presented. | -| **Signature** | `dismiss(data?: any, role?: string \| undefined) => Promise` | - +| | | +| --------------- | --------------------------------------------------------------------- | +| **Description** | Dismiss the picker overlay after it has been presented. | +| **Signature** | `dismiss(data?: any, role?: string \| undefined) => Promise` | ### getColumn -| | | -| --- | --- | -| **Description** | Get the column that matches the specified name. | -| **Signature** | `getColumn(name: string) => Promise` | - +| | | +| --------------- | --------------------------------------------------------------- | +| **Description** | Get the column that matches the specified name. | +| **Signature** | `getColumn(name: string) => Promise` | ### onDidDismiss -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------ | | **Description** | Returns a promise that resolves when the picker did dismiss. | -| **Signature** | `onDidDismiss() => Promise>` | - +| **Signature** | `onDidDismiss() => Promise>` | ### onWillDismiss -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------- | | **Description** | Returns a promise that resolves when the picker will dismiss. | -| **Signature** | `onWillDismiss() => Promise>` | - +| **Signature** | `onWillDismiss() => Promise>` | ### present -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------------- | | **Description** | Present the picker overlay after it has been created. | -| **Signature** | `present() => Promise` | - - +| **Signature** | `present() => Promise` | ## CSS Custom Properties -| Name | Description | -| --- | --- | -| `--backdrop-opacity` | Opacity of the backdrop | -| `--background` | Background of the picker | -| `--background-rgb` | Background of the picker in rgb format | -| `--border-color` | Border color of the picker | -| `--border-radius` | Border radius of the picker | -| `--border-style` | Border style of the picker | -| `--border-width` | Border width of the picker | -| `--height` | Height of the picker | -| `--max-height` | Maximum height of the picker | -| `--max-width` | Maximum width of the picker | -| `--min-height` | Minimum height of the picker | -| `--min-width` | Minimum width of the picker | -| `--width` | Width of the picker | - +| Name | Description | +| -------------------- | -------------------------------------- | +| `--backdrop-opacity` | Opacity of the backdrop | +| `--background` | Background of the picker | +| `--background-rgb` | Background of the picker in rgb format | +| `--border-color` | Border color of the picker | +| `--border-radius` | Border radius of the picker | +| `--border-style` | Border style of the picker | +| `--border-width` | Border width of the picker | +| `--height` | Height of the picker | +| `--max-height` | Maximum height of the picker | +| `--max-width` | Maximum width of the picker | +| `--min-height` | Minimum height of the picker | +| `--min-width` | Minimum width of the picker | +| `--width` | Width of the picker | diff --git a/versioned_docs/version-v5/api/popover.md b/versioned_docs/version-v5/api/popover.md index 3e79791500e..283a31bc9a4 100644 --- a/versioned_docs/version-v5/api/popover.md +++ b/versioned_docs/version-v5/api/popover.md @@ -45,7 +45,7 @@ Any of the defined [CSS Custom Properties](#css-custom-properties) can be used t ## Usage - + @@ -113,7 +113,7 @@ function presentPopover(ev) { component: 'popover-example-page', cssClass: 'my-custom-class', event: ev, - translucent: true + translucent: true, }); document.body.appendChild(popover); @@ -132,15 +132,7 @@ function presentPopover(ev) { /* Using with useIonPopover Hook */ import React from 'react'; -import { - IonButton, - IonContent, - IonItem, - IonList, - IonListHeader, - IonPage, - useIonPopover, -} from '@ionic/react'; +import { IonButton, IonContent, IonItem, IonList, IonListHeader, IonPage, useIonPopover } from '@ionic/react'; const PopoverList: React.FC<{ onHide: () => void; @@ -167,7 +159,7 @@ const PopoverExample: React.FC = () => { + onClick={(e) => present({ event: e.nativeEvent, }) @@ -199,9 +191,7 @@ export const PopoverExample: React.FC = () => { cssClass="my-custom-class" event={popoverState.event} isOpen={popoverState.showPopover} - onDidDismiss={() => - setShowPopover({ showPopover: false, event: undefined }) - } + onDidDismiss={() => setShowPopover({ showPopover: false, event: undefined })} >

This is popover content

@@ -248,9 +238,7 @@ export class PopoverExample { render() { return [ - this.presentPopover(ev)}> - Present Popover - + this.presentPopover(ev)}>Present Popover , ]; } @@ -313,12 +301,7 @@ export class PagePopover { ``` - ## Properties - ### buffer -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------- | | **Description** | If the buffer and value are smaller than 1, the buffer circles will show.
The buffer should be between [0, 1]. | -| **Attribute** | `buffer` | -| **Type** | `number` | -| **Default** | `1` | - - +| **Attribute** | `buffer` | +| **Type** | `number` | +| **Default** | `1` | ### color -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information on colors, see [theming](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `color` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### mode -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------- | | **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - - +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | ### reversed -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------- | | **Description** | If true, reverse the progress bar direction. | -| **Attribute** | `reversed` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `reversed` | +| **Type** | `boolean` | +| **Default** | `false` | ### type -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Description** | The state of the progress bar, based on if the time the process takes is known or not.
Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right). | -| **Attribute** | `type` | -| **Type** | `"determinate" \| "indeterminate"` | -| **Default** | `'determinate'` | - - +| **Attribute** | `type` | +| **Type** | `"determinate" \| "indeterminate"` | +| **Default** | `'determinate'` | ### value -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | **Description** | The value determines how much of the active bar should display when the
`type` is `"determinate"`.
The value should be between [0, 1]. | -| **Attribute** | `value` | -| **Type** | `number` | -| **Default** | `0` | - - +| **Attribute** | `value` | +| **Type** | `number` | +| **Default** | `0` | ## CSS Shadow Parts -| Name | Description | -| --- | --- | -| `progress` | The progress bar that shows the current value when `type` is `"determinate"` and slides back and forth when `type` is `"indeterminate"`. | -| `stream` | The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `"determinate"`. | -| `track` | The track bar behind the progress bar. If the `buffer` property is set and `type` is `"determinate"` the track will be the -width of the `buffer` value. | - +| Name | Description | +| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | +| `progress` | The progress bar that shows the current value when `type` is `"determinate"` and slides back and forth when `type` is `"indeterminate"`. | +| `stream` | The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `"determinate"`. | +| `track` | The track bar behind the progress bar. If the `buffer` property is set and `type` is `"determinate"` the track will be the | +| width of the `buffer` value. | ## CSS Custom Properties -| Name | Description | -| --- | --- | -| `--background` | Background of the progress track, or the buffer bar if `buffer` is set | -| `--buffer-background` | DEPRECATED, use `--background` instead | -| `--progress-background` | Background of the progress bar representing the current value | - +| Name | Description | +| ----------------------- | ---------------------------------------------------------------------- | +| `--background` | Background of the progress track, or the buffer bar if `buffer` is set | +| `--buffer-background` | DEPRECATED, use `--background` instead | +| `--progress-background` | Background of the progress bar representing the current value | diff --git a/versioned_docs/version-v5/api/radio-group.md b/versioned_docs/version-v5/api/radio-group.md index f8dd5d4c70e..4395ccdc306 100644 --- a/versioned_docs/version-v5/api/radio-group.md +++ b/versioned_docs/version-v5/api/radio-group.md @@ -1,6 +1,7 @@ --- -sidebar_label: "ion-radio-group" +sidebar_label: 'ion-radio-group' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -11,13 +12,9 @@ a user to select at most one radio button from a set. Checking one radio button that belongs to a radio group unchecks any previous checked radio button within the same group. - - - ## Usage - - + @@ -25,9 +22,7 @@ radio button within the same group. - - Auto Manufacturers - + Auto Manufacturers @@ -58,19 +53,15 @@ radio button within the same group. ``` - - ```html - - Auto Manufacturers - + Auto Manufacturers @@ -101,10 +92,8 @@ radio button within the same group. ``` - - ```tsx @@ -116,9 +105,7 @@ export const RadioGroupExample: React.FC = () => ( - - Auto Manufacturers - + Auto Manufacturers @@ -153,7 +140,6 @@ export const RadioGroupExample: React.FC = () => ( - ```tsx @@ -161,7 +147,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'radio-group-example', - styleUrl: 'radio-group-example.css' + styleUrl: 'radio-group-example.css', }) export class RadioGroupExample { render() { @@ -169,9 +155,7 @@ export class RadioGroupExample { - - Auto Manufacturers - + Auto Manufacturers @@ -199,16 +183,14 @@ export class RadioGroupExample { - + , ]; } } ``` - - ```html @@ -216,9 +198,7 @@ export class RadioGroupExample { - - Auto Manufacturers - + Auto Manufacturers @@ -250,73 +230,57 @@ export class RadioGroupExample { ``` - ## Properties - ### allowEmptySelection -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------- | | **Description** | If `true`, the radios can be deselected. | -| **Attribute** | `allow-empty-selection` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `allow-empty-selection` | +| **Type** | `boolean` | +| **Default** | `false` | ### name -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------------- | | **Description** | The name of the control, which is submitted with the form data. | -| **Attribute** | `name` | -| **Type** | `string` | -| **Default** | `this.inputId` | - - +| **Attribute** | `name` | +| **Type** | `string` | +| **Default** | `this.inputId` | ### value -| | | -| --- | --- | +| | | +| --------------- | ----------------------------- | | **Description** | the value of the radio group. | -| **Attribute** | `value` | -| **Type** | `any` | -| **Default** | `undefined` | - - +| **Attribute** | `value` | +| **Type** | `any` | +| **Default** | `undefined` | ## Events -| Name | Description | -| --- | --- | +| Name | Description | +| ----------- | ----------------------------------- | | `ionChange` | Emitted when the value has changed. | - diff --git a/versioned_docs/version-v5/api/radio.md b/versioned_docs/version-v5/api/radio.md index 371ebc692b7..a9d205b5edd 100644 --- a/versioned_docs/version-v5/api/radio.md +++ b/versioned_docs/version-v5/api/radio.md @@ -1,8 +1,9 @@ --- -sidebar_label: "ion-radio" -demoUrl: "/docs/demos/api/radio/index.html" -demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/radio/index.html" +sidebar_label: 'ion-radio' +demoUrl: '/docs/demos/api/radio/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/radio/index.html' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -12,13 +13,9 @@ Radios should be used inside of an [`ion-radio-group`](radio-group.md). Pressing When radios are inside of a radio group, only one radio in the group will be checked at any time. Pressing a radio will check it and uncheck the previously selected radio, if there is one. If a radio is not in a group with another radio, then both radios will have the ability to be checked at the same time. - - - ## Usage - - + @@ -47,10 +44,8 @@ When radios are inside of a radio group, only one radio in the group will be che ``` - - ```html @@ -78,15 +73,26 @@ When radios are inside of a radio group, only one radio in the group will be che ``` - - ```tsx import React, { useState } from 'react'; -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio, IonItemDivider } from '@ionic/react'; +import { + IonContent, + IonHeader, + IonPage, + IonTitle, + IonToolbar, + IonList, + IonRadioGroup, + IonListHeader, + IonLabel, + IonItem, + IonRadio, + IonItemDivider, +} from '@ionic/react'; export const RadioExamples: React.FC = () => { const [selected, setSelected] = useState('biff'); @@ -99,7 +105,7 @@ export const RadioExamples: React.FC = () => { - setSelected(e.detail.value)}> + setSelected(e.detail.value)}> Name @@ -130,7 +136,6 @@ export const RadioExamples: React.FC = () => { - ```tsx @@ -138,7 +143,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'radio-example', - styleUrl: 'radio-example.css' + styleUrl: 'radio-example.css', }) export class RadioExample { render() { @@ -164,16 +169,14 @@ export class RadioExample { - + , ]; } } ``` - - ```html @@ -203,114 +206,92 @@ export class RadioExample { ``` - ## Properties - ### color -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information on colors, see [theming](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `color` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### disabled -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------- | | **Description** | If `true`, the user cannot interact with the radio. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | ### mode -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------- | | **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - - +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | ### name -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------------- | | **Description** | The name of the control, which is submitted with the form data. | -| **Attribute** | `name` | -| **Type** | `string` | -| **Default** | `this.inputId` | - - +| **Attribute** | `name` | +| **Type** | `string` | +| **Default** | `this.inputId` | ### value -| | | -| --- | --- | +| | | +| --------------- | ----------------------- | | **Description** | the value of the radio. | -| **Attribute** | `value` | -| **Type** | `any` | -| **Default** | `undefined` | - - +| **Attribute** | `value` | +| **Type** | `any` | +| **Default** | `undefined` | ## Events -| Name | Description | -| --- | --- | -| `ionBlur` | Emitted when the radio button loses focus. | -| `ionFocus` | Emitted when the radio button has focus. | - +| Name | Description | +| ---------- | ------------------------------------------ | +| `ionBlur` | Emitted when the radio button loses focus. | +| `ionFocus` | Emitted when the radio button has focus. | ## CSS Shadow Parts -| Name | Description | -| --- | --- | -| `container` | The container for the radio mark. | -| `mark` | The checkmark or dot used to indicate the checked state. | - +| Name | Description | +| ----------- | -------------------------------------------------------- | +| `container` | The container for the radio mark. | +| `mark` | The checkmark or dot used to indicate the checked state. | ## CSS Custom Properties -| Name | Description | -| --- | --- | -| `--border-radius` | Border radius of the radio | -| `--color` | Color of the radio | -| `--color-checked` | Color of the checked radio | +| Name | Description | +| ----------------------- | ---------------------------------------- | +| `--border-radius` | Border radius of the radio | +| `--color` | Color of the radio | +| `--color-checked` | Color of the checked radio | | `--inner-border-radius` | Border radius of the inner checked radio | - diff --git a/versioned_docs/version-v5/api/range.md b/versioned_docs/version-v5/api/range.md index cf0c6cfadcf..f79748d6e38 100644 --- a/versioned_docs/version-v5/api/range.md +++ b/versioned_docs/version-v5/api/range.md @@ -1,10 +1,11 @@ --- -title: "Range Slider | ion-range: Slider Knob Controls with Labels" -description: "ion-range lets you select from a range of values by moving the slider. It accepts dual knobs but one controls the value and labels can be placed on either side." -sidebar_label: "ion-range" -demoUrl: "/docs/demos/api/range/index.html" -demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/range/index.html" +title: 'Range Slider | ion-range: Slider Knob Controls with Labels' +description: 'ion-range lets you select from a range of values by moving the slider. It accepts dual knobs but one controls the value and labels can be placed on either side.' +sidebar_label: 'ion-range' +demoUrl: '/docs/demos/api/range/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/range/index.html' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -21,11 +22,9 @@ Labels can be placed on either side of the range by adding the be an `ion-label`, it can be added to any element to place it to the left or right of the range. - ## Usage - - + @@ -63,10 +62,8 @@ left or right of the range. ``` - - ```html @@ -103,20 +100,29 @@ left or right of the range. ``` - - ```tsx import React, { useState } from 'react'; -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonItem, IonRange, IonLabel, IonIcon, IonItemDivider } from '@ionic/react'; +import { + IonContent, + IonHeader, + IonPage, + IonTitle, + IonToolbar, + IonList, + IonItem, + IonRange, + IonLabel, + IonIcon, + IonItemDivider, +} from '@ionic/react'; import { sunny } from 'ionicons/icons'; import { RangeValue } from '@ionic/core'; export const RangeExamples: React.FC = () => { - const [value, setValue] = useState(0); const [rangeValue, setRangeValue] = useState<{ lower: number; @@ -134,7 +140,7 @@ export const RangeExamples: React.FC = () => { Default - setValue(e.detail.value as number)} /> + setValue(e.detail.value as number)} /> Value: {value} @@ -168,10 +174,19 @@ export const RangeExamples: React.FC = () => { Dual Knobs - setRangeValue(e.detail.value as any)} /> + setRangeValue(e.detail.value as any)} + /> - Value: lower: {rangeValue.lower} upper: {rangeValue.upper} + + Value: lower: {rangeValue.lower} upper: {rangeValue.upper} + @@ -180,10 +195,8 @@ export const RangeExamples: React.FC = () => { }; ``` - - ```tsx @@ -191,7 +204,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'range-example', - styleUrl: 'range-example.css' + styleUrl: 'range-example.css', }) export class RangeExample { render() { @@ -226,16 +239,14 @@ export class RangeExample { - + , ]; } } ``` - - ```html @@ -274,212 +285,180 @@ export class RangeExample { ``` - ## Properties - ### color -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information on colors, see [theming](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `color` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### debounce -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | How long, in milliseconds, to wait to trigger the
`ionChange` event after each change in the range value.
This also impacts form bindings such as `ngModel` or `v-model`. | -| **Attribute** | `debounce` | -| **Type** | `number` | -| **Default** | `0` | - - +| **Attribute** | `debounce` | +| **Type** | `number` | +| **Default** | `0` | ### disabled -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------- | | **Description** | If `true`, the user cannot interact with the range. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | ### dualKnobs -| | | -| --- | --- | +| | | +| --------------- | --------------- | | **Description** | Show two knobs. | -| **Attribute** | `dual-knobs` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `dual-knobs` | +| **Type** | `boolean` | +| **Default** | `false` | ### max -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------- | | **Description** | Maximum integer value of the range. | -| **Attribute** | `max` | -| **Type** | `number` | -| **Default** | `100` | - - +| **Attribute** | `max` | +| **Type** | `number` | +| **Default** | `100` | ### min -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------- | | **Description** | Minimum integer value of the range. | -| **Attribute** | `min` | -| **Type** | `number` | -| **Default** | `0` | - - +| **Attribute** | `min` | +| **Type** | `number` | +| **Default** | `0` | ### mode -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------- | | **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - - +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | ### name -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------------- | | **Description** | The name of the control, which is submitted with the form data. | -| **Attribute** | `name` | -| **Type** | `string` | -| **Default** | `''` | - - +| **Attribute** | `name` | +| **Type** | `string` | +| **Default** | `''` | ### pin -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------------------------- | | **Description** | If `true`, a pin with integer value is shown when the knob
is pressed. | -| **Attribute** | `pin` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `pin` | +| **Type** | `boolean` | +| **Default** | `false` | ### snaps -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------- | | **Description** | If `true`, the knob snaps to tick marks evenly spaced based
on the step property value. | -| **Attribute** | `snaps` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `snaps` | +| **Type** | `boolean` | +| **Default** | `false` | ### step -| | | -| --- | --- | +| | | +| --------------- | -------------------------------- | | **Description** | Specifies the value granularity. | -| **Attribute** | `step` | -| **Type** | `number` | -| **Default** | `1` | - - +| **Attribute** | `step` | +| **Type** | `number` | +| **Default** | `1` | ### ticks -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------ | | **Description** | If `true`, tick marks are displayed based on the step value.
Only applies when `snaps` is `true`. | -| **Attribute** | `ticks` | -| **Type** | `boolean` | -| **Default** | `true` | - - +| **Attribute** | `ticks` | +| **Type** | `boolean` | +| **Default** | `true` | ### value -| | | -| --- | --- | -| **Description** | the value of the range. | -| **Attribute** | `value` | -| **Type** | `number \| { lower: number; upper: number; }` | -| **Default** | `0` | - - +| | | +| --------------- | --------------------------------------------- | +| **Description** | the value of the range. | +| **Attribute** | `value` | +| **Type** | `number \| { lower: number; upper: number; }` | +| **Default** | `0` | ## Events -| Name | Description | -| --- | --- | -| `ionBlur` | Emitted when the range loses focus. | +| Name | Description | +| ----------- | -------------------------------------------- | +| `ionBlur` | Emitted when the range loses focus. | | `ionChange` | Emitted when the value property has changed. | -| `ionFocus` | Emitted when the range has focus. | - +| `ionFocus` | Emitted when the range has focus. | ## CSS Shadow Parts -| Name | Description | -| --- | --- | -| `bar` | The inactive part of the bar. | -| `bar-active` | The active part of the bar. | -| `knob` | The handle that is used to drag the range. | -| `pin` | The counter that appears above a knob. | -| `tick` | An inactive tick mark. | -| `tick-active` | An active tick mark. | - +| Name | Description | +| ------------- | ------------------------------------------ | +| `bar` | The inactive part of the bar. | +| `bar-active` | The active part of the bar. | +| `knob` | The handle that is used to drag the range. | +| `pin` | The counter that appears above a knob. | +| `tick` | An inactive tick mark. | +| `tick-active` | An active tick mark. | ## CSS Custom Properties -| Name | Description | -| --- | --- | -| `--bar-background` | Background of the range bar | +| Name | Description | +| ------------------------- | ---------------------------------- | +| `--bar-background` | Background of the range bar | | `--bar-background-active` | Background of the active range bar | -| `--bar-border-radius` | Border radius of the range bar | -| `--bar-height` | Height of the range bar | -| `--height` | Height of the range | -| `--knob-background` | Background of the range knob | -| `--knob-border-radius` | Border radius of the range knob | -| `--knob-box-shadow` | Box shadow of the range knob | -| `--knob-size` | Size of the range knob | -| `--pin-background` | Background of the range pin | -| `--pin-color` | Color of the range pin | - +| `--bar-border-radius` | Border radius of the range bar | +| `--bar-height` | Height of the range bar | +| `--height` | Height of the range | +| `--knob-background` | Background of the range knob | +| `--knob-border-radius` | Border radius of the range knob | +| `--knob-box-shadow` | Box shadow of the range knob | +| `--knob-size` | Size of the range knob | +| `--pin-background` | Background of the range pin | +| `--pin-color` | Color of the range pin | ## Slots -| Name | Description | -| --- | --- | -| `end` | Content is placed to the right of the range slider in LTR, and to the left in RTL. | +| Name | Description | +| ------- | ---------------------------------------------------------------------------------- | +| `end` | Content is placed to the right of the range slider in LTR, and to the left in RTL. | | `start` | Content is placed to the left of the range slider in LTR, and to the right in RTL. | - diff --git a/versioned_docs/version-v5/api/refresher-content.md b/versioned_docs/version-v5/api/refresher-content.md index d54a5d8560e..bbaa2f63a0c 100644 --- a/versioned_docs/version-v5/api/refresher-content.md +++ b/versioned_docs/version-v5/api/refresher-content.md @@ -1,6 +1,7 @@ --- -sidebar_label: "ion-refresher-content" +sidebar_label: 'ion-refresher-content' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -8,51 +9,40 @@ import TabItem from '@theme/TabItem'; The refresher content contains the text, icon and spinner to display during a pull-to-refresh. Ionic provides the pulling icon and refreshing spinner based on the platform. However, the default icon, spinner, and text can be customized based on the state of the refresher. - - ## Properties - ### pullingIcon -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | A static icon or a spinner to display when you begin to pull down.
A spinner name can be provided to gradually show tick marks
when pulling down on iOS devices. | -| **Attribute** | `pulling-icon` | -| **Type** | `null \| string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `pulling-icon` | +| **Type** | `null \| string \| undefined` | +| **Default** | `undefined` | ### pullingText -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The text you want to display when you begin to pull down.
`pullingText` can accept either plaintext or HTML as a string.
To display characters normally reserved for HTML, they
must be escaped. For example `` would become
`<Ionic>`

For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | -| **Attribute** | `pulling-text` | -| **Type** | `IonicSafeString \| string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `pulling-text` | +| **Type** | `IonicSafeString \| string \| undefined` | +| **Default** | `undefined` | ### refreshingSpinner -| | | -| --- | --- | -| **Description** | An animated SVG spinner that shows when refreshing begins | -| **Attribute** | `refreshing-spinner` | -| **Type** | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | -| **Default** | `undefined` | - - +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------- | +| **Description** | An animated SVG spinner that shows when refreshing begins | +| **Attribute** | `refreshing-spinner` | +| **Type** | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | +| **Default** | `undefined` | ### refreshingText -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The text you want to display when performing a refresh.
`refreshingText` can accept either plaintext or HTML as a string.
To display characters normally reserved for HTML, they
must be escaped. For example `` would become
`<Ionic>`

For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | -| **Attribute** | `refreshing-text` | -| **Type** | `IonicSafeString \| string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `refreshing-text` | +| **Type** | `IonicSafeString \| string \| undefined` | +| **Default** | `undefined` | diff --git a/versioned_docs/version-v5/api/refresher.md b/versioned_docs/version-v5/api/refresher.md index ce5d0d4b6d3..4bd0152a243 100644 --- a/versioned_docs/version-v5/api/refresher.md +++ b/versioned_docs/version-v5/api/refresher.md @@ -35,7 +35,7 @@ Using the MD native `ion-refresher` requires setting the `pullingIcon` property ## Usage - + @@ -153,13 +153,7 @@ export const RefresherExample: React.FC = () => ( {/*-- Custom Refresher Properties --*/} - + @@ -204,26 +198,21 @@ export class RefresherExample { return [ // Default Refresher - this.doRefresh(ev)}> + this.doRefresh(ev)}> , // Custom Refresher Properties - + , // Custom Refresher Content - this.doRefresh(ev)}> + this.doRefresh(ev)}> - + @@ -25,48 +24,36 @@ The `detail` property of the `ionItemReorder` event includes all of the relevant - - Item 1 - + Item 1 - - Item 2 - + Item 2 - - Item 3 - + Item 3 - - Item 4 - + Item 4 - - Item 5 - + Item 5 - - Item 6 - + Item 6 @@ -75,17 +62,13 @@ The `detail` property of the `ionItemReorder` event includes all of the relevant - - Item 7 - + Item 7 - - Item 8 - + Item 8 @@ -99,7 +82,7 @@ import { ItemReorderEventDetail } from '@ionic/core'; @Component({ selector: 'reorder-group-example', templateUrl: 'reorder-group-example.html', - styleUrls: ['./reorder-group-example.css'] + styleUrls: ['./reorder-group-example.css'], }) export class ReorderGroupExample { @ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup; @@ -133,7 +116,7 @@ import { ItemReorderEventDetail } from '@ionic/core'; @Component({ selector: 'reorder-group-example', templateUrl: 'reorder-group-example.html', - styleUrls: ['./reorder-group-example.css'] + styleUrls: ['./reorder-group-example.css'], }) export class ReorderGroupExample { items = [1, 2, 3, 4, 5]; @@ -158,10 +141,8 @@ export class ReorderGroupExample { } ``` - - ```html @@ -169,48 +150,36 @@ export class ReorderGroupExample { - - Item 1 - + Item 1 - - Item 2 - + Item 2 - - Item 3 - + Item 3 - - Item 4 - + Item 4 - - Item 5 - + Item 5 - - Item 6 - + Item 6 @@ -219,17 +188,13 @@ export class ReorderGroupExample { - - Item 7 - + Item 7 - - Item 8 - + Item 8 @@ -238,7 +203,7 @@ export class ReorderGroupExample { ```javascript const reorderGroup = document.querySelector('ion-reorder-group'); -reorderGroup.addEventListener('ionItemReorder', ({detail}) => { +reorderGroup.addEventListener('ionItemReorder', ({ detail }) => { // The `from` and `to` properties contain the index of the item // when the drag started and ended, respectively console.log('Dragged from index', detail.from, 'to', detail.to); @@ -256,7 +221,7 @@ reorderGroup.addEventListener('ionItemReorder', ({detail}) => { const items = [1, 2, 3, 4, 5]; const reorderGroup = document.querySelector('ion-reorder-group'); -reorderGroup.addEventListener('ionItemReorder', ({detail}) => { +reorderGroup.addEventListener('ionItemReorder', ({ detail }) => { // Before complete is called with the items they will remain in the // order before the drag console.log('Before complete', items); @@ -271,10 +236,8 @@ reorderGroup.addEventListener('ionItemReorder', ({detail}) => { }); ``` - - ```tsx @@ -372,10 +335,8 @@ function doReorder(event: CustomEvent) { } ``` - - ```tsx @@ -383,7 +344,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'reorder-group-example', - styleUrl: 'reorder-group-example.css' + styleUrl: 'reorder-group-example.css', }) export class ReorderGroupExample { doReorder(ev: any) { @@ -403,48 +364,36 @@ export class ReorderGroupExample { this.doReorder(ev)} disabled={false}> {/* Default reorder icon, end aligned items */} - - Item 1 - + Item 1 - - Item 2 - + Item 2 {/* Default reorder icon, start aligned items */} - - Item 3 - + Item 3 - - Item 4 - + Item 4 {/* Custom reorder icon end items */} - - Item 5 - + Item 5 - - Item 6 - + Item 6 @@ -453,21 +402,17 @@ export class ReorderGroupExample { {/* Items wrapped in a reorder, entire item can be dragged */} - - Item 7 - + Item 7 - - Item 8 - + Item 8 - - ] + , + ]; } } ``` @@ -479,7 +424,7 @@ import { Component, State, h } from '@stencil/core'; @Component({ tag: 'reorder-group-example', - styleUrl: 'reorder-group-example.css' + styleUrl: 'reorder-group-example.css', }) export class ReorderGroupExample { @State() items = [1, 2, 3, 4, 5]; @@ -502,25 +447,20 @@ export class ReorderGroupExample { return [ // The reorder gesture is disabled by default, enable it to drag and drop items this.doReorder(ev)} disabled={false}> - - {this.items.map(item => + {this.items.map((item) => ( - - Item { item } - + Item {item} - )} - - - ] + ))} + , + ]; } } ``` - ```html @@ -529,48 +469,36 @@ export class ReorderGroupExample { - - Item 1 - + Item 1 - - Item 2 - + Item 2 - - Item 3 - + Item 3 - - Item 4 - + Item 4 - - Item 5 - + Item 5 - - Item 6 - + Item 6 @@ -579,55 +507,45 @@ export class ReorderGroupExample { - - Item 7 - + Item 7 - - Item 8 - + Item 8 ``` @@ -635,69 +553,62 @@ export default defineComponent({ ```html ``` - ## Properties - ### disabled -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------- | | **Description** | If `true`, the reorder will be hidden. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `true` | - - +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `true` | ## Events -| Name | Description | -| --- | --- | -| `ionItemReorder` | Event that needs to be listened to in order to complete the reorder action. +| Name | Description | +| ---------------- | --------------------------------------------------------------------------- | +| `ionItemReorder` | Event that needs to be listened to in order to complete the reorder action. | + Once the event has been emitted, the `complete()` method then needs to be called in order to finalize the reorder action. | - ## Methods - ### complete -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Completes the reorder operation. Must be called by the `ionItemReorder` event.

If a list of items is passed, the list will be reordered and returned in the
proper order.

If no parameters are passed or if `true` is passed in, the reorder will complete
and the item will remain in the position it was dragged to. If `false` is passed,
the reorder will complete and the item will bounce back to its original position. | -| **Signature** | `complete(listOrReorder?: boolean \| any[] \| undefined) => Promise` | - - +| **Signature** | `complete(listOrReorder?: boolean \| any[] \| undefined) => Promise` | diff --git a/versioned_docs/version-v5/api/reorder.md b/versioned_docs/version-v5/api/reorder.md index 9c0a4ad92bd..83d5d654594 100644 --- a/versioned_docs/version-v5/api/reorder.md +++ b/versioned_docs/version-v5/api/reorder.md @@ -1,8 +1,9 @@ --- -sidebar_label: "ion-reorder" -demoUrl: "/docs/demos/api/reorder/index.html" -demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/reorder/index.html" +sidebar_label: 'ion-reorder' +demoUrl: '/docs/demos/api/reorder/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/reorder/index.html' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -12,62 +13,47 @@ Reorder is a component that allows an item in a group of items to be dragged to `ion-reorder` is the anchor used to drag and drop the items inside of the `ion-reorder-group`. See the [Reorder Group](reorder-group.md) for more information on how to complete the reorder operation. - ## Usage - - + - ```html - - Item 1 - + Item 1 - - Item 2 - + Item 2 - - Item 3 - + Item 3 - - Item 4 - + Item 4 - - Item 5 - + Item 5 - - Item 6 - + Item 6 @@ -76,17 +62,13 @@ Reorder is a component that allows an item in a group of items to be dragged to - - Item 7 - + Item 7 - - Item 8 - + Item 8 @@ -94,57 +76,43 @@ Reorder is a component that allows an item in a group of items to be dragged to - - ```html - - Item 1 - + Item 1 - - Item 2 - + Item 2 - - Item 3 - + Item 3 - - Item 4 - + Item 4 - - Item 5 - + Item 5 - - Item 6 - + Item 6 @@ -153,17 +121,13 @@ Reorder is a component that allows an item in a group of items to be dragged to - - Item 7 - + Item 7 - - Item 8 - + Item 8 @@ -171,7 +135,6 @@ Reorder is a component that allows an item in a group of items to be dragged to - ```tsx @@ -237,10 +200,8 @@ export const ReorderExample: React.FC = () => ( ); ``` - - ```tsx @@ -248,7 +209,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'reorder-example', - styleUrl: 'reorder-example.css' + styleUrl: 'reorder-example.css', }) export class ReorderExample { render() { @@ -257,48 +218,36 @@ export class ReorderExample { {/* Default reorder icon, end aligned items */} - - Item 1 - + Item 1 - - Item 2 - + Item 2 {/* Default reorder icon, start aligned items */} - - Item 3 - + Item 3 - - Item 4 - + Item 4 {/* Custom reorder icon end items */} - - Item 5 - + Item 5 - - Item 6 - + Item 6 @@ -307,29 +256,23 @@ export class ReorderExample { {/* Items wrapped in a reorder, entire item can be dragged */} - - Item 7 - + Item 7 - - Item 8 - + Item 8 - + , ]; } } ``` - - ```html @@ -338,48 +281,36 @@ export class ReorderExample { - - Item 1 - + Item 1 - - Item 2 - + Item 2 - - Item 3 - + Item 3 - - Item 4 - + Item 4 - - Item 5 - + Item 5 - - Item 6 - + Item 6 @@ -388,45 +319,35 @@ export class ReorderExample { - - Item 7 - + Item 7 - - Item 8 - + Item 8 ``` @@ -436,7 +357,6 @@ export default defineComponent({ ## CSS Shadow Parts -| Name | Description | -| --- | --- | +| Name | Description | +| ------ | ----------------------------------------------- | | `icon` | The icon of the reorder handle (uses ion-icon). | - diff --git a/versioned_docs/version-v5/api/ripple-effect.md b/versioned_docs/version-v5/api/ripple-effect.md index 95e396d0e2d..61161bba68f 100644 --- a/versioned_docs/version-v5/api/ripple-effect.md +++ b/versioned_docs/version-v5/api/ripple-effect.md @@ -1,6 +1,7 @@ --- -sidebar_label: "ion-ripple-effect" +sidebar_label: 'ion-ripple-effect' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -14,8 +15,7 @@ The default type, `"bounded"`, will expand the ripple effect from the click posi ## Usage - - + @@ -54,7 +54,6 @@ The default type, `"bounded"`, will expand the ripple effect from the click posi - ```html @@ -92,7 +91,6 @@ The default type, `"bounded"`, will expand the ripple effect from the click posi - ```tsx @@ -102,7 +100,7 @@ import './RippleEffectExample.css'; export const RippleExample: React.FC = () => ( - +
A plain div with a bounded ripple effect @@ -136,7 +134,6 @@ export const RippleExample: React.FC = () => ( - ```tsx @@ -144,7 +141,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'ripple-effect-example', - styleUrl: 'ripple-effect-example.css' + styleUrl: 'ripple-effect-example.css', }) export class RippleEffectExample { render() { @@ -171,7 +168,7 @@ export class RippleEffectExample { - + , ]; } } @@ -186,7 +183,6 @@ export class RippleEffectExample { - ```html @@ -224,12 +220,12 @@ export class RippleEffectExample { ``` @@ -239,26 +235,20 @@ export default defineComponent({ ## Properties - ### type -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Sets the type of ripple-effect:

- `bounded`: the ripple effect expands from the user's click position
- `unbounded`: the ripple effect expands from the center of the button and overflows the container.

NOTE: Surfaces for bounded ripples should have the overflow property set to hidden,
while surfaces for unbounded ripples should have it set to visible. | -| **Attribute** | `type` | -| **Type** | `"bounded" \| "unbounded"` | -| **Default** | `'bounded'` | - - +| **Attribute** | `type` | +| **Type** | `"bounded" \| "unbounded"` | +| **Default** | `'bounded'` | ## Methods - ### addRipple -| | | -| --- | --- | -| **Description** | Adds the ripple effect to the parent element. | -| **Signature** | `addRipple(x: number, y: number) => Promise<() => void>` | - - +| | | +| --------------- | -------------------------------------------------------- | +| **Description** | Adds the ripple effect to the parent element. | +| **Signature** | `addRipple(x: number, y: number) => Promise<() => void>` | diff --git a/versioned_docs/version-v5/api/route-redirect.md b/versioned_docs/version-v5/api/route-redirect.md index a9dd97c14f9..0e614ef9c83 100644 --- a/versioned_docs/version-v5/api/route-redirect.md +++ b/versioned_docs/version-v5/api/route-redirect.md @@ -1,6 +1,7 @@ --- -sidebar_label: "ion-route-redirect" +sidebar_label: 'ion-route-redirect' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -11,11 +12,11 @@ A route redirect can only be used with an `ion-router` as a direct child of it. > Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.md) and the Angular router. The route redirect has two configurable properties: - - `from` - - `to` -It redirects "from" a URL "to" another URL. When the defined `ion-route-redirect` rule matches, the router will redirect from the path specified in the `from` property to the path in the `to` property. In order for a redirect to occur the `from` path needs to be an exact match to the navigated URL. +- `from` +- `to` +It redirects "from" a URL "to" another URL. When the defined `ion-route-redirect` rule matches, the router will redirect from the path specified in the `from` property to the path in the `to` property. In order for a redirect to occur the `from` path needs to be an exact match to the navigated URL. ## Multiple Route Redirects @@ -34,7 +35,6 @@ Take the following two redirects: If the user navigates to `/admin` the router will redirect to `/login` and stop there. It will never evaluate more than one redirect. - ## Usage ```html @@ -81,35 +81,30 @@ routeRedirect.setAttribute('to', isLoggedIn ? undefined : '/login'); ## Properties - ### from -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL.
It needs to be an exact match of the navigated URL in order to apply.

The path specified in this value is always an absolute path, even if the initial `/` slash
is not specified. | -| **Attribute** | `from` | -| **Type** | `string` | -| **Default** | `undefined` | - - +| **Attribute** | `from` | +| **Type** | `string` | +| **Default** | `undefined` | ### to -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | A redirect route, redirects "from" a URL "to" another URL. This property is that "to" URL.
When the defined `ion-route-redirect` rule matches, the router will redirect to the path
specified in this property.

The value of this property is always an absolute path inside the scope of routes defined in
`ion-router` it can't be used with another router or to perform a redirection to a different domain.

Note that this is a virtual redirect, it will not cause a real browser refresh, again, it's
a redirect inside the context of ion-router.

When this property is not specified or his value is `undefined` the whole redirect route is noop,
even if the "from" value matches. | -| **Attribute** | `to` | -| **Type** | `null \| string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `to` | +| **Type** | `null \| string \| undefined` | +| **Default** | `undefined` | ## Events -| Name | Description | -| --- | --- | -| `ionRouteRedirectChanged` | Internal event that fires when any value of this rule is added/removed from the DOM, +| Name | Description | +| ------------------------- | ------------------------------------------------------------------------------------ | +| `ionRouteRedirectChanged` | Internal event that fires when any value of this rule is added/removed from the DOM, | + or any of his public properties changes. `ion-router` captures this event in order to update his internal registry of router rules. | - diff --git a/versioned_docs/version-v5/api/route.md b/versioned_docs/version-v5/api/route.md index 939324042b3..ff5821af469 100644 --- a/versioned_docs/version-v5/api/route.md +++ b/versioned_docs/version-v5/api/route.md @@ -28,7 +28,7 @@ interface NavigationHookOptions { ## Usage - + @@ -71,8 +71,7 @@ const hasUnsavedDataGuard = async () => { const confirmDiscardChanges = async () => { const alert = document.createElement('ion-alert'); alert.header = 'Discard Unsaved Changes?'; - alert.message = - 'Are you sure you want to leave? Any unsaved changed will be lost.'; + alert.message = 'Are you sure you want to leave? Any unsaved changed will be lost.'; alert.buttons = [ { text: 'Cancel', @@ -111,16 +110,8 @@ export class RouterExample { return ( - - + + ); @@ -150,8 +141,7 @@ const hasUnsavedDataGuard = async () => { const confirmDiscardChanges = async () => { const alert = await alertController.create({ header: 'Discard Unsaved Changes?', - message: - 'Are you sure you want to leave? Any unsaved changed will be lost.', + message: 'Are you sure you want to leave? Any unsaved changed will be lost.', buttons: [ { text: 'Cancel', @@ -180,16 +170,8 @@ const confirmDiscardChanges = async () => { @@ -220,8 +202,7 @@ const confirmDiscardChanges = async () => { const confirmDiscardChanges = async () => { const alert = await alertController.create({ header: 'Discard Unsaved Changes?', - message: - 'Are you sure you want to leave? Any unsaved changed will be lost.', + message: 'Are you sure you want to leave? Any unsaved changed will be lost.', buttons: [ { text: 'Cancel', diff --git a/versioned_docs/version-v5/api/router-link.md b/versioned_docs/version-v5/api/router-link.md index 837aa70d6fd..d09924c7fc1 100644 --- a/versioned_docs/version-v5/api/router-link.md +++ b/versioned_docs/version-v5/api/router-link.md @@ -1,10 +1,11 @@ --- -title: "Router Link | Navigating The ion-router-link Component" -description: "Use the ion-router-link component to navigate to a specified link. The router link can accept an href for location and a direction for the transition animation." -sidebar_label: "ion-router-link" -demoUrl: "/docs/demos/api/router-link/index.html" -demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/router-link/index.html" +title: 'Router Link | Navigating The ion-router-link Component' +description: 'Use the ion-router-link component to navigate to a specified link. The router link can accept an href for location and a direction for the transition animation.' +sidebar_label: 'ion-router-link' +demoUrl: '/docs/demos/api/router-link/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/router-link/index.html' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -16,77 +17,63 @@ The router link component is used for navigating to a specified link. Similar to ## Properties - ### color -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information on colors, see [theming](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `color` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### href -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------- | | **Description** | Contains a URL or a URL fragment that the hyperlink points to.
If this property is set, an anchor tag will be rendered. | -| **Attribute** | `href` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `href` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### rel -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Specifies the relationship of the target object to the link object.
The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | -| **Attribute** | `rel` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `rel` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### routerAnimation -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------- | | **Description** | When using a router, it specifies the transition animation when navigating to
another page using `href`. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `undefined` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | ### routerDirection -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------- | | **Description** | When using a router, it specifies the transition direction when navigating to
another page using `href`. | -| **Attribute** | `router-direction` | -| **Type** | `"back" \| "forward" \| "root"` | -| **Default** | `'forward'` | - - +| **Attribute** | `router-direction` | +| **Type** | `"back" \| "forward" \| "root"` | +| **Default** | `'forward'` | ### target -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Specifies where to display the linked URL.
Only applies when an `href` is provided.
Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | -| **Attribute** | `target` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `target` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ## CSS Custom Properties -| Name | Description | -| --- | --- | +| Name | Description | +| -------------- | ----------------------------- | | `--background` | Background of the router link | -| `--color` | Text color of the router link | - +| `--color` | Text color of the router link | diff --git a/versioned_docs/version-v5/api/router-outlet.md b/versioned_docs/version-v5/api/router-outlet.md index 95aba50d1e9..cc4b5578b0b 100644 --- a/versioned_docs/version-v5/api/router-outlet.md +++ b/versioned_docs/version-v5/api/router-outlet.md @@ -1,6 +1,7 @@ --- -sidebar_label: "ion-router-outlet" +sidebar_label: 'ion-router-outlet' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -12,57 +13,46 @@ Router outlet is a component used in routing within an Angular or Vue app. It be Although router outlet has methods for navigating around, it's recommended to use the navigation methods in your framework's router. - ## Life Cycle Hooks Routes rendered in a Router Outlet have access to specific Ionic events that are wired up to animations - | Event Name | Trigger | -|--------------------|--------------------------------------------------------------------| +| ------------------ | ------------------------------------------------------------------ | | `ionViewWillEnter` | Fired when the component routing to is about to animate into view. | | `ionViewDidEnter` | Fired when the component routing to has finished animating. | | `ionViewWillLeave` | Fired when the component routing from is about to animate. | | `ionViewDidLeave` | Fired when the component routing to has finished animating. | - These event tie into Ionic's animation system and can be used to coordinate parts of your app when a Components is done with its animation. These events are not a replacement for your framework's own event system, but an addition. For handling Router Guards, the older `ionViewCanEnter` and `ionViewCanLeave` have been replaced with their framework specific equivalent. For Angular, there are [Router Guards](https://angular.io/guide/router#milestone-5-route-guards). - ## Properties - ### animated -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------- | | **Description** | If `true`, the router-outlet should animate the transition of components. | -| **Attribute** | `animated` | -| **Type** | `boolean` | -| **Default** | `true` | - - +| **Attribute** | `animated` | +| **Type** | `boolean` | +| **Default** | `true` | ### animation -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | By default `ion-nav` animates transition between pages based in the mode (ios or material design).
However, this property allows to create custom transition using `AnimateBuilder` functions. | -| **Attribute** | `undefined` | -| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `undefined` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | ### mode -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------- | | **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `getIonMode(this)` | - - +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `getIonMode(this)` | diff --git a/versioned_docs/version-v5/api/router.md b/versioned_docs/version-v5/api/router.md index 1e8832045e4..5cb097bb641 100644 --- a/versioned_docs/version-v5/api/router.md +++ b/versioned_docs/version-v5/api/router.md @@ -1,8 +1,9 @@ --- -title: "ion-router: Router Component to Coordinate URL Navigation" -description: "ion-router is a URL coordinator for navigation outlets of ionic: ion-nav and ion-tabs. Router components handle routing inside vanilla and Stencil JavaScript." -sidebar_label: "ion-router" +title: 'ion-router: Router Component to Coordinate URL Navigation' +description: 'ion-router is a URL coordinator for navigation outlets of ionic: ion-nav and ion-tabs. Router components handle routing inside vanilla and Stencil JavaScript.' +sidebar_label: 'ion-router' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -21,7 +22,6 @@ That means the `ion-router` never touches the DOM, it does NOT show the componen In order to configure this relationship between components (to load/select) and URLs, `ion-router` uses a declarative syntax using JSX/HTML to define a tree of routes. - ## Usage ```html @@ -48,59 +48,47 @@ In order to configure this relationship between components (to load/select) and - ``` - ## Properties - ### root -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------------------------------------------------- | | **Description** | By default `ion-router` will match the routes at the root path ("/").
That can be changed when | -| **Attribute** | `root` | -| **Type** | `string` | -| **Default** | `'/'` | - - +| **Attribute** | `root` | +| **Type** | `string` | +| **Default** | `'/'` | ### useHash -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The router can work in two "modes":
- With hash: `/index.html#/path/to/page`
- Without hash: `/path/to/page`

Using one or another might depend in the requirements of your app and/or where it's deployed.

Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might
requires additional server-side configuration in order to properly work.

On the other side hash-navigation is much easier to deploy, it even works over the file protocol.

By default, this property is `true`, change to `false` to allow hash-less URLs. | -| **Attribute** | `use-hash` | -| **Type** | `boolean` | -| **Default** | `true` | - - +| **Attribute** | `use-hash` | +| **Type** | `boolean` | +| **Default** | `true` | ## Events -| Name | Description | -| --- | --- | -| `ionRouteDidChange` | Emitted when the route had changed | +| Name | Description | +| -------------------- | ----------------------------------------------- | +| `ionRouteDidChange` | Emitted when the route had changed | | `ionRouteWillChange` | Event emitted when the route is about to change | - ## Methods - ### back -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------- | | **Description** | Go back to previous page in the window.history. | -| **Signature** | `back() => Promise` | - +| **Signature** | `back() => Promise` | ### push -| | | -| --- | --- | -| **Description** | Navigate to the specified URL. | -| **Signature** | `push(url: string, direction?: RouterDirection, animation?: AnimationBuilder \| undefined) => Promise` | - - +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------- | +| **Description** | Navigate to the specified URL. | +| **Signature** | `push(url: string, direction?: RouterDirection, animation?: AnimationBuilder \| undefined) => Promise` | diff --git a/versioned_docs/version-v5/api/row.md b/versioned_docs/version-v5/api/row.md index f040ae6ded1..99053ceb79b 100644 --- a/versioned_docs/version-v5/api/row.md +++ b/versioned_docs/version-v5/api/row.md @@ -1,6 +1,7 @@ --- -sidebar_label: "ion-row" +sidebar_label: 'ion-row' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -11,8 +12,6 @@ Rows are horizontal components of the [grid](grid.md) system and contain varying See [Grid Layout](../layout/grid.md) for more information. - ## Row Alignment By default, columns will stretch to fill the entire height of the row and wrap when necessary. Rows are [flex containers](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container), so there are several [CSS classes](../layout/css-utilities.md#flex-container-properties) that can be applied to a row to customize this behavior. - diff --git a/versioned_docs/version-v5/api/searchbar.md b/versioned_docs/version-v5/api/searchbar.md index 5948d358971..babc9bcf2db 100644 --- a/versioned_docs/version-v5/api/searchbar.md +++ b/versioned_docs/version-v5/api/searchbar.md @@ -1,10 +1,11 @@ --- -title: "Search Bar Icon for Keyboard Text Display | Ion-Search Bar" -description: "Search bars represent a text field that can be used to search through a collection. Learn to input Ion-Search Bar as an icon on Android & iOS keyboard displays." -sidebar_label: "ion-searchbar" -demoUrl: "/docs/demos/api/searchbar/index.html" -demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/searchbar/index.html" +title: 'Search Bar Icon for Keyboard Text Display | Ion-Search Bar' +description: 'Search bars represent a text field that can be used to search through a collection. Learn to input Ion-Search Bar as an icon on Android & iOS keyboard displays.' +sidebar_label: 'ion-searchbar' +demoUrl: '/docs/demos/api/searchbar/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/searchbar/index.html' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -24,11 +25,9 @@ By default, tapping the input will cause the keyboard to appear with a magnifyin By default, tapping the input will cause the keyboard to appear with the text "return" on a gray submit button. You can optionally set the `inputmode` property to `"search"`, which will change the text from "return" to "go", and change the button color from gray to blue. Alternatively, you can wrap the `ion-searchbar` in a `form` element with an `action` property. This will cause the keyboard to appear with a blue submit button that says "search". - ## Usage - - + @@ -80,7 +79,6 @@ By default, tapping the input will cause the keyboard to appear with the text "r - ```html @@ -131,7 +129,6 @@ By default, tapping the input will cause the keyboard to appear with the text "r - ```tsx @@ -149,51 +146,85 @@ export const SearchBarExamples: React.FC = () => {

Default Searchbar

- setSearchText(e.detail.value!)}> + setSearchText(e.detail.value!)}>

Searchbar with cancel button always shown

- setSearchText(e.detail.value!)} showCancelButton="always"> + setSearchText(e.detail.value!)} + showCancelButton="always" + >

Searchbar with cancel button never shown

- setSearchText(e.detail.value!)} showCancelButton="never"> + setSearchText(e.detail.value!)} + showCancelButton="never" + >

Searchbar with cancel button shown on focus

- setSearchText(e.detail.value!)} showCancelButton="focus"> + setSearchText(e.detail.value!)} + showCancelButton="focus" + >

Searchbar with danger color

- setSearchText(e.detail.value!)} color="danger"> + setSearchText(e.detail.value!)} + color="danger" + >

Searchbar with telephone type

- setSearchText(e.detail.value!)} type="tel"> + setSearchText(e.detail.value!)} type="tel">

Searchbar with numeric inputmode

- setSearchText(e.detail.value!)} inputmode="numeric"> + setSearchText(e.detail.value!)} + inputmode="numeric" + >

Searchbar disabled

- setSearchText(e.detail.value!)} disabled={true}> + setSearchText(e.detail.value!)} + disabled={true} + >

Searchbar with a cancel button and custom cancel button text

- setSearchText(e.detail.value!)} showCancelButton="focus" cancelButtonText="Custom Cancel"> + setSearchText(e.detail.value!)} + showCancelButton="focus" + cancelButtonText="Custom Cancel" + >

Searchbar with a custom debounce - Note: debounce only works on onIonChange event

- setSearchText(e.detail.value!)} debounce={1000}> + setSearchText(e.detail.value!)} + debounce={1000} + >

Animated Searchbar

- setSearchText(e.detail.value!)} animated> + setSearchText(e.detail.value!)} animated>

Searchbar with a placeholder

- setSearchText(e.detail.value!)} placeholder="Filter Schedules"> + setSearchText(e.detail.value!)} + placeholder="Filter Schedules" + >

Searchbar in a Toolbar

- setSearchText(e.detail.value!)}> + setSearchText(e.detail.value!)}> - - - Search Text: {searchText ?? '(none)'} - + Search Text: {searchText ?? '(none)'} ); @@ -202,7 +233,6 @@ export const SearchBarExamples: React.FC = () => { - ```tsx @@ -210,12 +240,12 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'searchbar-example', - styleUrl: 'searchbar-example.css' + styleUrl: 'searchbar-example.css', }) export class SearchbarExample { render() { return [ - // Default Searchbar + // Default Searchbar , // Searchbar with cancel button always shown @@ -257,16 +287,14 @@ export class SearchbarExample { // Searchbar in a Toolbar - + , ]; } } ``` - - ```html @@ -317,12 +345,12 @@ export class SearchbarExample { ``` @@ -332,261 +360,216 @@ export default defineComponent({ ## Properties - ### animated -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------- | | **Description** | If `true`, enable searchbar animation. | -| **Attribute** | `animated` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `animated` | +| **Type** | `boolean` | +| **Default** | `false` | ### autocomplete -| | | -| --- | --- | -| **Description** | Set the input's autocomplete property. | -| **Attribute** | `autocomplete` | -| **Type** | `"on" \| "off" \| "name" \| "honorific-prefix" \| "given-name" \| "additional-name" \| "family-name" \| "honorific-suffix" \| "nickname" \| "email" \| "username" \| "new-password" \| "current-password" \| "one-time-code" \| "organization-title" \| "organization" \| "street-address" \| "address-line1" \| "address-line2" \| "address-line3" \| "address-level4" \| "address-level3" \| "address-level2" \| "address-level1" \| "country" \| "country-name" \| "postal-code" \| "cc-name" \| "cc-given-name" \| "cc-additional-name" \| "cc-family-name" \| "cc-number" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-csc" \| "cc-type" \| "transaction-currency" \| "transaction-amount" \| "language" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "sex" \| "tel" \| "tel-country-code" \| "tel-national" \| "tel-area-code" \| "tel-local" \| "tel-extension" \| "impp" \| "url" \| "photo"` | -| **Default** | `'off'` | - - +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | Set the input's autocomplete property. | +| **Attribute** | `autocomplete` | +| **Type** | `"on" \| "off" \| "name" \| "honorific-prefix" \| "given-name" \| "additional-name" \| "family-name" \| "honorific-suffix" \| "nickname" \| "email" \| "username" \| "new-password" \| "current-password" \| "one-time-code" \| "organization-title" \| "organization" \| "street-address" \| "address-line1" \| "address-line2" \| "address-line3" \| "address-level4" \| "address-level3" \| "address-level2" \| "address-level1" \| "country" \| "country-name" \| "postal-code" \| "cc-name" \| "cc-given-name" \| "cc-additional-name" \| "cc-family-name" \| "cc-number" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-csc" \| "cc-type" \| "transaction-currency" \| "transaction-amount" \| "language" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "sex" \| "tel" \| "tel-country-code" \| "tel-national" \| "tel-area-code" \| "tel-local" \| "tel-extension" \| "impp" \| "url" \| "photo"` | +| **Default** | `'off'` | ### autocorrect -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------- | | **Description** | Set the input's autocorrect property. | -| **Attribute** | `autocorrect` | -| **Type** | `"off" \| "on"` | -| **Default** | `'off'` | - - +| **Attribute** | `autocorrect` | +| **Type** | `"off" \| "on"` | +| **Default** | `'off'` | ### cancelButtonIcon -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------------------------------------------- | | **Description** | Set the cancel button icon. Only applies to `md` mode.
Defaults to `"arrow-back-sharp"`. | -| **Attribute** | `cancel-button-icon` | -| **Type** | `string` | -| **Default** | `config.get('backButtonIcon', 'arrow-back-sharp') as string` | - - +| **Attribute** | `cancel-button-icon` | +| **Type** | `string` | +| **Default** | `config.get('backButtonIcon', 'arrow-back-sharp') as string` | ### cancelButtonText -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------------------- | | **Description** | Set the the cancel button text. Only applies to `ios` mode. | -| **Attribute** | `cancel-button-text` | -| **Type** | `string` | -| **Default** | `'Cancel'` | - - +| **Attribute** | `cancel-button-text` | +| **Type** | `string` | +| **Default** | `'Cancel'` | ### clearIcon -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------- | | **Description** | Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close-sharp"` for `md`. | -| **Attribute** | `clear-icon` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `clear-icon` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### color -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information on colors, see [theming](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `color` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### debounce -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`. | -| **Attribute** | `debounce` | -| **Type** | `number` | -| **Default** | `250` | - - +| **Attribute** | `debounce` | +| **Type** | `number` | +| **Default** | `250` | ### disabled -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------- | | **Description** | If `true`, the user cannot interact with the input. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | ### enterkeyhint -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | A hint to the browser for which enter key to display.
Possible values: `"enter"`, `"done"`, `"go"`, `"next"`,
`"previous"`, `"search"`, and `"send"`. | -| **Attribute** | `enterkeyhint` | -| **Type** | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `enterkeyhint` | +| **Type** | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined` | +| **Default** | `undefined` | ### inputmode -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | A hint to the browser for which keyboard to display.
Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,
`"email"`, `"numeric"`, `"decimal"`, and `"search"`. | -| **Attribute** | `inputmode` | -| **Type** | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url" \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `inputmode` | +| **Type** | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url" \| undefined` | +| **Default** | `undefined` | ### mode -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------- | | **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - - +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | ### placeholder -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Set the input's placeholder.
`placeholder` can accept either plaintext or HTML as a string.
To display characters normally reserved for HTML, they
must be escaped. For example `` would become
`<Ionic>`

For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | -| **Attribute** | `placeholder` | -| **Type** | `string` | -| **Default** | `'Search'` | - - +| **Attribute** | `placeholder` | +| **Type** | `string` | +| **Default** | `'Search'` | ### searchIcon -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------ | | **Description** | The icon to use as the search icon. Defaults to `"search-outline"` in
`ios` mode and `"search-sharp"` in `md` mode. | -| **Attribute** | `search-icon` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `search-icon` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### showCancelButton -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Sets the behavior for the cancel button. Defaults to `"never"`.
Setting to `"focus"` shows the cancel button on focus.
Setting to `"never"` hides the cancel button.
Setting to `"always"` shows the cancel button regardless
of focus state. | -| **Attribute** | `show-cancel-button` | -| **Type** | `"always" \| "focus" \| "never"` | -| **Default** | `'never'` | - - +| **Attribute** | `show-cancel-button` | +| **Type** | `"always" \| "focus" \| "never"` | +| **Default** | `'never'` | ### showClearButton -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Sets the behavior for the clear button. Defaults to `"focus"`.
Setting to `"focus"` shows the clear button on focus if the
input is not empty.
Setting to `"never"` hides the clear button.
Setting to `"always"` shows the clear button regardless
of focus state, but only if the input is not empty. | -| **Attribute** | `show-clear-button` | -| **Type** | `"always" \| "focus" \| "never"` | -| **Default** | `'focus'` | - - +| **Attribute** | `show-clear-button` | +| **Type** | `"always" \| "focus" \| "never"` | +| **Default** | `'focus'` | ### spellcheck -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------ | | **Description** | If `true`, enable spellcheck on the input. | -| **Attribute** | `spellcheck` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `spellcheck` | +| **Type** | `boolean` | +| **Default** | `false` | ### type -| | | -| --- | --- | -| **Description** | Set the type of the input. | -| **Attribute** | `type` | -| **Type** | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | -| **Default** | `'search'` | - - +| | | +| --------------- | --------------------------------------------------------------------------- | +| **Description** | Set the type of the input. | +| **Attribute** | `type` | +| **Type** | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | +| **Default** | `'search'` | ### value -| | | -| --- | --- | -| **Description** | the value of the searchbar. | -| **Attribute** | `value` | -| **Type** | `null \| string \| undefined` | -| **Default** | `''` | - - +| | | +| --------------- | ----------------------------- | +| **Description** | the value of the searchbar. | +| **Attribute** | `value` | +| **Type** | `null \| string \| undefined` | +| **Default** | `''` | ## Events -| Name | Description | -| --- | --- | -| `ionBlur` | Emitted when the input loses focus. | -| `ionCancel` | Emitted when the cancel button is clicked. | -| `ionChange` | Emitted when the value has changed. | -| `ionClear` | Emitted when the clear input button is clicked. | -| `ionFocus` | Emitted when the input has focus. | -| `ionInput` | Emitted when a keyboard input occurred. | - +| Name | Description | +| ----------- | ----------------------------------------------- | +| `ionBlur` | Emitted when the input loses focus. | +| `ionCancel` | Emitted when the cancel button is clicked. | +| `ionChange` | Emitted when the value has changed. | +| `ionClear` | Emitted when the clear input button is clicked. | +| `ionFocus` | Emitted when the input has focus. | +| `ionInput` | Emitted when a keyboard input occurred. | ## Methods - ### getInputElement -| | | -| --- | --- | +| | | +| --------------- | --------------------------------------------------------- | | **Description** | Returns the native `` element used under the hood. | -| **Signature** | `getInputElement() => Promise` | - +| **Signature** | `getInputElement() => Promise` | ### setFocus -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------- | | **Description** | Sets focus on the specified `ion-searchbar`. Use this method instead of the global
`input.focus()`. | -| **Signature** | `setFocus() => Promise` | - - +| **Signature** | `setFocus() => Promise` | ## CSS Custom Properties -| Name | Description | -| --- | --- | -| `--background` | Background of the searchbar input | -| `--border-radius` | Border radius of the searchbar input | -| `--box-shadow` | Box shadow of the searchbar input | -| `--cancel-button-color` | Color of the searchbar cancel button | -| `--clear-button-color` | Color of the searchbar clear button | -| `--color` | Color of the searchbar text | -| `--icon-color` | Color of the searchbar icon | -| `--placeholder-color` | Color of the searchbar placeholder | -| `--placeholder-font-style` | Font style of the searchbar placeholder | +| Name | Description | +| --------------------------- | ---------------------------------------- | +| `--background` | Background of the searchbar input | +| `--border-radius` | Border radius of the searchbar input | +| `--box-shadow` | Box shadow of the searchbar input | +| `--cancel-button-color` | Color of the searchbar cancel button | +| `--clear-button-color` | Color of the searchbar clear button | +| `--color` | Color of the searchbar text | +| `--icon-color` | Color of the searchbar icon | +| `--placeholder-color` | Color of the searchbar placeholder | +| `--placeholder-font-style` | Font style of the searchbar placeholder | | `--placeholder-font-weight` | Font weight of the searchbar placeholder | -| `--placeholder-opacity` | Opacity of the searchbar placeholder | - +| `--placeholder-opacity` | Opacity of the searchbar placeholder | diff --git a/versioned_docs/version-v5/api/segment-button.md b/versioned_docs/version-v5/api/segment-button.md index e6cd3e7e66e..7d8e03b26b7 100644 --- a/versioned_docs/version-v5/api/segment-button.md +++ b/versioned_docs/version-v5/api/segment-button.md @@ -11,7 +11,7 @@ Segment buttons are groups of related buttons inside of a [Segment](segment.md). ## Usage - + @@ -313,7 +313,7 @@ export class SegmentButtonExample { ```javascript // Listen for ionChange on segment const segment = document.querySelector('ion-segment'); -segment.addEventListener('ionChange', ev => { +segment.addEventListener('ionChange', (ev) => { console.log('Segment changed', ev); }); ``` @@ -347,9 +347,7 @@ export const SegmentButtonExamples: React.FC = () => { {/*-- Segment buttons with text and click listener --*/} - console.log(`${e.detail.value} segment selected`)} - > + console.log(`${e.detail.value} segment selected`)}> Friends @@ -508,7 +506,7 @@ export class SegmentButtonExample { render() { return [ // Segment buttons with text and click listener - this.segmentChanged(ev)}> + this.segmentChanged(ev)}> Friends diff --git a/versioned_docs/version-v5/api/segment.md b/versioned_docs/version-v5/api/segment.md index e71844b3d7c..c34925c4aae 100644 --- a/versioned_docs/version-v5/api/segment.md +++ b/versioned_docs/version-v5/api/segment.md @@ -19,7 +19,7 @@ Segments are not scrollable by default. Each segment button has a fixed width, a ## Usage - + @@ -230,7 +230,7 @@ export class SegmentExample { // Listen for ionChange on all segments const segments = document.querySelectorAll('ion-segment'); for (let i = 0; i < segments.length; i++) { - segments[i].addEventListener('ionChange', ev => { + segments[i].addEventListener('ionChange', (ev) => { console.log('Segment changed', ev); }); } @@ -253,17 +253,7 @@ import { IonLabel, IonIcon, } from '@ionic/react'; -import { - call, - home, - heart, - pin, - star, - globe, - basket, - camera, - bookmark, -} from 'ionicons/icons'; +import { call, home, heart, pin, star, globe, basket, camera, bookmark } from 'ionicons/icons'; export const SegmentExamples: React.FC = () => { return ( @@ -275,9 +265,7 @@ export const SegmentExamples: React.FC = () => { {/*-- Default Segment --*/} - console.log('Segment selected', e.detail.value)} - > + console.log('Segment selected', e.detail.value)}> Friends @@ -287,11 +275,7 @@ export const SegmentExamples: React.FC = () => { {/*-- Disabled Segment --*/} - console.log('Segment selected', e.detail.value)} - disabled - value="sunny" - > + console.log('Segment selected', e.detail.value)} disabled value="sunny"> Sunny @@ -301,9 +285,7 @@ export const SegmentExamples: React.FC = () => { {/*-- Segment with anchors --*/} - console.log('Segment selected', e.detail.value)} - > + console.log('Segment selected', e.detail.value)}> Dogs @@ -338,10 +320,7 @@ export const SegmentExamples: React.FC = () => { {/*-- Segment with secondary color --*/} - console.log('Segment selected', e.detail.value)} - color="secondary" - > + console.log('Segment selected', e.detail.value)} color="secondary"> Standard @@ -355,9 +334,7 @@ export const SegmentExamples: React.FC = () => { {/*-- Segment in a toolbar --*/} - console.log('Segment selected', e.detail.value)} - > + console.log('Segment selected', e.detail.value)}> @@ -368,10 +345,7 @@ export const SegmentExamples: React.FC = () => { {/*-- Segment with default selection --*/} - console.log('Segment selected', e.detail.value)} - value="javascript" - > + console.log('Segment selected', e.detail.value)} value="javascript"> Python @@ -404,7 +378,7 @@ export class SegmentExample { render() { return [ // Default Segment - this.segmentChanged(ev)}> + this.segmentChanged(ev)}> Friends @@ -414,11 +388,7 @@ export class SegmentExample { , // Disabled Segment - this.segmentChanged(ev)} - disabled={true} - value="sunny" - > + this.segmentChanged(ev)} disabled={true} value="sunny"> Sunny @@ -428,7 +398,7 @@ export class SegmentExample { , // Segment with anchors - this.segmentChanged(ev)}> + this.segmentChanged(ev)}> Dogs @@ -463,10 +433,7 @@ export class SegmentExample { , // Segment with secondary color - this.segmentChanged(ev)} - color="secondary" - > + this.segmentChanged(ev)} color="secondary"> Standard @@ -480,7 +447,7 @@ export class SegmentExample { // Segment in a toolbar - this.segmentChanged(ev)}> + this.segmentChanged(ev)}> @@ -491,10 +458,7 @@ export class SegmentExample { , // Segment with default selection - this.segmentChanged(ev)} - value="javascript" - > + this.segmentChanged(ev)} value="javascript"> Python diff --git a/versioned_docs/version-v5/api/select-option.md b/versioned_docs/version-v5/api/select-option.md index e0453325d4f..b05919c3aa0 100644 --- a/versioned_docs/version-v5/api/select-option.md +++ b/versioned_docs/version-v5/api/select-option.md @@ -1,8 +1,9 @@ --- -title: "Select Option | What Is An Option Select on Ionic Framework Apps" -description: "What is an option select? Select Options are child element components of a Select—each option defined is passed and displayed in the Select dialog." -sidebar_label: "ion-select-option" +title: 'Select Option | What Is An Option Select on Ionic Framework Apps' +description: 'What is an option select? Select Options are child element components of a Select—each option defined is passed and displayed in the Select dialog.' +sidebar_label: 'ion-select-option' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -42,11 +43,9 @@ Instead, each interface option has the class `.select-interface-option` which ca The options can be styled individually by adding your own class on the `ion-select-option` which gets passed to the interface option. See the [Usage](#usage) section below for examples of styling and setting individual classes on options. - ## Usage - - + @@ -130,12 +129,12 @@ The options can be styled individually by adding your own class on the `ion-sele } /* Alert Interface: set color for checked alert options (single selection) */ -.my-custom-interface .select-interface-option[aria-checked=true] .alert-radio-label { +.my-custom-interface .select-interface-option[aria-checked='true'] .alert-radio-label { color: #79193b; } /* Alert Interface: set color for checked alert options (multiple selection) */ -.my-custom-interface .select-interface-option[aria-checked=true] .alert-checkbox-label { +.my-custom-interface .select-interface-option[aria-checked='true'] .alert-checkbox-label { color: #79193b; } ``` @@ -146,9 +145,9 @@ const selects = document.querySelectorAll('.custom-options'); for (var i = 0; i < selects.length; i++) { selects[i].interfaceOptions = { - cssClass: 'my-custom-interface' + cssClass: 'my-custom-interface', }; -}; +} ``` > Note: In the CSS examples, some of the selectors could be combined together, but are separated out in order to better explain what each selector is for. @@ -181,13 +180,12 @@ To customize an individual option, set a class on the `ion-select-option`: // Pass a custom class to each select interface for styling const select = document.querySelector('.custom-options'); select.interfaceOptions = { - cssClass: 'my-custom-interface' + cssClass: 'my-custom-interface', }; ``` - ```tsx @@ -220,7 +218,7 @@ import React from 'react'; import { IonContent, IonItem, IonLabel, IonSelect, IonSelectOption, IonPage } from '@ionic/react'; const options = { - cssClass: 'my-custom-interface' + cssClass: 'my-custom-interface', }; export const SelectOptionExample: React.FC = () => { @@ -296,19 +294,18 @@ export const SelectOptionExample: React.FC = () => { } /* Alert Interface: set color for checked alert options (single selection) */ -.my-custom-interface .select-interface-option[aria-checked=true] .alert-radio-label { +.my-custom-interface .select-interface-option[aria-checked='true'] .alert-radio-label { color: #79193b; } /* Alert Interface: set color for checked alert options (multiple selection) */ -.my-custom-interface .select-interface-option[aria-checked=true] .alert-checkbox-label { +.my-custom-interface .select-interface-option[aria-checked='true'] .alert-checkbox-label { color: #79193b; } ``` > Note: In the CSS examples, some of the selectors could be combined together, but are separated out in order to better explain what each selector is for. - ### Customizing Individual Options To customize an individual option, set a class on the `ion-select-option`: @@ -318,7 +315,7 @@ import React from 'react'; import { IonContent, IonItem, IonLabel, IonSelect, IonSelectOption, IonPage } from '@ionic/react'; const options = { - cssClass: 'my-custom-interface' + cssClass: 'my-custom-interface', }; export const SelectOptionExample: React.FC = () => { @@ -328,7 +325,9 @@ export const SelectOptionExample: React.FC = () => { Select - Brown + + Brown + Blonde Black Red @@ -350,7 +349,6 @@ export const SelectOptionExample: React.FC = () => { - ```tsx @@ -358,7 +356,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'select-option-example', - styleUrl: 'select-option-example.css' + styleUrl: 'select-option-example.css', }) export class SelectOptionExample { render() { @@ -371,7 +369,7 @@ export class SelectOptionExample { Black Red - + , ]; } } @@ -384,11 +382,11 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'select-option-example', - styleUrl: 'select-option-example.css' + styleUrl: 'select-option-example.css', }) export class SelectOptionExample { options = { - cssClass: 'my-custom-interface' + cssClass: 'my-custom-interface', }; render() { @@ -431,7 +429,7 @@ export class SelectOptionExample { Black Red - + , ]; } } @@ -461,12 +459,12 @@ export class SelectOptionExample { } /* Alert Interface: set color for checked alert options (single selection) */ -.my-custom-interface .select-interface-option[aria-checked=true] .alert-radio-label { +.my-custom-interface .select-interface-option[aria-checked='true'] .alert-radio-label { color: #79193b; } /* Alert Interface: set color for checked alert options (multiple selection) */ -.my-custom-interface .select-interface-option[aria-checked=true] .alert-checkbox-label { +.my-custom-interface .select-interface-option[aria-checked='true'] .alert-checkbox-label { color: #79193b; } ``` @@ -482,11 +480,11 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'select-option-example', - styleUrl: 'select-option-example.css' + styleUrl: 'select-option-example.css', }) export class SelectOptionExample { options = { - cssClass: 'my-custom-interface' + cssClass: 'my-custom-interface', }; render() { @@ -494,12 +492,14 @@ export class SelectOptionExample { Select - Brown + + Brown + Blonde Black Red - + , ]; } } @@ -515,7 +515,6 @@ export class SelectOptionExample { - ```html @@ -532,12 +531,12 @@ export class SelectOptionExample { ``` @@ -587,19 +586,19 @@ export default defineComponent({ ``` @@ -627,19 +626,18 @@ export default defineComponent({ } /* Alert Interface: set color for checked alert options (single selection) */ -.my-custom-interface .select-interface-option[aria-checked=true] .alert-radio-label { +.my-custom-interface .select-interface-option[aria-checked='true'] .alert-radio-label { color: #79193b; } /* Alert Interface: set color for checked alert options (multiple selection) */ -.my-custom-interface .select-interface-option[aria-checked=true] .alert-checkbox-label { +.my-custom-interface .select-interface-option[aria-checked='true'] .alert-checkbox-label { color: #79193b; } ``` > Note: In the CSS examples, some of the selectors could be combined together, but are separated out in order to better explain what each selector is for. - ### Customizing Individual Options To customize an individual option, set a class on the `ion-select-option`: @@ -658,19 +656,19 @@ To customize an individual option, set a class on the `ion-select-option`: ``` @@ -682,32 +680,26 @@ export default defineComponent({ } ``` - ## Properties - ### disabled -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | ### value -| | | -| --- | --- | +| | | +| --------------- | ----------------------------- | | **Description** | The text value of the option. | -| **Attribute** | `value` | -| **Type** | `any` | -| **Default** | `undefined` | - - +| **Attribute** | `value` | +| **Type** | `any` | +| **Default** | `undefined` | diff --git a/versioned_docs/version-v5/api/select.md b/versioned_docs/version-v5/api/select.md index bf68b17be06..f3e290b1e8f 100644 --- a/versioned_docs/version-v5/api/select.md +++ b/versioned_docs/version-v5/api/select.md @@ -128,7 +128,7 @@ However, the Select Option does set a class for easier styling and allows for th ## Usage - + @@ -207,9 +207,7 @@ However, the Select Option does set a class for easier styling and allows for th Users - {{user.first + ' ' + user.last}} + {{user.first + ' ' + user.last}} @@ -265,9 +263,7 @@ export class SelectExample { Users - {{user.first + ' ' + user.last}} + {{user.first + ' ' + user.last}} @@ -330,12 +326,7 @@ export class SelectExample { Alert - + Bacon Black Olives Extra Cheese @@ -351,11 +342,7 @@ export class SelectExample { Popover - + Brown Blonde Black @@ -365,11 +352,7 @@ export class SelectExample { Action Sheet - + Red Purple Yellow @@ -545,12 +528,7 @@ select.value = ['bird', 'dog']; Alert - + Bacon Black Olives Extra Cheese @@ -566,11 +544,7 @@ select.value = ['bird', 'dog']; Popover - + Brown Blonde Black @@ -580,11 +554,7 @@ select.value = ['bird', 'dog']; Action Sheet - + Red Purple Yellow @@ -613,9 +583,7 @@ var customPopoverOptions = { }; customPopoverSelect.interfaceOptions = customPopoverOptions; -var customActionSheetSelect = document.getElementById( - 'customActionSheetSelect', -); +var customActionSheetSelect = document.getElementById('customActionSheetSelect'); var customActionSheetOptions = { header: 'Colors', subHeader: 'Select your favorite color', @@ -657,11 +625,7 @@ export const SingleSelection: React.FC = () => { Gender - setGender(e.detail.value)} - > + setGender(e.detail.value)}> Female Male @@ -673,7 +637,7 @@ export const SingleSelection: React.FC = () => { value={hairColor} okText="Okay" cancelText="Dismiss" - onIonChange={e => setHairColor(e.detail.value)} + onIonChange={(e) => setHairColor(e.detail.value)} > Brown Blonde @@ -726,7 +690,7 @@ export const MultipleSelection: React.FC = () => { multiple={true} cancelText="Nah" okText="Okay!" - onIonChange={e => setToppings(e.detail.value)} + onIonChange={(e) => setToppings(e.detail.value)} > Bacon Black Olives @@ -743,31 +707,19 @@ export const MultipleSelection: React.FC = () => { Pets - setPets(e.detail.value)} - > + setPets(e.detail.value)}> Bird Cat Dog - - Honey Badger - + Honey Badger Your Selections - Toppings:{' '} - {toppings.length - ? toppings.reduce((curr, prev) => prev + ', ' + curr, '') - : '(none selected)'} + Toppings: {toppings.length ? toppings.reduce((curr, prev) => prev + ', ' + curr, '') : '(none selected)'} - Pets:{' '} - {pets.length - ? pets.reduce((curr, prev) => prev + ', ' + curr, '') - : '(none selected)'} + Pets: {pets.length ? pets.reduce((curr, prev) => prev + ', ' + curr, '') : '(none selected)'} @@ -832,9 +784,9 @@ export const ObjectSelection: React.FC = () => { compareWith={compareWith} value={selectedUsers} multiple - onIonChange={e => setSelectedUsers(e.detail.value)} + onIonChange={(e) => setSelectedUsers(e.detail.value)} > - {users.map(user => ( + {users.map((user) => ( {user.first} {user.last} @@ -843,7 +795,7 @@ export const ObjectSelection: React.FC = () => { Selected Users {selectedUsers.length ? ( - selectedUsers.map(user => ( + selectedUsers.map((user) => ( {user.first} {user.last} @@ -912,7 +864,7 @@ export const InterfaceOptionsSelection: React.FC = () => { interface="alert" multiple={true} placeholder="Select One" - onIonChange={e => setToppings(e.detail.value)} + onIonChange={(e) => setToppings(e.detail.value)} value={toppings} > Bacon @@ -934,7 +886,7 @@ export const InterfaceOptionsSelection: React.FC = () => { interfaceOptions={customPopoverOptions} interface="popover" placeholder="Select One" - onIonChange={e => setHairColor(e.detail.value)} + onIonChange={(e) => setHairColor(e.detail.value)} value={hairColor} > Brown @@ -950,7 +902,7 @@ export const InterfaceOptionsSelection: React.FC = () => { interfaceOptions={customActionSheetOptions} interface="action-sheet" placeholder="Select One" - onIonChange={e => setColor(e.detail.value)} + onIonChange={(e) => setColor(e.detail.value)} value={color} > Red @@ -963,10 +915,7 @@ export const InterfaceOptionsSelection: React.FC = () => { Your Selections - Toppings:{' '} - {toppings.length - ? toppings.reduce((curr, prev) => prev + ', ' + curr, '') - : '(none selected)'} + Toppings: {toppings.length ? toppings.reduce((curr, prev) => prev + ', ' + curr, '') : '(none selected)'} Hair Color: {hairColor} Color: {color ?? '(none selected)'} @@ -1060,9 +1009,7 @@ export class SelectExample { Bird Cat Dog - - Honey Badger - + Honey Badger , @@ -1113,10 +1060,8 @@ export class SelectExample { Users - {this.users.map(user => ( - - {user.first + ' ' + user.last} - + {this.users.map((user) => ( + {user.first + ' ' + user.last} ))} @@ -1184,11 +1129,7 @@ export class SelectExample { Popover - + Brown Blonde Black @@ -1250,14 +1191,7 @@ export class SelectExample { ``` - ## Properties - ### color -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information on colors, see [theming](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `color` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### duration -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------- | | **Description** | Duration of the spinner animation in milliseconds. The default varies based on the spinner. | -| **Attribute** | `duration` | -| **Type** | `number \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `duration` | +| **Type** | `number \| undefined` | +| **Default** | `undefined` | ### name -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------- | | **Description** | The name of the SVG spinner to use. If a name is not provided, the platform's default
spinner will be used. | -| **Attribute** | `name` | -| **Type** | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `name` | +| **Type** | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| undefined` | +| **Default** | `undefined` | ### paused -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------- | | **Description** | If `true`, the spinner's animation will be paused. | -| **Attribute** | `paused` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `paused` | +| **Type** | `boolean` | +| **Default** | `false` | ## CSS Custom Properties -| Name | Description | -| --- | --- | +| Name | Description | +| --------- | -------------------- | | `--color` | Color of the spinner | - diff --git a/versioned_docs/version-v5/api/split-pane.md b/versioned_docs/version-v5/api/split-pane.md index 3cedc0d6306..7eb61447982 100644 --- a/versioned_docs/version-v5/api/split-pane.md +++ b/versioned_docs/version-v5/api/split-pane.md @@ -1,8 +1,9 @@ --- -title: "ion-split-pane: Split Plane View for Menus and Multi-View Layouts" -description: "ion-split-pane is useful when creating multi-view app layouts. It allows UI elements, like menus, to be displayed as the viewport width increases." -sidebar_label: "ion-split-pane" +title: 'ion-split-pane: Split Plane View for Menus and Multi-View Layouts' +description: 'ion-split-pane is useful when creating multi-view app layouts. It allows UI elements, like menus, to be displayed as the viewport width increases.' +sidebar_label: 'ion-split-pane' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -13,12 +14,10 @@ displayed as the viewport width increases. If the device's screen width is below a certain size, the split pane will collapse and the menu will be hidden. This is ideal for creating an app that will be served in a browser and deployed through the app store to phones and tablets. - ## Setting Breakpoints By default, the split pane will expand when the screen is larger than 992px. To customize this, pass a breakpoint in the `when` property. The `when` property can accept a boolean value, any valid media query, or one of Ionic's predefined sizes. - ```html @@ -27,20 +26,17 @@ By default, the split pane will expand when the screen is larger than 992px. To ``` - - | Size | Value | Description | - |------|-----------------------|-----------------------------------------------------------------------| - | `xs` | `(min-width: 0px)` | Show the split-pane when the min-width is 0px (meaning, always) | - | `sm` | `(min-width: 576px)` | Show the split-pane when the min-width is 576px | - | `md` | `(min-width: 768px)` | Show the split-pane when the min-width is 768px | - | `lg` | `(min-width: 992px)` | Show the split-pane when the min-width is 992px (default break point) | - | `xl` | `(min-width: 1200px)` | Show the split-pane when the min-width is 1200px | - +| Size | Value | Description | +| ---- | --------------------- | --------------------------------------------------------------------- | +| `xs` | `(min-width: 0px)` | Show the split-pane when the min-width is 0px (meaning, always) | +| `sm` | `(min-width: 576px)` | Show the split-pane when the min-width is 576px | +| `md` | `(min-width: 768px)` | Show the split-pane when the min-width is 768px | +| `lg` | `(min-width: 992px)` | Show the split-pane when the min-width is 992px (default break point) | +| `xl` | `(min-width: 1200px)` | Show the split-pane when the min-width is 1200px | ## Usage - - + @@ -60,10 +56,8 @@ By default, the split pane will expand when the screen is larger than 992px. To ``` - - ```html @@ -84,10 +78,8 @@ By default, the split pane will expand when the screen is larger than 992px. To ``` - - ```tsx @@ -100,7 +92,7 @@ import { IonTitle, IonRouterOutlet, IonContent, - IonPage + IonPage, } from '@ionic/react'; export const SplitPlaneExample: React.SFC<{}> = () => ( @@ -116,16 +108,14 @@ export const SplitPlaneExample: React.SFC<{}> = () => ( {/*-- the main content --*/} - + ); ``` - - ```tsx @@ -133,7 +123,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'split-pane-example', - styleUrl: 'split-pane-example.css' + styleUrl: 'split-pane-example.css', }) export class SplitPaneExample { render() { @@ -150,16 +140,14 @@ export class SplitPaneExample { {/* the main content */} - + , ]; } } ``` - - ```html @@ -180,83 +168,66 @@ export class SplitPaneExample { ``` - ## Properties - ### contentId -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The `id` of the main content. When using
a router this is typically `ion-router-outlet`.
When not using a router, this is typically
your main view's `ion-content`. This is not the
id of the `ion-content` inside of your `ion-menu`. | -| **Attribute** | `content-id` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `content-id` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### disabled -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------- | | **Description** | If `true`, the split pane will be hidden. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | ### when -| | | -| --- | --- | +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | When the split-pane should be shown.
Can be a CSS media query expression, or a shortcut expression.
Can also be a boolean expression. | -| **Attribute** | `when` | -| **Type** | `boolean \| string` | -| **Default** | `QUERY['lg']` | - - +| **Attribute** | `when` | +| **Type** | `boolean \| string` | +| **Default** | `QUERY['lg']` | ## Events -| Name | Description | -| --- | --- | +| Name | Description | +| --------------------- | ------------------------------------------------------------------ | | `ionSplitPaneVisible` | Expression to be called when the split-pane visibility has changed | - ## CSS Custom Properties -| Name | Description | -| --- | --- | -| `--border` | Border between panes | +| Name | Description | +| ------------------ | ---------------------------------------------------------------------------- | +| `--border` | Border between panes | | `--side-max-width` | Maximum width of the side pane. Does not apply when split pane is collapsed. | | `--side-min-width` | Minimum width of the side pane. Does not apply when split pane is collapsed. | -| `--side-width` | Width of the side pane. Does not apply when split pane is collapsed. | - +| `--side-width` | Width of the side pane. Does not apply when split pane is collapsed. | diff --git a/versioned_docs/version-v5/api/tab-bar.md b/versioned_docs/version-v5/api/tab-bar.md index 5eb5fca3c03..bb3d4dc3fd7 100644 --- a/versioned_docs/version-v5/api/tab-bar.md +++ b/versioned_docs/version-v5/api/tab-bar.md @@ -1,6 +1,7 @@ --- -sidebar_label: "ion-tab-bar" +sidebar_label: 'ion-tab-bar' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -8,11 +9,9 @@ import TabItem from '@theme/TabItem'; The tab bar is a UI component that contains a set of [tab buttons](tab-button.md). A tab bar must be provided inside of [tabs](tabs.md) to communicate with each [tab](tab.md). - ## Usage - - + @@ -35,7 +34,6 @@ The tab bar is a UI component that contains a set of [tab buttons](tab-button.md - ```html @@ -62,7 +60,6 @@ The tab bar is a UI component that contains a set of [tab buttons](tab-button.md - ```tsx @@ -90,10 +87,8 @@ export const TabBarExample: React.FC = () => ( ); ``` - - ```tsx @@ -101,7 +96,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'tab-bar-example', - styleUrl: 'tab-bar-example.css' + styleUrl: 'tab-bar-example.css', }) export class TabBarExample { render() { @@ -124,16 +119,14 @@ export class TabBarExample { - + , ]; } } ``` - - ```html @@ -155,16 +148,16 @@ export class TabBarExample { ``` @@ -174,56 +167,46 @@ export default defineComponent({ ## Properties - ### color -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information on colors, see [theming](../theming/basics.md). | -| **Attribute** | `color` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `color` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### mode -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------- | | **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - - +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | ### selectedTab -| | | -| --- | --- | +| | | +| --------------- | -------------------------- | | **Description** | The selected tab component | -| **Attribute** | `selected-tab` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `selected-tab` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### translucent -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | If `true`, the tab bar will be translucent.
Only applies when the mode is `"ios"` and the device supports
[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | -| **Attribute** | `translucent` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `translucent` | +| **Type** | `boolean` | +| **Default** | `false` | ## CSS Custom Properties -| Name | Description | -| --- | --- | +| Name | Description | +| -------------- | ------------------------- | | `--background` | Background of the tab bar | -| `--border` | Border of the tab bar | -| `--color` | Color of the tab bar | - +| `--border` | Border of the tab bar | +| `--color` | Color of the tab bar | diff --git a/versioned_docs/version-v5/api/tab-button.md b/versioned_docs/version-v5/api/tab-button.md index 222f3e0ca85..f333b824e6f 100644 --- a/versioned_docs/version-v5/api/tab-button.md +++ b/versioned_docs/version-v5/api/tab-button.md @@ -1,6 +1,7 @@ --- -sidebar_label: "ion-tab-button" +sidebar_label: 'ion-tab-button' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -10,11 +11,9 @@ A tab button is a UI component that is placed inside of a [tab bar](tab-bar.md). See the [tabs documentation](tabs.md) for more details on configuring tabs. - ## Usage - - + @@ -45,10 +44,8 @@ See the [tabs documentation](tabs.md) for more details on configuring tabs. ``` - - ```html @@ -95,10 +92,8 @@ See the [tabs documentation](tabs.md) for more details on configuring tabs. ``` - - ```tsx @@ -136,10 +131,8 @@ export const TabButtonExample: React.FC = () => ( ); ``` - - ```tsx @@ -147,7 +140,7 @@ import { Component, h } from '@stencil/core'; @Component({ tag: 'tab-button-example', - styleUrl: 'tab-button-example.css' + styleUrl: 'tab-button-example.css', }) export class TabButtonExample { render() { @@ -192,16 +185,14 @@ export class TabButtonExample { About - + , ]; } } ``` - - ```html @@ -233,158 +224,130 @@ export class TabButtonExample { ``` - ## Properties - ### disabled -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------- | | **Description** | If `true`, the user cannot interact with the tab button. | -| **Attribute** | `disabled` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | ### download -| | | -| --- | --- | +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | This attribute instructs browsers to download a URL instead of navigating to
it, so the user will be prompted to save it as a local file. If the attribute
has a value, it is used as the pre-filled file name in the Save prompt
(the user can still change the file name if they want). | -| **Attribute** | `download` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `download` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### href -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------- | | **Description** | Contains a URL or a URL fragment that the hyperlink points to.
If this property is set, an anchor tag will be rendered. | -| **Attribute** | `href` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `href` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### layout -| | | -| --- | --- | -| **Description** | Set the layout of the text and icon in the tab bar.
It defaults to `'icon-top'`. | -| **Attribute** | `layout` | -| **Type** | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | -| **Default** | `undefined` | - - +| | | +| --------------- | ------------------------------------------------------------------------------------------------------- | +| **Description** | Set the layout of the text and icon in the tab bar.
It defaults to `'icon-top'`. | +| **Attribute** | `layout` | +| **Type** | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | +| **Default** | `undefined` | ### mode -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------- | | **Description** | The mode determines which platform styles to use. | -| **Attribute** | `mode` | -| **Type** | `"ios" \| "md"` | -| **Default** | `undefined` | - - +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | ### rel -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Specifies the relationship of the target object to the link object.
The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | -| **Attribute** | `rel` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `rel` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### selected -| | | -| --- | --- | +| | | +| --------------- | -------------------------- | | **Description** | The selected tab component | -| **Attribute** | `selected` | -| **Type** | `boolean` | -| **Default** | `false` | - - +| **Attribute** | `selected` | +| **Type** | `boolean` | +| **Default** | `false` | ### tab -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | A tab id must be provided for each `ion-tab`. It's used internally to reference
the selected tab or by the router to switch between them. | -| **Attribute** | `tab` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `tab` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ### target -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Specifies where to display the linked URL.
Only applies when an `href` is provided.
Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | -| **Attribute** | `target` | -| **Type** | `string \| undefined` | -| **Default** | `undefined` | - - +| **Attribute** | `target` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | ## CSS Shadow Parts -| Name | Description | -| --- | --- | +| Name | Description | +| -------- | ------------------------------------------------------------- | | `native` | The native HTML anchor element that wraps all child elements. | - ## CSS Custom Properties -| Name | Description | -| --- | --- | -| `--background` | Background of the tab button | -| `--background-focused` | Background of the tab button when focused with the tab key | -| `--background-focused-opacity` | Opacity of the tab button background when focused with the tab key | -| `--color` | Color of the tab button | -| `--color-focused` | Color of the tab button when focused with the tab key | -| `--color-selected` | Color of the selected tab button | -| `--padding-bottom` | Bottom padding of the tab button | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button | -| `--padding-top` | Top padding of the tab button | -| `--ripple-color` | Color of the button ripple effect | - +| Name | Description | +| ------------------------------ | ------------------------------------------------------------------------------------------------------------- | +| `--background` | Background of the tab button | +| `--background-focused` | Background of the tab button when focused with the tab key | +| `--background-focused-opacity` | Opacity of the tab button background when focused with the tab key | +| `--color` | Color of the tab button | +| `--color-focused` | Color of the tab button when focused with the tab key | +| `--color-selected` | Color of the selected tab button | +| `--padding-bottom` | Bottom padding of the tab button | +| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button | +| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button | +| `--padding-top` | Top padding of the tab button | +| `--ripple-color` | Color of the button ripple effect | diff --git a/versioned_docs/version-v5/api/tab.md b/versioned_docs/version-v5/api/tab.md index e6b16bd2082..5ce54abbc5a 100644 --- a/versioned_docs/version-v5/api/tab.md +++ b/versioned_docs/version-v5/api/tab.md @@ -1,6 +1,7 @@ --- -sidebar_label: "ion-tab" +sidebar_label: 'ion-tab' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -14,37 +15,29 @@ See the [tabs documentation](tabs.md) for more details on configuring tabs. ## Properties - ### component -| | | -| --- | --- | -| **Description** | The component to display inside of the tab. | -| **Attribute** | `component` | -| **Type** | `Function \| HTMLElement \| null \| string \| undefined` | -| **Default** | `undefined` | - - +| | | +| --------------- | -------------------------------------------------------- | +| **Description** | The component to display inside of the tab. | +| **Attribute** | `component` | +| **Type** | `Function \| HTMLElement \| null \| string \| undefined` | +| **Default** | `undefined` | ### tab -| | | -| --- | --- | +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | A tab id must be provided for each `ion-tab`. It's used internally to reference
the selected tab or by the router to switch between them. | -| **Attribute** | `tab` | -| **Type** | `string` | -| **Default** | `undefined` | - - +| **Attribute** | `tab` | +| **Type** | `string` | +| **Default** | `undefined` | ## Methods - ### setActive -| | | -| --- | --- | +| | | +| --------------- | ------------------------------------ | | **Description** | Set the active component for the tab | -| **Signature** | `setActive() => Promise` | - - +| **Signature** | `setActive() => Promise` | diff --git a/versioned_docs/version-v5/api/tabs.md b/versioned_docs/version-v5/api/tabs.md index 1b9e0076f8d..c46ce842b83 100644 --- a/versioned_docs/version-v5/api/tabs.md +++ b/versioned_docs/version-v5/api/tabs.md @@ -22,7 +22,7 @@ The `ion-tab-bar` needs a slot defined in order to be projected to the right pla ## Usage - + @@ -179,14 +179,7 @@ will match the following tab: ```tsx import React from 'react'; -import { - IonTabs, - IonTabBar, - IonTabButton, - IonIcon, - IonLabel, - IonBadge, -} from '@ionic/react'; +import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonBadge } from '@ionic/react'; import { calendar, personCircle, map, informationCircle } from 'ionicons/icons'; export const TabsExample: React.FC = () => ( @@ -319,10 +312,7 @@ will match the following tab: ```html