From 25f8e31583e477f7d393384223d9381b550f502c Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 19 Apr 2024 08:21:40 -0700 Subject: [PATCH 1/4] chore(mdx): switch from md to mdx extension (#3454) --- _templates/README.md | 2 +- .../{build-options.md => build-options.mdx} | 0 docs/angular/{lifecycle.md => lifecycle.mdx} | 0 docs/angular/{navigation.md => navigation.mdx} | 0 docs/angular/{overview.md => overview.mdx} | 0 docs/angular/{performance.md => performance.mdx} | 4 ++-- docs/angular/{platform.md => platform.mdx} | 0 docs/angular/{pwa.md => pwa.mdx} | 0 docs/angular/{slides.md => slides.mdx} | 0 docs/angular/{storage.md => storage.mdx} | 0 docs/angular/{testing.md => testing.mdx} | 0 .../{virtual-scroll.md => virtual-scroll.mdx} | 0 .../{your-first-app.md => your-first-app.mdx} | 0 .../{2-taking-photos.md => 2-taking-photos.mdx} | 0 .../{3-saving-photos.md => 3-saving-photos.mdx} | 0 ...{4-loading-photos.md => 4-loading-photos.mdx} | 0 .../{5-adding-mobile.md => 5-adding-mobile.mdx} | 0 ...eploying-mobile.md => 6-deploying-mobile.mdx} | 0 .../{7-live-reload.md => 7-live-reload.mdx} | 0 .../{8-distribute.md => 8-distribute.mdx} | 0 .../{accordion-group.md => accordion-group.mdx} | 0 docs/api/{accordion.md => accordion.mdx} | 0 docs/api/{action-sheet.md => action-sheet.mdx} | 0 docs/api/{alert.md => alert.mdx} | 0 docs/api/{app.md => app.mdx} | 0 docs/api/{avatar.md => avatar.mdx} | 0 docs/api/{back-button.md => back-button.mdx} | 0 docs/api/{backdrop.md => backdrop.mdx} | 0 docs/api/{badge.md => badge.mdx} | 0 docs/api/{breadcrumb.md => breadcrumb.mdx} | 0 docs/api/{breadcrumbs.md => breadcrumbs.mdx} | 0 docs/api/{button.md => button.mdx} | 0 docs/api/{buttons.md => buttons.mdx} | 2 +- docs/api/{card-content.md => card-content.mdx} | 0 docs/api/{card-header.md => card-header.mdx} | 0 docs/api/{card-subtitle.md => card-subtitle.mdx} | 0 docs/api/{card-title.md => card-title.mdx} | 0 docs/api/{card.md => card.mdx} | 0 docs/api/{checkbox.md => checkbox.mdx} | 0 docs/api/{chip.md => chip.mdx} | 0 docs/api/{col.md => col.mdx} | 0 docs/api/{content.md => content.mdx} | 0 .../{datetime-button.md => datetime-button.mdx} | 6 ++---- docs/api/{datetime.md => datetime.mdx} | 0 docs/api/{fab-button.md => fab-button.mdx} | 0 docs/api/{fab-list.md => fab-list.mdx} | 0 docs/api/{fab.md => fab.mdx} | 0 docs/api/{footer.md => footer.mdx} | 0 docs/api/{grid.md => grid.mdx} | 2 +- docs/api/{header.md => header.mdx} | 0 docs/api/{icon.md => icon.mdx} | 0 docs/api/{img.md => img.mdx} | 0 ...ll-content.md => infinite-scroll-content.mdx} | 2 +- .../{infinite-scroll.md => infinite-scroll.mdx} | 0 docs/api/{input.md => input.mdx} | 4 ++-- docs/api/{item-divider.md => item-divider.mdx} | 0 docs/api/{item-group.md => item-group.mdx} | 0 docs/api/{item-option.md => item-option.mdx} | 0 docs/api/{item-options.md => item-options.mdx} | 0 docs/api/{item-sliding.md => item-sliding.mdx} | 0 docs/api/{item.md => item.mdx} | 10 ++-------- docs/api/{label.md => label.mdx} | 2 +- docs/api/{list-header.md => list-header.mdx} | 0 docs/api/{list.md => list.mdx} | 0 docs/api/{loading.md => loading.mdx} | 0 docs/api/{menu-button.md => menu-button.mdx} | 0 docs/api/{menu-toggle.md => menu-toggle.mdx} | 0 docs/api/{menu.md => menu.mdx} | 0 docs/api/{modal.md => modal.mdx} | 0 docs/api/{nav-link.md => nav-link.mdx} | 0 docs/api/{nav.md => nav.mdx} | 0 docs/api/{note.md => note.mdx} | 0 docs/api/{picker.md => picker.mdx} | 0 docs/api/{popover.md => popover.mdx} | 0 docs/api/{progress-bar.md => progress-bar.mdx} | 2 +- docs/api/{radio-group.md => radio-group.mdx} | 0 docs/api/{radio.md => radio.mdx} | 0 docs/api/{range.md => range.mdx} | 0 ...efresher-content.md => refresher-content.mdx} | 0 docs/api/{refresher.md => refresher.mdx} | 0 docs/api/{reorder-group.md => reorder-group.mdx} | 0 docs/api/{reorder.md => reorder.mdx} | 0 docs/api/{ripple-effect.md => ripple-effect.mdx} | 0 .../{route-redirect.md => route-redirect.mdx} | 2 +- docs/api/{route.md => route.mdx} | 2 +- docs/api/{router-link.md => router-link.mdx} | 0 docs/api/{router-outlet.md => router-outlet.mdx} | 0 docs/api/{router.md => router.mdx} | 0 docs/api/{row.md => row.mdx} | 0 docs/api/{searchbar.md => searchbar.mdx} | 2 +- .../{segment-button.md => segment-button.mdx} | 2 +- docs/api/{segment.md => segment.mdx} | 2 +- docs/api/{select-option.md => select-option.mdx} | 0 docs/api/{select.md => select.mdx} | 16 ++++++++-------- docs/api/{skeleton-text.md => skeleton-text.mdx} | 0 docs/api/{spinner.md => spinner.mdx} | 0 docs/api/{split-pane.md => split-pane.mdx} | 0 docs/api/{tab-bar.md => tab-bar.mdx} | 2 +- docs/api/{tab-button.md => tab-button.mdx} | 4 ++-- docs/api/{tab.md => tab.mdx} | 4 ++-- docs/api/{tabs.md => tabs.mdx} | 2 +- docs/api/{text.md => text.mdx} | 0 docs/api/{textarea.md => textarea.mdx} | 4 ++-- docs/api/{thumbnail.md => thumbnail.mdx} | 0 docs/api/{title.md => title.mdx} | 2 +- docs/api/{toast.md => toast.mdx} | 4 ++-- docs/api/{toggle.md => toggle.mdx} | 0 docs/api/{toolbar.md => toolbar.mdx} | 0 docs/core-concepts/cross-platform.md | 4 ++-- docs/developing/config/per-platform/index.md | 8 ++++---- docs/index.md | 4 ++-- docs/layout/structure.md | 10 +++++----- ...ionic-react-to-an-existing-react-project.mdx} | 0 docs/react/{lifecycle.md => lifecycle.mdx} | 0 docs/react/{navigation.md => navigation.mdx} | 4 ++-- docs/react/{overlays.md => overlays.mdx} | 0 docs/react/{performance.md => performance.mdx} | 0 docs/react/{platform.md => platform.mdx} | 0 docs/react/{pwa.md => pwa.mdx} | 0 docs/react/{quickstart.md => quickstart.mdx} | 6 +++--- docs/react/{slides.md => slides.mdx} | 0 docs/react/{storage.md => storage.mdx} | 0 .../{introduction.md => introduction.mdx} | 0 .../{best-practices.md => best-practices.mdx} | 0 .../unit-testing/{examples.md => examples.mdx} | 0 .../testing/unit-testing/{setup.md => setup.mdx} | 0 .../{virtual-scroll.md => virtual-scroll.mdx} | 0 .../{your-first-app.md => your-first-app.mdx} | 0 .../{2-taking-photos.md => 2-taking-photos.mdx} | 0 .../{3-saving-photos.md => 3-saving-photos.mdx} | 0 ...{4-loading-photos.md => 4-loading-photos.mdx} | 0 .../{5-adding-mobile.md => 5-adding-mobile.mdx} | 0 ...eploying-mobile.md => 6-deploying-mobile.mdx} | 0 .../{7-live-reload.md => 7-live-reload.mdx} | 0 .../{8-distribute.md => 8-distribute.mdx} | 0 docs/theming/css-shadow-parts.md | 4 ++-- docs/theming/css-variables.md | 2 +- docs/updating/4-0.md | 6 +++--- docs/vue/{lifecycle.md => lifecycle.mdx} | 0 docs/vue/{navigation.md => navigation.mdx} | 0 .../vue/overview.md => docs/vue/overview.mdx | 4 ++-- docs/vue/{performance.md => performance.mdx} | 0 docs/vue/{platform.md => platform.mdx} | 0 docs/vue/{pwa.md => pwa.mdx} | 0 docs/vue/{quickstart.md => quickstart.mdx} | 4 ++-- docs/vue/{slides.md => slides.mdx} | 0 docs/vue/{storage.md => storage.mdx} | 0 docs/vue/{testing.md => testing.mdx} | 0 .../{troubleshooting.md => troubleshooting.mdx} | 6 +++--- ...tility-functions.md => utility-functions.mdx} | 0 .../{virtual-scroll.md => virtual-scroll.mdx} | 0 .../{your-first-app.md => your-first-app.mdx} | 0 .../{2-taking-photos.md => 2-taking-photos.mdx} | 0 .../{3-saving-photos.md => 3-saving-photos.mdx} | 0 ...{4-loading-photos.md => 4-loading-photos.mdx} | 0 .../{5-adding-mobile.md => 5-adding-mobile.mdx} | 0 ...eploying-mobile.md => 6-deploying-mobile.mdx} | 0 .../{7-live-reload.md => 7-live-reload.mdx} | 0 .../{8-distribute.md => 8-distribute.mdx} | 0 docusaurus.config.js | 4 ++-- .../version-v5/angular/{config.md => config.mdx} | 2 +- .../angular/{lifecycle.md => lifecycle.mdx} | 0 .../angular/{navigation.md => navigation.mdx} | 0 .../angular/{overview.md => overview.mdx} | 0 .../angular/{performance.md => performance.mdx} | 4 ++-- .../angular/{platform.md => platform.mdx} | 0 .../version-v5/angular/{pwa.md => pwa.mdx} | 0 .../angular/{storage.md => storage.mdx} | 0 .../angular/{testing.md => testing.mdx} | 0 .../{your-first-app.md => your-first-app.mdx} | 0 .../{2-taking-photos.md => 2-taking-photos.mdx} | 0 .../{3-saving-photos.md => 3-saving-photos.mdx} | 0 ...{4-loading-photos.md => 4-loading-photos.mdx} | 0 .../{5-adding-mobile.md => 5-adding-mobile.mdx} | 0 ...eploying-mobile.md => 6-deploying-mobile.mdx} | 0 .../{7-live-reload.md => 7-live-reload.mdx} | 0 .../api/{action-sheet.md => action-sheet.mdx} | 0 .../version-v5/api/{alert.md => alert.mdx} | 0 .../version-v5/api/{app.md => app.mdx} | 0 .../version-v5/api/{avatar.md => avatar.mdx} | 0 .../api/{back-button.md => back-button.mdx} | 0 .../version-v5/api/{backdrop.md => backdrop.mdx} | 0 .../version-v5/api/{badge.md => badge.mdx} | 0 .../version-v5/api/{button.md => button.mdx} | 0 .../version-v5/api/{buttons.md => buttons.mdx} | 0 .../api/{card-content.md => card-content.mdx} | 0 .../api/{card-header.md => card-header.mdx} | 0 .../api/{card-subtitle.md => card-subtitle.mdx} | 0 .../api/{card-title.md => card-title.mdx} | 0 .../version-v5/api/{card.md => card.mdx} | 0 .../version-v5/api/{checkbox.md => checkbox.mdx} | 0 .../version-v5/api/{chip.md => chip.mdx} | 0 .../version-v5/api/{col.md => col.mdx} | 2 +- .../version-v5/api/{content.md => content.mdx} | 0 .../version-v5/api/{datetime.md => datetime.mdx} | 0 .../api/{fab-button.md => fab-button.mdx} | 0 .../version-v5/api/{fab-list.md => fab-list.mdx} | 0 .../version-v5/api/{fab.md => fab.mdx} | 2 +- .../version-v5/api/{footer.md => footer.mdx} | 0 .../version-v5/api/{grid.md => grid.mdx} | 2 +- .../version-v5/api/{header.md => header.mdx} | 0 .../version-v5/api/{img.md => img.mdx} | 0 ...ll-content.md => infinite-scroll-content.mdx} | 0 .../{infinite-scroll.md => infinite-scroll.mdx} | 0 .../version-v5/api/{input.md => input.mdx} | 0 .../api/{item-divider.md => item-divider.mdx} | 0 .../api/{item-group.md => item-group.mdx} | 0 .../api/{item-option.md => item-option.mdx} | 0 .../api/{item-options.md => item-options.mdx} | 0 .../api/{item-sliding.md => item-sliding.mdx} | 6 +++--- .../version-v5/api/{item.md => item.mdx} | 8 ++------ .../version-v5/api/{label.md => label.mdx} | 0 .../api/{list-header.md => list-header.mdx} | 0 .../version-v5/api/{list.md => list.mdx} | 0 .../version-v5/api/{loading.md => loading.mdx} | 0 .../api/{menu-button.md => menu-button.mdx} | 0 .../api/{menu-toggle.md => menu-toggle.mdx} | 0 .../version-v5/api/{menu.md => menu.mdx} | 0 .../version-v5/api/{modal.md => modal.mdx} | 0 .../version-v5/api/{nav-link.md => nav-link.mdx} | 0 .../version-v5/api/{nav.md => nav.mdx} | 0 .../version-v5/api/{note.md => note.mdx} | 0 .../version-v5/api/{picker.md => picker.mdx} | 0 .../version-v5/api/{popover.md => popover.mdx} | 0 .../api/{progress-bar.md => progress-bar.mdx} | 0 .../api/{radio-group.md => radio-group.mdx} | 2 +- .../version-v5/api/{radio.md => radio.mdx} | 2 +- .../version-v5/api/{range.md => range.mdx} | 0 ...efresher-content.md => refresher-content.mdx} | 0 .../api/{refresher.md => refresher.mdx} | 4 ++-- .../api/{reorder-group.md => reorder-group.mdx} | 2 +- .../version-v5/api/{reorder.md => reorder.mdx} | 2 +- .../api/{ripple-effect.md => ripple-effect.mdx} | 0 .../{route-redirect.md => route-redirect.mdx} | 2 +- .../version-v5/api/{route.md => route.mdx} | 2 +- .../api/{router-link.md => router-link.mdx} | 0 .../api/{router-outlet.md => router-outlet.mdx} | 2 +- .../version-v5/api/{router.md => router.mdx} | 2 +- .../version-v5/api/{row.md => row.mdx} | 4 ++-- .../api/{searchbar.md => searchbar.mdx} | 0 .../{segment-button.md => segment-button.mdx} | 2 +- .../version-v5/api/{segment.md => segment.mdx} | 0 .../api/{select-option.md => select-option.mdx} | 2 +- .../version-v5/api/{select.md => select.mdx} | 12 ++++++------ .../api/{skeleton-text.md => skeleton-text.mdx} | 0 .../version-v5/api/{slide.md => slide.mdx} | 6 +++--- .../version-v5/api/{slides.md => slides.mdx} | 2 +- .../version-v5/api/{spinner.md => spinner.mdx} | 0 .../api/{split-pane.md => split-pane.mdx} | 0 .../version-v5/api/{tab-bar.md => tab-bar.mdx} | 2 +- .../api/{tab-button.md => tab-button.mdx} | 4 ++-- .../version-v5/api/{tab.md => tab.mdx} | 4 ++-- .../version-v5/api/{tabs.md => tabs.mdx} | 2 +- .../version-v5/api/{text.md => text.mdx} | 0 .../version-v5/api/{textarea.md => textarea.mdx} | 0 .../api/{thumbnail.md => thumbnail.mdx} | 0 .../version-v5/api/{title.md => title.mdx} | 0 .../version-v5/api/{toast.md => toast.mdx} | 0 .../version-v5/api/{toggle.md => toggle.mdx} | 0 .../version-v5/api/{toolbar.md => toolbar.mdx} | 0 .../{virtual-scroll.md => virtual-scroll.mdx} | 4 ++-- versioned_docs/version-v5/index.md | 4 ++-- versioned_docs/version-v5/layout/grid.md | 2 +- versioned_docs/version-v5/layout/structure.md | 10 +++++----- .../version-v5/react/{config.md => config.mdx} | 2 +- .../react/{lifecycle.md => lifecycle.mdx} | 0 .../react/{navigation.md => navigation.mdx} | 4 ++-- .../react/{overlays.md => overlays.mdx} | 0 .../react/{performance.md => performance.mdx} | 0 .../react/{platform.md => platform.mdx} | 0 .../version-v5/react/{pwa.md => pwa.mdx} | 0 .../react/{quickstart.md => quickstart.mdx} | 6 +++--- .../version-v5/react/{storage.md => storage.mdx} | 0 .../version-v5/react/{testing.md => testing.mdx} | 0 .../{your-first-app.md => your-first-app.mdx} | 0 .../{2-taking-photos.md => 2-taking-photos.mdx} | 0 .../{3-saving-photos.md => 3-saving-photos.mdx} | 0 ...{4-loading-photos.md => 4-loading-photos.mdx} | 0 .../{5-adding-mobile.md => 5-adding-mobile.mdx} | 0 ...eploying-mobile.md => 6-deploying-mobile.mdx} | 0 .../{7-live-reload.md => 7-live-reload.mdx} | 0 .../version-v5/theming/css-shadow-parts.md | 4 ++-- .../version-v5/theming/css-variables.md | 2 +- .../version-v5/theming/platform-styles.md | 4 ++-- .../version-v5/vue/{config.md => config.mdx} | 2 +- .../vue/{lifecycle.md => lifecycle.mdx} | 0 .../vue/{navigation.md => navigation.mdx} | 0 .../version-v5/vue/{overview.md => overview.mdx} | 0 .../vue/{performance.md => performance.mdx} | 0 .../version-v5/vue/{platform.md => platform.mdx} | 0 .../version-v5/vue/{pwa.md => pwa.mdx} | 0 .../vue/{quickstart.md => quickstart.mdx} | 4 ++-- .../version-v5/vue/{storage.md => storage.mdx} | 0 .../version-v5/vue/{testing.md => testing.mdx} | 0 .../{troubleshooting.md => troubleshooting.mdx} | 6 +++--- .../{your-first-app.md => your-first-app.mdx} | 0 .../{2-taking-photos.md => 2-taking-photos.mdx} | 0 .../{3-saving-photos.md => 3-saving-photos.mdx} | 0 ...{4-loading-photos.md => 4-loading-photos.mdx} | 0 .../{5-adding-mobile.md => 5-adding-mobile.mdx} | 0 ...eploying-mobile.md => 6-deploying-mobile.mdx} | 0 .../{7-live-reload.md => 7-live-reload.mdx} | 0 .../angular/{lifecycle.md => lifecycle.mdx} | 0 .../angular/{navigation.md => navigation.mdx} | 0 .../angular/{overview.md => overview.mdx} | 0 .../angular/{performance.md => performance.mdx} | 4 ++-- .../angular/{platform.md => platform.mdx} | 0 .../version-v6/angular/{pwa.md => pwa.mdx} | 0 .../version-v6/angular/{slides.md => slides.mdx} | 0 .../angular/{storage.md => storage.mdx} | 0 .../angular/{testing.md => testing.mdx} | 0 .../{virtual-scroll.md => virtual-scroll.mdx} | 0 .../{your-first-app.md => your-first-app.mdx} | 0 .../{2-taking-photos.md => 2-taking-photos.mdx} | 0 .../{3-saving-photos.md => 3-saving-photos.mdx} | 0 ...{4-loading-photos.md => 4-loading-photos.mdx} | 0 .../{5-adding-mobile.md => 5-adding-mobile.mdx} | 0 ...eploying-mobile.md => 6-deploying-mobile.mdx} | 0 .../{7-live-reload.md => 7-live-reload.mdx} | 0 .../{8-distribute.md => 8-distribute.mdx} | 0 .../{accordion-group.md => accordion-group.mdx} | 0 .../api/{accordion.md => accordion.mdx} | 0 .../api/{action-sheet.md => action-sheet.mdx} | 0 .../version-v6/api/{alert.md => alert.mdx} | 0 .../version-v6/api/{app.md => app.mdx} | 0 .../version-v6/api/{avatar.md => avatar.mdx} | 0 .../api/{back-button.md => back-button.mdx} | 0 .../version-v6/api/{backdrop.md => backdrop.mdx} | 0 .../version-v6/api/{badge.md => badge.mdx} | 0 .../api/{breadcrumb.md => breadcrumb.mdx} | 0 .../api/{breadcrumbs.md => breadcrumbs.mdx} | 0 .../version-v6/api/{button.md => button.mdx} | 0 .../version-v6/api/{buttons.md => buttons.mdx} | 2 +- .../api/{card-content.md => card-content.mdx} | 0 .../api/{card-header.md => card-header.mdx} | 0 .../api/{card-subtitle.md => card-subtitle.mdx} | 0 .../api/{card-title.md => card-title.mdx} | 0 .../version-v6/api/{card.md => card.mdx} | 0 .../version-v6/api/{checkbox.md => checkbox.mdx} | 0 .../version-v6/api/{chip.md => chip.mdx} | 0 .../version-v6/api/{col.md => col.mdx} | 0 .../version-v6/api/{content.md => content.mdx} | 0 .../{datetime-button.md => datetime-button.mdx} | 6 ++---- .../version-v6/api/{datetime.md => datetime.mdx} | 0 .../api/{fab-button.md => fab-button.mdx} | 0 .../version-v6/api/{fab-list.md => fab-list.mdx} | 0 .../version-v6/api/{fab.md => fab.mdx} | 0 .../version-v6/api/{footer.md => footer.mdx} | 0 .../version-v6/api/{grid.md => grid.mdx} | 2 +- .../version-v6/api/{header.md => header.mdx} | 0 .../version-v6/api/{icon.md => icon.mdx} | 0 .../version-v6/api/{img.md => img.mdx} | 0 ...ll-content.md => infinite-scroll-content.mdx} | 2 +- .../{infinite-scroll.md => infinite-scroll.mdx} | 0 .../version-v6/api/{input.md => input.mdx} | 4 ++-- .../api/{item-divider.md => item-divider.mdx} | 0 .../api/{item-group.md => item-group.mdx} | 0 .../api/{item-option.md => item-option.mdx} | 0 .../api/{item-options.md => item-options.mdx} | 0 .../api/{item-sliding.md => item-sliding.mdx} | 0 .../version-v6/api/{item.md => item.mdx} | 8 ++------ .../version-v6/api/{label.md => label.mdx} | 0 .../api/{list-header.md => list-header.mdx} | 0 .../version-v6/api/{list.md => list.mdx} | 0 .../version-v6/api/{loading.md => loading.mdx} | 0 .../api/{menu-button.md => menu-button.mdx} | 0 .../api/{menu-toggle.md => menu-toggle.mdx} | 0 .../version-v6/api/{menu.md => menu.mdx} | 0 .../version-v6/api/{modal.md => modal.mdx} | 0 .../version-v6/api/{nav-link.md => nav-link.mdx} | 0 .../version-v6/api/{nav.md => nav.mdx} | 0 .../version-v6/api/{note.md => note.mdx} | 0 .../version-v6/api/{picker.md => picker.mdx} | 0 .../version-v6/api/{popover.md => popover.mdx} | 0 .../api/{progress-bar.md => progress-bar.mdx} | 2 +- .../api/{radio-group.md => radio-group.mdx} | 0 .../version-v6/api/{radio.md => radio.mdx} | 0 .../version-v6/api/{range.md => range.mdx} | 0 ...efresher-content.md => refresher-content.mdx} | 0 .../api/{refresher.md => refresher.mdx} | 0 .../api/{reorder-group.md => reorder-group.mdx} | 0 .../version-v6/api/{reorder.md => reorder.mdx} | 0 .../api/{ripple-effect.md => ripple-effect.mdx} | 0 .../{route-redirect.md => route-redirect.mdx} | 2 +- .../version-v6/api/{route.md => route.mdx} | 2 +- .../api/{router-link.md => router-link.mdx} | 0 .../api/{router-outlet.md => router-outlet.mdx} | 0 .../version-v6/api/{router.md => router.mdx} | 0 .../version-v6/api/{row.md => row.mdx} | 0 .../api/{searchbar.md => searchbar.mdx} | 2 +- .../{segment-button.md => segment-button.mdx} | 2 +- .../version-v6/api/{segment.md => segment.mdx} | 2 +- .../api/{select-option.md => select-option.mdx} | 0 .../version-v6/api/{select.md => select.mdx} | 12 ++++++------ .../api/{skeleton-text.md => skeleton-text.mdx} | 0 .../version-v6/api/{slide.md => slide.mdx} | 0 .../version-v6/api/{slides.md => slides.mdx} | 2 +- .../version-v6/api/{spinner.md => spinner.mdx} | 0 .../api/{split-pane.md => split-pane.mdx} | 0 .../version-v6/api/{tab-bar.md => tab-bar.mdx} | 2 +- .../api/{tab-button.md => tab-button.mdx} | 4 ++-- .../version-v6/api/{tab.md => tab.mdx} | 4 ++-- .../version-v6/api/{tabs.md => tabs.mdx} | 2 +- .../version-v6/api/{text.md => text.mdx} | 0 .../version-v6/api/{textarea.md => textarea.mdx} | 0 .../api/{thumbnail.md => thumbnail.mdx} | 0 .../version-v6/api/{title.md => title.mdx} | 2 +- .../version-v6/api/{toast.md => toast.mdx} | 2 +- .../version-v6/api/{toggle.md => toggle.mdx} | 0 .../version-v6/api/{toolbar.md => toolbar.mdx} | 0 .../{virtual-scroll.md => virtual-scroll.mdx} | 10 +++++----- .../version-v6/core-concepts/cross-platform.md | 4 ++-- .../developing/config/per-platform/index.md | 6 +++--- versioned_docs/version-v6/index.md | 4 ++-- versioned_docs/version-v6/layout/structure.md | 10 +++++----- .../react/{lifecycle.md => lifecycle.mdx} | 0 .../react/{navigation.md => navigation.mdx} | 0 .../react/{overlays.md => overlays.mdx} | 0 .../react/{performance.md => performance.mdx} | 0 .../react/{platform.md => platform.mdx} | 0 .../version-v6/react/{pwa.md => pwa.mdx} | 0 .../react/{quickstart.md => quickstart.mdx} | 6 +++--- .../version-v6/react/{slides.md => slides.mdx} | 0 .../version-v6/react/{storage.md => storage.mdx} | 0 .../version-v6/react/{testing.md => testing.mdx} | 0 .../{virtual-scroll.md => virtual-scroll.mdx} | 0 .../{your-first-app.md => your-first-app.mdx} | 0 .../{2-taking-photos.md => 2-taking-photos.mdx} | 0 .../{3-saving-photos.md => 3-saving-photos.mdx} | 0 ...{4-loading-photos.md => 4-loading-photos.mdx} | 0 .../{5-adding-mobile.md => 5-adding-mobile.mdx} | 0 ...eploying-mobile.md => 6-deploying-mobile.mdx} | 0 .../{7-live-reload.md => 7-live-reload.mdx} | 0 .../{8-distribute.md => 8-distribute.mdx} | 0 .../version-v6/theming/css-shadow-parts.md | 4 ++-- .../version-v6/theming/css-variables.md | 2 +- .../vue/{lifecycle.md => lifecycle.mdx} | 0 .../vue/{navigation.md => navigation.mdx} | 0 .../version-v6/vue/overview.mdx | 4 ++-- .../vue/{performance.md => performance.mdx} | 0 .../version-v6/vue/{platform.md => platform.mdx} | 0 .../version-v6/vue/{pwa.md => pwa.mdx} | 0 .../vue/{quickstart.md => quickstart.mdx} | 4 ++-- .../version-v6/vue/{slides.md => slides.mdx} | 0 .../version-v6/vue/{storage.md => storage.mdx} | 0 .../version-v6/vue/{testing.md => testing.mdx} | 0 .../{troubleshooting.md => troubleshooting.mdx} | 6 +++--- ...tility-functions.md => utility-functions.mdx} | 0 .../{virtual-scroll.md => virtual-scroll.mdx} | 0 .../{your-first-app.md => your-first-app.mdx} | 0 .../{2-taking-photos.md => 2-taking-photos.mdx} | 0 .../{3-saving-photos.md => 3-saving-photos.mdx} | 0 ...{4-loading-photos.md => 4-loading-photos.mdx} | 0 .../{5-adding-mobile.md => 5-adding-mobile.mdx} | 0 ...eploying-mobile.md => 6-deploying-mobile.mdx} | 0 .../{7-live-reload.md => 7-live-reload.mdx} | 0 .../{8-distribute.md => 8-distribute.mdx} | 0 457 files changed, 201 insertions(+), 219 deletions(-) rename docs/angular/{build-options.md => build-options.mdx} (100%) rename docs/angular/{lifecycle.md => lifecycle.mdx} (100%) rename docs/angular/{navigation.md => navigation.mdx} (100%) rename docs/angular/{overview.md => overview.mdx} (100%) rename docs/angular/{performance.md => performance.mdx} (98%) rename docs/angular/{platform.md => platform.mdx} (100%) rename docs/angular/{pwa.md => pwa.mdx} (100%) rename docs/angular/{slides.md => slides.mdx} (100%) rename docs/angular/{storage.md => storage.mdx} (100%) rename docs/angular/{testing.md => testing.mdx} (100%) rename docs/angular/{virtual-scroll.md => virtual-scroll.mdx} (100%) rename docs/angular/{your-first-app.md => your-first-app.mdx} (100%) rename docs/angular/your-first-app/{2-taking-photos.md => 2-taking-photos.mdx} (100%) rename docs/angular/your-first-app/{3-saving-photos.md => 3-saving-photos.mdx} (100%) rename docs/angular/your-first-app/{4-loading-photos.md => 4-loading-photos.mdx} (100%) rename docs/angular/your-first-app/{5-adding-mobile.md => 5-adding-mobile.mdx} (100%) rename docs/angular/your-first-app/{6-deploying-mobile.md => 6-deploying-mobile.mdx} (100%) rename docs/angular/your-first-app/{7-live-reload.md => 7-live-reload.mdx} (100%) rename docs/angular/your-first-app/{8-distribute.md => 8-distribute.mdx} (100%) rename docs/api/{accordion-group.md => accordion-group.mdx} (100%) rename docs/api/{accordion.md => accordion.mdx} (100%) rename docs/api/{action-sheet.md => action-sheet.mdx} (100%) rename docs/api/{alert.md => alert.mdx} (100%) rename docs/api/{app.md => app.mdx} (100%) rename docs/api/{avatar.md => avatar.mdx} (100%) rename docs/api/{back-button.md => back-button.mdx} (100%) rename docs/api/{backdrop.md => backdrop.mdx} (100%) rename docs/api/{badge.md => badge.mdx} (100%) rename docs/api/{breadcrumb.md => breadcrumb.mdx} (100%) rename docs/api/{breadcrumbs.md => breadcrumbs.mdx} (100%) rename docs/api/{button.md => button.mdx} (100%) rename docs/api/{buttons.md => buttons.mdx} (98%) rename docs/api/{card-content.md => card-content.mdx} (100%) rename docs/api/{card-header.md => card-header.mdx} (100%) rename docs/api/{card-subtitle.md => card-subtitle.mdx} (100%) rename docs/api/{card-title.md => card-title.mdx} (100%) rename docs/api/{card.md => card.mdx} (100%) rename docs/api/{checkbox.md => checkbox.mdx} (100%) rename docs/api/{chip.md => chip.mdx} (100%) rename docs/api/{col.md => col.mdx} (100%) rename docs/api/{content.md => content.mdx} (100%) rename docs/api/{datetime-button.md => datetime-button.mdx} (98%) rename docs/api/{datetime.md => datetime.mdx} (100%) rename docs/api/{fab-button.md => fab-button.mdx} (100%) rename docs/api/{fab-list.md => fab-list.mdx} (100%) rename docs/api/{fab.md => fab.mdx} (100%) rename docs/api/{footer.md => footer.mdx} (100%) rename docs/api/{grid.md => grid.mdx} (97%) rename docs/api/{header.md => header.mdx} (100%) rename docs/api/{icon.md => icon.mdx} (100%) rename docs/api/{img.md => img.mdx} (100%) rename docs/api/{infinite-scroll-content.md => infinite-scroll-content.mdx} (95%) rename docs/api/{infinite-scroll.md => infinite-scroll.mdx} (100%) rename docs/api/{input.md => input.mdx} (97%) rename docs/api/{item-divider.md => item-divider.mdx} (100%) rename docs/api/{item-group.md => item-group.mdx} (100%) rename docs/api/{item-option.md => item-option.mdx} (100%) rename docs/api/{item-options.md => item-options.mdx} (100%) rename docs/api/{item-sliding.md => item-sliding.mdx} (100%) rename docs/api/{item.md => item.mdx} (99%) rename docs/api/{label.md => label.mdx} (88%) rename docs/api/{list-header.md => list-header.mdx} (100%) rename docs/api/{list.md => list.mdx} (100%) rename docs/api/{loading.md => loading.mdx} (100%) rename docs/api/{menu-button.md => menu-button.mdx} (100%) rename docs/api/{menu-toggle.md => menu-toggle.mdx} (100%) rename docs/api/{menu.md => menu.mdx} (100%) rename docs/api/{modal.md => modal.mdx} (100%) rename docs/api/{nav-link.md => nav-link.mdx} (100%) rename docs/api/{nav.md => nav.mdx} (100%) rename docs/api/{note.md => note.mdx} (100%) rename docs/api/{picker.md => picker.mdx} (100%) rename docs/api/{popover.md => popover.mdx} (100%) rename docs/api/{progress-bar.md => progress-bar.mdx} (98%) rename docs/api/{radio-group.md => radio-group.mdx} (100%) rename docs/api/{radio.md => radio.mdx} (100%) rename docs/api/{range.md => range.mdx} (100%) rename docs/api/{refresher-content.md => refresher-content.mdx} (100%) rename docs/api/{refresher.md => refresher.mdx} (100%) rename docs/api/{reorder-group.md => reorder-group.mdx} (100%) rename docs/api/{reorder.md => reorder.mdx} (100%) rename docs/api/{ripple-effect.md => ripple-effect.mdx} (100%) rename docs/api/{route-redirect.md => route-redirect.mdx} (98%) rename docs/api/{route.md => route.mdx} (99%) rename docs/api/{router-link.md => router-link.mdx} (100%) rename docs/api/{router-outlet.md => router-outlet.mdx} (100%) rename docs/api/{router.md => router.mdx} (100%) rename docs/api/{row.md => row.mdx} (100%) rename docs/api/{searchbar.md => searchbar.mdx} (98%) rename docs/api/{segment-button.md => segment-button.mdx} (90%) rename docs/api/{segment.md => segment.mdx} (98%) rename docs/api/{select-option.md => select-option.mdx} (100%) rename docs/api/{select.md => select.mdx} (93%) rename docs/api/{skeleton-text.md => skeleton-text.mdx} (100%) rename docs/api/{spinner.md => spinner.mdx} (100%) rename docs/api/{split-pane.md => split-pane.mdx} (100%) rename docs/api/{tab-bar.md => tab-bar.mdx} (97%) rename docs/api/{tab-button.md => tab-button.mdx} (96%) rename docs/api/{tab.md => tab.mdx} (80%) rename docs/api/{tabs.md => tabs.mdx} (97%) rename docs/api/{text.md => text.mdx} (100%) rename docs/api/{textarea.md => textarea.mdx} (96%) rename docs/api/{thumbnail.md => thumbnail.mdx} (100%) rename docs/api/{title.md => title.mdx} (96%) rename docs/api/{toast.md => toast.mdx} (96%) rename docs/api/{toggle.md => toggle.mdx} (100%) rename docs/api/{toolbar.md => toolbar.mdx} (100%) rename docs/react/{adding-ionic-react-to-an-existing-react-project.md => adding-ionic-react-to-an-existing-react-project.mdx} (100%) rename docs/react/{lifecycle.md => lifecycle.mdx} (100%) rename docs/react/{navigation.md => navigation.mdx} (99%) rename docs/react/{overlays.md => overlays.mdx} (100%) rename docs/react/{performance.md => performance.mdx} (100%) rename docs/react/{platform.md => platform.mdx} (100%) rename docs/react/{pwa.md => pwa.mdx} (100%) rename docs/react/{quickstart.md => quickstart.mdx} (99%) rename docs/react/{slides.md => slides.mdx} (100%) rename docs/react/{storage.md => storage.mdx} (100%) rename docs/react/testing/{introduction.md => introduction.mdx} (100%) rename docs/react/testing/unit-testing/{best-practices.md => best-practices.mdx} (100%) rename docs/react/testing/unit-testing/{examples.md => examples.mdx} (100%) rename docs/react/testing/unit-testing/{setup.md => setup.mdx} (100%) rename docs/react/{virtual-scroll.md => virtual-scroll.mdx} (100%) rename docs/react/{your-first-app.md => your-first-app.mdx} (100%) rename docs/react/your-first-app/{2-taking-photos.md => 2-taking-photos.mdx} (100%) rename docs/react/your-first-app/{3-saving-photos.md => 3-saving-photos.mdx} (100%) rename docs/react/your-first-app/{4-loading-photos.md => 4-loading-photos.mdx} (100%) rename docs/react/your-first-app/{5-adding-mobile.md => 5-adding-mobile.mdx} (100%) rename docs/react/your-first-app/{6-deploying-mobile.md => 6-deploying-mobile.mdx} (100%) rename docs/react/your-first-app/{7-live-reload.md => 7-live-reload.mdx} (100%) rename docs/react/your-first-app/{8-distribute.md => 8-distribute.mdx} (100%) rename docs/vue/{lifecycle.md => lifecycle.mdx} (100%) rename docs/vue/{navigation.md => navigation.mdx} (100%) rename versioned_docs/version-v6/vue/overview.md => docs/vue/overview.mdx (98%) rename docs/vue/{performance.md => performance.mdx} (100%) rename docs/vue/{platform.md => platform.mdx} (100%) rename docs/vue/{pwa.md => pwa.mdx} (100%) rename docs/vue/{quickstart.md => quickstart.mdx} (99%) rename docs/vue/{slides.md => slides.mdx} (100%) rename docs/vue/{storage.md => storage.mdx} (100%) rename docs/vue/{testing.md => testing.mdx} (100%) rename docs/vue/{troubleshooting.md => troubleshooting.mdx} (92%) rename docs/vue/{utility-functions.md => utility-functions.mdx} (100%) rename docs/vue/{virtual-scroll.md => virtual-scroll.mdx} (100%) rename docs/vue/{your-first-app.md => your-first-app.mdx} (100%) rename docs/vue/your-first-app/{2-taking-photos.md => 2-taking-photos.mdx} (100%) rename docs/vue/your-first-app/{3-saving-photos.md => 3-saving-photos.mdx} (100%) rename docs/vue/your-first-app/{4-loading-photos.md => 4-loading-photos.mdx} (100%) rename docs/vue/your-first-app/{5-adding-mobile.md => 5-adding-mobile.mdx} (100%) rename docs/vue/your-first-app/{6-deploying-mobile.md => 6-deploying-mobile.mdx} (100%) rename docs/vue/your-first-app/{7-live-reload.md => 7-live-reload.mdx} (100%) rename docs/vue/your-first-app/{8-distribute.md => 8-distribute.mdx} (100%) rename versioned_docs/version-v5/angular/{config.md => config.mdx} (99%) rename versioned_docs/version-v5/angular/{lifecycle.md => lifecycle.mdx} (100%) rename versioned_docs/version-v5/angular/{navigation.md => navigation.mdx} (100%) rename versioned_docs/version-v5/angular/{overview.md => overview.mdx} (100%) rename versioned_docs/version-v5/angular/{performance.md => performance.mdx} (98%) rename versioned_docs/version-v5/angular/{platform.md => platform.mdx} (100%) rename versioned_docs/version-v5/angular/{pwa.md => pwa.mdx} (100%) rename versioned_docs/version-v5/angular/{storage.md => storage.mdx} (100%) rename versioned_docs/version-v5/angular/{testing.md => testing.mdx} (100%) rename versioned_docs/version-v5/angular/{your-first-app.md => your-first-app.mdx} (100%) rename versioned_docs/version-v5/angular/your-first-app/{2-taking-photos.md => 2-taking-photos.mdx} (100%) rename versioned_docs/version-v5/angular/your-first-app/{3-saving-photos.md => 3-saving-photos.mdx} (100%) rename versioned_docs/version-v5/angular/your-first-app/{4-loading-photos.md => 4-loading-photos.mdx} (100%) rename versioned_docs/version-v5/angular/your-first-app/{5-adding-mobile.md => 5-adding-mobile.mdx} (100%) rename versioned_docs/version-v5/angular/your-first-app/{6-deploying-mobile.md => 6-deploying-mobile.mdx} (100%) rename versioned_docs/version-v5/angular/your-first-app/{7-live-reload.md => 7-live-reload.mdx} (100%) rename versioned_docs/version-v5/api/{action-sheet.md => action-sheet.mdx} (100%) rename versioned_docs/version-v5/api/{alert.md => alert.mdx} (100%) rename versioned_docs/version-v5/api/{app.md => app.mdx} (100%) rename versioned_docs/version-v5/api/{avatar.md => avatar.mdx} (100%) rename versioned_docs/version-v5/api/{back-button.md => back-button.mdx} (100%) rename versioned_docs/version-v5/api/{backdrop.md => backdrop.mdx} (100%) rename versioned_docs/version-v5/api/{badge.md => badge.mdx} (100%) rename versioned_docs/version-v5/api/{button.md => button.mdx} (100%) rename versioned_docs/version-v5/api/{buttons.md => buttons.mdx} (100%) rename versioned_docs/version-v5/api/{card-content.md => card-content.mdx} (100%) rename versioned_docs/version-v5/api/{card-header.md => card-header.mdx} (100%) rename versioned_docs/version-v5/api/{card-subtitle.md => card-subtitle.mdx} (100%) rename versioned_docs/version-v5/api/{card-title.md => card-title.mdx} (100%) rename versioned_docs/version-v5/api/{card.md => card.mdx} (100%) rename versioned_docs/version-v5/api/{checkbox.md => checkbox.mdx} (100%) rename versioned_docs/version-v5/api/{chip.md => chip.mdx} (100%) rename versioned_docs/version-v5/api/{col.md => col.mdx} (92%) rename versioned_docs/version-v5/api/{content.md => content.mdx} (100%) rename versioned_docs/version-v5/api/{datetime.md => datetime.mdx} (100%) rename versioned_docs/version-v5/api/{fab-button.md => fab-button.mdx} (100%) rename versioned_docs/version-v5/api/{fab-list.md => fab-list.mdx} (100%) rename versioned_docs/version-v5/api/{fab.md => fab.mdx} (99%) rename versioned_docs/version-v5/api/{footer.md => footer.mdx} (100%) rename versioned_docs/version-v5/api/{grid.md => grid.mdx} (98%) rename versioned_docs/version-v5/api/{header.md => header.mdx} (100%) rename versioned_docs/version-v5/api/{img.md => img.mdx} (100%) rename versioned_docs/version-v5/api/{infinite-scroll-content.md => infinite-scroll-content.mdx} (100%) rename versioned_docs/version-v5/api/{infinite-scroll.md => infinite-scroll.mdx} (100%) rename versioned_docs/version-v5/api/{input.md => input.mdx} (100%) rename versioned_docs/version-v5/api/{item-divider.md => item-divider.mdx} (100%) rename versioned_docs/version-v5/api/{item-group.md => item-group.mdx} (100%) rename versioned_docs/version-v5/api/{item-option.md => item-option.mdx} (100%) rename versioned_docs/version-v5/api/{item-options.md => item-options.mdx} (100%) rename versioned_docs/version-v5/api/{item-sliding.md => item-sliding.mdx} (98%) rename versioned_docs/version-v5/api/{item.md => item.mdx} (99%) rename versioned_docs/version-v5/api/{label.md => label.mdx} (100%) rename versioned_docs/version-v5/api/{list-header.md => list-header.mdx} (100%) rename versioned_docs/version-v5/api/{list.md => list.mdx} (100%) rename versioned_docs/version-v5/api/{loading.md => loading.mdx} (100%) rename versioned_docs/version-v5/api/{menu-button.md => menu-button.mdx} (100%) rename versioned_docs/version-v5/api/{menu-toggle.md => menu-toggle.mdx} (100%) rename versioned_docs/version-v5/api/{menu.md => menu.mdx} (100%) rename versioned_docs/version-v5/api/{modal.md => modal.mdx} (100%) rename versioned_docs/version-v5/api/{nav-link.md => nav-link.mdx} (100%) rename versioned_docs/version-v5/api/{nav.md => nav.mdx} (100%) rename versioned_docs/version-v5/api/{note.md => note.mdx} (100%) rename versioned_docs/version-v5/api/{picker.md => picker.mdx} (100%) rename versioned_docs/version-v5/api/{popover.md => popover.mdx} (100%) rename versioned_docs/version-v5/api/{progress-bar.md => progress-bar.mdx} (100%) rename versioned_docs/version-v5/api/{radio-group.md => radio-group.mdx} (98%) rename versioned_docs/version-v5/api/{radio.md => radio.mdx} (97%) rename versioned_docs/version-v5/api/{range.md => range.mdx} (100%) rename versioned_docs/version-v5/api/{refresher-content.md => refresher-content.mdx} (100%) rename versioned_docs/version-v5/api/{refresher.md => refresher.mdx} (96%) rename versioned_docs/version-v5/api/{reorder-group.md => reorder-group.mdx} (99%) rename versioned_docs/version-v5/api/{reorder.md => reorder.mdx} (99%) rename versioned_docs/version-v5/api/{ripple-effect.md => ripple-effect.mdx} (100%) rename versioned_docs/version-v5/api/{route-redirect.md => route-redirect.mdx} (98%) rename versioned_docs/version-v5/api/{route.md => route.mdx} (99%) rename versioned_docs/version-v5/api/{router-link.md => router-link.mdx} (100%) rename versioned_docs/version-v5/api/{router-outlet.md => router-outlet.mdx} (97%) rename versioned_docs/version-v5/api/{router.md => router.mdx} (98%) rename versioned_docs/version-v5/api/{row.md => row.mdx} (87%) rename versioned_docs/version-v5/api/{searchbar.md => searchbar.mdx} (100%) rename versioned_docs/version-v5/api/{segment-button.md => segment-button.mdx} (99%) rename versioned_docs/version-v5/api/{segment.md => segment.mdx} (100%) rename versioned_docs/version-v5/api/{select-option.md => select-option.mdx} (99%) rename versioned_docs/version-v5/api/{select.md => select.mdx} (98%) rename versioned_docs/version-v5/api/{skeleton-text.md => skeleton-text.mdx} (100%) rename versioned_docs/version-v5/api/{slide.md => slide.mdx} (84%) rename versioned_docs/version-v5/api/{slides.md => slides.mdx} (99%) rename versioned_docs/version-v5/api/{spinner.md => spinner.mdx} (100%) rename versioned_docs/version-v5/api/{split-pane.md => split-pane.mdx} (100%) rename versioned_docs/version-v5/api/{tab-bar.md => tab-bar.mdx} (96%) rename versioned_docs/version-v5/api/{tab-button.md => tab-button.mdx} (96%) rename versioned_docs/version-v5/api/{tab.md => tab.mdx} (75%) rename versioned_docs/version-v5/api/{tabs.md => tabs.mdx} (99%) rename versioned_docs/version-v5/api/{text.md => text.mdx} (100%) rename versioned_docs/version-v5/api/{textarea.md => textarea.mdx} (100%) rename versioned_docs/version-v5/api/{thumbnail.md => thumbnail.mdx} (100%) rename versioned_docs/version-v5/api/{title.md => title.mdx} (100%) rename versioned_docs/version-v5/api/{toast.md => toast.mdx} (100%) rename versioned_docs/version-v5/api/{toggle.md => toggle.mdx} (100%) rename versioned_docs/version-v5/api/{toolbar.md => toolbar.mdx} (100%) rename versioned_docs/version-v5/api/{virtual-scroll.md => virtual-scroll.mdx} (98%) rename versioned_docs/version-v5/react/{config.md => config.mdx} (99%) rename versioned_docs/version-v5/react/{lifecycle.md => lifecycle.mdx} (100%) rename versioned_docs/version-v5/react/{navigation.md => navigation.mdx} (99%) rename versioned_docs/version-v5/react/{overlays.md => overlays.mdx} (100%) rename versioned_docs/version-v5/react/{performance.md => performance.mdx} (100%) rename versioned_docs/version-v5/react/{platform.md => platform.mdx} (100%) rename versioned_docs/version-v5/react/{pwa.md => pwa.mdx} (100%) rename versioned_docs/version-v5/react/{quickstart.md => quickstart.mdx} (99%) rename versioned_docs/version-v5/react/{storage.md => storage.mdx} (100%) rename versioned_docs/version-v5/react/{testing.md => testing.mdx} (100%) rename versioned_docs/version-v5/react/{your-first-app.md => your-first-app.mdx} (100%) rename versioned_docs/version-v5/react/your-first-app/{2-taking-photos.md => 2-taking-photos.mdx} (100%) rename versioned_docs/version-v5/react/your-first-app/{3-saving-photos.md => 3-saving-photos.mdx} (100%) rename versioned_docs/version-v5/react/your-first-app/{4-loading-photos.md => 4-loading-photos.mdx} (100%) rename versioned_docs/version-v5/react/your-first-app/{5-adding-mobile.md => 5-adding-mobile.mdx} (100%) rename versioned_docs/version-v5/react/your-first-app/{6-deploying-mobile.md => 6-deploying-mobile.mdx} (100%) rename versioned_docs/version-v5/react/your-first-app/{7-live-reload.md => 7-live-reload.mdx} (100%) rename versioned_docs/version-v5/vue/{config.md => config.mdx} (99%) rename versioned_docs/version-v5/vue/{lifecycle.md => lifecycle.mdx} (100%) rename versioned_docs/version-v5/vue/{navigation.md => navigation.mdx} (100%) rename versioned_docs/version-v5/vue/{overview.md => overview.mdx} (100%) rename versioned_docs/version-v5/vue/{performance.md => performance.mdx} (100%) rename versioned_docs/version-v5/vue/{platform.md => platform.mdx} (100%) rename versioned_docs/version-v5/vue/{pwa.md => pwa.mdx} (100%) rename versioned_docs/version-v5/vue/{quickstart.md => quickstart.mdx} (99%) rename versioned_docs/version-v5/vue/{storage.md => storage.mdx} (100%) rename versioned_docs/version-v5/vue/{testing.md => testing.mdx} (100%) rename versioned_docs/version-v5/vue/{troubleshooting.md => troubleshooting.mdx} (90%) rename versioned_docs/version-v5/vue/{your-first-app.md => your-first-app.mdx} (100%) rename versioned_docs/version-v5/vue/your-first-app/{2-taking-photos.md => 2-taking-photos.mdx} (100%) rename versioned_docs/version-v5/vue/your-first-app/{3-saving-photos.md => 3-saving-photos.mdx} (100%) rename versioned_docs/version-v5/vue/your-first-app/{4-loading-photos.md => 4-loading-photos.mdx} (100%) rename versioned_docs/version-v5/vue/your-first-app/{5-adding-mobile.md => 5-adding-mobile.mdx} (100%) rename versioned_docs/version-v5/vue/your-first-app/{6-deploying-mobile.md => 6-deploying-mobile.mdx} (100%) rename versioned_docs/version-v5/vue/your-first-app/{7-live-reload.md => 7-live-reload.mdx} (100%) rename versioned_docs/version-v6/angular/{lifecycle.md => lifecycle.mdx} (100%) rename versioned_docs/version-v6/angular/{navigation.md => navigation.mdx} (100%) rename versioned_docs/version-v6/angular/{overview.md => overview.mdx} (100%) rename versioned_docs/version-v6/angular/{performance.md => performance.mdx} (98%) rename versioned_docs/version-v6/angular/{platform.md => platform.mdx} (100%) rename versioned_docs/version-v6/angular/{pwa.md => pwa.mdx} (100%) rename versioned_docs/version-v6/angular/{slides.md => slides.mdx} (100%) rename versioned_docs/version-v6/angular/{storage.md => storage.mdx} (100%) rename versioned_docs/version-v6/angular/{testing.md => testing.mdx} (100%) rename versioned_docs/version-v6/angular/{virtual-scroll.md => virtual-scroll.mdx} (100%) rename versioned_docs/version-v6/angular/{your-first-app.md => your-first-app.mdx} (100%) rename versioned_docs/version-v6/angular/your-first-app/{2-taking-photos.md => 2-taking-photos.mdx} (100%) rename versioned_docs/version-v6/angular/your-first-app/{3-saving-photos.md => 3-saving-photos.mdx} (100%) rename versioned_docs/version-v6/angular/your-first-app/{4-loading-photos.md => 4-loading-photos.mdx} (100%) rename versioned_docs/version-v6/angular/your-first-app/{5-adding-mobile.md => 5-adding-mobile.mdx} (100%) rename versioned_docs/version-v6/angular/your-first-app/{6-deploying-mobile.md => 6-deploying-mobile.mdx} (100%) rename versioned_docs/version-v6/angular/your-first-app/{7-live-reload.md => 7-live-reload.mdx} (100%) rename versioned_docs/version-v6/angular/your-first-app/{8-distribute.md => 8-distribute.mdx} (100%) rename versioned_docs/version-v6/api/{accordion-group.md => accordion-group.mdx} (100%) rename versioned_docs/version-v6/api/{accordion.md => accordion.mdx} (100%) rename versioned_docs/version-v6/api/{action-sheet.md => action-sheet.mdx} (100%) rename versioned_docs/version-v6/api/{alert.md => alert.mdx} (100%) rename versioned_docs/version-v6/api/{app.md => app.mdx} (100%) rename versioned_docs/version-v6/api/{avatar.md => avatar.mdx} (100%) rename versioned_docs/version-v6/api/{back-button.md => back-button.mdx} (100%) rename versioned_docs/version-v6/api/{backdrop.md => backdrop.mdx} (100%) rename versioned_docs/version-v6/api/{badge.md => badge.mdx} (100%) rename versioned_docs/version-v6/api/{breadcrumb.md => breadcrumb.mdx} (100%) rename versioned_docs/version-v6/api/{breadcrumbs.md => breadcrumbs.mdx} (100%) rename versioned_docs/version-v6/api/{button.md => button.mdx} (100%) rename versioned_docs/version-v6/api/{buttons.md => buttons.mdx} (98%) rename versioned_docs/version-v6/api/{card-content.md => card-content.mdx} (100%) rename versioned_docs/version-v6/api/{card-header.md => card-header.mdx} (100%) rename versioned_docs/version-v6/api/{card-subtitle.md => card-subtitle.mdx} (100%) rename versioned_docs/version-v6/api/{card-title.md => card-title.mdx} (100%) rename versioned_docs/version-v6/api/{card.md => card.mdx} (100%) rename versioned_docs/version-v6/api/{checkbox.md => checkbox.mdx} (100%) rename versioned_docs/version-v6/api/{chip.md => chip.mdx} (100%) rename versioned_docs/version-v6/api/{col.md => col.mdx} (100%) rename versioned_docs/version-v6/api/{content.md => content.mdx} (100%) rename versioned_docs/version-v6/api/{datetime-button.md => datetime-button.mdx} (98%) rename versioned_docs/version-v6/api/{datetime.md => datetime.mdx} (100%) rename versioned_docs/version-v6/api/{fab-button.md => fab-button.mdx} (100%) rename versioned_docs/version-v6/api/{fab-list.md => fab-list.mdx} (100%) rename versioned_docs/version-v6/api/{fab.md => fab.mdx} (100%) rename versioned_docs/version-v6/api/{footer.md => footer.mdx} (100%) rename versioned_docs/version-v6/api/{grid.md => grid.mdx} (97%) rename versioned_docs/version-v6/api/{header.md => header.mdx} (100%) rename versioned_docs/version-v6/api/{icon.md => icon.mdx} (100%) rename versioned_docs/version-v6/api/{img.md => img.mdx} (100%) rename versioned_docs/version-v6/api/{infinite-scroll-content.md => infinite-scroll-content.mdx} (95%) rename versioned_docs/version-v6/api/{infinite-scroll.md => infinite-scroll.mdx} (100%) rename versioned_docs/version-v6/api/{input.md => input.mdx} (98%) rename versioned_docs/version-v6/api/{item-divider.md => item-divider.mdx} (100%) rename versioned_docs/version-v6/api/{item-group.md => item-group.mdx} (100%) rename versioned_docs/version-v6/api/{item-option.md => item-option.mdx} (100%) rename versioned_docs/version-v6/api/{item-options.md => item-options.mdx} (100%) rename versioned_docs/version-v6/api/{item-sliding.md => item-sliding.mdx} (100%) rename versioned_docs/version-v6/api/{item.md => item.mdx} (98%) rename versioned_docs/version-v6/api/{label.md => label.mdx} (100%) rename versioned_docs/version-v6/api/{list-header.md => list-header.mdx} (100%) rename versioned_docs/version-v6/api/{list.md => list.mdx} (100%) rename versioned_docs/version-v6/api/{loading.md => loading.mdx} (100%) rename versioned_docs/version-v6/api/{menu-button.md => menu-button.mdx} (100%) rename versioned_docs/version-v6/api/{menu-toggle.md => menu-toggle.mdx} (100%) rename versioned_docs/version-v6/api/{menu.md => menu.mdx} (100%) rename versioned_docs/version-v6/api/{modal.md => modal.mdx} (100%) rename versioned_docs/version-v6/api/{nav-link.md => nav-link.mdx} (100%) rename versioned_docs/version-v6/api/{nav.md => nav.mdx} (100%) rename versioned_docs/version-v6/api/{note.md => note.mdx} (100%) rename versioned_docs/version-v6/api/{picker.md => picker.mdx} (100%) rename versioned_docs/version-v6/api/{popover.md => popover.mdx} (100%) rename versioned_docs/version-v6/api/{progress-bar.md => progress-bar.mdx} (98%) rename versioned_docs/version-v6/api/{radio-group.md => radio-group.mdx} (100%) rename versioned_docs/version-v6/api/{radio.md => radio.mdx} (100%) rename versioned_docs/version-v6/api/{range.md => range.mdx} (100%) rename versioned_docs/version-v6/api/{refresher-content.md => refresher-content.mdx} (100%) rename versioned_docs/version-v6/api/{refresher.md => refresher.mdx} (100%) rename versioned_docs/version-v6/api/{reorder-group.md => reorder-group.mdx} (100%) rename versioned_docs/version-v6/api/{reorder.md => reorder.mdx} (100%) rename versioned_docs/version-v6/api/{ripple-effect.md => ripple-effect.mdx} (100%) rename versioned_docs/version-v6/api/{route-redirect.md => route-redirect.mdx} (98%) rename versioned_docs/version-v6/api/{route.md => route.mdx} (99%) rename versioned_docs/version-v6/api/{router-link.md => router-link.mdx} (100%) rename versioned_docs/version-v6/api/{router-outlet.md => router-outlet.mdx} (100%) rename versioned_docs/version-v6/api/{router.md => router.mdx} (100%) rename versioned_docs/version-v6/api/{row.md => row.mdx} (100%) rename versioned_docs/version-v6/api/{searchbar.md => searchbar.mdx} (98%) rename versioned_docs/version-v6/api/{segment-button.md => segment-button.mdx} (90%) rename versioned_docs/version-v6/api/{segment.md => segment.mdx} (98%) rename versioned_docs/version-v6/api/{select-option.md => select-option.mdx} (100%) rename versioned_docs/version-v6/api/{select.md => select.mdx} (90%) rename versioned_docs/version-v6/api/{skeleton-text.md => skeleton-text.mdx} (100%) rename versioned_docs/version-v6/api/{slide.md => slide.mdx} (100%) rename versioned_docs/version-v6/api/{slides.md => slides.mdx} (99%) rename versioned_docs/version-v6/api/{spinner.md => spinner.mdx} (100%) rename versioned_docs/version-v6/api/{split-pane.md => split-pane.mdx} (100%) rename versioned_docs/version-v6/api/{tab-bar.md => tab-bar.mdx} (97%) rename versioned_docs/version-v6/api/{tab-button.md => tab-button.mdx} (96%) rename versioned_docs/version-v6/api/{tab.md => tab.mdx} (80%) rename versioned_docs/version-v6/api/{tabs.md => tabs.mdx} (97%) rename versioned_docs/version-v6/api/{text.md => text.mdx} (100%) rename versioned_docs/version-v6/api/{textarea.md => textarea.mdx} (100%) rename versioned_docs/version-v6/api/{thumbnail.md => thumbnail.mdx} (100%) rename versioned_docs/version-v6/api/{title.md => title.mdx} (94%) rename versioned_docs/version-v6/api/{toast.md => toast.mdx} (99%) rename versioned_docs/version-v6/api/{toggle.md => toggle.mdx} (100%) rename versioned_docs/version-v6/api/{toolbar.md => toolbar.mdx} (100%) rename versioned_docs/version-v6/api/{virtual-scroll.md => virtual-scroll.mdx} (97%) rename versioned_docs/version-v6/react/{lifecycle.md => lifecycle.mdx} (100%) rename versioned_docs/version-v6/react/{navigation.md => navigation.mdx} (100%) rename versioned_docs/version-v6/react/{overlays.md => overlays.mdx} (100%) rename versioned_docs/version-v6/react/{performance.md => performance.mdx} (100%) rename versioned_docs/version-v6/react/{platform.md => platform.mdx} (100%) rename versioned_docs/version-v6/react/{pwa.md => pwa.mdx} (100%) rename versioned_docs/version-v6/react/{quickstart.md => quickstart.mdx} (99%) rename versioned_docs/version-v6/react/{slides.md => slides.mdx} (100%) rename versioned_docs/version-v6/react/{storage.md => storage.mdx} (100%) rename versioned_docs/version-v6/react/{testing.md => testing.mdx} (100%) rename versioned_docs/version-v6/react/{virtual-scroll.md => virtual-scroll.mdx} (100%) rename versioned_docs/version-v6/react/{your-first-app.md => your-first-app.mdx} (100%) rename versioned_docs/version-v6/react/your-first-app/{2-taking-photos.md => 2-taking-photos.mdx} (100%) rename versioned_docs/version-v6/react/your-first-app/{3-saving-photos.md => 3-saving-photos.mdx} (100%) rename versioned_docs/version-v6/react/your-first-app/{4-loading-photos.md => 4-loading-photos.mdx} (100%) rename versioned_docs/version-v6/react/your-first-app/{5-adding-mobile.md => 5-adding-mobile.mdx} (100%) rename versioned_docs/version-v6/react/your-first-app/{6-deploying-mobile.md => 6-deploying-mobile.mdx} (100%) rename versioned_docs/version-v6/react/your-first-app/{7-live-reload.md => 7-live-reload.mdx} (100%) rename versioned_docs/version-v6/react/your-first-app/{8-distribute.md => 8-distribute.mdx} (100%) rename versioned_docs/version-v6/vue/{lifecycle.md => lifecycle.mdx} (100%) rename versioned_docs/version-v6/vue/{navigation.md => navigation.mdx} (100%) rename docs/vue/overview.md => versioned_docs/version-v6/vue/overview.mdx (98%) rename versioned_docs/version-v6/vue/{performance.md => performance.mdx} (100%) rename versioned_docs/version-v6/vue/{platform.md => platform.mdx} (100%) rename versioned_docs/version-v6/vue/{pwa.md => pwa.mdx} (100%) rename versioned_docs/version-v6/vue/{quickstart.md => quickstart.mdx} (99%) rename versioned_docs/version-v6/vue/{slides.md => slides.mdx} (100%) rename versioned_docs/version-v6/vue/{storage.md => storage.mdx} (100%) rename versioned_docs/version-v6/vue/{testing.md => testing.mdx} (100%) rename versioned_docs/version-v6/vue/{troubleshooting.md => troubleshooting.mdx} (92%) rename versioned_docs/version-v6/vue/{utility-functions.md => utility-functions.mdx} (100%) rename versioned_docs/version-v6/vue/{virtual-scroll.md => virtual-scroll.mdx} (100%) rename versioned_docs/version-v6/vue/{your-first-app.md => your-first-app.mdx} (100%) rename versioned_docs/version-v6/vue/your-first-app/{2-taking-photos.md => 2-taking-photos.mdx} (100%) rename versioned_docs/version-v6/vue/your-first-app/{3-saving-photos.md => 3-saving-photos.mdx} (100%) rename versioned_docs/version-v6/vue/your-first-app/{4-loading-photos.md => 4-loading-photos.mdx} (100%) rename versioned_docs/version-v6/vue/your-first-app/{5-adding-mobile.md => 5-adding-mobile.mdx} (100%) rename versioned_docs/version-v6/vue/your-first-app/{6-deploying-mobile.md => 6-deploying-mobile.mdx} (100%) rename versioned_docs/version-v6/vue/your-first-app/{7-live-reload.md => 7-live-reload.mdx} (100%) rename versioned_docs/version-v6/vue/your-first-app/{8-distribute.md => 8-distribute.mdx} (100%) diff --git a/_templates/README.md b/_templates/README.md index 60a3ebef83d..4089d4cca59 100644 --- a/_templates/README.md +++ b/_templates/README.md @@ -21,7 +21,7 @@ If you need a component for multiple versions of Ionic Framework, you (currently ## Usage -Once you've generated your playground, you need to add it to the main markdown file in the docs (e.g. [docs/api/button.md](../docs/api/button.md)) by doing something similar to the following example: +Once you've generated your playground, you need to add it to the main markdown file in the docs (e.g. [docs/api/button.md](../docs/api/button.mdx)) by doing something similar to the following example: ``` ## Feature diff --git a/docs/angular/build-options.md b/docs/angular/build-options.mdx similarity index 100% rename from docs/angular/build-options.md rename to docs/angular/build-options.mdx diff --git a/docs/angular/lifecycle.md b/docs/angular/lifecycle.mdx similarity index 100% rename from docs/angular/lifecycle.md rename to docs/angular/lifecycle.mdx diff --git a/docs/angular/navigation.md b/docs/angular/navigation.mdx similarity index 100% rename from docs/angular/navigation.md rename to docs/angular/navigation.mdx diff --git a/docs/angular/overview.md b/docs/angular/overview.mdx similarity index 100% rename from docs/angular/overview.md rename to docs/angular/overview.mdx diff --git a/docs/angular/performance.md b/docs/angular/performance.mdx similarity index 98% rename from docs/angular/performance.md rename to docs/angular/performance.mdx index 62877e6e4dd..c4f7760e318 100644 --- a/docs/angular/performance.md +++ b/docs/angular/performance.mdx @@ -56,7 +56,7 @@ For more information on how Angular manages change propagation with `ngFor` see ## From the Community - +{/* cspell:disable */} [High Performance Animations in Ionic](https://www.joshmorony.com/high-performance-animations-in-ionic/) - Josh Morony @@ -66,7 +66,7 @@ For more information on how Angular manages change propagation with `ngFor` see [Ionic Framework is Fast (But Your Code Might Not Be)](https://www.joshmorony.com/ionic-framework-is-fast-but-your-code-might-not-be/) - Josh Morony - +{/* cspell:enable */} :::note Do you have a guide you'd like to share? Click the _Edit this page_ button below. diff --git a/docs/angular/platform.md b/docs/angular/platform.mdx similarity index 100% rename from docs/angular/platform.md rename to docs/angular/platform.mdx diff --git a/docs/angular/pwa.md b/docs/angular/pwa.mdx similarity index 100% rename from docs/angular/pwa.md rename to docs/angular/pwa.mdx diff --git a/docs/angular/slides.md b/docs/angular/slides.mdx similarity index 100% rename from docs/angular/slides.md rename to docs/angular/slides.mdx diff --git a/docs/angular/storage.md b/docs/angular/storage.mdx similarity index 100% rename from docs/angular/storage.md rename to docs/angular/storage.mdx diff --git a/docs/angular/testing.md b/docs/angular/testing.mdx similarity index 100% rename from docs/angular/testing.md rename to docs/angular/testing.mdx diff --git a/docs/angular/virtual-scroll.md b/docs/angular/virtual-scroll.mdx similarity index 100% rename from docs/angular/virtual-scroll.md rename to docs/angular/virtual-scroll.mdx diff --git a/docs/angular/your-first-app.md b/docs/angular/your-first-app.mdx similarity index 100% rename from docs/angular/your-first-app.md rename to docs/angular/your-first-app.mdx diff --git a/docs/angular/your-first-app/2-taking-photos.md b/docs/angular/your-first-app/2-taking-photos.mdx similarity index 100% rename from docs/angular/your-first-app/2-taking-photos.md rename to docs/angular/your-first-app/2-taking-photos.mdx diff --git a/docs/angular/your-first-app/3-saving-photos.md b/docs/angular/your-first-app/3-saving-photos.mdx similarity index 100% rename from docs/angular/your-first-app/3-saving-photos.md rename to docs/angular/your-first-app/3-saving-photos.mdx diff --git a/docs/angular/your-first-app/4-loading-photos.md b/docs/angular/your-first-app/4-loading-photos.mdx similarity index 100% rename from docs/angular/your-first-app/4-loading-photos.md rename to docs/angular/your-first-app/4-loading-photos.mdx diff --git a/docs/angular/your-first-app/5-adding-mobile.md b/docs/angular/your-first-app/5-adding-mobile.mdx similarity index 100% rename from docs/angular/your-first-app/5-adding-mobile.md rename to docs/angular/your-first-app/5-adding-mobile.mdx diff --git a/docs/angular/your-first-app/6-deploying-mobile.md b/docs/angular/your-first-app/6-deploying-mobile.mdx similarity index 100% rename from docs/angular/your-first-app/6-deploying-mobile.md rename to docs/angular/your-first-app/6-deploying-mobile.mdx diff --git a/docs/angular/your-first-app/7-live-reload.md b/docs/angular/your-first-app/7-live-reload.mdx similarity index 100% rename from docs/angular/your-first-app/7-live-reload.md rename to docs/angular/your-first-app/7-live-reload.mdx diff --git a/docs/angular/your-first-app/8-distribute.md b/docs/angular/your-first-app/8-distribute.mdx similarity index 100% rename from docs/angular/your-first-app/8-distribute.md rename to docs/angular/your-first-app/8-distribute.mdx diff --git a/docs/api/accordion-group.md b/docs/api/accordion-group.mdx similarity index 100% rename from docs/api/accordion-group.md rename to docs/api/accordion-group.mdx diff --git a/docs/api/accordion.md b/docs/api/accordion.mdx similarity index 100% rename from docs/api/accordion.md rename to docs/api/accordion.mdx diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.mdx similarity index 100% rename from docs/api/action-sheet.md rename to docs/api/action-sheet.mdx diff --git a/docs/api/alert.md b/docs/api/alert.mdx similarity index 100% rename from docs/api/alert.md rename to docs/api/alert.mdx diff --git a/docs/api/app.md b/docs/api/app.mdx similarity index 100% rename from docs/api/app.md rename to docs/api/app.mdx diff --git a/docs/api/avatar.md b/docs/api/avatar.mdx similarity index 100% rename from docs/api/avatar.md rename to docs/api/avatar.mdx diff --git a/docs/api/back-button.md b/docs/api/back-button.mdx similarity index 100% rename from docs/api/back-button.md rename to docs/api/back-button.mdx diff --git a/docs/api/backdrop.md b/docs/api/backdrop.mdx similarity index 100% rename from docs/api/backdrop.md rename to docs/api/backdrop.mdx diff --git a/docs/api/badge.md b/docs/api/badge.mdx similarity index 100% rename from docs/api/badge.md rename to docs/api/badge.mdx diff --git a/docs/api/breadcrumb.md b/docs/api/breadcrumb.mdx similarity index 100% rename from docs/api/breadcrumb.md rename to docs/api/breadcrumb.mdx diff --git a/docs/api/breadcrumbs.md b/docs/api/breadcrumbs.mdx similarity index 100% rename from docs/api/breadcrumbs.md rename to docs/api/breadcrumbs.mdx diff --git a/docs/api/button.md b/docs/api/button.mdx similarity index 100% rename from docs/api/button.md rename to docs/api/button.mdx diff --git a/docs/api/buttons.md b/docs/api/buttons.mdx similarity index 98% rename from docs/api/buttons.md rename to docs/api/buttons.mdx index 642354eefc8..2c35af96efb 100644 --- a/docs/api/buttons.md +++ b/docs/api/buttons.mdx @@ -62,7 +62,7 @@ This feature is only available for iOS. ::: - +{/* Reuse the playground from the Title directory */} import CollapsibleLargeTitleButtons from '@site/static/usage/v8/title/collapsible-large-title/buttons/index.md'; diff --git a/docs/api/card-content.md b/docs/api/card-content.mdx similarity index 100% rename from docs/api/card-content.md rename to docs/api/card-content.mdx diff --git a/docs/api/card-header.md b/docs/api/card-header.mdx similarity index 100% rename from docs/api/card-header.md rename to docs/api/card-header.mdx diff --git a/docs/api/card-subtitle.md b/docs/api/card-subtitle.mdx similarity index 100% rename from docs/api/card-subtitle.md rename to docs/api/card-subtitle.mdx diff --git a/docs/api/card-title.md b/docs/api/card-title.mdx similarity index 100% rename from docs/api/card-title.md rename to docs/api/card-title.mdx diff --git a/docs/api/card.md b/docs/api/card.mdx similarity index 100% rename from docs/api/card.md rename to docs/api/card.mdx diff --git a/docs/api/checkbox.md b/docs/api/checkbox.mdx similarity index 100% rename from docs/api/checkbox.md rename to docs/api/checkbox.mdx diff --git a/docs/api/chip.md b/docs/api/chip.mdx similarity index 100% rename from docs/api/chip.md rename to docs/api/chip.mdx diff --git a/docs/api/col.md b/docs/api/col.mdx similarity index 100% rename from docs/api/col.md rename to docs/api/col.mdx diff --git a/docs/api/content.md b/docs/api/content.mdx similarity index 100% rename from docs/api/content.md rename to docs/api/content.mdx diff --git a/docs/api/datetime-button.md b/docs/api/datetime-button.mdx similarity index 98% rename from docs/api/datetime-button.md rename to docs/api/datetime-button.mdx index 361a1c9c8f1..cdb7aadc02c 100644 --- a/docs/api/datetime-button.md +++ b/docs/api/datetime-button.mdx @@ -47,8 +47,7 @@ import FormatOptions from '@site/static/usage/v8/datetime-button/format-options/ `ion-datetime-button` must be associated with a mounted `ion-datetime` instance. As a result, [Inline Modals](./modal#inline-modals-recommended) and [Inline Popovers](./popover#inline-popovers) with the `keepContentsMounted` property set to `true` must be used. - +TODO */} ## Properties diff --git a/docs/api/datetime.md b/docs/api/datetime.mdx similarity index 100% rename from docs/api/datetime.md rename to docs/api/datetime.mdx diff --git a/docs/api/fab-button.md b/docs/api/fab-button.mdx similarity index 100% rename from docs/api/fab-button.md rename to docs/api/fab-button.mdx diff --git a/docs/api/fab-list.md b/docs/api/fab-list.mdx similarity index 100% rename from docs/api/fab-list.md rename to docs/api/fab-list.mdx diff --git a/docs/api/fab.md b/docs/api/fab.mdx similarity index 100% rename from docs/api/fab.md rename to docs/api/fab.mdx diff --git a/docs/api/footer.md b/docs/api/footer.mdx similarity index 100% rename from docs/api/footer.md rename to docs/api/footer.mdx diff --git a/docs/api/grid.md b/docs/api/grid.mdx similarity index 97% rename from docs/api/grid.md rename to docs/api/grid.mdx index abe0b2950a1..f9dc32faa3b 100644 --- a/docs/api/grid.md +++ b/docs/api/grid.mdx @@ -18,7 +18,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -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. +The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units — a grid, [row(s)](row.mdx) and [column(s)](col.mdx). 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. ## Overview diff --git a/docs/api/header.md b/docs/api/header.mdx similarity index 100% rename from docs/api/header.md rename to docs/api/header.mdx diff --git a/docs/api/icon.md b/docs/api/icon.mdx similarity index 100% rename from docs/api/icon.md rename to docs/api/icon.mdx diff --git a/docs/api/img.md b/docs/api/img.mdx similarity index 100% rename from docs/api/img.md rename to docs/api/img.mdx diff --git a/docs/api/infinite-scroll-content.md b/docs/api/infinite-scroll-content.mdx similarity index 95% rename from docs/api/infinite-scroll-content.md rename to docs/api/infinite-scroll-content.mdx index 84fc4a93993..ad5edef2474 100644 --- a/docs/api/infinite-scroll-content.md +++ b/docs/api/infinite-scroll-content.mdx @@ -13,7 +13,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; The `ion-infinite-scroll-content` component is the default child used by the `ion-infinite-scroll`. It displays an infinite scroll spinner that looks best based on the platform and changes the look depending on the infinite scroll's state. The default spinner can be changed and text can be added by setting the `loadingSpinner` and `loadingText` properties. -For more information as well as usage, see the [Infinite Scroll Documentation](./infinite-scroll.md#infinite-scroll-content). +For more information as well as usage, see the [Infinite Scroll Documentation](./infinite-scroll.mdx#infinite-scroll-content). ## Properties diff --git a/docs/api/infinite-scroll.md b/docs/api/infinite-scroll.mdx similarity index 100% rename from docs/api/infinite-scroll.md rename to docs/api/infinite-scroll.mdx diff --git a/docs/api/input.md b/docs/api/input.mdx similarity index 97% rename from docs/api/input.md rename to docs/api/input.mdx index cab651f57bd..08370664512 100644 --- a/docs/api/input.md +++ b/docs/api/input.mdx @@ -155,9 +155,9 @@ The `start` and `end` slots can be used to place icons, buttons, or prefix/suffi Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior. :::note -In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information. +In most cases, [Icon](./icon.mdx) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information. -If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to. +If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.mdx). This ensures that the content can be tabbed to. ::: import StartEndSlots from '@site/static/usage/v7/input/start-end-slots/index.md'; diff --git a/docs/api/item-divider.md b/docs/api/item-divider.mdx similarity index 100% rename from docs/api/item-divider.md rename to docs/api/item-divider.mdx diff --git a/docs/api/item-group.md b/docs/api/item-group.mdx similarity index 100% rename from docs/api/item-group.md rename to docs/api/item-group.mdx diff --git a/docs/api/item-option.md b/docs/api/item-option.mdx similarity index 100% rename from docs/api/item-option.md rename to docs/api/item-option.mdx diff --git a/docs/api/item-options.md b/docs/api/item-options.mdx similarity index 100% rename from docs/api/item-options.md rename to docs/api/item-options.mdx diff --git a/docs/api/item-sliding.md b/docs/api/item-sliding.mdx similarity index 100% rename from docs/api/item-sliding.md rename to docs/api/item-sliding.mdx diff --git a/docs/api/item.md b/docs/api/item.mdx similarity index 99% rename from docs/api/item.md rename to docs/api/item.mdx index 5aaa4a16304..0aa9521a58f 100644 --- a/docs/api/item.md +++ b/docs/api/item.mdx @@ -178,10 +178,7 @@ import DetailArrows from '@site/static/usage/v8/item/detail-arrows/index.md'; - - - +See the [theming documentation](/docs/theming/css-variables) for more information. */} ## Item Lines diff --git a/docs/api/label.md b/docs/api/label.mdx similarity index 88% rename from docs/api/label.md rename to docs/api/label.mdx index dcf24afbeaf..c373a169f64 100644 --- a/docs/api/label.md +++ b/docs/api/label.mdx @@ -17,7 +17,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Label is an element used primarily to add text content to [Item](./item.md) components. Label can also be used inside of form control components such as [Input](./input.md) or [Radio](./radio.md) when specifying the visible label, but it is not required. +Label is an element used primarily to add text content to [Item](./item.mdx) components. Label can also be used inside of form control components such as [Input](./input.mdx) or [Radio](./radio.mdx) when specifying the visible label, but it is not required. The position of the label inside of an item can be inline, fixed, stacked, or floating. diff --git a/docs/api/list-header.md b/docs/api/list-header.mdx similarity index 100% rename from docs/api/list-header.md rename to docs/api/list-header.mdx diff --git a/docs/api/list.md b/docs/api/list.mdx similarity index 100% rename from docs/api/list.md rename to docs/api/list.mdx diff --git a/docs/api/loading.md b/docs/api/loading.mdx similarity index 100% rename from docs/api/loading.md rename to docs/api/loading.mdx diff --git a/docs/api/menu-button.md b/docs/api/menu-button.mdx similarity index 100% rename from docs/api/menu-button.md rename to docs/api/menu-button.mdx diff --git a/docs/api/menu-toggle.md b/docs/api/menu-toggle.mdx similarity index 100% rename from docs/api/menu-toggle.md rename to docs/api/menu-toggle.mdx diff --git a/docs/api/menu.md b/docs/api/menu.mdx similarity index 100% rename from docs/api/menu.md rename to docs/api/menu.mdx diff --git a/docs/api/modal.md b/docs/api/modal.mdx similarity index 100% rename from docs/api/modal.md rename to docs/api/modal.mdx diff --git a/docs/api/nav-link.md b/docs/api/nav-link.mdx similarity index 100% rename from docs/api/nav-link.md rename to docs/api/nav-link.mdx diff --git a/docs/api/nav.md b/docs/api/nav.mdx similarity index 100% rename from docs/api/nav.md rename to docs/api/nav.mdx diff --git a/docs/api/note.md b/docs/api/note.mdx similarity index 100% rename from docs/api/note.md rename to docs/api/note.mdx diff --git a/docs/api/picker.md b/docs/api/picker.mdx similarity index 100% rename from docs/api/picker.md rename to docs/api/picker.mdx diff --git a/docs/api/popover.md b/docs/api/popover.mdx similarity index 100% rename from docs/api/popover.md rename to docs/api/popover.mdx diff --git a/docs/api/progress-bar.md b/docs/api/progress-bar.mdx similarity index 98% rename from docs/api/progress-bar.md rename to docs/api/progress-bar.mdx index 1d775421031..d909da715c5 100644 --- a/docs/api/progress-bar.md +++ b/docs/api/progress-bar.mdx @@ -48,7 +48,7 @@ import Indeterminate from '@site/static/usage/v8/progress-bar/indeterminate/inde ## Progress Bars in Toolbars - +{/* Reuse the playground from the Toolbar directory */} import Toolbar from '@site/static/usage/v8/toolbar/progress-bars/index.md'; diff --git a/docs/api/radio-group.md b/docs/api/radio-group.mdx similarity index 100% rename from docs/api/radio-group.md rename to docs/api/radio-group.mdx diff --git a/docs/api/radio.md b/docs/api/radio.mdx similarity index 100% rename from docs/api/radio.md rename to docs/api/radio.mdx diff --git a/docs/api/range.md b/docs/api/range.mdx similarity index 100% rename from docs/api/range.md rename to docs/api/range.mdx diff --git a/docs/api/refresher-content.md b/docs/api/refresher-content.mdx similarity index 100% rename from docs/api/refresher-content.md rename to docs/api/refresher-content.mdx diff --git a/docs/api/refresher.md b/docs/api/refresher.mdx similarity index 100% rename from docs/api/refresher.md rename to docs/api/refresher.mdx diff --git a/docs/api/reorder-group.md b/docs/api/reorder-group.mdx similarity index 100% rename from docs/api/reorder-group.md rename to docs/api/reorder-group.mdx diff --git a/docs/api/reorder.md b/docs/api/reorder.mdx similarity index 100% rename from docs/api/reorder.md rename to docs/api/reorder.mdx diff --git a/docs/api/ripple-effect.md b/docs/api/ripple-effect.mdx similarity index 100% rename from docs/api/ripple-effect.md rename to docs/api/ripple-effect.mdx diff --git a/docs/api/route-redirect.md b/docs/api/route-redirect.mdx similarity index 98% rename from docs/api/route-redirect.md rename to docs/api/route-redirect.mdx index 411ea7b518f..de1c5b52460 100644 --- a/docs/api/route-redirect.md +++ b/docs/api/route-redirect.mdx @@ -20,7 +20,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; A route redirect can only be used with an `ion-router` as a direct child of it. :::note - 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. + Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.mdx) and the Angular router. ::: diff --git a/docs/api/route.md b/docs/api/route.mdx similarity index 99% rename from docs/api/route.md rename to docs/api/route.mdx index 8fc251b1907..cdd72f18ce6 100644 --- a/docs/api/route.md +++ b/docs/api/route.mdx @@ -22,7 +22,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; The route component takes a component and renders it when the Browser URL matches the url property. :::note - 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. + Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.mdx) and the Angular router. ::: diff --git a/docs/api/router-link.md b/docs/api/router-link.mdx similarity index 100% rename from docs/api/router-link.md rename to docs/api/router-link.mdx diff --git a/docs/api/router-outlet.md b/docs/api/router-outlet.mdx similarity index 100% rename from docs/api/router-outlet.md rename to docs/api/router-outlet.mdx diff --git a/docs/api/router.md b/docs/api/router.mdx similarity index 100% rename from docs/api/router.md rename to docs/api/router.mdx diff --git a/docs/api/row.md b/docs/api/row.mdx similarity index 100% rename from docs/api/row.md rename to docs/api/row.mdx diff --git a/docs/api/searchbar.md b/docs/api/searchbar.mdx similarity index 98% rename from docs/api/searchbar.md rename to docs/api/searchbar.mdx index 529ac434a90..34c96bf7ff3 100644 --- a/docs/api/searchbar.md +++ b/docs/api/searchbar.mdx @@ -58,7 +58,7 @@ import CancelButton from '@site/static/usage/v8/searchbar/cancel-button/index.md Searchbars are styled to look native when placed inside of a toolbar. In iOS, searchbars should be placed in their own toolbar, under a toolbar that contains the page title. In Material Design, searchbars are either persistently displayed in their own toolbar, or expand over a toolbar containing the page title. - +{/* Reuse the playground from the Toolbar directory */} import Toolbar from '@site/static/usage/v8/toolbar/searchbars/index.md'; diff --git a/docs/api/segment-button.md b/docs/api/segment-button.mdx similarity index 90% rename from docs/api/segment-button.md rename to docs/api/segment-button.mdx index dc1c866b382..a17696f6f2a 100644 --- a/docs/api/segment-button.md +++ b/docs/api/segment-button.mdx @@ -18,7 +18,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Segment buttons are groups of related buttons inside of a [segment](segment.md). They are displayed in a horizontal row. A segment button can be selected by default by setting the `value` of the segment to the `value` of the segment button. Only one segment button can be selected at a time. +Segment buttons are groups of related buttons inside of a [segment](segment.mdx). They are displayed in a horizontal row. A segment button can be selected by default by setting the `value` of the segment to the `value` of the segment button. Only one segment button can be selected at a time. ## Basic Usage diff --git a/docs/api/segment.md b/docs/api/segment.mdx similarity index 98% rename from docs/api/segment.md rename to docs/api/segment.mdx index 46eb28050bb..d2059aecd46 100644 --- a/docs/api/segment.md +++ b/docs/api/segment.mdx @@ -43,7 +43,7 @@ import Scrollable from '@site/static/usage/v8/segment/scrollable/index.md'; ## Segments in Toolbars - +{/* Reuse the playground from the Toolbar directory */} import Toolbar from '@site/static/usage/v8/toolbar/segments/index.md'; diff --git a/docs/api/select-option.md b/docs/api/select-option.mdx similarity index 100% rename from docs/api/select-option.md rename to docs/api/select-option.mdx diff --git a/docs/api/select.md b/docs/api/select.mdx similarity index 93% rename from docs/api/select.md rename to docs/api/select.mdx index 0beb1767edd..f1848493824 100644 --- a/docs/api/select.md +++ b/docs/api/select.mdx @@ -86,7 +86,7 @@ import MultipleSelectionExample from '@site/static/usage/v8/select/basic/multipl ## Interfaces -By default, select uses [ion-alert](alert.md) to open up the overlay of options in an alert. The interface can be changed to use [ion-action-sheet](action-sheet.md) or [ion-popover](popover.md) by passing `action-sheet` or `popover`, respectively, to the `interface` property. Read on to the other sections for the limitations of the different interfaces. +By default, select uses [ion-alert](alert.mdx) to open up the overlay of options in an alert. The interface can be changed to use [ion-action-sheet](action-sheet.mdx) or [ion-popover](popover.mdx) by passing `action-sheet` or `popover`, respectively, to the `interface` property. Read on to the other sections for the limitations of the different interfaces. ### Alert @@ -165,7 +165,7 @@ import ButtonTextExample from '@site/static/usage/v8/select/customization/button Since select uses the alert, action sheet and popover interfaces, options can be passed to these components through the `interfaceOptions` property. This can be used to pass a custom header, subheader, css class, and more. -See the [ion-alert docs](alert.md), [ion-action-sheet docs](action-sheet.md), and [ion-popover docs](popover.md) for the properties that each interface accepts. +See the [ion-alert docs](alert.mdx), [ion-action-sheet docs](action-sheet.mdx), and [ion-popover docs](popover.mdx) for the properties that each interface accepts. Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface. @@ -178,9 +178,9 @@ import InterfaceOptionsExample from '@site/static/usage/v8/select/customization/ The `start` and `end` slots can be used to place icons, buttons, or prefix/suffix text on either side of the select. If the slot content is clicked, the select will not open. :::note -In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information. +In most cases, [Icon](./icon.mdx) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information. -If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to. +If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.mdx). This ensures that the content can be tabbed to. ::: import StartEndSlots from '@site/static/usage/v7/select/start-end-slots/index.md'; @@ -205,11 +205,11 @@ import StylingSelectExample from '@site/static/usage/v8/select/customization/sty Customizing the interface dialog should be done by following the Customization section in that interface's documentation: -- [Alert Customization](alert.md#customization) -- [Action Sheet Customization](action-sheet.md#customization) -- [Popover Customization](popover.md#customization) +- [Alert Customization](alert.mdx#customization) +- [Action Sheet Customization](action-sheet.mdx#customization) +- [Popover Customization](popover.mdx#customization) -However, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, see the [Select Options documentation](select-option.md) for usage examples of customizing options. +However, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, see the [Select Options documentation](select-option.mdx) for usage examples of customizing options. ### Custom Toggle Icons diff --git a/docs/api/skeleton-text.md b/docs/api/skeleton-text.mdx similarity index 100% rename from docs/api/skeleton-text.md rename to docs/api/skeleton-text.mdx diff --git a/docs/api/spinner.md b/docs/api/spinner.mdx similarity index 100% rename from docs/api/spinner.md rename to docs/api/spinner.mdx diff --git a/docs/api/split-pane.md b/docs/api/split-pane.mdx similarity index 100% rename from docs/api/split-pane.md rename to docs/api/split-pane.mdx diff --git a/docs/api/tab-bar.md b/docs/api/tab-bar.mdx similarity index 97% rename from docs/api/tab-bar.md rename to docs/api/tab-bar.mdx index 4c257364f60..f801d4fcbc4 100644 --- a/docs/api/tab-bar.md +++ b/docs/api/tab-bar.mdx @@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -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). +The tab bar is a UI component that contains a set of [tab buttons](tab-button.mdx). A tab bar must be provided inside of [tabs](tabs.mdx) to communicate with each [tab](tab.mdx). diff --git a/docs/api/tab-button.md b/docs/api/tab-button.mdx similarity index 96% rename from docs/api/tab-button.md rename to docs/api/tab-button.mdx index c67af33ef69..64a4d7e095b 100644 --- a/docs/api/tab-button.md +++ b/docs/api/tab-button.mdx @@ -18,9 +18,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -A tab button is a UI component that is placed inside of a [tab bar](tab-bar.md). The tab button can specify the layout of the icon and label and connect to a [tab view](tab.md). +A tab button is a UI component that is placed inside of a [tab bar](tab-bar.mdx). The tab button can specify the layout of the icon and label and connect to a [tab view](tab.mdx). -See the [tabs documentation](tabs.md) for more details on configuring tabs. +See the [tabs documentation](tabs.mdx) for more details on configuring tabs. diff --git a/docs/api/tab.md b/docs/api/tab.mdx similarity index 80% rename from docs/api/tab.md rename to docs/api/tab.mdx index 84b829542bf..d9c8b6ffae0 100644 --- a/docs/api/tab.md +++ b/docs/api/tab.mdx @@ -19,14 +19,14 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -The tab component is a child component of [tabs](tabs.md). Each tab can contain a top level navigation stack for an app or a single view. An app can have many tabs, all with their own independent navigation. +The tab component is a child component of [tabs](tabs.mdx). Each tab can contain a top level navigation stack for an app or a single view. An app can have many tabs, all with their own independent navigation. :::note Note: This component should only be used with vanilla JavaScript projects. For Angular, React, and Vue apps you do not need to use `ion-tab` to declare your tab components. ::: -See the [tabs documentation](tabs.md) for more details on configuring tabs. +See the [tabs documentation](tabs.mdx) for more details on configuring tabs. diff --git a/docs/api/tabs.md b/docs/api/tabs.mdx similarity index 97% rename from docs/api/tabs.md rename to docs/api/tabs.mdx index 84bda763b3e..f476ad8c2b5 100644 --- a/docs/api/tabs.md +++ b/docs/api/tabs.mdx @@ -18,7 +18,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; Tabs are a top level navigation component to implement a tab-based navigation. -The component is a container of individual [Tab](tab.md) components. +The component is a container of individual [Tab](tab.mdx) components. The `ion-tabs` component does not have any styling and works as a router outlet in order to handle navigation. It does not provide any UI feedback or mechanism to switch between tabs. In order to do so, an `ion-tab-bar` should be provided as a direct child of `ion-tabs`. diff --git a/docs/api/text.md b/docs/api/text.mdx similarity index 100% rename from docs/api/text.md rename to docs/api/text.mdx diff --git a/docs/api/textarea.md b/docs/api/textarea.mdx similarity index 96% rename from docs/api/textarea.md rename to docs/api/textarea.mdx index 012a917f101..389176ac551 100644 --- a/docs/api/textarea.md +++ b/docs/api/textarea.mdx @@ -116,9 +116,9 @@ The `start` and `end` slots can be used to place icons, buttons, or prefix/suffi Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior. :::note -In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information. +In most cases, [Icon](./icon.mdx) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information. -If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to. +If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.mdx). This ensures that the content can be tabbed to. ::: import StartEndSlots from '@site/static/usage/v7/textarea/start-end-slots/index.md'; diff --git a/docs/api/thumbnail.md b/docs/api/thumbnail.mdx similarity index 100% rename from docs/api/thumbnail.md rename to docs/api/thumbnail.mdx diff --git a/docs/api/title.md b/docs/api/title.mdx similarity index 96% rename from docs/api/title.md rename to docs/api/title.mdx index 1f807c23599..06699625c20 100644 --- a/docs/api/title.md +++ b/docs/api/title.mdx @@ -42,7 +42,7 @@ import CollapsibleLargeTitle from '@site/static/usage/v8/title/collapsible-large ### Collapsible Buttons -The [buttons](./buttons.md) component can be used with the [`collapse`](./buttons.md#collapse) property to additionally display in the header as the toolbar is collapsed. +The [buttons](./buttons.mdx) component can be used with the [`collapse`](./buttons.mdx#collapse) property to additionally display in the header as the toolbar is collapsed. import CollapsibleLargeTitleButtons from '@site/static/usage/v8/title/collapsible-large-title/buttons/index.md'; diff --git a/docs/api/toast.md b/docs/api/toast.mdx similarity index 96% rename from docs/api/toast.md rename to docs/api/toast.mdx index 6468dd0af93..5cfb07be716 100644 --- a/docs/api/toast.md +++ b/docs/api/toast.mdx @@ -66,7 +66,7 @@ Toasts can be positioned at the top, bottom or middle of the viewport. The posit ### Relative Positioning -If a toast is presented alongside navigation elements such as a header, footer, or [FAB](./fab.md), the toast may overlap these elements by default. This can be fixed using the `positionAnchor` property, which takes either an element reference or an ID. The toast will be positioned relative to the chosen element, appearing below it when using `position="top"` or above it when using `position="bottom"`. When using `position="middle"`, the `positionAnchor` property is ignored. +If a toast is presented alongside navigation elements such as a header, footer, or [FAB](./fab.mdx), the toast may overlap these elements by default. This can be fixed using the `positionAnchor` property, which takes either an element reference or an ID. The toast will be positioned relative to the chosen element, appearing below it when using `position="top"` or above it when using `position="bottom"`. When using `position="middle"`, the `positionAnchor` property is ignored. import PositionAnchor from '@site/static/usage/v8/toast/position-anchor/index.md'; @@ -90,7 +90,7 @@ import StackedPlayground from '@site/static/usage/v8/toast/layout/index.md'; ## Icons -An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an [Alert](alert.md) instead. +An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an [Alert](alert.mdx) instead. import IconPlayground from '@site/static/usage/v8/toast/icon/index.md'; diff --git a/docs/api/toggle.md b/docs/api/toggle.mdx similarity index 100% rename from docs/api/toggle.md rename to docs/api/toggle.mdx diff --git a/docs/api/toolbar.md b/docs/api/toolbar.mdx similarity index 100% rename from docs/api/toolbar.md rename to docs/api/toolbar.mdx diff --git a/docs/core-concepts/cross-platform.md b/docs/core-concepts/cross-platform.md index c3718cb9f92..63b3acfe57c 100644 --- a/docs/core-concepts/cross-platform.md +++ b/docs/core-concepts/cross-platform.md @@ -67,7 +67,7 @@ This will render 5 items with a width of 100% each. This may look great on a pho -To improve this experience, we can wrap the items in a [Grid](../api/grid.md) component. The view can be easily rewritten into something more usable on larger screens: +To improve this experience, we can wrap the items in a [Grid](../api/grid.mdx) component. The view can be easily rewritten into something more usable on larger screens: ```html @@ -149,7 +149,7 @@ There’s a lot going on in the example above. These are the key points: - The `size` attribute can have a breakpoint added to it, `size-{breakpoint}`. This value sets the size for the specified breakpoint and above. -For more information on customizing with grid, see the [Grid](../api/grid.md) documentation. +For more information on customizing with grid, see the [Grid](../api/grid.mdx) documentation. ## Storage diff --git a/docs/developing/config/per-platform/index.md b/docs/developing/config/per-platform/index.md index b088a7e6bf6..a7338da3084 100644 --- a/docs/developing/config/per-platform/index.md +++ b/docs/developing/config/per-platform/index.md @@ -16,7 +16,7 @@ import TabItem from '@theme/TabItem'; :::note Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly. -See the [Angular Platform Documentation](../angular/platform) for the types of platforms you can detect. +See the [Angular Platform Documentation](../../../angular/platform.mdx) for the types of platforms you can detect. ::: ```ts title="app.module.ts" @@ -39,7 +39,7 @@ import { isPlatform, IonicModule } from '@ionic/angular'; :::note Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly. -See the [Angular Platform Documentation](../angular/platform) for the types of platforms you can detect. +See the [Angular Platform Documentation](../../../angular/platform.mdx) for the types of platforms you can detect. ::: ```ts title="main.ts" @@ -59,7 +59,7 @@ bootstrapApplication(AppComponent, { :::note -See the [React Platform Documentation](../react/platform) for the types of platforms you can detect. +See the [React Platform Documentation](../../../react/platform.mdx) for the types of platforms you can detect. ::: ```tsx title="App.tsx" @@ -74,7 +74,7 @@ setupIonicReact({ :::note -See the [Vue Platform Documentation](../vue/platform) for the types of platforms you can detect. +See the [Vue Platform Documentation](../../../vue/platform.mdx) for the types of platforms you can detect. ::: ```ts title="main.ts" diff --git a/docs/index.md b/docs/index.md index b49b366f28e..b590ab6d7d2 100644 --- a/docs/index.md +++ b/docs/index.md @@ -22,7 +22,7 @@ import DocsCards from '@components/global/DocsCards'; -Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.md), [React](react.md), and [Vue](vue/overview.md). +Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.mdx), [React](react.mdx), and [Vue](vue/overview.mdx). Get started building by [installing Ionic](intro/cli.md) or following our [First App Tutorial](intro/next.md#build-your-first-app) to learn the main concepts. @@ -58,7 +58,7 @@ Get started building by [installing Ionic](intro/cli.md) or following our [First ## Overview -Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.md), [React](react.md), or [Vue](vue/overview.md). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.md). If you’d like to learn more about Ionic before diving in, we created a video to walk you through the basics. +Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.mdx), [React](react.mdx), or [Vue](vue/overview.mdx). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.md). If you’d like to learn more about Ionic before diving in, we created a video to walk you through the basics. ### One codebase, running everywhere diff --git a/docs/layout/structure.md b/docs/layout/structure.md index 2b0bdf51de9..0577df6c2a5 100644 --- a/docs/layout/structure.md +++ b/docs/layout/structure.md @@ -19,7 +19,7 @@ Ionic Framework provides several different layouts that can be used to structure ### Header -The most simple layout available consists of a [header](../api/header.md) and [content](../api/content.md). Most pages in an app generally have both of these, but a header is not required in order to use content. +The most simple layout available consists of a [header](../api/header.mdx) and [content](../api/content.mdx). Most pages in an app generally have both of these, but a header is not required in order to use content. import Header from '@site/static/usage/v8/header/basic/index.md'; @@ -35,7 +35,7 @@ import Footer from '@site/static/usage/v8/footer/basic/index.md'; ## Tabs Layout -A layout consisting of horizontal [tabs](../api/tabs.md) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using a [router outlet](../api/router-outlet.md) or [nav](../api/nav.md). +A layout consisting of horizontal [tabs](../api/tabs.mdx) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using a [router outlet](../api/router-outlet.mdx) or [nav](../api/nav.mdx). import Tabs from '@site/static/usage/v8/tabs/router/index.md'; @@ -43,7 +43,7 @@ import Tabs from '@site/static/usage/v8/tabs/router/index.md'; ## Menu Layout -A standard layout among mobile apps includes the ability to toggle a side [menu](../api/menu.md) by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content. +A standard layout among mobile apps includes the ability to toggle a side [menu](../api/menu.mdx) by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content. import Menu from '@site/static/usage/v8/menu/basic/index.md'; @@ -51,11 +51,11 @@ import Menu from '@site/static/usage/v8/menu/basic/index.md'; ## Split Pane Layout -A [split pane](../api/split-pane.md) layout has a more complex structure because it can combine the previous layouts. It allows for multiple views to be displayed when the viewport is above a specified breakpoint. If the device's screen size is below a certain size, the split pane view will be hidden. +A [split pane](../api/split-pane.mdx) layout has a more complex structure because it can combine the previous layouts. It allows for multiple views to be displayed when the viewport is above a specified breakpoint. If the device's screen size is below a certain size, the split pane view will be hidden. By default, the split pane view will show when the screen is larger than `768px`, or the `md` breakpoint, but this can be customized to use different breakpoints by setting the `when` property. Below is an example where the split pane contains a menu that is visible for `xs` screens and up, or when the viewport is larger than `0px`. This will show the split pane for all screen sizes. -It's important to note that the element with the `id` matching the `contentId` specified by the split pane will be the main content that is always visible. This can be any element, including a [nav](../api/nav.md), [router outlet](../api/router-outlet.md), or [tabs](../api/tabs.md). +It's important to note that the element with the `id` matching the `contentId` specified by the split pane will be the main content that is always visible. This can be any element, including a [nav](../api/nav.mdx), [router outlet](../api/router-outlet.mdx), or [tabs](../api/tabs.mdx). import SplitPane from '@site/static/usage/v8/split-pane/basic/index.md'; diff --git a/docs/react/adding-ionic-react-to-an-existing-react-project.md b/docs/react/adding-ionic-react-to-an-existing-react-project.mdx similarity index 100% rename from docs/react/adding-ionic-react-to-an-existing-react-project.md rename to docs/react/adding-ionic-react-to-an-existing-react-project.mdx diff --git a/docs/react/lifecycle.md b/docs/react/lifecycle.mdx similarity index 100% rename from docs/react/lifecycle.md rename to docs/react/lifecycle.mdx diff --git a/docs/react/navigation.md b/docs/react/navigation.mdx similarity index 99% rename from docs/react/navigation.md rename to docs/react/navigation.mdx index 2c1efa761e2..9341199e477 100644 --- a/docs/react/navigation.md +++ b/docs/react/navigation.mdx @@ -647,8 +647,8 @@ For more info on routing in React using the React Router implementation that Ion ## From the Community - +{/* cspell:disable */} [Ionic 4 and React: Navigation](https://alligator.io/ionic/ionic-4-react-navigation) - Paul Halliday - +{/* cspell:enable */} diff --git a/docs/react/overlays.md b/docs/react/overlays.mdx similarity index 100% rename from docs/react/overlays.md rename to docs/react/overlays.mdx diff --git a/docs/react/performance.md b/docs/react/performance.mdx similarity index 100% rename from docs/react/performance.md rename to docs/react/performance.mdx diff --git a/docs/react/platform.md b/docs/react/platform.mdx similarity index 100% rename from docs/react/platform.md rename to docs/react/platform.mdx diff --git a/docs/react/pwa.md b/docs/react/pwa.mdx similarity index 100% rename from docs/react/pwa.md rename to docs/react/pwa.mdx diff --git a/docs/react/quickstart.md b/docs/react/quickstart.mdx similarity index 99% rename from docs/react/quickstart.md rename to docs/react/quickstart.mdx index f7bef34201b..450ae05356d 100644 --- a/docs/react/quickstart.md +++ b/docs/react/quickstart.mdx @@ -94,7 +94,7 @@ The next import is from `react-router-dom`. We're importing Route, which is how Following ReactRouter, we next have our first imports for Ionic. To use a component in React, you must first import it. So for Ionic, this means anytime we want to use a Button or a Card, it must be added to our imports. In the case of our App component, we're only using `IonApp`, `IonRouterOutlet`, and `IonReactRouter`. -`IonReactRouter` is a component that wraps ReactRouter’s BrowserRouter component. It more or less behaves the same as BrowserRouter with a few differences. We have a deeper guide that goes over these differences in our [React Navigation Docs](navigation.md). +`IonReactRouter` is a component that wraps ReactRouter’s BrowserRouter component. It more or less behaves the same as BrowserRouter with a few differences. We have a deeper guide that goes over these differences in our [React Navigation Docs](navigation.mdx). The last important import is the `Home` component import. This is a component that we will be able to navigate to in our app. We'll look at the navigation part a bit later. @@ -316,7 +316,7 @@ export default NewItem; ``` :::note -Each view must contain an `IonPage` component. Page transitions will not work correctly without it. See the [IonPage Documentation](navigation.md#ionpage) for more information. +Each view must contain an `IonPage` component. Page transitions will not work correctly without it. See the [IonPage Documentation](navigation.mdx#ionpage) for more information. ::: The content here is pretty straight forward and should look similar to the `Home` component. What is new is the `IonBackButton` component. This is used to navigate back to the previous route. Pretty straight forward? Ok, but what if we reload the page? @@ -443,7 +443,7 @@ export default Home; ## Where to go from here -This guide covered the basics of creating an Ionic React app, adding some basic navigation, and introducing Capacitor as a way of building native apps. To dive deeper into building complete Ionic apps with React and Capacitor, follow our [First App guide](your-first-app.md). +This guide covered the basics of creating an Ionic React app, adding some basic navigation, and introducing Capacitor as a way of building native apps. To dive deeper into building complete Ionic apps with React and Capacitor, follow our [First App guide](your-first-app.mdx). For a more detailed look at Ionic’s components, check out the [component API pages](https://ionicframework.com/docs/components). For more details on React, review the [React Docs](https://reactjs.org/). To keep building native features, see the [Capacitor docs](https://capacitorjs.com/docs/). diff --git a/docs/react/slides.md b/docs/react/slides.mdx similarity index 100% rename from docs/react/slides.md rename to docs/react/slides.mdx diff --git a/docs/react/storage.md b/docs/react/storage.mdx similarity index 100% rename from docs/react/storage.md rename to docs/react/storage.mdx diff --git a/docs/react/testing/introduction.md b/docs/react/testing/introduction.mdx similarity index 100% rename from docs/react/testing/introduction.md rename to docs/react/testing/introduction.mdx diff --git a/docs/react/testing/unit-testing/best-practices.md b/docs/react/testing/unit-testing/best-practices.mdx similarity index 100% rename from docs/react/testing/unit-testing/best-practices.md rename to docs/react/testing/unit-testing/best-practices.mdx diff --git a/docs/react/testing/unit-testing/examples.md b/docs/react/testing/unit-testing/examples.mdx similarity index 100% rename from docs/react/testing/unit-testing/examples.md rename to docs/react/testing/unit-testing/examples.mdx diff --git a/docs/react/testing/unit-testing/setup.md b/docs/react/testing/unit-testing/setup.mdx similarity index 100% rename from docs/react/testing/unit-testing/setup.md rename to docs/react/testing/unit-testing/setup.mdx diff --git a/docs/react/virtual-scroll.md b/docs/react/virtual-scroll.mdx similarity index 100% rename from docs/react/virtual-scroll.md rename to docs/react/virtual-scroll.mdx diff --git a/docs/react/your-first-app.md b/docs/react/your-first-app.mdx similarity index 100% rename from docs/react/your-first-app.md rename to docs/react/your-first-app.mdx diff --git a/docs/react/your-first-app/2-taking-photos.md b/docs/react/your-first-app/2-taking-photos.mdx similarity index 100% rename from docs/react/your-first-app/2-taking-photos.md rename to docs/react/your-first-app/2-taking-photos.mdx diff --git a/docs/react/your-first-app/3-saving-photos.md b/docs/react/your-first-app/3-saving-photos.mdx similarity index 100% rename from docs/react/your-first-app/3-saving-photos.md rename to docs/react/your-first-app/3-saving-photos.mdx diff --git a/docs/react/your-first-app/4-loading-photos.md b/docs/react/your-first-app/4-loading-photos.mdx similarity index 100% rename from docs/react/your-first-app/4-loading-photos.md rename to docs/react/your-first-app/4-loading-photos.mdx diff --git a/docs/react/your-first-app/5-adding-mobile.md b/docs/react/your-first-app/5-adding-mobile.mdx similarity index 100% rename from docs/react/your-first-app/5-adding-mobile.md rename to docs/react/your-first-app/5-adding-mobile.mdx diff --git a/docs/react/your-first-app/6-deploying-mobile.md b/docs/react/your-first-app/6-deploying-mobile.mdx similarity index 100% rename from docs/react/your-first-app/6-deploying-mobile.md rename to docs/react/your-first-app/6-deploying-mobile.mdx diff --git a/docs/react/your-first-app/7-live-reload.md b/docs/react/your-first-app/7-live-reload.mdx similarity index 100% rename from docs/react/your-first-app/7-live-reload.md rename to docs/react/your-first-app/7-live-reload.mdx diff --git a/docs/react/your-first-app/8-distribute.md b/docs/react/your-first-app/8-distribute.mdx similarity index 100% rename from docs/react/your-first-app/8-distribute.md rename to docs/react/your-first-app/8-distribute.mdx diff --git a/docs/theming/css-shadow-parts.md b/docs/theming/css-shadow-parts.md index 6d539b9cc55..271dd4e9f9a 100644 --- a/docs/theming/css-shadow-parts.md +++ b/docs/theming/css-shadow-parts.md @@ -17,7 +17,7 @@ CSS Shadow Parts allow developers to style CSS properties on an element inside o Ionic Framework is a distributed set of Web Components. Web Components follow the Shadow DOM specification in order to encapsulate styles and markup. :::note -Ionic Framework components are **not all** Shadow DOM components. If the component is a Shadow DOM component, there will be a badge in the top right of its [component documentation](../components.md). An example of a Shadow DOM component is the [button component](../api/button.md). +Ionic Framework components are **not all** Shadow DOM components. If the component is a Shadow DOM component, there will be a badge in the top right of its [component documentation](../components.md). An example of a Shadow DOM component is the [button component](../api/button.mdx). ::: Shadow DOM is useful for preventing styles from leaking out of components and unintentionally applying to other elements. For example, we assign a `.button` class to our `ion-button` component. Without Shadow DOM encapsulation, if a user were to set the class `.button` on one of their own elements, it would inherit the Ionic Framework button styles. Since `ion-button` is a Shadow component, this is not a problem. @@ -61,7 +61,7 @@ Continuing to use the `ion-select` component as an example, the markup is update ``` -The above shows two parts: `placeholder` and `icon`. See the [select documentation](../api/select.md#css-shadow-parts) for all of its parts. +The above shows two parts: `placeholder` and `icon`. See the [select documentation](../api/select.mdx#css-shadow-parts) for all of its parts. With these parts exposed, the element can now be styled directly using [::part](#how-part-works). diff --git a/docs/theming/css-variables.md b/docs/theming/css-variables.md index 5a806cf54a8..d800a6cf059 100644 --- a/docs/theming/css-variables.md +++ b/docs/theming/css-variables.md @@ -91,7 +91,7 @@ const color = el.style.getPropertyValue('--charcoal'); ### Component Variables -Ionic provides variables that exist at the component level, such as `--background` and `--color`. For a list of the custom properties a component accepts, view the `CSS Custom Properties` section of its [API reference](../api.md). For example, see the [Button CSS Custom Properties](../api/button.md#css-custom-properties). +Ionic provides variables that exist at the component level, such as `--background` and `--color`. For a list of the custom properties a component accepts, view the `CSS Custom Properties` section of its [API reference](../api.md). For example, see the [Button CSS Custom Properties](../api/button.mdx#css-custom-properties). ### Global Variables diff --git a/docs/updating/4-0.md b/docs/updating/4-0.md index 57c6e32969f..a913acf4cd3 100644 --- a/docs/updating/4-0.md +++ b/docs/updating/4-0.md @@ -146,7 +146,7 @@ With V4, we're now able to utilize the typical events provided by [Angular](http Older events like `ionViewDidLoad`, `ionViewCanLeave`, and `ionViewCanEnter` have been removed, and the proper Angular alternatives should be used. -For more details, check out the [router-outlet docs](../api/router-outlet.md) +For more details, check out the [router-outlet docs](../api/router-outlet.mdx) ### Overlay Components @@ -192,7 +192,7 @@ In V4, navigation received the most changes. Now, instead of using Ionic's own ` To provide the platform-specific animations that users are used to, we have created `ion-router-outlet` for Angular Apps. This behaves in a similar manner to Angular's `router-outlet` but provides a stack-based navigation (tabs) and animations. -For a detailed explanation in navigation works in a V4 project, check out the [Angular navigation guide](../angular/navigation.md). +For a detailed explanation in navigation works in a V4 project, check out the [Angular navigation guide](../angular/navigation.mdx). ### Lazy Loading @@ -242,7 +242,7 @@ export class HomePageModule {} export class AppModule {} ``` -For a detailed explanation of lazy loading in V4 project, check out the [Angular navigation guide](../angular/navigation.md#lazy-loading-routes). +For a detailed explanation of lazy loading in V4 project, check out the [Angular navigation guide](../angular/navigation.mdx#lazy-loading-routes). ### Markup Changes diff --git a/docs/vue/lifecycle.md b/docs/vue/lifecycle.mdx similarity index 100% rename from docs/vue/lifecycle.md rename to docs/vue/lifecycle.mdx diff --git a/docs/vue/navigation.md b/docs/vue/navigation.mdx similarity index 100% rename from docs/vue/navigation.md rename to docs/vue/navigation.mdx diff --git a/versioned_docs/version-v6/vue/overview.md b/docs/vue/overview.mdx similarity index 98% rename from versioned_docs/version-v6/vue/overview.md rename to docs/vue/overview.mdx index 045cb75b123..cd18790e79d 100644 --- a/versioned_docs/version-v6/vue/overview.md +++ b/docs/vue/overview.mdx @@ -32,12 +32,12 @@ While there are no known technical limitations to using `Ionic Vue` with [Cordov ## From the Community - +{/* cspell:disable */} - [Using Vue.js with Ionic & Capacitor](https://dev.to/aaronksaunders/using-vue-js-v3-beta-with-ionic-components-capacitor-plugins-2b6f) - Aaron Saunders - [Building Mobile Apps With Vue3 and Ionic](https://soshace.com/building-mobile-apps-with-vue3-and-ionic/) - Oluwaseun Raphael Afolayan - +{/* cspell:enable */} ## Installation diff --git a/docs/vue/performance.md b/docs/vue/performance.mdx similarity index 100% rename from docs/vue/performance.md rename to docs/vue/performance.mdx diff --git a/docs/vue/platform.md b/docs/vue/platform.mdx similarity index 100% rename from docs/vue/platform.md rename to docs/vue/platform.mdx diff --git a/docs/vue/pwa.md b/docs/vue/pwa.mdx similarity index 100% rename from docs/vue/pwa.md rename to docs/vue/pwa.mdx diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.mdx similarity index 99% rename from docs/vue/quickstart.md rename to docs/vue/quickstart.mdx index 25acbd0062e..6096cefa9bb 100644 --- a/docs/vue/quickstart.md +++ b/docs/vue/quickstart.mdx @@ -452,7 +452,7 @@ Let's fill the `NewItem.vue` file with some placeholder content for the moment. ``` :::note -Each view must contain an `IonPage` component. Page transitions will not work correctly without it. See the [IonPage Documentation](navigation.md#ionpage) for more information. +Each view must contain an `IonPage` component. Page transitions will not work correctly without it. See the [IonPage Documentation](navigation.mdx#ionpage) for more information. ::: The content here should look similar to the `Home` component. What is different here is the `IonBackButton` component. This is used to navigate back to the previous route. Seems easy enough, right? Ok, but what if we reload the page? @@ -728,7 +728,7 @@ Next, check out [all the APIs](https://capacitorjs.com/docs/apis) that are avail ## Where to go from here -This guide covered the basics of creating an Ionic Vue app, adding some basic navigation, and introducing Capacitor as a way of building native apps. To dive deeper into building complete Ionic Framework apps with Vue and Capacitor, follow our [First App guide](your-first-app.md). +This guide covered the basics of creating an Ionic Vue app, adding some basic navigation, and introducing Capacitor as a way of building native apps. To dive deeper into building complete Ionic Framework apps with Vue and Capacitor, follow our [First App guide](your-first-app.mdx). For a more detailed look at Ionic Frameworks’s components, check out the [component API pages](https://ionicframework.com/docs/components). For more details on Vue, review the [Vue Docs](https://v3.vuejs.org/). To keep building native features, see the [Capacitor docs](https://capacitorjs.com/docs/). diff --git a/docs/vue/slides.md b/docs/vue/slides.mdx similarity index 100% rename from docs/vue/slides.md rename to docs/vue/slides.mdx diff --git a/docs/vue/storage.md b/docs/vue/storage.mdx similarity index 100% rename from docs/vue/storage.md rename to docs/vue/storage.mdx diff --git a/docs/vue/testing.md b/docs/vue/testing.mdx similarity index 100% rename from docs/vue/testing.md rename to docs/vue/testing.mdx diff --git a/docs/vue/troubleshooting.md b/docs/vue/troubleshooting.mdx similarity index 92% rename from docs/vue/troubleshooting.md rename to docs/vue/troubleshooting.mdx index 1483bb9037b..b0f5d6486e3 100644 --- a/docs/vue/troubleshooting.md +++ b/docs/vue/troubleshooting.mdx @@ -41,7 +41,7 @@ To resolve this issue, you need to import the component from `@ionic/vue` and pr ``` -Prefer to register your components globally once? We have you covered. Our [Optimizing Your Build Guide](quickstart.md#optimizing-your-build) shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach. +Prefer to register your components globally once? We have you covered. Our [Optimizing Your Build Guide](quickstart.mdx#optimizing-your-build) shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach. ## Slot attributes are deprecated @@ -79,7 +79,7 @@ ionContentRef.value.scrollToBottom(); In other framework integrations such as Ionic React, this is not needed as any `ref` you provide is automatically forwarded to the underlying Web Component instance. We are unable to do the same thing here due to limitations in how Vue manages refs. -See the [Quickstart Guide](quickstart.md#calling-methods-on-components) for more information. +See the [Quickstart Guide](quickstart.mdx#calling-methods-on-components) for more information. ## Page transitions are not working @@ -113,7 +113,7 @@ In order for page transitions to work correctly, each page must have an `ion-pag ``` -See the [IonPage documentation](navigation.md#ionpage) for more information. +See the [IonPage documentation](navigation.mdx#ionpage) for more information. ## Ionic events bound in JavaScript are not firing diff --git a/docs/vue/utility-functions.md b/docs/vue/utility-functions.mdx similarity index 100% rename from docs/vue/utility-functions.md rename to docs/vue/utility-functions.mdx diff --git a/docs/vue/virtual-scroll.md b/docs/vue/virtual-scroll.mdx similarity index 100% rename from docs/vue/virtual-scroll.md rename to docs/vue/virtual-scroll.mdx diff --git a/docs/vue/your-first-app.md b/docs/vue/your-first-app.mdx similarity index 100% rename from docs/vue/your-first-app.md rename to docs/vue/your-first-app.mdx diff --git a/docs/vue/your-first-app/2-taking-photos.md b/docs/vue/your-first-app/2-taking-photos.mdx similarity index 100% rename from docs/vue/your-first-app/2-taking-photos.md rename to docs/vue/your-first-app/2-taking-photos.mdx diff --git a/docs/vue/your-first-app/3-saving-photos.md b/docs/vue/your-first-app/3-saving-photos.mdx similarity index 100% rename from docs/vue/your-first-app/3-saving-photos.md rename to docs/vue/your-first-app/3-saving-photos.mdx diff --git a/docs/vue/your-first-app/4-loading-photos.md b/docs/vue/your-first-app/4-loading-photos.mdx similarity index 100% rename from docs/vue/your-first-app/4-loading-photos.md rename to docs/vue/your-first-app/4-loading-photos.mdx diff --git a/docs/vue/your-first-app/5-adding-mobile.md b/docs/vue/your-first-app/5-adding-mobile.mdx similarity index 100% rename from docs/vue/your-first-app/5-adding-mobile.md rename to docs/vue/your-first-app/5-adding-mobile.mdx diff --git a/docs/vue/your-first-app/6-deploying-mobile.md b/docs/vue/your-first-app/6-deploying-mobile.mdx similarity index 100% rename from docs/vue/your-first-app/6-deploying-mobile.md rename to docs/vue/your-first-app/6-deploying-mobile.mdx diff --git a/docs/vue/your-first-app/7-live-reload.md b/docs/vue/your-first-app/7-live-reload.mdx similarity index 100% rename from docs/vue/your-first-app/7-live-reload.md rename to docs/vue/your-first-app/7-live-reload.mdx diff --git a/docs/vue/your-first-app/8-distribute.md b/docs/vue/your-first-app/8-distribute.mdx similarity index 100% rename from docs/vue/your-first-app/8-distribute.md rename to docs/vue/your-first-app/8-distribute.mdx diff --git a/docusaurus.config.js b/docusaurus.config.js index 4a39d44879a..223085cf64b 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -65,8 +65,8 @@ module.exports = { return 'https://crowdin.com/project/ionic-docs'; } let match; - if ((match = docPath.match(/api\/(.*)\.md/)) != null) { - return `https://github.com/ionic-team/ionic-docs/tree/main/docs/api/${match[1]}.md`; + if ((match = docPath.match(/api\/(.*)\.mdx/)) != null) { + return `https://github.com/ionic-team/ionic-docs/tree/main/docs/api/${match[1]}.mdx`; } if ((match = docPath.match(/cli\/commands\/(.*)\.md/)) != null) { return `https://github.com/ionic-team/ionic-cli/edit/develop/packages/@ionic/cli/src/commands/${match[1].replace( diff --git a/versioned_docs/version-v5/angular/config.md b/versioned_docs/version-v5/angular/config.mdx similarity index 99% rename from versioned_docs/version-v5/angular/config.md rename to versioned_docs/version-v5/angular/config.mdx index 0db21cdf0aa..b8ac430fae1 100644 --- a/versioned_docs/version-v5/angular/config.md +++ b/versioned_docs/version-v5/angular/config.mdx @@ -60,7 +60,7 @@ Ionic Config can also be set on a per-platform basis. For example, this allows y Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly. In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser. -The `isPlatform()` call returns `true` or `false` based upon the platform that is passed in. See the [Platform Documentation](platform.md#platforms) for a list of possible values. +The `isPlatform()` call returns `true` or `false` based upon the platform that is passed in. See the [Platform Documentation](platform.mdx#platforms) for a list of possible values. ```tsx import { isPlatform, IonicModule } from '@ionic/angular'; diff --git a/versioned_docs/version-v5/angular/lifecycle.md b/versioned_docs/version-v5/angular/lifecycle.mdx similarity index 100% rename from versioned_docs/version-v5/angular/lifecycle.md rename to versioned_docs/version-v5/angular/lifecycle.mdx diff --git a/versioned_docs/version-v5/angular/navigation.md b/versioned_docs/version-v5/angular/navigation.mdx similarity index 100% rename from versioned_docs/version-v5/angular/navigation.md rename to versioned_docs/version-v5/angular/navigation.mdx diff --git a/versioned_docs/version-v5/angular/overview.md b/versioned_docs/version-v5/angular/overview.mdx similarity index 100% rename from versioned_docs/version-v5/angular/overview.md rename to versioned_docs/version-v5/angular/overview.mdx diff --git a/versioned_docs/version-v5/angular/performance.md b/versioned_docs/version-v5/angular/performance.mdx similarity index 98% rename from versioned_docs/version-v5/angular/performance.md rename to versioned_docs/version-v5/angular/performance.mdx index 1a4369e3f82..a215e15dcfc 100644 --- a/versioned_docs/version-v5/angular/performance.md +++ b/versioned_docs/version-v5/angular/performance.mdx @@ -49,7 +49,7 @@ For more information on how Angular manages change propagation with `ngFor` see ## From the Community - +{/* cspell:disable */} [High Performance Animations in Ionic](https://www.joshmorony.com/high-performance-animations-in-ionic/) - Josh Morony @@ -59,7 +59,7 @@ For more information on how Angular manages change propagation with `ngFor` see [Ionic Framework is Fast (But Your Code Might Not Be)](https://www.joshmorony.com/ionic-framework-is-fast-but-your-code-might-not-be/) - Josh Morony - +{/* cspell:enable */} :::note Do you have a guide you'd like to share? Click the _Edit this page_ button below. diff --git a/versioned_docs/version-v5/angular/platform.md b/versioned_docs/version-v5/angular/platform.mdx similarity index 100% rename from versioned_docs/version-v5/angular/platform.md rename to versioned_docs/version-v5/angular/platform.mdx diff --git a/versioned_docs/version-v5/angular/pwa.md b/versioned_docs/version-v5/angular/pwa.mdx similarity index 100% rename from versioned_docs/version-v5/angular/pwa.md rename to versioned_docs/version-v5/angular/pwa.mdx diff --git a/versioned_docs/version-v5/angular/storage.md b/versioned_docs/version-v5/angular/storage.mdx similarity index 100% rename from versioned_docs/version-v5/angular/storage.md rename to versioned_docs/version-v5/angular/storage.mdx diff --git a/versioned_docs/version-v5/angular/testing.md b/versioned_docs/version-v5/angular/testing.mdx similarity index 100% rename from versioned_docs/version-v5/angular/testing.md rename to versioned_docs/version-v5/angular/testing.mdx diff --git a/versioned_docs/version-v5/angular/your-first-app.md b/versioned_docs/version-v5/angular/your-first-app.mdx similarity index 100% rename from versioned_docs/version-v5/angular/your-first-app.md rename to versioned_docs/version-v5/angular/your-first-app.mdx diff --git a/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md b/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.mdx similarity index 100% rename from versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md rename to versioned_docs/version-v5/angular/your-first-app/2-taking-photos.mdx diff --git a/versioned_docs/version-v5/angular/your-first-app/3-saving-photos.md b/versioned_docs/version-v5/angular/your-first-app/3-saving-photos.mdx similarity index 100% rename from versioned_docs/version-v5/angular/your-first-app/3-saving-photos.md rename to versioned_docs/version-v5/angular/your-first-app/3-saving-photos.mdx diff --git a/versioned_docs/version-v5/angular/your-first-app/4-loading-photos.md b/versioned_docs/version-v5/angular/your-first-app/4-loading-photos.mdx similarity index 100% rename from versioned_docs/version-v5/angular/your-first-app/4-loading-photos.md rename to versioned_docs/version-v5/angular/your-first-app/4-loading-photos.mdx diff --git a/versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.md b/versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.mdx similarity index 100% rename from versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.md rename to versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.mdx diff --git a/versioned_docs/version-v5/angular/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v5/angular/your-first-app/6-deploying-mobile.mdx similarity index 100% rename from versioned_docs/version-v5/angular/your-first-app/6-deploying-mobile.md rename to versioned_docs/version-v5/angular/your-first-app/6-deploying-mobile.mdx diff --git a/versioned_docs/version-v5/angular/your-first-app/7-live-reload.md b/versioned_docs/version-v5/angular/your-first-app/7-live-reload.mdx similarity index 100% rename from versioned_docs/version-v5/angular/your-first-app/7-live-reload.md rename to versioned_docs/version-v5/angular/your-first-app/7-live-reload.mdx diff --git a/versioned_docs/version-v5/api/action-sheet.md b/versioned_docs/version-v5/api/action-sheet.mdx similarity index 100% rename from versioned_docs/version-v5/api/action-sheet.md rename to versioned_docs/version-v5/api/action-sheet.mdx diff --git a/versioned_docs/version-v5/api/alert.md b/versioned_docs/version-v5/api/alert.mdx similarity index 100% rename from versioned_docs/version-v5/api/alert.md rename to versioned_docs/version-v5/api/alert.mdx diff --git a/versioned_docs/version-v5/api/app.md b/versioned_docs/version-v5/api/app.mdx similarity index 100% rename from versioned_docs/version-v5/api/app.md rename to versioned_docs/version-v5/api/app.mdx diff --git a/versioned_docs/version-v5/api/avatar.md b/versioned_docs/version-v5/api/avatar.mdx similarity index 100% rename from versioned_docs/version-v5/api/avatar.md rename to versioned_docs/version-v5/api/avatar.mdx diff --git a/versioned_docs/version-v5/api/back-button.md b/versioned_docs/version-v5/api/back-button.mdx similarity index 100% rename from versioned_docs/version-v5/api/back-button.md rename to versioned_docs/version-v5/api/back-button.mdx diff --git a/versioned_docs/version-v5/api/backdrop.md b/versioned_docs/version-v5/api/backdrop.mdx similarity index 100% rename from versioned_docs/version-v5/api/backdrop.md rename to versioned_docs/version-v5/api/backdrop.mdx diff --git a/versioned_docs/version-v5/api/badge.md b/versioned_docs/version-v5/api/badge.mdx similarity index 100% rename from versioned_docs/version-v5/api/badge.md rename to versioned_docs/version-v5/api/badge.mdx diff --git a/versioned_docs/version-v5/api/button.md b/versioned_docs/version-v5/api/button.mdx similarity index 100% rename from versioned_docs/version-v5/api/button.md rename to versioned_docs/version-v5/api/button.mdx diff --git a/versioned_docs/version-v5/api/buttons.md b/versioned_docs/version-v5/api/buttons.mdx similarity index 100% rename from versioned_docs/version-v5/api/buttons.md rename to versioned_docs/version-v5/api/buttons.mdx diff --git a/versioned_docs/version-v5/api/card-content.md b/versioned_docs/version-v5/api/card-content.mdx similarity index 100% rename from versioned_docs/version-v5/api/card-content.md rename to versioned_docs/version-v5/api/card-content.mdx diff --git a/versioned_docs/version-v5/api/card-header.md b/versioned_docs/version-v5/api/card-header.mdx similarity index 100% rename from versioned_docs/version-v5/api/card-header.md rename to versioned_docs/version-v5/api/card-header.mdx diff --git a/versioned_docs/version-v5/api/card-subtitle.md b/versioned_docs/version-v5/api/card-subtitle.mdx similarity index 100% rename from versioned_docs/version-v5/api/card-subtitle.md rename to versioned_docs/version-v5/api/card-subtitle.mdx diff --git a/versioned_docs/version-v5/api/card-title.md b/versioned_docs/version-v5/api/card-title.mdx similarity index 100% rename from versioned_docs/version-v5/api/card-title.md rename to versioned_docs/version-v5/api/card-title.mdx diff --git a/versioned_docs/version-v5/api/card.md b/versioned_docs/version-v5/api/card.mdx similarity index 100% rename from versioned_docs/version-v5/api/card.md rename to versioned_docs/version-v5/api/card.mdx diff --git a/versioned_docs/version-v5/api/checkbox.md b/versioned_docs/version-v5/api/checkbox.mdx similarity index 100% rename from versioned_docs/version-v5/api/checkbox.md rename to versioned_docs/version-v5/api/checkbox.mdx diff --git a/versioned_docs/version-v5/api/chip.md b/versioned_docs/version-v5/api/chip.mdx similarity index 100% rename from versioned_docs/version-v5/api/chip.md rename to versioned_docs/version-v5/api/chip.mdx diff --git a/versioned_docs/version-v5/api/col.md b/versioned_docs/version-v5/api/col.mdx similarity index 92% rename from versioned_docs/version-v5/api/col.md rename to versioned_docs/version-v5/api/col.mdx index 5885753ccb1..76f38559c77 100644 --- a/versioned_docs/version-v5/api/col.md +++ b/versioned_docs/version-v5/api/col.mdx @@ -14,7 +14,7 @@ import Slots from '@ionic-internal/component-api/v5/col/slots.md'; # ion-col -Columns are cellular components of the [grid](grid.md) system and go inside of a [row](row.md). +Columns are cellular components of the [grid](grid.mdx) system and go inside of a [row](row.mdx). They will expand to fill their row. All content within a grid should go inside of a column. See [Grid Layout](../layout/grid.md) for more information. diff --git a/versioned_docs/version-v5/api/content.md b/versioned_docs/version-v5/api/content.mdx similarity index 100% rename from versioned_docs/version-v5/api/content.md rename to versioned_docs/version-v5/api/content.mdx diff --git a/versioned_docs/version-v5/api/datetime.md b/versioned_docs/version-v5/api/datetime.mdx similarity index 100% rename from versioned_docs/version-v5/api/datetime.md rename to versioned_docs/version-v5/api/datetime.mdx diff --git a/versioned_docs/version-v5/api/fab-button.md b/versioned_docs/version-v5/api/fab-button.mdx similarity index 100% rename from versioned_docs/version-v5/api/fab-button.md rename to versioned_docs/version-v5/api/fab-button.mdx diff --git a/versioned_docs/version-v5/api/fab-list.md b/versioned_docs/version-v5/api/fab-list.mdx similarity index 100% rename from versioned_docs/version-v5/api/fab-list.md rename to versioned_docs/version-v5/api/fab-list.mdx diff --git a/versioned_docs/version-v5/api/fab.md b/versioned_docs/version-v5/api/fab.mdx similarity index 99% rename from versioned_docs/version-v5/api/fab.md rename to versioned_docs/version-v5/api/fab.mdx index 722f8bb7634..c2dcb2e277b 100644 --- a/versioned_docs/version-v5/api/fab.md +++ b/versioned_docs/version-v5/api/fab.mdx @@ -18,7 +18,7 @@ import Slots from '@ionic-internal/component-api/v5/fab/slots.md'; # ion-fab -Fabs are container elements that contain one or more fab buttons. They should be placed in a fixed position that does not scroll with the content. Fab should have one main fab-button. Fabs can also contain fab-lists which contain related buttons that show when the main fab button is clicked. The same fab container can contain several [fab-list](fab-list.md) elements with different side values. +Fabs are container elements that contain one or more fab buttons. They should be placed in a fixed position that does not scroll with the content. Fab should have one main fab-button. Fabs can also contain fab-lists which contain related buttons that show when the main fab button is clicked. The same fab container can contain several [fab-list](fab-list.mdx) elements with different side values. ## Usage diff --git a/versioned_docs/version-v5/api/footer.md b/versioned_docs/version-v5/api/footer.mdx similarity index 100% rename from versioned_docs/version-v5/api/footer.md rename to versioned_docs/version-v5/api/footer.mdx diff --git a/versioned_docs/version-v5/api/grid.md b/versioned_docs/version-v5/api/grid.mdx similarity index 98% rename from versioned_docs/version-v5/api/grid.md rename to versioned_docs/version-v5/api/grid.mdx index e5d5b74338d..1c486c531f6 100644 --- a/versioned_docs/version-v5/api/grid.md +++ b/versioned_docs/version-v5/api/grid.mdx @@ -20,7 +20,7 @@ import Slots from '@ionic-internal/component-api/v5/grid/slots.md'; 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. +It is composed of three units — a grid, [row(s)](row.mdx) and [column(s)](col.mdx). 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. See the [Responsive Grid documentation](../layout/grid.md) for more information. diff --git a/versioned_docs/version-v5/api/header.md b/versioned_docs/version-v5/api/header.mdx similarity index 100% rename from versioned_docs/version-v5/api/header.md rename to versioned_docs/version-v5/api/header.mdx diff --git a/versioned_docs/version-v5/api/img.md b/versioned_docs/version-v5/api/img.mdx similarity index 100% rename from versioned_docs/version-v5/api/img.md rename to versioned_docs/version-v5/api/img.mdx diff --git a/versioned_docs/version-v5/api/infinite-scroll-content.md b/versioned_docs/version-v5/api/infinite-scroll-content.mdx similarity index 100% rename from versioned_docs/version-v5/api/infinite-scroll-content.md rename to versioned_docs/version-v5/api/infinite-scroll-content.mdx diff --git a/versioned_docs/version-v5/api/infinite-scroll.md b/versioned_docs/version-v5/api/infinite-scroll.mdx similarity index 100% rename from versioned_docs/version-v5/api/infinite-scroll.md rename to versioned_docs/version-v5/api/infinite-scroll.mdx diff --git a/versioned_docs/version-v5/api/input.md b/versioned_docs/version-v5/api/input.mdx similarity index 100% rename from versioned_docs/version-v5/api/input.md rename to versioned_docs/version-v5/api/input.mdx diff --git a/versioned_docs/version-v5/api/item-divider.md b/versioned_docs/version-v5/api/item-divider.mdx similarity index 100% rename from versioned_docs/version-v5/api/item-divider.md rename to versioned_docs/version-v5/api/item-divider.mdx diff --git a/versioned_docs/version-v5/api/item-group.md b/versioned_docs/version-v5/api/item-group.mdx similarity index 100% rename from versioned_docs/version-v5/api/item-group.md rename to versioned_docs/version-v5/api/item-group.mdx diff --git a/versioned_docs/version-v5/api/item-option.md b/versioned_docs/version-v5/api/item-option.mdx similarity index 100% rename from versioned_docs/version-v5/api/item-option.md rename to versioned_docs/version-v5/api/item-option.mdx diff --git a/versioned_docs/version-v5/api/item-options.md b/versioned_docs/version-v5/api/item-options.mdx similarity index 100% rename from versioned_docs/version-v5/api/item-options.md rename to versioned_docs/version-v5/api/item-options.mdx diff --git a/versioned_docs/version-v5/api/item-sliding.md b/versioned_docs/version-v5/api/item-sliding.mdx similarity index 98% rename from versioned_docs/version-v5/api/item-sliding.md rename to versioned_docs/version-v5/api/item-sliding.mdx index f9c56ffb372..aad3f43dce4 100644 --- a/versioned_docs/version-v5/api/item-sliding.md +++ b/versioned_docs/version-v5/api/item-sliding.mdx @@ -16,15 +16,15 @@ import Slots from '@ionic-internal/component-api/v5/item-sliding/slots.md'; # ion-item-sliding -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. +A sliding item contains an item that can be dragged to reveal buttons. It requires an [item](item.mdx) component as a child. All options to reveal should be placed in the [item options](item-options.mdx) 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. +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.mdx) 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. +By default if an icon is placed with text in the [item option](item-option.mdx), 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. | Slot | Description | | ----------- | ------------------------------------------------------------------------ | diff --git a/versioned_docs/version-v5/api/item.md b/versioned_docs/version-v5/api/item.mdx similarity index 99% rename from versioned_docs/version-v5/api/item.md rename to versioned_docs/version-v5/api/item.mdx index 7e2c7205d1c..8a9eed17088 100644 --- a/versioned_docs/version-v5/api/item.md +++ b/versioned_docs/version-v5/api/item.mdx @@ -26,9 +26,7 @@ An item is considered "clickable" if it has an `href` or `button` property set. By default [clickable items](#clickable-items) will display a right arrow icon on `ios` mode. To hide the right arrow icon on clickable elements, set the `detail` property to `false`. To show the right arrow icon on an item that doesn't display it naturally, set the `detail` property to `true`. - +See the [theming documentation](../theming/css-variables.md) for more information. */} ## Item Placement diff --git a/versioned_docs/version-v5/api/label.md b/versioned_docs/version-v5/api/label.mdx similarity index 100% rename from versioned_docs/version-v5/api/label.md rename to versioned_docs/version-v5/api/label.mdx diff --git a/versioned_docs/version-v5/api/list-header.md b/versioned_docs/version-v5/api/list-header.mdx similarity index 100% rename from versioned_docs/version-v5/api/list-header.md rename to versioned_docs/version-v5/api/list-header.mdx diff --git a/versioned_docs/version-v5/api/list.md b/versioned_docs/version-v5/api/list.mdx similarity index 100% rename from versioned_docs/version-v5/api/list.md rename to versioned_docs/version-v5/api/list.mdx diff --git a/versioned_docs/version-v5/api/loading.md b/versioned_docs/version-v5/api/loading.mdx similarity index 100% rename from versioned_docs/version-v5/api/loading.md rename to versioned_docs/version-v5/api/loading.mdx diff --git a/versioned_docs/version-v5/api/menu-button.md b/versioned_docs/version-v5/api/menu-button.mdx similarity index 100% rename from versioned_docs/version-v5/api/menu-button.md rename to versioned_docs/version-v5/api/menu-button.mdx diff --git a/versioned_docs/version-v5/api/menu-toggle.md b/versioned_docs/version-v5/api/menu-toggle.mdx similarity index 100% rename from versioned_docs/version-v5/api/menu-toggle.md rename to versioned_docs/version-v5/api/menu-toggle.mdx diff --git a/versioned_docs/version-v5/api/menu.md b/versioned_docs/version-v5/api/menu.mdx similarity index 100% rename from versioned_docs/version-v5/api/menu.md rename to versioned_docs/version-v5/api/menu.mdx diff --git a/versioned_docs/version-v5/api/modal.md b/versioned_docs/version-v5/api/modal.mdx similarity index 100% rename from versioned_docs/version-v5/api/modal.md rename to versioned_docs/version-v5/api/modal.mdx diff --git a/versioned_docs/version-v5/api/nav-link.md b/versioned_docs/version-v5/api/nav-link.mdx similarity index 100% rename from versioned_docs/version-v5/api/nav-link.md rename to versioned_docs/version-v5/api/nav-link.mdx diff --git a/versioned_docs/version-v5/api/nav.md b/versioned_docs/version-v5/api/nav.mdx similarity index 100% rename from versioned_docs/version-v5/api/nav.md rename to versioned_docs/version-v5/api/nav.mdx diff --git a/versioned_docs/version-v5/api/note.md b/versioned_docs/version-v5/api/note.mdx similarity index 100% rename from versioned_docs/version-v5/api/note.md rename to versioned_docs/version-v5/api/note.mdx diff --git a/versioned_docs/version-v5/api/picker.md b/versioned_docs/version-v5/api/picker.mdx similarity index 100% rename from versioned_docs/version-v5/api/picker.md rename to versioned_docs/version-v5/api/picker.mdx diff --git a/versioned_docs/version-v5/api/popover.md b/versioned_docs/version-v5/api/popover.mdx similarity index 100% rename from versioned_docs/version-v5/api/popover.md rename to versioned_docs/version-v5/api/popover.mdx diff --git a/versioned_docs/version-v5/api/progress-bar.md b/versioned_docs/version-v5/api/progress-bar.mdx similarity index 100% rename from versioned_docs/version-v5/api/progress-bar.md rename to versioned_docs/version-v5/api/progress-bar.mdx diff --git a/versioned_docs/version-v5/api/radio-group.md b/versioned_docs/version-v5/api/radio-group.mdx similarity index 98% rename from versioned_docs/version-v5/api/radio-group.md rename to versioned_docs/version-v5/api/radio-group.mdx index 3cbaf9cd831..b75234a15a6 100644 --- a/versioned_docs/version-v5/api/radio-group.md +++ b/versioned_docs/version-v5/api/radio-group.mdx @@ -14,7 +14,7 @@ import Slots from '@ionic-internal/component-api/v5/radio-group/slots.md'; # ion-radio-group -A radio group is a group of [radio buttons](radio.md). It allows +A radio group is a group of [radio buttons](radio.mdx). It allows 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. diff --git a/versioned_docs/version-v5/api/radio.md b/versioned_docs/version-v5/api/radio.mdx similarity index 97% rename from versioned_docs/version-v5/api/radio.md rename to versioned_docs/version-v5/api/radio.mdx index 8f2522e953a..bf8e2d38bea 100644 --- a/versioned_docs/version-v5/api/radio.md +++ b/versioned_docs/version-v5/api/radio.mdx @@ -16,7 +16,7 @@ import Slots from '@ionic-internal/component-api/v5/radio/slots.md'; # ion-radio -Radios should be used inside of an [`ion-radio-group`](radio-group.md). Pressing on a radio will check it. They can also be checked programmatically by setting the value property of the parent `ion-radio-group` to the value of the radio. +Radios should be used inside of an [`ion-radio-group`](radio-group.mdx). Pressing on a radio will check it. They can also be checked programmatically by setting the value property of the parent `ion-radio-group` to the value of the radio. 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. diff --git a/versioned_docs/version-v5/api/range.md b/versioned_docs/version-v5/api/range.mdx similarity index 100% rename from versioned_docs/version-v5/api/range.md rename to versioned_docs/version-v5/api/range.mdx diff --git a/versioned_docs/version-v5/api/refresher-content.md b/versioned_docs/version-v5/api/refresher-content.mdx similarity index 100% rename from versioned_docs/version-v5/api/refresher-content.md rename to versioned_docs/version-v5/api/refresher-content.mdx diff --git a/versioned_docs/version-v5/api/refresher.md b/versioned_docs/version-v5/api/refresher.mdx similarity index 96% rename from versioned_docs/version-v5/api/refresher.md rename to versioned_docs/version-v5/api/refresher.mdx index 76f40d3715c..424d20ac4cc 100644 --- a/versioned_docs/version-v5/api/refresher.md +++ b/versioned_docs/version-v5/api/refresher.mdx @@ -32,13 +32,13 @@ Certain properties such as `pullMin` and `snapbackDuration` are not compatible b ### iOS Usage -Using the iOS native `ion-refresher` requires setting the `pullingIcon` property on `ion-refresher-content` to the value of one of the available spinners. See the [Spinner Documentation](spinner.md#properties) for accepted values. The `pullingIcon` defaults to the `lines` spinner on iOS. The spinner tick marks will be progressively shown as the user pulls down on the page. +Using the iOS native `ion-refresher` requires setting the `pullingIcon` property on `ion-refresher-content` to the value of one of the available spinners. See the [Spinner Documentation](spinner.mdx#properties) for accepted values. The `pullingIcon` defaults to the `lines` spinner on iOS. The spinner tick marks will be progressively shown as the user pulls down on the page. The iOS native `ion-refresher` relies on rubber band scrolling in order to work properly and is only compatible with iOS devices as a result. We provide a fallback refresher for apps running in iOS mode on devices that do not support rubber band scrolling. ### Android Usage -Using the MD native `ion-refresher` requires setting the `pullingIcon` property on `ion-refresher-content` to the value of one of the available spinners. See the [ion-spinner Documentation](spinner.md#properties) for accepted values. `pullingIcon` defaults to the `circular` spinner on MD. +Using the MD native `ion-refresher` requires setting the `pullingIcon` property on `ion-refresher-content` to the value of one of the available spinners. See the [ion-spinner Documentation](spinner.mdx#properties) for accepted values. `pullingIcon` defaults to the `circular` spinner on MD. ## Usage diff --git a/versioned_docs/version-v5/api/reorder-group.md b/versioned_docs/version-v5/api/reorder-group.mdx similarity index 99% rename from versioned_docs/version-v5/api/reorder-group.md rename to versioned_docs/version-v5/api/reorder-group.mdx index 9d605927575..4713d255681 100644 --- a/versioned_docs/version-v5/api/reorder-group.md +++ b/versioned_docs/version-v5/api/reorder-group.mdx @@ -14,7 +14,7 @@ import Slots from '@ionic-internal/component-api/v5/reorder-group/slots.md'; # ion-reorder-group -The reorder group is a wrapper component for items using the `ion-reorder` component. See the [Reorder documentation](reorder.md) for further information about the anchor component that is used to drag items within the `ion-reorder-group`. +The reorder group is a wrapper component for items using the `ion-reorder` component. See the [Reorder documentation](reorder.mdx) for further information about the anchor component that is used to drag items within the `ion-reorder-group`. Once the user drags an item and drops it in a new position, the `ionItemReorder` event is dispatched. A handler for it should be implemented that calls the `complete()` method. diff --git a/versioned_docs/version-v5/api/reorder.md b/versioned_docs/version-v5/api/reorder.mdx similarity index 99% rename from versioned_docs/version-v5/api/reorder.md rename to versioned_docs/version-v5/api/reorder.mdx index 04d5d40b244..3378fcd587d 100644 --- a/versioned_docs/version-v5/api/reorder.md +++ b/versioned_docs/version-v5/api/reorder.mdx @@ -18,7 +18,7 @@ import Slots from '@ionic-internal/component-api/v5/reorder/slots.md'; Reorder is a component that allows an item in a group of items to be dragged to change its order within that group. It must be used within an `ion-reorder-group` to provide a visual drag and drop interface. -`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. +`ion-reorder` is the anchor used to drag and drop the items inside of the `ion-reorder-group`. See the [Reorder Group](reorder-group.mdx) for more information on how to complete the reorder operation. ## Usage diff --git a/versioned_docs/version-v5/api/ripple-effect.md b/versioned_docs/version-v5/api/ripple-effect.mdx similarity index 100% rename from versioned_docs/version-v5/api/ripple-effect.md rename to versioned_docs/version-v5/api/ripple-effect.mdx diff --git a/versioned_docs/version-v5/api/route-redirect.md b/versioned_docs/version-v5/api/route-redirect.mdx similarity index 98% rename from versioned_docs/version-v5/api/route-redirect.md rename to versioned_docs/version-v5/api/route-redirect.mdx index 867f8908a8e..b6a349cc85e 100644 --- a/versioned_docs/version-v5/api/route-redirect.md +++ b/versioned_docs/version-v5/api/route-redirect.mdx @@ -16,7 +16,7 @@ import Slots from '@ionic-internal/component-api/v5/route-redirect/slots.md'; 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. +> Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.mdx) and the Angular router. The route redirect has two configurable properties: diff --git a/versioned_docs/version-v5/api/route.md b/versioned_docs/version-v5/api/route.mdx similarity index 99% rename from versioned_docs/version-v5/api/route.md rename to versioned_docs/version-v5/api/route.mdx index 437fb32ef7b..d176e7671bc 100644 --- a/versioned_docs/version-v5/api/route.md +++ b/versioned_docs/version-v5/api/route.mdx @@ -16,7 +16,7 @@ import Slots from '@ionic-internal/component-api/v5/route/slots.md'; The route component takes a component and renders it when the Browser URL matches the url property. -> 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. +> Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.mdx) and the Angular router. ## Navigation Hooks diff --git a/versioned_docs/version-v5/api/router-link.md b/versioned_docs/version-v5/api/router-link.mdx similarity index 100% rename from versioned_docs/version-v5/api/router-link.md rename to versioned_docs/version-v5/api/router-link.mdx diff --git a/versioned_docs/version-v5/api/router-outlet.md b/versioned_docs/version-v5/api/router-outlet.mdx similarity index 97% rename from versioned_docs/version-v5/api/router-outlet.md rename to versioned_docs/version-v5/api/router-outlet.mdx index 5447b99a21c..f0e85bfece1 100644 --- a/versioned_docs/version-v5/api/router-outlet.md +++ b/versioned_docs/version-v5/api/router-outlet.mdx @@ -16,7 +16,7 @@ import Slots from '@ionic-internal/component-api/v5/router-outlet/slots.md'; Router outlet is a component used in routing within an Angular or Vue app. It behaves in a similar way to Angular's built-in router outlet component and Vue's router view component, but contains the logic for providing a stacked navigation, and animating views in and out. -> Note: this component should only be used with Angular and Vue projects. For vanilla or Stencil JavaScript projects, use [`ion-router`](router.md) and [`ion-route`](route.md). +> Note: this component should only be used with Angular and Vue projects. For vanilla or Stencil JavaScript projects, use [`ion-router`](router.mdx) and [`ion-route`](route.mdx). Although router outlet has methods for navigating around, it's recommended to use the navigation methods in your framework's router. diff --git a/versioned_docs/version-v5/api/router.md b/versioned_docs/version-v5/api/router.mdx similarity index 98% rename from versioned_docs/version-v5/api/router.md rename to versioned_docs/version-v5/api/router.mdx index cf6214c11b2..6ddbb94e62c 100644 --- a/versioned_docs/version-v5/api/router.md +++ b/versioned_docs/version-v5/api/router.mdx @@ -18,7 +18,7 @@ import Slots from '@ionic-internal/component-api/v5/router/slots.md'; The router is a component for handling routing inside vanilla and Stencil JavaScript projects. -> 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. +> Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.mdx) and the Angular router. Apps should have a single `ion-router` component in the codebase. This component controls all interactions with the browser history and it aggregates updates through an event system. diff --git a/versioned_docs/version-v5/api/row.md b/versioned_docs/version-v5/api/row.mdx similarity index 87% rename from versioned_docs/version-v5/api/row.md rename to versioned_docs/version-v5/api/row.mdx index 0b655a677eb..15c5d725e3c 100644 --- a/versioned_docs/version-v5/api/row.md +++ b/versioned_docs/version-v5/api/row.mdx @@ -14,8 +14,8 @@ import Slots from '@ionic-internal/component-api/v5/row/slots.md'; # ion-row -Rows are horizontal components of the [grid](grid.md) system and contain varying numbers of -[columns](col.md). They ensure the columns are positioned properly. +Rows are horizontal components of the [grid](grid.mdx) system and contain varying numbers of +[columns](col.mdx). They ensure the columns are positioned properly. See [Grid Layout](../layout/grid.md) for more information. diff --git a/versioned_docs/version-v5/api/searchbar.md b/versioned_docs/version-v5/api/searchbar.mdx similarity index 100% rename from versioned_docs/version-v5/api/searchbar.md rename to versioned_docs/version-v5/api/searchbar.mdx diff --git a/versioned_docs/version-v5/api/segment-button.md b/versioned_docs/version-v5/api/segment-button.mdx similarity index 99% rename from versioned_docs/version-v5/api/segment-button.md rename to versioned_docs/version-v5/api/segment-button.mdx index 95edd0a2953..8464a37bc9c 100644 --- a/versioned_docs/version-v5/api/segment-button.md +++ b/versioned_docs/version-v5/api/segment-button.mdx @@ -14,7 +14,7 @@ import Slots from '@ionic-internal/component-api/v5/segment-button/slots.md'; # ion-segment-button -Segment buttons are groups of related buttons inside of a [Segment](segment.md). They are displayed in a horizontal row. A segment button can be checked by default by setting the `value` of the segment to the `value` of the segment button. Only one segment button can be selected at a time. +Segment buttons are groups of related buttons inside of a [Segment](segment.mdx). They are displayed in a horizontal row. A segment button can be checked by default by setting the `value` of the segment to the `value` of the segment button. Only one segment button can be selected at a time. ## Usage diff --git a/versioned_docs/version-v5/api/segment.md b/versioned_docs/version-v5/api/segment.mdx similarity index 100% rename from versioned_docs/version-v5/api/segment.md rename to versioned_docs/version-v5/api/segment.mdx diff --git a/versioned_docs/version-v5/api/select-option.md b/versioned_docs/version-v5/api/select-option.mdx similarity index 99% rename from versioned_docs/version-v5/api/select-option.md rename to versioned_docs/version-v5/api/select-option.mdx index 367ecf667d6..0c0af93e2eb 100644 --- a/versioned_docs/version-v5/api/select-option.md +++ b/versioned_docs/version-v5/api/select-option.mdx @@ -16,7 +16,7 @@ import Slots from '@ionic-internal/component-api/v5/select-option/slots.md'; # ion-select-option -Select Options are components that are child elements of a Select. Each option defined is passed and displayed in the Select dialog. For more information, see the [Select docs](select.md). +Select Options are components that are child elements of a Select. Each option defined is passed and displayed in the Select dialog. For more information, see the [Select docs](select.mdx). ## Customization diff --git a/versioned_docs/version-v5/api/select.md b/versioned_docs/version-v5/api/select.mdx similarity index 98% rename from versioned_docs/version-v5/api/select.md rename to versioned_docs/version-v5/api/select.mdx index 4cef9b394d1..57ae5dc796c 100644 --- a/versioned_docs/version-v5/api/select.md +++ b/versioned_docs/version-v5/api/select.mdx @@ -24,7 +24,7 @@ If `value` is set on the ``, the selected option will be chosen base ## Interfaces -By default, select uses [ion-alert](alert.md) to open up the overlay of options in an alert. The interface can be changed to use [ion-action-sheet](action-sheet.md) or [ion-popover](popover.md) by passing `action-sheet` or `popover`, respectively, to the `interface` property. Read on to the other sections for the limitations of the different interfaces. +By default, select uses [ion-alert](alert.mdx) to open up the overlay of options in an alert. The interface can be changed to use [ion-action-sheet](action-sheet.mdx) or [ion-popover](popover.mdx) by passing `action-sheet` or `popover`, respectively, to the `interface` property. Read on to the other sections for the limitations of the different interfaces. ## Single Selection @@ -52,7 +52,7 @@ The `action-sheet` and `popover` interfaces do not have an `OK` button, clicking Since select uses the alert, action sheet and popover interfaces, options can be passed to these components through the `interfaceOptions` property. This can be used to pass a custom header, subheader, css class, and more. -See the [ion-alert docs](alert.md), [ion-action-sheet docs](action-sheet.md), and [ion-popover docs](popover.md) for the properties that each interface accepts. +See the [ion-alert docs](alert.mdx), [ion-action-sheet docs](action-sheet.mdx), and [ion-popover docs](popover.mdx) for the properties that each interface accepts. Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface. @@ -127,11 +127,11 @@ Notice that by using `::part`, any CSS property on the element can be targeted. Customizing the interface dialog should be done by following the Customization section in that interface's documentation: -- [Alert Customization](alert.md#customization) -- [Action Sheet Customization](action-sheet.md#customization) -- [Popover Customization](popover.md#customization) +- [Alert Customization](alert.mdx#customization) +- [Action Sheet Customization](action-sheet.mdx#customization) +- [Popover Customization](popover.mdx#customization) -However, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, see the [Select Options documentation](select-option.md) for usage examples of customizing options. +However, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, see the [Select Options documentation](select-option.mdx) for usage examples of customizing options. ## Usage diff --git a/versioned_docs/version-v5/api/skeleton-text.md b/versioned_docs/version-v5/api/skeleton-text.mdx similarity index 100% rename from versioned_docs/version-v5/api/skeleton-text.md rename to versioned_docs/version-v5/api/skeleton-text.mdx diff --git a/versioned_docs/version-v5/api/slide.md b/versioned_docs/version-v5/api/slide.mdx similarity index 84% rename from versioned_docs/version-v5/api/slide.md rename to versioned_docs/version-v5/api/slide.mdx index 83f3d3dc01b..a502a738417 100644 --- a/versioned_docs/version-v5/api/slide.md +++ b/versioned_docs/version-v5/api/slide.mdx @@ -14,11 +14,11 @@ import Slots from '@ionic-internal/component-api/v5/slide/slots.md'; # ion-slide -The Slide component is a child component of [Slides](slides.md). The template +The Slide component is a child component of [Slides](slides.mdx). The template should be written as `ion-slide`. Any slide content should be written -in this component and it should be used in conjunction with [Slides](slides.md). +in this component and it should be used in conjunction with [Slides](slides.mdx). -See the [Slides API Docs](slides.md) for more usage information. +See the [Slides API Docs](slides.mdx) for more usage information. ## Properties diff --git a/versioned_docs/version-v5/api/slides.md b/versioned_docs/version-v5/api/slides.mdx similarity index 99% rename from versioned_docs/version-v5/api/slides.md rename to versioned_docs/version-v5/api/slides.mdx index 76d810ee4a4..f3dd1716ed5 100644 --- a/versioned_docs/version-v5/api/slides.md +++ b/versioned_docs/version-v5/api/slides.mdx @@ -19,7 +19,7 @@ import Slots from '@ionic-internal/component-api/v5/slides/slots.md'; # ion-slides The Slides component is a multi-section container. Each section can be swiped -or dragged between. It contains any number of [Slide](slide.md) components. +or dragged between. It contains any number of [Slide](slide.mdx) components. Adopted from Swiper.js: The most modern mobile touch slider and framework with hardware accelerated transitions. diff --git a/versioned_docs/version-v5/api/spinner.md b/versioned_docs/version-v5/api/spinner.mdx similarity index 100% rename from versioned_docs/version-v5/api/spinner.md rename to versioned_docs/version-v5/api/spinner.mdx diff --git a/versioned_docs/version-v5/api/split-pane.md b/versioned_docs/version-v5/api/split-pane.mdx similarity index 100% rename from versioned_docs/version-v5/api/split-pane.md rename to versioned_docs/version-v5/api/split-pane.mdx diff --git a/versioned_docs/version-v5/api/tab-bar.md b/versioned_docs/version-v5/api/tab-bar.mdx similarity index 96% rename from versioned_docs/version-v5/api/tab-bar.md rename to versioned_docs/version-v5/api/tab-bar.mdx index 002dad4e8bf..47553b1ee71 100644 --- a/versioned_docs/version-v5/api/tab-bar.md +++ b/versioned_docs/version-v5/api/tab-bar.mdx @@ -14,7 +14,7 @@ import Slots from '@ionic-internal/component-api/v5/tab-bar/slots.md'; # ion-tab-bar -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). +The tab bar is a UI component that contains a set of [tab buttons](tab-button.mdx). A tab bar must be provided inside of [tabs](tabs.mdx) to communicate with each [tab](tab.mdx). ## Usage diff --git a/versioned_docs/version-v5/api/tab-button.md b/versioned_docs/version-v5/api/tab-button.mdx similarity index 96% rename from versioned_docs/version-v5/api/tab-button.md rename to versioned_docs/version-v5/api/tab-button.mdx index 83100e90adb..089cc9c7078 100644 --- a/versioned_docs/version-v5/api/tab-button.md +++ b/versioned_docs/version-v5/api/tab-button.mdx @@ -14,9 +14,9 @@ import Slots from '@ionic-internal/component-api/v5/tab-button/slots.md'; # ion-tab-button -A tab button is a UI component that is placed inside of a [tab bar](tab-bar.md). The tab button can specify the layout of the icon and label and connect to a [tab view](tab.md). +A tab button is a UI component that is placed inside of a [tab bar](tab-bar.mdx). The tab button can specify the layout of the icon and label and connect to a [tab view](tab.mdx). -See the [tabs documentation](tabs.md) for more details on configuring tabs. +See the [tabs documentation](tabs.mdx) for more details on configuring tabs. ## Usage diff --git a/versioned_docs/version-v5/api/tab.md b/versioned_docs/version-v5/api/tab.mdx similarity index 75% rename from versioned_docs/version-v5/api/tab.md rename to versioned_docs/version-v5/api/tab.mdx index 9f54b12145a..5a2a5ff2976 100644 --- a/versioned_docs/version-v5/api/tab.md +++ b/versioned_docs/version-v5/api/tab.mdx @@ -14,11 +14,11 @@ import Slots from '@ionic-internal/component-api/v5/tab/slots.md'; # ion-tab -The tab component is a child component of [tabs](tabs.md). Each tab can contain a top level navigation stack for an app or a single view. An app can have many tabs, all with their own independent navigation. +The tab component is a child component of [tabs](tabs.mdx). Each tab can contain a top level navigation stack for an app or a single view. An app can have many tabs, all with their own independent navigation. > Note: This component should only be used with vanilla JavaScript projects. For Angular, React, and Vue apps you do not need to use `ion-tab` to declare your tab components. -See the [tabs documentation](tabs.md) for more details on configuring tabs. +See the [tabs documentation](tabs.mdx) for more details on configuring tabs. ## Properties diff --git a/versioned_docs/version-v5/api/tabs.md b/versioned_docs/version-v5/api/tabs.mdx similarity index 99% rename from versioned_docs/version-v5/api/tabs.md rename to versioned_docs/version-v5/api/tabs.mdx index 5ac0ddd3179..3e77cd14142 100644 --- a/versioned_docs/version-v5/api/tabs.md +++ b/versioned_docs/version-v5/api/tabs.mdx @@ -19,7 +19,7 @@ import Slots from '@ionic-internal/component-api/v5/tabs/slots.md'; # ion-tabs Tabs are a top level navigation component to implement a tab-based navigation. -The component is a container of individual [Tab](tab.md) components. +The component is a container of individual [Tab](tab.mdx) components. The `ion-tabs` component does not have any styling and works as a router outlet in order to handle navigation. It does not provide any UI feedback or mechanism to switch between tabs. In order to do so, an `ion-tab-bar` should be provided as a direct child of `ion-tabs`. diff --git a/versioned_docs/version-v5/api/text.md b/versioned_docs/version-v5/api/text.mdx similarity index 100% rename from versioned_docs/version-v5/api/text.md rename to versioned_docs/version-v5/api/text.mdx diff --git a/versioned_docs/version-v5/api/textarea.md b/versioned_docs/version-v5/api/textarea.mdx similarity index 100% rename from versioned_docs/version-v5/api/textarea.md rename to versioned_docs/version-v5/api/textarea.mdx diff --git a/versioned_docs/version-v5/api/thumbnail.md b/versioned_docs/version-v5/api/thumbnail.mdx similarity index 100% rename from versioned_docs/version-v5/api/thumbnail.md rename to versioned_docs/version-v5/api/thumbnail.mdx diff --git a/versioned_docs/version-v5/api/title.md b/versioned_docs/version-v5/api/title.mdx similarity index 100% rename from versioned_docs/version-v5/api/title.md rename to versioned_docs/version-v5/api/title.mdx diff --git a/versioned_docs/version-v5/api/toast.md b/versioned_docs/version-v5/api/toast.mdx similarity index 100% rename from versioned_docs/version-v5/api/toast.md rename to versioned_docs/version-v5/api/toast.mdx diff --git a/versioned_docs/version-v5/api/toggle.md b/versioned_docs/version-v5/api/toggle.mdx similarity index 100% rename from versioned_docs/version-v5/api/toggle.md rename to versioned_docs/version-v5/api/toggle.mdx diff --git a/versioned_docs/version-v5/api/toolbar.md b/versioned_docs/version-v5/api/toolbar.mdx similarity index 100% rename from versioned_docs/version-v5/api/toolbar.md rename to versioned_docs/version-v5/api/toolbar.mdx diff --git a/versioned_docs/version-v5/api/virtual-scroll.md b/versioned_docs/version-v5/api/virtual-scroll.mdx similarity index 98% rename from versioned_docs/version-v5/api/virtual-scroll.md rename to versioned_docs/version-v5/api/virtual-scroll.mdx index 8e6b1118704..2cba23cd0fc 100644 --- a/versioned_docs/version-v5/api/virtual-scroll.md +++ b/versioned_docs/version-v5/api/virtual-scroll.mdx @@ -46,7 +46,7 @@ scrolling. In order to better control images, Ionic provides `` to manage HTTP requests and image rendering. While scrolling through items quickly, `` knows when and when not to make requests, when and when not to render images, and only loads the images that are viewable -after scrolling. [Read more about `ion-img`.](img.md) +after scrolling. [Read more about `ion-img`.](img.mdx) It's also important for app developers to ensure image sizes are locked in, and after images have fully loaded they do not change size and affect any @@ -82,7 +82,7 @@ via CSS. ### Use `ion-img` for images When including images within Virtual Scroll, be sure to use -[`ion-img`](img.md) rather than the standard `` HTML element. +[`ion-img`](img.mdx) rather than the standard `` HTML element. With `ion-img`, images are lazy loaded so only the viewable ones are rendered, and HTTP requests are efficiently controlled while scrolling. diff --git a/versioned_docs/version-v5/index.md b/versioned_docs/version-v5/index.md index 53e6f39a030..875f2cb6ea5 100644 --- a/versioned_docs/version-v5/index.md +++ b/versioned_docs/version-v5/index.md @@ -13,7 +13,7 @@ import DocsCards from '@components/global/DocsCards'; # Ionic Framework -Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.md), [React](react.md), and [Vue](vue/overview.md). +Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.mdx), [React](react.mdx), and [Vue](vue/overview.mdx). Get started building by [installing Ionic](intro/cli.md) or following our [First App Tutorial](intro/next.md#build-your-first-app) to learn the main concepts. @@ -49,7 +49,7 @@ Get started building by [installing Ionic](intro/cli.md) or following our [First ## Overview -Ionic Framework focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.md), [React](react.md), or [Vue](vue/overview.md). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.md). If you’d like to learn more about Ionic Framework before diving in, we created a video to walk you through the basics. +Ionic Framework focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.mdx), [React](react.mdx), or [Vue](vue/overview.mdx). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.md). If you’d like to learn more about Ionic Framework before diving in, we created a video to walk you through the basics. ### One codebase, running everywhere diff --git a/versioned_docs/version-v5/layout/grid.md b/versioned_docs/version-v5/layout/grid.md index 98cf32e90ee..fd049770977 100644 --- a/versioned_docs/version-v5/layout/grid.md +++ b/versioned_docs/version-v5/layout/grid.md @@ -6,7 +6,7 @@ sidebar_label: Responsive Grid # Responsive Grid -The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units — a [grid](../api/grid.md), [row(s)](../api/row.md) and [column(s)](../api/col.md). Columns will expand to fill their 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. +The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units — a [grid](../api/grid.mdx), [row(s)](../api/row.mdx) and [column(s)](../api/col.mdx). Columns will expand to fill their 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. ## How it works diff --git a/versioned_docs/version-v5/layout/structure.md b/versioned_docs/version-v5/layout/structure.md index 798ddd137aa..5a64d5a5091 100644 --- a/versioned_docs/version-v5/layout/structure.md +++ b/versioned_docs/version-v5/layout/structure.md @@ -19,7 +19,7 @@ Ionic Framework provides several different layouts that can be used to structure -The most simple layout available consists of a [header](../api/header.md) and [content](../api/content.md). Most pages in an app generally have both of these, but a header is not required in order to use content. +The most simple layout available consists of a [header](../api/header.mdx) and [content](../api/content.mdx). Most pages in an app generally have both of these, but a header is not required in order to use content. ```html @@ -89,7 +89,7 @@ You can view a live example of this setup in Angular [here](https://stackblitz.c ## Tabs Layout -A layout consisting of horizontal [tabs](../api/tabs.md) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using an `ion-router-outlet` or `ion-nav`. +A layout consisting of horizontal [tabs](../api/tabs.mdx) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using an `ion-router-outlet` or `ion-nav`. ```html @@ -121,7 +121,7 @@ You can view a live example of this setup in Angular [here](https://stackblitz.c ## Menu Layout -A standard layout among mobile apps includes the ability to toggle a side [menu](../api/menu.md) by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content. +A standard layout among mobile apps includes the ability to toggle a side [menu](../api/menu.mdx) by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content. ```html @@ -174,7 +174,7 @@ You can view a live example of this setup in Angular [here](https://stackblitz.c ## Split Pane Layout -A [split pane](../api/split-pane.md) layout has a more complex structure because it can combine the previous layouts. It allows for multiple views to be displayed when the viewport is above a specified breakpoint. If the device's screen size is below a certain size, the split pane view will be hidden. +A [split pane](../api/split-pane.mdx) layout has a more complex structure because it can combine the previous layouts. It allows for multiple views to be displayed when the viewport is above a specified breakpoint. If the device's screen size is below a certain size, the split pane view will be hidden. By default, the split pane view will show when the screen is larger than `768px`, or the `md` breakpoint, but this can be customized to use different breakpoints by setting the `when` property. Below is an example where the split pane contains a menu that is visible for `sm` screens and up, or when the viewport is larger than `576px`. By resizing the browser horizontally so that the app is smaller than this, the split pane view will disappear. @@ -222,7 +222,7 @@ By default, the split pane view will show when the screen is larger than `768px` ``` -It's important to note that the element with the `id` matching the `content-id` specified by the split pane will be the main content that is always visible. This can be any element, including an [ion-nav](../api/nav.md), [ion-router-outlet](../api/router-outlet.md), or an [ion-tabs](../api/tabs.md). +It's important to note that the element with the `id` matching the `content-id` specified by the split pane will be the main content that is always visible. This can be any element, including an [ion-nav](../api/nav.mdx), [ion-router-outlet](../api/router-outlet.mdx), or an [ion-tabs](../api/tabs.mdx). ### Live examples diff --git a/versioned_docs/version-v5/react/config.md b/versioned_docs/version-v5/react/config.mdx similarity index 99% rename from versioned_docs/version-v5/react/config.md rename to versioned_docs/version-v5/react/config.mdx index 14eb3641e2f..4763928a5b5 100644 --- a/versioned_docs/version-v5/react/config.md +++ b/versioned_docs/version-v5/react/config.mdx @@ -20,7 +20,7 @@ In the above example, we are disabling the Material Design ripple effect across Ionic Config can also be set on a per-platform basis. For example, this allows you to disable animations if the app is being run in a browser on a potentially slower device. Developers can take advantage of the Platform utilities to accomplish this. In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser. -The `isPlatform()` call returns `true` or `false` based upon the platform that is passed in. See the [Platform Documentation](platform.md#platforms) for a list of possible values. +The `isPlatform()` call returns `true` or `false` based upon the platform that is passed in. See the [Platform Documentation](platform.mdx#platforms) for a list of possible values. ```tsx import { isPlatform, setupConfig } from '@ionic/react'; diff --git a/versioned_docs/version-v5/react/lifecycle.md b/versioned_docs/version-v5/react/lifecycle.mdx similarity index 100% rename from versioned_docs/version-v5/react/lifecycle.md rename to versioned_docs/version-v5/react/lifecycle.mdx diff --git a/versioned_docs/version-v5/react/navigation.md b/versioned_docs/version-v5/react/navigation.mdx similarity index 99% rename from versioned_docs/version-v5/react/navigation.md rename to versioned_docs/version-v5/react/navigation.mdx index 6405fae835d..2ae09b01ca4 100644 --- a/versioned_docs/version-v5/react/navigation.md +++ b/versioned_docs/version-v5/react/navigation.mdx @@ -281,8 +281,8 @@ For more info on routing in React using React Router, check out their docs at [h ## From the Community - +{/* cspell:disable */} [Ionic 4 and React: Navigation](https://alligator.io/ionic/ionic-4-react-navigation) - Paul Halliday - +{/* cspell:enable */} diff --git a/versioned_docs/version-v5/react/overlays.md b/versioned_docs/version-v5/react/overlays.mdx similarity index 100% rename from versioned_docs/version-v5/react/overlays.md rename to versioned_docs/version-v5/react/overlays.mdx diff --git a/versioned_docs/version-v5/react/performance.md b/versioned_docs/version-v5/react/performance.mdx similarity index 100% rename from versioned_docs/version-v5/react/performance.md rename to versioned_docs/version-v5/react/performance.mdx diff --git a/versioned_docs/version-v5/react/platform.md b/versioned_docs/version-v5/react/platform.mdx similarity index 100% rename from versioned_docs/version-v5/react/platform.md rename to versioned_docs/version-v5/react/platform.mdx diff --git a/versioned_docs/version-v5/react/pwa.md b/versioned_docs/version-v5/react/pwa.mdx similarity index 100% rename from versioned_docs/version-v5/react/pwa.md rename to versioned_docs/version-v5/react/pwa.mdx diff --git a/versioned_docs/version-v5/react/quickstart.md b/versioned_docs/version-v5/react/quickstart.mdx similarity index 99% rename from versioned_docs/version-v5/react/quickstart.md rename to versioned_docs/version-v5/react/quickstart.mdx index cb01d75a12a..e1f2daa4870 100644 --- a/versioned_docs/version-v5/react/quickstart.md +++ b/versioned_docs/version-v5/react/quickstart.mdx @@ -87,7 +87,7 @@ The next import is from `react-router-dom`. We're importing Route, which is how Following ReactRouter, we next have our first imports for Ionic. To use a component in React, you must first import it. So for Ionic, this means anytime we want to use a Button or a Card, it must be added to our imports. In the case of our App component, we're only using `IonApp`, `IonRouterOutlet`, and `IonReactRouter`. -`IonReactRouter` is a component that wraps ReactRouter’s BrowserRouter component. It more or less behaves the same as BrowserRouter with a few differences. We have a deeper guide that goes over these differences in our [React Navigation Docs](navigation.md). +`IonReactRouter` is a component that wraps ReactRouter’s BrowserRouter component. It more or less behaves the same as BrowserRouter with a few differences. We have a deeper guide that goes over these differences in our [React Navigation Docs](navigation.mdx). The last important import is the `Home` component import. This is a component that we will be able to navigate to in our app. We'll look at the navigation part a bit later. @@ -311,7 +311,7 @@ export default NewItem; ``` :::note -Each view must contain an `IonPage` component. Page transitions will not work correctly without it. See the [IonPage Documentation](navigation.md#ionpage) for more information. +Each view must contain an `IonPage` component. Page transitions will not work correctly without it. See the [IonPage Documentation](navigation.mdx#ionpage) for more information. ::: The content here is pretty straight forward and should look similar to the `Home` component. What is new is the `IonBackButton` component. This is used to navigate back to the previous route. Pretty straight forward? Ok, but what if we reload the page? @@ -401,7 +401,7 @@ export default Home; ## Where to go from here -This guide covered the basics of creating an Ionic React app, adding some basic navigation, and introducing Capacitor as a way of building native apps. To dive deeper into building complete Ionic apps with React and Capacitor, follow our [First App guide](your-first-app.md). +This guide covered the basics of creating an Ionic React app, adding some basic navigation, and introducing Capacitor as a way of building native apps. To dive deeper into building complete Ionic apps with React and Capacitor, follow our [First App guide](your-first-app.mdx). For a more detailed look at Ionic’s components, check out the [component API pages](https://ionicframework.com/docs/components). For more details on React, review the [React Docs](https://reactjs.org/). To keep building native features, see the [Capacitor docs](https://capacitorjs.com/docs/). diff --git a/versioned_docs/version-v5/react/storage.md b/versioned_docs/version-v5/react/storage.mdx similarity index 100% rename from versioned_docs/version-v5/react/storage.md rename to versioned_docs/version-v5/react/storage.mdx diff --git a/versioned_docs/version-v5/react/testing.md b/versioned_docs/version-v5/react/testing.mdx similarity index 100% rename from versioned_docs/version-v5/react/testing.md rename to versioned_docs/version-v5/react/testing.mdx diff --git a/versioned_docs/version-v5/react/your-first-app.md b/versioned_docs/version-v5/react/your-first-app.mdx similarity index 100% rename from versioned_docs/version-v5/react/your-first-app.md rename to versioned_docs/version-v5/react/your-first-app.mdx diff --git a/versioned_docs/version-v5/react/your-first-app/2-taking-photos.md b/versioned_docs/version-v5/react/your-first-app/2-taking-photos.mdx similarity index 100% rename from versioned_docs/version-v5/react/your-first-app/2-taking-photos.md rename to versioned_docs/version-v5/react/your-first-app/2-taking-photos.mdx diff --git a/versioned_docs/version-v5/react/your-first-app/3-saving-photos.md b/versioned_docs/version-v5/react/your-first-app/3-saving-photos.mdx similarity index 100% rename from versioned_docs/version-v5/react/your-first-app/3-saving-photos.md rename to versioned_docs/version-v5/react/your-first-app/3-saving-photos.mdx diff --git a/versioned_docs/version-v5/react/your-first-app/4-loading-photos.md b/versioned_docs/version-v5/react/your-first-app/4-loading-photos.mdx similarity index 100% rename from versioned_docs/version-v5/react/your-first-app/4-loading-photos.md rename to versioned_docs/version-v5/react/your-first-app/4-loading-photos.mdx diff --git a/versioned_docs/version-v5/react/your-first-app/5-adding-mobile.md b/versioned_docs/version-v5/react/your-first-app/5-adding-mobile.mdx similarity index 100% rename from versioned_docs/version-v5/react/your-first-app/5-adding-mobile.md rename to versioned_docs/version-v5/react/your-first-app/5-adding-mobile.mdx diff --git a/versioned_docs/version-v5/react/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v5/react/your-first-app/6-deploying-mobile.mdx similarity index 100% rename from versioned_docs/version-v5/react/your-first-app/6-deploying-mobile.md rename to versioned_docs/version-v5/react/your-first-app/6-deploying-mobile.mdx diff --git a/versioned_docs/version-v5/react/your-first-app/7-live-reload.md b/versioned_docs/version-v5/react/your-first-app/7-live-reload.mdx similarity index 100% rename from versioned_docs/version-v5/react/your-first-app/7-live-reload.md rename to versioned_docs/version-v5/react/your-first-app/7-live-reload.mdx diff --git a/versioned_docs/version-v5/theming/css-shadow-parts.md b/versioned_docs/version-v5/theming/css-shadow-parts.md index 59afb185fa6..b77072f998a 100644 --- a/versioned_docs/version-v5/theming/css-shadow-parts.md +++ b/versioned_docs/version-v5/theming/css-shadow-parts.md @@ -7,7 +7,7 @@ CSS Shadow Parts allow developers to style CSS properties on an element inside o Ionic Framework is a distributed set of Web Components. Web Components follow the Shadow DOM specification in order to encapsulate styles and markup. :::note -Ionic Framework components are **not all** Shadow DOM components. If the component is a Shadow DOM component, there will be a badge in the top right of its [component documentation](../components.md). An example of a Shadow DOM component is the [button component](../api/button.md). +Ionic Framework components are **not all** Shadow DOM components. If the component is a Shadow DOM component, there will be a badge in the top right of its [component documentation](../components.md). An example of a Shadow DOM component is the [button component](../api/button.mdx). ::: Shadow DOM is useful for preventing styles from leaking out of components and unintentionally applying to other elements. For example, we assign a `.button` class to our `ion-button` component. Without Shadow DOM encapsulation, if a user were to set the class `.button` on one of their own elements, it would inherit the Ionic Framework button styles. Since `ion-button` is a Shadow component, this is not a problem. @@ -51,7 +51,7 @@ Continuing to use the `ion-select` component as an example, the markup is update ``` -The above shows two parts: `placeholder` and `icon`. See the [select documentation](../api/select.md#css-shadow-parts) for all of its parts. +The above shows two parts: `placeholder` and `icon`. See the [select documentation](../api/select.mdx#css-shadow-parts) for all of its parts. With these parts exposed, the element can now be styled directly using [::part](#how-part-works). diff --git a/versioned_docs/version-v5/theming/css-variables.md b/versioned_docs/version-v5/theming/css-variables.md index b0647ef5600..f162682b503 100644 --- a/versioned_docs/version-v5/theming/css-variables.md +++ b/versioned_docs/version-v5/theming/css-variables.md @@ -87,7 +87,7 @@ const color = el.style.getPropertyValue('--charcoal'); ### Component Variables -Ionic provides variables that exist at the component level, such as `--background` and `--color`. For a list of the custom properties a component accepts, view the `CSS Custom Properties` section of its [API reference](../api.md). For example, see the [Button CSS Custom Properties](../api/button.md#css-custom-properties). +Ionic provides variables that exist at the component level, such as `--background` and `--color`. For a list of the custom properties a component accepts, view the `CSS Custom Properties` section of its [API reference](../api.md). For example, see the [Button CSS Custom Properties](../api/button.mdx#css-custom-properties). ### Global Variables diff --git a/versioned_docs/version-v5/theming/platform-styles.md b/versioned_docs/version-v5/theming/platform-styles.md index 5e5a38d1303..d6214b3c302 100644 --- a/versioned_docs/version-v5/theming/platform-styles.md +++ b/versioned_docs/version-v5/theming/platform-styles.md @@ -10,7 +10,7 @@ Ionic provides platform specific styles based on the device the application is r ## Ionic Modes -Ionic uses **modes** to customize the look of components. Each **platform** has a default **mode**, but this can be overridden through the global [config](../angular/config.md). The following chart displays the default **mode** that is added to each **platform**: +Ionic uses **modes** to customize the look of components. Each **platform** has a default **mode**, but this can be overridden through the global [config](../angular/config.mdx). The following chart displays the default **mode** that is added to each **platform**: | Platform | Mode | Description | | --------- | ----- | -------------------------------------------------------------------------------------------------------------------------------- | @@ -24,7 +24,7 @@ For example, an app being viewed on an Android platform will use the `md` (Mater ``` -_Note: The **platform** and the **mode** are not the same. The platform can be set to use any mode in the [config](../angular/config.md) of an app._ +_Note: The **platform** and the **mode** are not the same. The platform can be set to use any mode in the [config](../angular/config.mdx) of an app._ ## Overriding Mode Styles diff --git a/versioned_docs/version-v5/vue/config.md b/versioned_docs/version-v5/vue/config.mdx similarity index 99% rename from versioned_docs/version-v5/vue/config.md rename to versioned_docs/version-v5/vue/config.mdx index 410c3bcf8b9..76b4250a1a0 100644 --- a/versioned_docs/version-v5/vue/config.md +++ b/versioned_docs/version-v5/vue/config.mdx @@ -20,7 +20,7 @@ In the above example, we are disabling the Material Design ripple effect across Ionic Config can also be set on a per-platform basis. For example, this allows you to disable animations if the app is being run in a browser on a potentially slower device. Developers can take advantage of the Platform utilities to accomplish this. In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser. -The `isPlatform()` call returns `true` or `false` based upon the platform that is passed in. See the [Platform Documentation](platform.md#platforms) for a list of possible values. +The `isPlatform()` call returns `true` or `false` based upon the platform that is passed in. See the [Platform Documentation](platform.mdx#platforms) for a list of possible values. ```tsx import { IonicVue, isPlatform } from '@ionic/vue'; diff --git a/versioned_docs/version-v5/vue/lifecycle.md b/versioned_docs/version-v5/vue/lifecycle.mdx similarity index 100% rename from versioned_docs/version-v5/vue/lifecycle.md rename to versioned_docs/version-v5/vue/lifecycle.mdx diff --git a/versioned_docs/version-v5/vue/navigation.md b/versioned_docs/version-v5/vue/navigation.mdx similarity index 100% rename from versioned_docs/version-v5/vue/navigation.md rename to versioned_docs/version-v5/vue/navigation.mdx diff --git a/versioned_docs/version-v5/vue/overview.md b/versioned_docs/version-v5/vue/overview.mdx similarity index 100% rename from versioned_docs/version-v5/vue/overview.md rename to versioned_docs/version-v5/vue/overview.mdx diff --git a/versioned_docs/version-v5/vue/performance.md b/versioned_docs/version-v5/vue/performance.mdx similarity index 100% rename from versioned_docs/version-v5/vue/performance.md rename to versioned_docs/version-v5/vue/performance.mdx diff --git a/versioned_docs/version-v5/vue/platform.md b/versioned_docs/version-v5/vue/platform.mdx similarity index 100% rename from versioned_docs/version-v5/vue/platform.md rename to versioned_docs/version-v5/vue/platform.mdx diff --git a/versioned_docs/version-v5/vue/pwa.md b/versioned_docs/version-v5/vue/pwa.mdx similarity index 100% rename from versioned_docs/version-v5/vue/pwa.md rename to versioned_docs/version-v5/vue/pwa.mdx diff --git a/versioned_docs/version-v5/vue/quickstart.md b/versioned_docs/version-v5/vue/quickstart.mdx similarity index 99% rename from versioned_docs/version-v5/vue/quickstart.md rename to versioned_docs/version-v5/vue/quickstart.mdx index 015b505d2df..ff9b23d4783 100644 --- a/versioned_docs/version-v5/vue/quickstart.md +++ b/versioned_docs/version-v5/vue/quickstart.mdx @@ -496,7 +496,7 @@ Let's fill the `NewItem.vue` file with some placeholder content for the moment. ``` :::note -Each view must contain an `IonPage` component. Page transitions will not work correctly without it. See the [IonPage Documentation](navigation.md#ionpage) for more information. +Each view must contain an `IonPage` component. Page transitions will not work correctly without it. See the [IonPage Documentation](navigation.mdx#ionpage) for more information. ::: The content here should look similar to the `Home` component. What is different here is the `IonBackButton` component. This is used to navigate back to the previous route. Seems easy enough, right? Ok, but what if we reload the page? @@ -842,7 +842,7 @@ Next, check out [all the APIs](https://capacitorjs.com/docs/apis) that are avail ## Where to go from here -This guide covered the basics of creating an Ionic Vue app, adding some basic navigation, and introducing Capacitor as a way of building native apps. To dive deeper into building complete Ionic Framework apps with Vue and Capacitor, follow our [First App guide](your-first-app.md). +This guide covered the basics of creating an Ionic Vue app, adding some basic navigation, and introducing Capacitor as a way of building native apps. To dive deeper into building complete Ionic Framework apps with Vue and Capacitor, follow our [First App guide](your-first-app.mdx). For a more detailed look at Ionic Frameworks’s components, check out the [component API pages](https://ionicframework.com/docs/components). For more details on Vue, review the [Vue Docs](https://v3.vuejs.org/). To keep building native features, see the [Capacitor docs](https://capacitorjs.com/docs/). diff --git a/versioned_docs/version-v5/vue/storage.md b/versioned_docs/version-v5/vue/storage.mdx similarity index 100% rename from versioned_docs/version-v5/vue/storage.md rename to versioned_docs/version-v5/vue/storage.mdx diff --git a/versioned_docs/version-v5/vue/testing.md b/versioned_docs/version-v5/vue/testing.mdx similarity index 100% rename from versioned_docs/version-v5/vue/testing.md rename to versioned_docs/version-v5/vue/testing.mdx diff --git a/versioned_docs/version-v5/vue/troubleshooting.md b/versioned_docs/version-v5/vue/troubleshooting.mdx similarity index 90% rename from versioned_docs/version-v5/vue/troubleshooting.md rename to versioned_docs/version-v5/vue/troubleshooting.mdx index d48b1843a1b..7ea1856c16e 100644 --- a/versioned_docs/version-v5/vue/troubleshooting.md +++ b/versioned_docs/version-v5/vue/troubleshooting.mdx @@ -31,7 +31,7 @@ To resolve this issue, you need to import the component from `@ionic/vue` and pr ``` -Prefer to register your components globally once? We have you covered. Our [Optimizing Your Build Guide](quickstart.md#optimizing-your-build) shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach. +Prefer to register your components globally once? We have you covered. Our [Optimizing Your Build Guide](quickstart.mdx#optimizing-your-build) shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach. ## Slot attributes are deprecated @@ -69,7 +69,7 @@ ionContentRef.value.scrollToBottom(); In other framework integrations such as Ionic React, this is not needed as any `ref` you provide is automatically forwarded to the underlying Web Component instance. We are unable to do the same thing here due to limitations in how Vue manages refs. -See the [Quickstart Guide](quickstart.md#calling-methods-on-components) for more information. +See the [Quickstart Guide](quickstart.mdx#calling-methods-on-components) for more information. ## Page transitions are not working @@ -103,4 +103,4 @@ In order for page transitions to work correctly, each page must have an `ion-pag ``` -See the [IonPage documentation](navigation.md#ionpage) for more information. +See the [IonPage documentation](navigation.mdx#ionpage) for more information. diff --git a/versioned_docs/version-v5/vue/your-first-app.md b/versioned_docs/version-v5/vue/your-first-app.mdx similarity index 100% rename from versioned_docs/version-v5/vue/your-first-app.md rename to versioned_docs/version-v5/vue/your-first-app.mdx diff --git a/versioned_docs/version-v5/vue/your-first-app/2-taking-photos.md b/versioned_docs/version-v5/vue/your-first-app/2-taking-photos.mdx similarity index 100% rename from versioned_docs/version-v5/vue/your-first-app/2-taking-photos.md rename to versioned_docs/version-v5/vue/your-first-app/2-taking-photos.mdx diff --git a/versioned_docs/version-v5/vue/your-first-app/3-saving-photos.md b/versioned_docs/version-v5/vue/your-first-app/3-saving-photos.mdx similarity index 100% rename from versioned_docs/version-v5/vue/your-first-app/3-saving-photos.md rename to versioned_docs/version-v5/vue/your-first-app/3-saving-photos.mdx diff --git a/versioned_docs/version-v5/vue/your-first-app/4-loading-photos.md b/versioned_docs/version-v5/vue/your-first-app/4-loading-photos.mdx similarity index 100% rename from versioned_docs/version-v5/vue/your-first-app/4-loading-photos.md rename to versioned_docs/version-v5/vue/your-first-app/4-loading-photos.mdx diff --git a/versioned_docs/version-v5/vue/your-first-app/5-adding-mobile.md b/versioned_docs/version-v5/vue/your-first-app/5-adding-mobile.mdx similarity index 100% rename from versioned_docs/version-v5/vue/your-first-app/5-adding-mobile.md rename to versioned_docs/version-v5/vue/your-first-app/5-adding-mobile.mdx diff --git a/versioned_docs/version-v5/vue/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v5/vue/your-first-app/6-deploying-mobile.mdx similarity index 100% rename from versioned_docs/version-v5/vue/your-first-app/6-deploying-mobile.md rename to versioned_docs/version-v5/vue/your-first-app/6-deploying-mobile.mdx diff --git a/versioned_docs/version-v5/vue/your-first-app/7-live-reload.md b/versioned_docs/version-v5/vue/your-first-app/7-live-reload.mdx similarity index 100% rename from versioned_docs/version-v5/vue/your-first-app/7-live-reload.md rename to versioned_docs/version-v5/vue/your-first-app/7-live-reload.mdx diff --git a/versioned_docs/version-v6/angular/lifecycle.md b/versioned_docs/version-v6/angular/lifecycle.mdx similarity index 100% rename from versioned_docs/version-v6/angular/lifecycle.md rename to versioned_docs/version-v6/angular/lifecycle.mdx diff --git a/versioned_docs/version-v6/angular/navigation.md b/versioned_docs/version-v6/angular/navigation.mdx similarity index 100% rename from versioned_docs/version-v6/angular/navigation.md rename to versioned_docs/version-v6/angular/navigation.mdx diff --git a/versioned_docs/version-v6/angular/overview.md b/versioned_docs/version-v6/angular/overview.mdx similarity index 100% rename from versioned_docs/version-v6/angular/overview.md rename to versioned_docs/version-v6/angular/overview.mdx diff --git a/versioned_docs/version-v6/angular/performance.md b/versioned_docs/version-v6/angular/performance.mdx similarity index 98% rename from versioned_docs/version-v6/angular/performance.md rename to versioned_docs/version-v6/angular/performance.mdx index 62877e6e4dd..c4f7760e318 100644 --- a/versioned_docs/version-v6/angular/performance.md +++ b/versioned_docs/version-v6/angular/performance.mdx @@ -56,7 +56,7 @@ For more information on how Angular manages change propagation with `ngFor` see ## From the Community - +{/* cspell:disable */} [High Performance Animations in Ionic](https://www.joshmorony.com/high-performance-animations-in-ionic/) - Josh Morony @@ -66,7 +66,7 @@ For more information on how Angular manages change propagation with `ngFor` see [Ionic Framework is Fast (But Your Code Might Not Be)](https://www.joshmorony.com/ionic-framework-is-fast-but-your-code-might-not-be/) - Josh Morony - +{/* cspell:enable */} :::note Do you have a guide you'd like to share? Click the _Edit this page_ button below. diff --git a/versioned_docs/version-v6/angular/platform.md b/versioned_docs/version-v6/angular/platform.mdx similarity index 100% rename from versioned_docs/version-v6/angular/platform.md rename to versioned_docs/version-v6/angular/platform.mdx diff --git a/versioned_docs/version-v6/angular/pwa.md b/versioned_docs/version-v6/angular/pwa.mdx similarity index 100% rename from versioned_docs/version-v6/angular/pwa.md rename to versioned_docs/version-v6/angular/pwa.mdx diff --git a/versioned_docs/version-v6/angular/slides.md b/versioned_docs/version-v6/angular/slides.mdx similarity index 100% rename from versioned_docs/version-v6/angular/slides.md rename to versioned_docs/version-v6/angular/slides.mdx diff --git a/versioned_docs/version-v6/angular/storage.md b/versioned_docs/version-v6/angular/storage.mdx similarity index 100% rename from versioned_docs/version-v6/angular/storage.md rename to versioned_docs/version-v6/angular/storage.mdx diff --git a/versioned_docs/version-v6/angular/testing.md b/versioned_docs/version-v6/angular/testing.mdx similarity index 100% rename from versioned_docs/version-v6/angular/testing.md rename to versioned_docs/version-v6/angular/testing.mdx diff --git a/versioned_docs/version-v6/angular/virtual-scroll.md b/versioned_docs/version-v6/angular/virtual-scroll.mdx similarity index 100% rename from versioned_docs/version-v6/angular/virtual-scroll.md rename to versioned_docs/version-v6/angular/virtual-scroll.mdx diff --git a/versioned_docs/version-v6/angular/your-first-app.md b/versioned_docs/version-v6/angular/your-first-app.mdx similarity index 100% rename from versioned_docs/version-v6/angular/your-first-app.md rename to versioned_docs/version-v6/angular/your-first-app.mdx diff --git a/versioned_docs/version-v6/angular/your-first-app/2-taking-photos.md b/versioned_docs/version-v6/angular/your-first-app/2-taking-photos.mdx similarity index 100% rename from versioned_docs/version-v6/angular/your-first-app/2-taking-photos.md rename to versioned_docs/version-v6/angular/your-first-app/2-taking-photos.mdx diff --git a/versioned_docs/version-v6/angular/your-first-app/3-saving-photos.md b/versioned_docs/version-v6/angular/your-first-app/3-saving-photos.mdx similarity index 100% rename from versioned_docs/version-v6/angular/your-first-app/3-saving-photos.md rename to versioned_docs/version-v6/angular/your-first-app/3-saving-photos.mdx diff --git a/versioned_docs/version-v6/angular/your-first-app/4-loading-photos.md b/versioned_docs/version-v6/angular/your-first-app/4-loading-photos.mdx similarity index 100% rename from versioned_docs/version-v6/angular/your-first-app/4-loading-photos.md rename to versioned_docs/version-v6/angular/your-first-app/4-loading-photos.mdx diff --git a/versioned_docs/version-v6/angular/your-first-app/5-adding-mobile.md b/versioned_docs/version-v6/angular/your-first-app/5-adding-mobile.mdx similarity index 100% rename from versioned_docs/version-v6/angular/your-first-app/5-adding-mobile.md rename to versioned_docs/version-v6/angular/your-first-app/5-adding-mobile.mdx diff --git a/versioned_docs/version-v6/angular/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v6/angular/your-first-app/6-deploying-mobile.mdx similarity index 100% rename from versioned_docs/version-v6/angular/your-first-app/6-deploying-mobile.md rename to versioned_docs/version-v6/angular/your-first-app/6-deploying-mobile.mdx diff --git a/versioned_docs/version-v6/angular/your-first-app/7-live-reload.md b/versioned_docs/version-v6/angular/your-first-app/7-live-reload.mdx similarity index 100% rename from versioned_docs/version-v6/angular/your-first-app/7-live-reload.md rename to versioned_docs/version-v6/angular/your-first-app/7-live-reload.mdx diff --git a/versioned_docs/version-v6/angular/your-first-app/8-distribute.md b/versioned_docs/version-v6/angular/your-first-app/8-distribute.mdx similarity index 100% rename from versioned_docs/version-v6/angular/your-first-app/8-distribute.md rename to versioned_docs/version-v6/angular/your-first-app/8-distribute.mdx diff --git a/versioned_docs/version-v6/api/accordion-group.md b/versioned_docs/version-v6/api/accordion-group.mdx similarity index 100% rename from versioned_docs/version-v6/api/accordion-group.md rename to versioned_docs/version-v6/api/accordion-group.mdx diff --git a/versioned_docs/version-v6/api/accordion.md b/versioned_docs/version-v6/api/accordion.mdx similarity index 100% rename from versioned_docs/version-v6/api/accordion.md rename to versioned_docs/version-v6/api/accordion.mdx diff --git a/versioned_docs/version-v6/api/action-sheet.md b/versioned_docs/version-v6/api/action-sheet.mdx similarity index 100% rename from versioned_docs/version-v6/api/action-sheet.md rename to versioned_docs/version-v6/api/action-sheet.mdx diff --git a/versioned_docs/version-v6/api/alert.md b/versioned_docs/version-v6/api/alert.mdx similarity index 100% rename from versioned_docs/version-v6/api/alert.md rename to versioned_docs/version-v6/api/alert.mdx diff --git a/versioned_docs/version-v6/api/app.md b/versioned_docs/version-v6/api/app.mdx similarity index 100% rename from versioned_docs/version-v6/api/app.md rename to versioned_docs/version-v6/api/app.mdx diff --git a/versioned_docs/version-v6/api/avatar.md b/versioned_docs/version-v6/api/avatar.mdx similarity index 100% rename from versioned_docs/version-v6/api/avatar.md rename to versioned_docs/version-v6/api/avatar.mdx diff --git a/versioned_docs/version-v6/api/back-button.md b/versioned_docs/version-v6/api/back-button.mdx similarity index 100% rename from versioned_docs/version-v6/api/back-button.md rename to versioned_docs/version-v6/api/back-button.mdx diff --git a/versioned_docs/version-v6/api/backdrop.md b/versioned_docs/version-v6/api/backdrop.mdx similarity index 100% rename from versioned_docs/version-v6/api/backdrop.md rename to versioned_docs/version-v6/api/backdrop.mdx diff --git a/versioned_docs/version-v6/api/badge.md b/versioned_docs/version-v6/api/badge.mdx similarity index 100% rename from versioned_docs/version-v6/api/badge.md rename to versioned_docs/version-v6/api/badge.mdx diff --git a/versioned_docs/version-v6/api/breadcrumb.md b/versioned_docs/version-v6/api/breadcrumb.mdx similarity index 100% rename from versioned_docs/version-v6/api/breadcrumb.md rename to versioned_docs/version-v6/api/breadcrumb.mdx diff --git a/versioned_docs/version-v6/api/breadcrumbs.md b/versioned_docs/version-v6/api/breadcrumbs.mdx similarity index 100% rename from versioned_docs/version-v6/api/breadcrumbs.md rename to versioned_docs/version-v6/api/breadcrumbs.mdx diff --git a/versioned_docs/version-v6/api/button.md b/versioned_docs/version-v6/api/button.mdx similarity index 100% rename from versioned_docs/version-v6/api/button.md rename to versioned_docs/version-v6/api/button.mdx diff --git a/versioned_docs/version-v6/api/buttons.md b/versioned_docs/version-v6/api/buttons.mdx similarity index 98% rename from versioned_docs/version-v6/api/buttons.md rename to versioned_docs/version-v6/api/buttons.mdx index d20c05adee6..c1127111944 100644 --- a/versioned_docs/version-v6/api/buttons.md +++ b/versioned_docs/version-v6/api/buttons.mdx @@ -62,7 +62,7 @@ This feature is only available for iOS. ::: - +{/* Reuse the playground from the Title directory */} import CollapsibleLargeTitleButtons from '@site/static/usage/v6/title/collapsible-large-title/buttons/index.md'; diff --git a/versioned_docs/version-v6/api/card-content.md b/versioned_docs/version-v6/api/card-content.mdx similarity index 100% rename from versioned_docs/version-v6/api/card-content.md rename to versioned_docs/version-v6/api/card-content.mdx diff --git a/versioned_docs/version-v6/api/card-header.md b/versioned_docs/version-v6/api/card-header.mdx similarity index 100% rename from versioned_docs/version-v6/api/card-header.md rename to versioned_docs/version-v6/api/card-header.mdx diff --git a/versioned_docs/version-v6/api/card-subtitle.md b/versioned_docs/version-v6/api/card-subtitle.mdx similarity index 100% rename from versioned_docs/version-v6/api/card-subtitle.md rename to versioned_docs/version-v6/api/card-subtitle.mdx diff --git a/versioned_docs/version-v6/api/card-title.md b/versioned_docs/version-v6/api/card-title.mdx similarity index 100% rename from versioned_docs/version-v6/api/card-title.md rename to versioned_docs/version-v6/api/card-title.mdx diff --git a/versioned_docs/version-v6/api/card.md b/versioned_docs/version-v6/api/card.mdx similarity index 100% rename from versioned_docs/version-v6/api/card.md rename to versioned_docs/version-v6/api/card.mdx diff --git a/versioned_docs/version-v6/api/checkbox.md b/versioned_docs/version-v6/api/checkbox.mdx similarity index 100% rename from versioned_docs/version-v6/api/checkbox.md rename to versioned_docs/version-v6/api/checkbox.mdx diff --git a/versioned_docs/version-v6/api/chip.md b/versioned_docs/version-v6/api/chip.mdx similarity index 100% rename from versioned_docs/version-v6/api/chip.md rename to versioned_docs/version-v6/api/chip.mdx diff --git a/versioned_docs/version-v6/api/col.md b/versioned_docs/version-v6/api/col.mdx similarity index 100% rename from versioned_docs/version-v6/api/col.md rename to versioned_docs/version-v6/api/col.mdx diff --git a/versioned_docs/version-v6/api/content.md b/versioned_docs/version-v6/api/content.mdx similarity index 100% rename from versioned_docs/version-v6/api/content.md rename to versioned_docs/version-v6/api/content.mdx diff --git a/versioned_docs/version-v6/api/datetime-button.md b/versioned_docs/version-v6/api/datetime-button.mdx similarity index 98% rename from versioned_docs/version-v6/api/datetime-button.md rename to versioned_docs/version-v6/api/datetime-button.mdx index dd76005abc2..940d9c21624 100644 --- a/versioned_docs/version-v6/api/datetime-button.md +++ b/versioned_docs/version-v6/api/datetime-button.mdx @@ -43,8 +43,7 @@ The localized text on `ion-datetime-button` is determined by the `locale` proper `ion-datetime-button` must be associated with a mounted `ion-datetime` instance. As a result, [Inline Modals](./modal#inline-modals-recommended) and [Inline Popovers](./popover#inline-popovers) with the `keepContentsMounted` property set to `true` must be used. - +TODO */} ## Properties diff --git a/versioned_docs/version-v6/api/datetime.md b/versioned_docs/version-v6/api/datetime.mdx similarity index 100% rename from versioned_docs/version-v6/api/datetime.md rename to versioned_docs/version-v6/api/datetime.mdx diff --git a/versioned_docs/version-v6/api/fab-button.md b/versioned_docs/version-v6/api/fab-button.mdx similarity index 100% rename from versioned_docs/version-v6/api/fab-button.md rename to versioned_docs/version-v6/api/fab-button.mdx diff --git a/versioned_docs/version-v6/api/fab-list.md b/versioned_docs/version-v6/api/fab-list.mdx similarity index 100% rename from versioned_docs/version-v6/api/fab-list.md rename to versioned_docs/version-v6/api/fab-list.mdx diff --git a/versioned_docs/version-v6/api/fab.md b/versioned_docs/version-v6/api/fab.mdx similarity index 100% rename from versioned_docs/version-v6/api/fab.md rename to versioned_docs/version-v6/api/fab.mdx diff --git a/versioned_docs/version-v6/api/footer.md b/versioned_docs/version-v6/api/footer.mdx similarity index 100% rename from versioned_docs/version-v6/api/footer.md rename to versioned_docs/version-v6/api/footer.mdx diff --git a/versioned_docs/version-v6/api/grid.md b/versioned_docs/version-v6/api/grid.mdx similarity index 97% rename from versioned_docs/version-v6/api/grid.md rename to versioned_docs/version-v6/api/grid.mdx index 9eedd1955ab..50917f201a7 100644 --- a/versioned_docs/version-v6/api/grid.md +++ b/versioned_docs/version-v6/api/grid.mdx @@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -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. +The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units — a grid, [row(s)](row.mdx) and [column(s)](col.mdx). 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. ## Overview diff --git a/versioned_docs/version-v6/api/header.md b/versioned_docs/version-v6/api/header.mdx similarity index 100% rename from versioned_docs/version-v6/api/header.md rename to versioned_docs/version-v6/api/header.mdx diff --git a/versioned_docs/version-v6/api/icon.md b/versioned_docs/version-v6/api/icon.mdx similarity index 100% rename from versioned_docs/version-v6/api/icon.md rename to versioned_docs/version-v6/api/icon.mdx diff --git a/versioned_docs/version-v6/api/img.md b/versioned_docs/version-v6/api/img.mdx similarity index 100% rename from versioned_docs/version-v6/api/img.md rename to versioned_docs/version-v6/api/img.mdx diff --git a/versioned_docs/version-v6/api/infinite-scroll-content.md b/versioned_docs/version-v6/api/infinite-scroll-content.mdx similarity index 95% rename from versioned_docs/version-v6/api/infinite-scroll-content.md rename to versioned_docs/version-v6/api/infinite-scroll-content.mdx index 53b4829e731..0f3437545fe 100644 --- a/versioned_docs/version-v6/api/infinite-scroll-content.md +++ b/versioned_docs/version-v6/api/infinite-scroll-content.mdx @@ -13,7 +13,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; The `ion-infinite-scroll-content` component is the default child used by the `ion-infinite-scroll`. It displays an infinite scroll spinner that looks best based on the platform and changes the look depending on the infinite scroll's state. The default spinner can be changed and text can be added by setting the `loadingSpinner` and `loadingText` properties. -For more information as well as usage, see the [Infinite Scroll Documentation](./infinite-scroll.md#infinite-scroll-content). +For more information as well as usage, see the [Infinite Scroll Documentation](./infinite-scroll.mdx#infinite-scroll-content). ## Properties diff --git a/versioned_docs/version-v6/api/infinite-scroll.md b/versioned_docs/version-v6/api/infinite-scroll.mdx similarity index 100% rename from versioned_docs/version-v6/api/infinite-scroll.md rename to versioned_docs/version-v6/api/infinite-scroll.mdx diff --git a/versioned_docs/version-v6/api/input.md b/versioned_docs/version-v6/api/input.mdx similarity index 98% rename from versioned_docs/version-v6/api/input.md rename to versioned_docs/version-v6/api/input.mdx index ca1575a0ad8..9845b440f0f 100644 --- a/versioned_docs/version-v6/api/input.md +++ b/versioned_docs/version-v6/api/input.mdx @@ -65,7 +65,7 @@ import Fill from '@site/static/usage/v6/input/fill/index.md'; Helper & error text can be used inside of an item with an input by slotting a note in the `"helper"` and `"error"` slots. The error slot will not be displayed unless the `ion-invalid` class is added to the `ion-item`. In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation. - +{/* Reuse the playground from the Item directory */} import HelperError from '@site/static/usage/v6/item/helper-error/index.md'; @@ -75,7 +75,7 @@ import HelperError from '@site/static/usage/v6/item/helper-error/index.md'; The item counter is helper text that displays under an input to notify the user of how many characters have been entered out of the total that the input will accept. When adding counter, the default behavior is to format the value that gets displayed as `inputLength` / `maxLength`. This behavior can be customized by passing in a formatter function to the `counterFormatter` property. - +{/* Reuse the playground from the Item directory */} import Counter from '@site/static/usage/v6/item/counter/index.md'; diff --git a/versioned_docs/version-v6/api/item-divider.md b/versioned_docs/version-v6/api/item-divider.mdx similarity index 100% rename from versioned_docs/version-v6/api/item-divider.md rename to versioned_docs/version-v6/api/item-divider.mdx diff --git a/versioned_docs/version-v6/api/item-group.md b/versioned_docs/version-v6/api/item-group.mdx similarity index 100% rename from versioned_docs/version-v6/api/item-group.md rename to versioned_docs/version-v6/api/item-group.mdx diff --git a/versioned_docs/version-v6/api/item-option.md b/versioned_docs/version-v6/api/item-option.mdx similarity index 100% rename from versioned_docs/version-v6/api/item-option.md rename to versioned_docs/version-v6/api/item-option.mdx diff --git a/versioned_docs/version-v6/api/item-options.md b/versioned_docs/version-v6/api/item-options.mdx similarity index 100% rename from versioned_docs/version-v6/api/item-options.md rename to versioned_docs/version-v6/api/item-options.mdx diff --git a/versioned_docs/version-v6/api/item-sliding.md b/versioned_docs/version-v6/api/item-sliding.mdx similarity index 100% rename from versioned_docs/version-v6/api/item-sliding.md rename to versioned_docs/version-v6/api/item-sliding.mdx diff --git a/versioned_docs/version-v6/api/item.md b/versioned_docs/version-v6/api/item.mdx similarity index 98% rename from versioned_docs/version-v6/api/item.md rename to versioned_docs/version-v6/api/item.mdx index cb318d9fb04..2cd574deb68 100644 --- a/versioned_docs/version-v6/api/item.md +++ b/versioned_docs/version-v6/api/item.mdx @@ -47,9 +47,7 @@ import DetailArrows from '@site/static/usage/v6/item/detail-arrows/index.md'; - +See the [theming documentation](/docs/theming/css-variables) for more information. */} ## Item Lines diff --git a/versioned_docs/version-v6/api/label.md b/versioned_docs/version-v6/api/label.mdx similarity index 100% rename from versioned_docs/version-v6/api/label.md rename to versioned_docs/version-v6/api/label.mdx diff --git a/versioned_docs/version-v6/api/list-header.md b/versioned_docs/version-v6/api/list-header.mdx similarity index 100% rename from versioned_docs/version-v6/api/list-header.md rename to versioned_docs/version-v6/api/list-header.mdx diff --git a/versioned_docs/version-v6/api/list.md b/versioned_docs/version-v6/api/list.mdx similarity index 100% rename from versioned_docs/version-v6/api/list.md rename to versioned_docs/version-v6/api/list.mdx diff --git a/versioned_docs/version-v6/api/loading.md b/versioned_docs/version-v6/api/loading.mdx similarity index 100% rename from versioned_docs/version-v6/api/loading.md rename to versioned_docs/version-v6/api/loading.mdx diff --git a/versioned_docs/version-v6/api/menu-button.md b/versioned_docs/version-v6/api/menu-button.mdx similarity index 100% rename from versioned_docs/version-v6/api/menu-button.md rename to versioned_docs/version-v6/api/menu-button.mdx diff --git a/versioned_docs/version-v6/api/menu-toggle.md b/versioned_docs/version-v6/api/menu-toggle.mdx similarity index 100% rename from versioned_docs/version-v6/api/menu-toggle.md rename to versioned_docs/version-v6/api/menu-toggle.mdx diff --git a/versioned_docs/version-v6/api/menu.md b/versioned_docs/version-v6/api/menu.mdx similarity index 100% rename from versioned_docs/version-v6/api/menu.md rename to versioned_docs/version-v6/api/menu.mdx diff --git a/versioned_docs/version-v6/api/modal.md b/versioned_docs/version-v6/api/modal.mdx similarity index 100% rename from versioned_docs/version-v6/api/modal.md rename to versioned_docs/version-v6/api/modal.mdx diff --git a/versioned_docs/version-v6/api/nav-link.md b/versioned_docs/version-v6/api/nav-link.mdx similarity index 100% rename from versioned_docs/version-v6/api/nav-link.md rename to versioned_docs/version-v6/api/nav-link.mdx diff --git a/versioned_docs/version-v6/api/nav.md b/versioned_docs/version-v6/api/nav.mdx similarity index 100% rename from versioned_docs/version-v6/api/nav.md rename to versioned_docs/version-v6/api/nav.mdx diff --git a/versioned_docs/version-v6/api/note.md b/versioned_docs/version-v6/api/note.mdx similarity index 100% rename from versioned_docs/version-v6/api/note.md rename to versioned_docs/version-v6/api/note.mdx diff --git a/versioned_docs/version-v6/api/picker.md b/versioned_docs/version-v6/api/picker.mdx similarity index 100% rename from versioned_docs/version-v6/api/picker.md rename to versioned_docs/version-v6/api/picker.mdx diff --git a/versioned_docs/version-v6/api/popover.md b/versioned_docs/version-v6/api/popover.mdx similarity index 100% rename from versioned_docs/version-v6/api/popover.md rename to versioned_docs/version-v6/api/popover.mdx diff --git a/versioned_docs/version-v6/api/progress-bar.md b/versioned_docs/version-v6/api/progress-bar.mdx similarity index 98% rename from versioned_docs/version-v6/api/progress-bar.md rename to versioned_docs/version-v6/api/progress-bar.mdx index e5f75f384ef..f86e2c8ce03 100644 --- a/versioned_docs/version-v6/api/progress-bar.md +++ b/versioned_docs/version-v6/api/progress-bar.mdx @@ -49,7 +49,7 @@ import Indeterminate from '@site/static/usage/v6/progress-bar/indeterminate/inde ## Progress Bars in Toolbars - +{/* Reuse the playground from the Toolbar directory */} import Toolbar from '@site/static/usage/v6/toolbar/progress-bars/index.md'; diff --git a/versioned_docs/version-v6/api/radio-group.md b/versioned_docs/version-v6/api/radio-group.mdx similarity index 100% rename from versioned_docs/version-v6/api/radio-group.md rename to versioned_docs/version-v6/api/radio-group.mdx diff --git a/versioned_docs/version-v6/api/radio.md b/versioned_docs/version-v6/api/radio.mdx similarity index 100% rename from versioned_docs/version-v6/api/radio.md rename to versioned_docs/version-v6/api/radio.mdx diff --git a/versioned_docs/version-v6/api/range.md b/versioned_docs/version-v6/api/range.mdx similarity index 100% rename from versioned_docs/version-v6/api/range.md rename to versioned_docs/version-v6/api/range.mdx diff --git a/versioned_docs/version-v6/api/refresher-content.md b/versioned_docs/version-v6/api/refresher-content.mdx similarity index 100% rename from versioned_docs/version-v6/api/refresher-content.md rename to versioned_docs/version-v6/api/refresher-content.mdx diff --git a/versioned_docs/version-v6/api/refresher.md b/versioned_docs/version-v6/api/refresher.mdx similarity index 100% rename from versioned_docs/version-v6/api/refresher.md rename to versioned_docs/version-v6/api/refresher.mdx diff --git a/versioned_docs/version-v6/api/reorder-group.md b/versioned_docs/version-v6/api/reorder-group.mdx similarity index 100% rename from versioned_docs/version-v6/api/reorder-group.md rename to versioned_docs/version-v6/api/reorder-group.mdx diff --git a/versioned_docs/version-v6/api/reorder.md b/versioned_docs/version-v6/api/reorder.mdx similarity index 100% rename from versioned_docs/version-v6/api/reorder.md rename to versioned_docs/version-v6/api/reorder.mdx diff --git a/versioned_docs/version-v6/api/ripple-effect.md b/versioned_docs/version-v6/api/ripple-effect.mdx similarity index 100% rename from versioned_docs/version-v6/api/ripple-effect.md rename to versioned_docs/version-v6/api/ripple-effect.mdx diff --git a/versioned_docs/version-v6/api/route-redirect.md b/versioned_docs/version-v6/api/route-redirect.mdx similarity index 98% rename from versioned_docs/version-v6/api/route-redirect.md rename to versioned_docs/version-v6/api/route-redirect.mdx index a2ace00dbea..491cf495b2b 100644 --- a/versioned_docs/version-v6/api/route-redirect.md +++ b/versioned_docs/version-v6/api/route-redirect.mdx @@ -22,7 +22,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; A route redirect can only be used with an `ion-router` as a direct child of it. :::note -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. +Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.mdx) and the Angular router. ::: The route redirect has two configurable properties: diff --git a/versioned_docs/version-v6/api/route.md b/versioned_docs/version-v6/api/route.mdx similarity index 99% rename from versioned_docs/version-v6/api/route.md rename to versioned_docs/version-v6/api/route.mdx index e8be6cb3627..e301cf0f130 100644 --- a/versioned_docs/version-v6/api/route.md +++ b/versioned_docs/version-v6/api/route.mdx @@ -25,7 +25,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; The route component takes a component and renders it when the Browser URL matches the url property. :::note -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. +Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.mdx) and the Angular router. ::: ## Navigation Hooks diff --git a/versioned_docs/version-v6/api/router-link.md b/versioned_docs/version-v6/api/router-link.mdx similarity index 100% rename from versioned_docs/version-v6/api/router-link.md rename to versioned_docs/version-v6/api/router-link.mdx diff --git a/versioned_docs/version-v6/api/router-outlet.md b/versioned_docs/version-v6/api/router-outlet.mdx similarity index 100% rename from versioned_docs/version-v6/api/router-outlet.md rename to versioned_docs/version-v6/api/router-outlet.mdx diff --git a/versioned_docs/version-v6/api/router.md b/versioned_docs/version-v6/api/router.mdx similarity index 100% rename from versioned_docs/version-v6/api/router.md rename to versioned_docs/version-v6/api/router.mdx diff --git a/versioned_docs/version-v6/api/row.md b/versioned_docs/version-v6/api/row.mdx similarity index 100% rename from versioned_docs/version-v6/api/row.md rename to versioned_docs/version-v6/api/row.mdx diff --git a/versioned_docs/version-v6/api/searchbar.md b/versioned_docs/version-v6/api/searchbar.mdx similarity index 98% rename from versioned_docs/version-v6/api/searchbar.md rename to versioned_docs/version-v6/api/searchbar.mdx index ce0c62b2a41..01afeb91aff 100644 --- a/versioned_docs/version-v6/api/searchbar.md +++ b/versioned_docs/version-v6/api/searchbar.mdx @@ -57,7 +57,7 @@ import CancelButton from '@site/static/usage/v6/searchbar/cancel-button/index.md Searchbars are styled to look native when placed inside of a toolbar. In iOS, searchbars should be placed in their own toolbar, under a toolbar that contains the page title. In Material Design, searchbars are either persistently displayed in their own toolbar, or expand over a toolbar containing the page title. - +{/* Reuse the playground from the Toolbar directory */} import Toolbar from '@site/static/usage/v6/toolbar/searchbars/index.md'; diff --git a/versioned_docs/version-v6/api/segment-button.md b/versioned_docs/version-v6/api/segment-button.mdx similarity index 90% rename from versioned_docs/version-v6/api/segment-button.md rename to versioned_docs/version-v6/api/segment-button.mdx index 0e7d688742b..d3a0995136a 100644 --- a/versioned_docs/version-v6/api/segment-button.md +++ b/versioned_docs/version-v6/api/segment-button.mdx @@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Segment buttons are groups of related buttons inside of a [segment](segment.md). They are displayed in a horizontal row. A segment button can be selected by default by setting the `value` of the segment to the `value` of the segment button. Only one segment button can be selected at a time. +Segment buttons are groups of related buttons inside of a [segment](segment.mdx). They are displayed in a horizontal row. A segment button can be selected by default by setting the `value` of the segment to the `value` of the segment button. Only one segment button can be selected at a time. ## Basic Usage diff --git a/versioned_docs/version-v6/api/segment.md b/versioned_docs/version-v6/api/segment.mdx similarity index 98% rename from versioned_docs/version-v6/api/segment.md rename to versioned_docs/version-v6/api/segment.mdx index 1283792ad65..8eb94ac4f82 100644 --- a/versioned_docs/version-v6/api/segment.md +++ b/versioned_docs/version-v6/api/segment.mdx @@ -43,7 +43,7 @@ import Scrollable from '@site/static/usage/v6/segment/scrollable/index.md'; ## Segments in Toolbars - +{/* Reuse the playground from the Toolbar directory */} import Toolbar from '@site/static/usage/v6/toolbar/segments/index.md'; diff --git a/versioned_docs/version-v6/api/select-option.md b/versioned_docs/version-v6/api/select-option.mdx similarity index 100% rename from versioned_docs/version-v6/api/select-option.md rename to versioned_docs/version-v6/api/select-option.mdx diff --git a/versioned_docs/version-v6/api/select.md b/versioned_docs/version-v6/api/select.mdx similarity index 90% rename from versioned_docs/version-v6/api/select.md rename to versioned_docs/version-v6/api/select.mdx index f731660634f..939b4e4e657 100644 --- a/versioned_docs/version-v6/api/select.md +++ b/versioned_docs/version-v6/api/select.mdx @@ -37,7 +37,7 @@ import SingleSelectionExample from '@site/static/usage/v6/select/basic/single-se ## Interfaces -By default, select uses [ion-alert](alert.md) to open up the overlay of options in an alert. The interface can be changed to use [ion-action-sheet](action-sheet.md) or [ion-popover](popover.md) by passing `action-sheet` or `popover`, respectively, to the `interface` property. Read on to the other sections for the limitations of the different interfaces. +By default, select uses [ion-alert](alert.mdx) to open up the overlay of options in an alert. The interface can be changed to use [ion-action-sheet](action-sheet.mdx) or [ion-popover](popover.mdx) by passing `action-sheet` or `popover`, respectively, to the `interface` property. Read on to the other sections for the limitations of the different interfaces. ### Action Sheet @@ -101,7 +101,7 @@ import ButtonTextExample from '@site/static/usage/v6/select/customization/button Since select uses the alert, action sheet and popover interfaces, options can be passed to these components through the `interfaceOptions` property. This can be used to pass a custom header, subheader, css class, and more. -See the [ion-alert docs](alert.md), [ion-action-sheet docs](action-sheet.md), and [ion-popover docs](popover.md) for the properties that each interface accepts. +See the [ion-alert docs](alert.mdx), [ion-action-sheet docs](action-sheet.mdx), and [ion-popover docs](popover.mdx) for the properties that each interface accepts. Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface. @@ -127,11 +127,11 @@ import StylingSelectExample from '@site/static/usage/v6/select/customization/sty Customizing the interface dialog should be done by following the Customization section in that interface's documentation: -- [Alert Customization](alert.md#customization) -- [Action Sheet Customization](action-sheet.md#customization) -- [Popover Customization](popover.md#customization) +- [Alert Customization](alert.mdx#customization) +- [Action Sheet Customization](action-sheet.mdx#customization) +- [Popover Customization](popover.mdx#customization) -However, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, see the [Select Options documentation](select-option.md) for usage examples of customizing options. +However, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, see the [Select Options documentation](select-option.mdx) for usage examples of customizing options. ## Typeahead Component diff --git a/versioned_docs/version-v6/api/skeleton-text.md b/versioned_docs/version-v6/api/skeleton-text.mdx similarity index 100% rename from versioned_docs/version-v6/api/skeleton-text.md rename to versioned_docs/version-v6/api/skeleton-text.mdx diff --git a/versioned_docs/version-v6/api/slide.md b/versioned_docs/version-v6/api/slide.mdx similarity index 100% rename from versioned_docs/version-v6/api/slide.md rename to versioned_docs/version-v6/api/slide.mdx diff --git a/versioned_docs/version-v6/api/slides.md b/versioned_docs/version-v6/api/slides.mdx similarity index 99% rename from versioned_docs/version-v6/api/slides.md rename to versioned_docs/version-v6/api/slides.mdx index 0c8ee78edc8..ad944a9894a 100644 --- a/versioned_docs/version-v6/api/slides.md +++ b/versioned_docs/version-v6/api/slides.mdx @@ -35,7 +35,7 @@ This component has been deprecated in favor of using Swiper.js directly. Please ::: The Slides component is a multi-section container. Each section can be swiped -or dragged between. It contains any number of [Slide](slide.md) components. +or dragged between. It contains any number of [Slide](slide.mdx) components. This guide will cover migration from the deprecated `ion-slides` component to the framework-specific solutions that Swiper.js provides as well as the existing `ion-slides` API for developers who are still using that component. diff --git a/versioned_docs/version-v6/api/spinner.md b/versioned_docs/version-v6/api/spinner.mdx similarity index 100% rename from versioned_docs/version-v6/api/spinner.md rename to versioned_docs/version-v6/api/spinner.mdx diff --git a/versioned_docs/version-v6/api/split-pane.md b/versioned_docs/version-v6/api/split-pane.mdx similarity index 100% rename from versioned_docs/version-v6/api/split-pane.md rename to versioned_docs/version-v6/api/split-pane.mdx diff --git a/versioned_docs/version-v6/api/tab-bar.md b/versioned_docs/version-v6/api/tab-bar.mdx similarity index 97% rename from versioned_docs/version-v6/api/tab-bar.md rename to versioned_docs/version-v6/api/tab-bar.mdx index b8ab1b26f8f..5b7806ff695 100644 --- a/versioned_docs/version-v6/api/tab-bar.md +++ b/versioned_docs/version-v6/api/tab-bar.mdx @@ -24,7 +24,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -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). +The tab bar is a UI component that contains a set of [tab buttons](tab-button.mdx). A tab bar must be provided inside of [tabs](tabs.mdx) to communicate with each [tab](tab.mdx). ## Usage diff --git a/versioned_docs/version-v6/api/tab-button.md b/versioned_docs/version-v6/api/tab-button.mdx similarity index 96% rename from versioned_docs/version-v6/api/tab-button.md rename to versioned_docs/version-v6/api/tab-button.mdx index 4fdac8afaa6..5f5af47c01a 100644 --- a/versioned_docs/version-v6/api/tab-button.md +++ b/versioned_docs/version-v6/api/tab-button.mdx @@ -16,9 +16,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -A tab button is a UI component that is placed inside of a [tab bar](tab-bar.md). The tab button can specify the layout of the icon and label and connect to a [tab view](tab.md). +A tab button is a UI component that is placed inside of a [tab bar](tab-bar.mdx). The tab button can specify the layout of the icon and label and connect to a [tab view](tab.mdx). -See the [tabs documentation](tabs.md) for more details on configuring tabs. +See the [tabs documentation](tabs.mdx) for more details on configuring tabs. ## Usage diff --git a/versioned_docs/version-v6/api/tab.md b/versioned_docs/version-v6/api/tab.mdx similarity index 80% rename from versioned_docs/version-v6/api/tab.md rename to versioned_docs/version-v6/api/tab.mdx index 5b6cd8cd79e..7cf2e3f5768 100644 --- a/versioned_docs/version-v6/api/tab.md +++ b/versioned_docs/version-v6/api/tab.mdx @@ -21,13 +21,13 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -The tab component is a child component of [tabs](tabs.md). Each tab can contain a top level navigation stack for an app or a single view. An app can have many tabs, all with their own independent navigation. +The tab component is a child component of [tabs](tabs.mdx). Each tab can contain a top level navigation stack for an app or a single view. An app can have many tabs, all with their own independent navigation. :::note Note: This component should only be used with vanilla JavaScript projects. For Angular, React, and Vue apps you do not need to use `ion-tab` to declare your tab components. ::: -See the [tabs documentation](tabs.md) for more details on configuring tabs. +See the [tabs documentation](tabs.mdx) for more details on configuring tabs. ## Properties diff --git a/versioned_docs/version-v6/api/tabs.md b/versioned_docs/version-v6/api/tabs.mdx similarity index 97% rename from versioned_docs/version-v6/api/tabs.md rename to versioned_docs/version-v6/api/tabs.mdx index 8c200d9a226..55a55aafe47 100644 --- a/versioned_docs/version-v6/api/tabs.md +++ b/versioned_docs/version-v6/api/tabs.mdx @@ -22,7 +22,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; Tabs are a top level navigation component to implement a tab-based navigation. -The component is a container of individual [Tab](tab.md) components. +The component is a container of individual [Tab](tab.mdx) components. The `ion-tabs` component does not have any styling and works as a router outlet in order to handle navigation. It does not provide any UI feedback or mechanism to switch between tabs. In order to do so, an `ion-tab-bar` should be provided as a direct child of `ion-tabs`. diff --git a/versioned_docs/version-v6/api/text.md b/versioned_docs/version-v6/api/text.mdx similarity index 100% rename from versioned_docs/version-v6/api/text.md rename to versioned_docs/version-v6/api/text.mdx diff --git a/versioned_docs/version-v6/api/textarea.md b/versioned_docs/version-v6/api/textarea.mdx similarity index 100% rename from versioned_docs/version-v6/api/textarea.md rename to versioned_docs/version-v6/api/textarea.mdx diff --git a/versioned_docs/version-v6/api/thumbnail.md b/versioned_docs/version-v6/api/thumbnail.mdx similarity index 100% rename from versioned_docs/version-v6/api/thumbnail.md rename to versioned_docs/version-v6/api/thumbnail.mdx diff --git a/versioned_docs/version-v6/api/title.md b/versioned_docs/version-v6/api/title.mdx similarity index 94% rename from versioned_docs/version-v6/api/title.md rename to versioned_docs/version-v6/api/title.mdx index 69d24cfb592..dca958daf24 100644 --- a/versioned_docs/version-v6/api/title.md +++ b/versioned_docs/version-v6/api/title.mdx @@ -45,7 +45,7 @@ import CollapsibleLargeTitle from '@site/static/usage/v6/title/collapsible-large ### Collapsible Buttons -The [buttons](./buttons.md) component can be used with the [`collapse`](./buttons.md#collapse) property to additionally display in the header as the toolbar is collapsed. +The [buttons](./buttons.mdx) component can be used with the [`collapse`](./buttons.mdx#collapse) property to additionally display in the header as the toolbar is collapsed. import CollapsibleLargeTitleButtons from '@site/static/usage/v6/title/collapsible-large-title/buttons/index.md'; diff --git a/versioned_docs/version-v6/api/toast.md b/versioned_docs/version-v6/api/toast.mdx similarity index 99% rename from versioned_docs/version-v6/api/toast.md rename to versioned_docs/version-v6/api/toast.mdx index 847c359f1c8..89745f03f78 100644 --- a/versioned_docs/version-v6/api/toast.md +++ b/versioned_docs/version-v6/api/toast.mdx @@ -113,7 +113,7 @@ import StackedPlayground from '@site/static/usage/v6/toast/layout/index.md'; ## Icons -An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an [Alert](alert.md) instead. +An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an [Alert](alert.mdx) instead. import IconPlayground from '@site/static/usage/v6/toast/icon/index.md'; diff --git a/versioned_docs/version-v6/api/toggle.md b/versioned_docs/version-v6/api/toggle.mdx similarity index 100% rename from versioned_docs/version-v6/api/toggle.md rename to versioned_docs/version-v6/api/toggle.mdx diff --git a/versioned_docs/version-v6/api/toolbar.md b/versioned_docs/version-v6/api/toolbar.mdx similarity index 100% rename from versioned_docs/version-v6/api/toolbar.md rename to versioned_docs/version-v6/api/toolbar.mdx diff --git a/versioned_docs/version-v6/api/virtual-scroll.md b/versioned_docs/version-v6/api/virtual-scroll.mdx similarity index 97% rename from versioned_docs/version-v6/api/virtual-scroll.md rename to versioned_docs/version-v6/api/virtual-scroll.mdx index 54d1a78f01b..4e4271a361d 100644 --- a/versioned_docs/version-v6/api/virtual-scroll.md +++ b/versioned_docs/version-v6/api/virtual-scroll.mdx @@ -34,15 +34,15 @@ This guide will go over the recommended virtual scrolling packages for each fram ## Angular -For virtual scrolling options in Ionic Angular, please see [Angular Virtual Scroll Guide](../angular/virtual-scroll.md). +For virtual scrolling options in Ionic Angular, please see [Angular Virtual Scroll Guide](../angular/virtual-scroll.mdx). ## React -For virtual scrolling options in Ionic React, please see [React Virtual Scroll Guide](../react/virtual-scroll.md). +For virtual scrolling options in Ionic React, please see [React Virtual Scroll Guide](../react/virtual-scroll.mdx). ## Vue -For virtual scrolling options in Ionic Vue, please see [Vue Virtual Scroll Guide](../vue/virtual-scroll.md). +For virtual scrolling options in Ionic Vue, please see [Vue Virtual Scroll Guide](../vue/virtual-scroll.mdx). --- @@ -71,7 +71,7 @@ scrolling. In order to better control images, Ionic provides `` to manage HTTP requests and image rendering. While scrolling through items quickly, `` knows when and when not to make requests, when and when not to render images, and only loads the images that are viewable -after scrolling. [Read more about `ion-img`.](img.md) +after scrolling. [Read more about `ion-img`.](img.mdx) It's also important for app developers to ensure image sizes are locked in, and after images have fully loaded they do not change size and affect any @@ -107,7 +107,7 @@ via CSS. ### Use `ion-img` for images When including images within Virtual Scroll, be sure to use -[`ion-img`](img.md) rather than the standard `` HTML element. +[`ion-img`](img.mdx) rather than the standard `` HTML element. With `ion-img`, images are lazy loaded so only the viewable ones are rendered, and HTTP requests are efficiently controlled while scrolling. diff --git a/versioned_docs/version-v6/core-concepts/cross-platform.md b/versioned_docs/version-v6/core-concepts/cross-platform.md index 3bb1bfc6c6b..8ecfa6b3053 100644 --- a/versioned_docs/version-v6/core-concepts/cross-platform.md +++ b/versioned_docs/version-v6/core-concepts/cross-platform.md @@ -67,7 +67,7 @@ This will render 5 items with a width of 100% each. This may look great on a mob -To improve this experience, we can wrap the items in a [Grid](../api/grid.md) component. The view can be easily rewritten into something more usable on larger screens: +To improve this experience, we can wrap the items in a [Grid](../api/grid.mdx) component. The view can be easily rewritten into something more usable on larger screens: ```html @@ -149,7 +149,7 @@ There’s a lot going on in the example above. These are the key points: - The `size` attribute can have a breakpoint added to it, `size-{breakpoint}`. This value sets the size for the specified breakpoint and above. -For more information on customizing with grid, see the [Grid](../api/grid.md) documentation. +For more information on customizing with grid, see the [Grid](../api/grid.mdx) documentation. ## Storage diff --git a/versioned_docs/version-v6/developing/config/per-platform/index.md b/versioned_docs/version-v6/developing/config/per-platform/index.md index 3deba7540b0..1b40400f5ab 100644 --- a/versioned_docs/version-v6/developing/config/per-platform/index.md +++ b/versioned_docs/version-v6/developing/config/per-platform/index.md @@ -15,7 +15,7 @@ import TabItem from '@theme/TabItem'; :::note Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly. -See the [Angular Platform Documentation](../angular/platform) for the types of platforms you can detect. +See the [Angular Platform Documentation](../../../angular/platform.mdx) for the types of platforms you can detect. ::: ```ts title="app.module.ts" @@ -36,7 +36,7 @@ import { isPlatform, IonicModule } from '@ionic/angular'; :::note -See the [React Platform Documentation](../react/platform) for the types of platforms you can detect. +See the [React Platform Documentation](../../../react/platform.mdx) for the types of platforms you can detect. ::: ```tsx title="App.tsx" @@ -51,7 +51,7 @@ setupIonicReact({ :::note -See the [Vue Platform Documentation](../vue/platform) for the types of platforms you can detect. +See the [Vue Platform Documentation](../../../vue/platform.mdx) for the types of platforms you can detect. ::: ```ts title="main.ts" diff --git a/versioned_docs/version-v6/index.md b/versioned_docs/version-v6/index.md index f572f5f7877..a86645ccfed 100644 --- a/versioned_docs/version-v6/index.md +++ b/versioned_docs/version-v6/index.md @@ -22,7 +22,7 @@ import DocsCards from '@components/global/DocsCards'; -Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.md), [React](react.md), and [Vue](vue/overview.md). +Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.mdx), [React](react.mdx), and [Vue](vue/overview.mdx). Get started building by [installing Ionic](intro/cli.md) or following our [First App Tutorial](intro/next.md#build-your-first-app) to learn the main concepts. @@ -58,7 +58,7 @@ Get started building by [installing Ionic](intro/cli.md) or following our [First ## Overview -Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.md), [React](react.md), or [Vue](vue/overview.md). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.md). If you’d like to learn more about Ionic before diving in, we created a video to walk you through the basics. +Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.mdx), [React](react.mdx), or [Vue](vue/overview.mdx). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.md). If you’d like to learn more about Ionic before diving in, we created a video to walk you through the basics. ### One codebase, running everywhere diff --git a/versioned_docs/version-v6/layout/structure.md b/versioned_docs/version-v6/layout/structure.md index f0784e16d0b..8ec5d24e141 100644 --- a/versioned_docs/version-v6/layout/structure.md +++ b/versioned_docs/version-v6/layout/structure.md @@ -25,7 +25,7 @@ Ionic Framework provides several different layouts that can be used to structure -The most simple layout available consists of a [header](../api/header.md) and [content](../api/content.md). Most pages in an app generally have both of these, but a header is not required in order to use content. +The most simple layout available consists of a [header](../api/header.mdx) and [content](../api/content.mdx). Most pages in an app generally have both of these, but a header is not required in order to use content. ```html @@ -95,7 +95,7 @@ You can view a live example of this setup in Angular [here](https://stackblitz.c ## Tabs Layout -A layout consisting of horizontal [tabs](../api/tabs.md) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using an `ion-router-outlet` or `ion-nav`. +A layout consisting of horizontal [tabs](../api/tabs.mdx) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using an `ion-router-outlet` or `ion-nav`. ```html @@ -127,7 +127,7 @@ You can view a live example of this setup in Angular [here](https://stackblitz.c ## Menu Layout -A standard layout among mobile apps includes the ability to toggle a side [menu](../api/menu.md) by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content. +A standard layout among mobile apps includes the ability to toggle a side [menu](../api/menu.mdx) by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content. ```html @@ -180,7 +180,7 @@ You can view a live example of this setup in Angular [here](https://stackblitz.c ## Split Pane Layout -A [split pane](../api/split-pane.md) layout has a more complex structure because it can combine the previous layouts. It allows for multiple views to be displayed when the viewport is above a specified breakpoint. If the device's screen size is below a certain size, the split pane view will be hidden. +A [split pane](../api/split-pane.mdx) layout has a more complex structure because it can combine the previous layouts. It allows for multiple views to be displayed when the viewport is above a specified breakpoint. If the device's screen size is below a certain size, the split pane view will be hidden. By default, the split pane view will show when the screen is larger than `768px`, or the `md` breakpoint, but this can be customized to use different breakpoints by setting the `when` property. Below is an example where the split pane contains a menu that is visible for `sm` screens and up, or when the viewport is larger than `576px`. By resizing the browser horizontally so that the app is smaller than this, the split pane view will disappear. @@ -228,7 +228,7 @@ By default, the split pane view will show when the screen is larger than `768px` ``` -It's important to note that the element with the `id` matching the `content-id` specified by the split pane will be the main content that is always visible. This can be any element, including an [ion-nav](../api/nav.md), [ion-router-outlet](../api/router-outlet.md), or an [ion-tabs](../api/tabs.md). +It's important to note that the element with the `id` matching the `content-id` specified by the split pane will be the main content that is always visible. This can be any element, including an [ion-nav](../api/nav.mdx), [ion-router-outlet](../api/router-outlet.mdx), or an [ion-tabs](../api/tabs.mdx). ### Live examples diff --git a/versioned_docs/version-v6/react/lifecycle.md b/versioned_docs/version-v6/react/lifecycle.mdx similarity index 100% rename from versioned_docs/version-v6/react/lifecycle.md rename to versioned_docs/version-v6/react/lifecycle.mdx diff --git a/versioned_docs/version-v6/react/navigation.md b/versioned_docs/version-v6/react/navigation.mdx similarity index 100% rename from versioned_docs/version-v6/react/navigation.md rename to versioned_docs/version-v6/react/navigation.mdx diff --git a/versioned_docs/version-v6/react/overlays.md b/versioned_docs/version-v6/react/overlays.mdx similarity index 100% rename from versioned_docs/version-v6/react/overlays.md rename to versioned_docs/version-v6/react/overlays.mdx diff --git a/versioned_docs/version-v6/react/performance.md b/versioned_docs/version-v6/react/performance.mdx similarity index 100% rename from versioned_docs/version-v6/react/performance.md rename to versioned_docs/version-v6/react/performance.mdx diff --git a/versioned_docs/version-v6/react/platform.md b/versioned_docs/version-v6/react/platform.mdx similarity index 100% rename from versioned_docs/version-v6/react/platform.md rename to versioned_docs/version-v6/react/platform.mdx diff --git a/versioned_docs/version-v6/react/pwa.md b/versioned_docs/version-v6/react/pwa.mdx similarity index 100% rename from versioned_docs/version-v6/react/pwa.md rename to versioned_docs/version-v6/react/pwa.mdx diff --git a/versioned_docs/version-v6/react/quickstart.md b/versioned_docs/version-v6/react/quickstart.mdx similarity index 99% rename from versioned_docs/version-v6/react/quickstart.md rename to versioned_docs/version-v6/react/quickstart.mdx index f6652a6b683..7f82606c255 100644 --- a/versioned_docs/version-v6/react/quickstart.md +++ b/versioned_docs/version-v6/react/quickstart.mdx @@ -94,7 +94,7 @@ The next import is from `react-router-dom`. We're importing Route, which is how Following ReactRouter, we next have our first imports for Ionic. To use a component in React, you must first import it. So for Ionic, this means anytime we want to use a Button or a Card, it must be added to our imports. In the case of our App component, we're only using `IonApp`, `IonRouterOutlet`, and `IonReactRouter`. -`IonReactRouter` is a component that wraps ReactRouter’s BrowserRouter component. It more or less behaves the same as BrowserRouter with a few differences. We have a deeper guide that goes over these differences in our [React Navigation Docs](navigation.md). +`IonReactRouter` is a component that wraps ReactRouter’s BrowserRouter component. It more or less behaves the same as BrowserRouter with a few differences. We have a deeper guide that goes over these differences in our [React Navigation Docs](navigation.mdx). The last important import is the `Home` component import. This is a component that we will be able to navigate to in our app. We'll look at the navigation part a bit later. @@ -318,7 +318,7 @@ export default NewItem; ``` :::note -Each view must contain an `IonPage` component. Page transitions will not work correctly without it. See the [IonPage Documentation](navigation.md#ionpage) for more information. +Each view must contain an `IonPage` component. Page transitions will not work correctly without it. See the [IonPage Documentation](navigation.mdx#ionpage) for more information. ::: The content here is pretty straight forward and should look similar to the `Home` component. What is new is the `IonBackButton` component. This is used to navigate back to the previous route. Pretty straight forward? Ok, but what if we reload the page? @@ -445,7 +445,7 @@ export default Home; ## Where to go from here -This guide covered the basics of creating an Ionic React app, adding some basic navigation, and introducing Capacitor as a way of building native apps. To dive deeper into building complete Ionic apps with React and Capacitor, follow our [First App guide](your-first-app.md). +This guide covered the basics of creating an Ionic React app, adding some basic navigation, and introducing Capacitor as a way of building native apps. To dive deeper into building complete Ionic apps with React and Capacitor, follow our [First App guide](your-first-app.mdx). For a more detailed look at Ionic’s components, check out the [component API pages](https://ionicframework.com/docs/components). For more details on React, review the [React Docs](https://reactjs.org/). To keep building native features, see the [Capacitor docs](https://capacitorjs.com/docs/). diff --git a/versioned_docs/version-v6/react/slides.md b/versioned_docs/version-v6/react/slides.mdx similarity index 100% rename from versioned_docs/version-v6/react/slides.md rename to versioned_docs/version-v6/react/slides.mdx diff --git a/versioned_docs/version-v6/react/storage.md b/versioned_docs/version-v6/react/storage.mdx similarity index 100% rename from versioned_docs/version-v6/react/storage.md rename to versioned_docs/version-v6/react/storage.mdx diff --git a/versioned_docs/version-v6/react/testing.md b/versioned_docs/version-v6/react/testing.mdx similarity index 100% rename from versioned_docs/version-v6/react/testing.md rename to versioned_docs/version-v6/react/testing.mdx diff --git a/versioned_docs/version-v6/react/virtual-scroll.md b/versioned_docs/version-v6/react/virtual-scroll.mdx similarity index 100% rename from versioned_docs/version-v6/react/virtual-scroll.md rename to versioned_docs/version-v6/react/virtual-scroll.mdx diff --git a/versioned_docs/version-v6/react/your-first-app.md b/versioned_docs/version-v6/react/your-first-app.mdx similarity index 100% rename from versioned_docs/version-v6/react/your-first-app.md rename to versioned_docs/version-v6/react/your-first-app.mdx diff --git a/versioned_docs/version-v6/react/your-first-app/2-taking-photos.md b/versioned_docs/version-v6/react/your-first-app/2-taking-photos.mdx similarity index 100% rename from versioned_docs/version-v6/react/your-first-app/2-taking-photos.md rename to versioned_docs/version-v6/react/your-first-app/2-taking-photos.mdx diff --git a/versioned_docs/version-v6/react/your-first-app/3-saving-photos.md b/versioned_docs/version-v6/react/your-first-app/3-saving-photos.mdx similarity index 100% rename from versioned_docs/version-v6/react/your-first-app/3-saving-photos.md rename to versioned_docs/version-v6/react/your-first-app/3-saving-photos.mdx diff --git a/versioned_docs/version-v6/react/your-first-app/4-loading-photos.md b/versioned_docs/version-v6/react/your-first-app/4-loading-photos.mdx similarity index 100% rename from versioned_docs/version-v6/react/your-first-app/4-loading-photos.md rename to versioned_docs/version-v6/react/your-first-app/4-loading-photos.mdx diff --git a/versioned_docs/version-v6/react/your-first-app/5-adding-mobile.md b/versioned_docs/version-v6/react/your-first-app/5-adding-mobile.mdx similarity index 100% rename from versioned_docs/version-v6/react/your-first-app/5-adding-mobile.md rename to versioned_docs/version-v6/react/your-first-app/5-adding-mobile.mdx diff --git a/versioned_docs/version-v6/react/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v6/react/your-first-app/6-deploying-mobile.mdx similarity index 100% rename from versioned_docs/version-v6/react/your-first-app/6-deploying-mobile.md rename to versioned_docs/version-v6/react/your-first-app/6-deploying-mobile.mdx diff --git a/versioned_docs/version-v6/react/your-first-app/7-live-reload.md b/versioned_docs/version-v6/react/your-first-app/7-live-reload.mdx similarity index 100% rename from versioned_docs/version-v6/react/your-first-app/7-live-reload.md rename to versioned_docs/version-v6/react/your-first-app/7-live-reload.mdx diff --git a/versioned_docs/version-v6/react/your-first-app/8-distribute.md b/versioned_docs/version-v6/react/your-first-app/8-distribute.mdx similarity index 100% rename from versioned_docs/version-v6/react/your-first-app/8-distribute.md rename to versioned_docs/version-v6/react/your-first-app/8-distribute.mdx diff --git a/versioned_docs/version-v6/theming/css-shadow-parts.md b/versioned_docs/version-v6/theming/css-shadow-parts.md index 1c644fb1001..c17d1fdbc1d 100644 --- a/versioned_docs/version-v6/theming/css-shadow-parts.md +++ b/versioned_docs/version-v6/theming/css-shadow-parts.md @@ -17,7 +17,7 @@ CSS Shadow Parts allow developers to style CSS properties on an element inside o Ionic Framework is a distributed set of Web Components. Web Components follow the Shadow DOM specification in order to encapsulate styles and markup. :::note -Ionic Framework components are **not all** Shadow DOM components. If the component is a Shadow DOM component, there will be a badge in the top right of its [component documentation](../components.md). An example of a Shadow DOM component is the [button component](../api/button.md). +Ionic Framework components are **not all** Shadow DOM components. If the component is a Shadow DOM component, there will be a badge in the top right of its [component documentation](../components.md). An example of a Shadow DOM component is the [button component](../api/button.mdx). ::: Shadow DOM is useful for preventing styles from leaking out of components and unintentionally applying to other elements. For example, we assign a `.button` class to our `ion-button` component. Without Shadow DOM encapsulation, if a user were to set the class `.button` on one of their own elements, it would inherit the Ionic Framework button styles. Since `ion-button` is a Shadow component, this is not a problem. @@ -61,7 +61,7 @@ Continuing to use the `ion-select` component as an example, the markup is update ``` -The above shows two parts: `placeholder` and `icon`. See the [select documentation](../api/select.md#css-shadow-parts) for all of its parts. +The above shows two parts: `placeholder` and `icon`. See the [select documentation](../api/select.mdx#css-shadow-parts) for all of its parts. With these parts exposed, the element can now be styled directly using [::part](#how-part-works). diff --git a/versioned_docs/version-v6/theming/css-variables.md b/versioned_docs/version-v6/theming/css-variables.md index 85b320b6392..66482788734 100644 --- a/versioned_docs/version-v6/theming/css-variables.md +++ b/versioned_docs/version-v6/theming/css-variables.md @@ -91,7 +91,7 @@ const color = el.style.getPropertyValue('--charcoal'); ### Component Variables -Ionic provides variables that exist at the component level, such as `--background` and `--color`. For a list of the custom properties a component accepts, view the `CSS Custom Properties` section of its [API reference](../api.md). For example, see the [Button CSS Custom Properties](../api/button.md#css-custom-properties). +Ionic provides variables that exist at the component level, such as `--background` and `--color`. For a list of the custom properties a component accepts, view the `CSS Custom Properties` section of its [API reference](../api.md). For example, see the [Button CSS Custom Properties](../api/button.mdx#css-custom-properties). ### Global Variables diff --git a/versioned_docs/version-v6/vue/lifecycle.md b/versioned_docs/version-v6/vue/lifecycle.mdx similarity index 100% rename from versioned_docs/version-v6/vue/lifecycle.md rename to versioned_docs/version-v6/vue/lifecycle.mdx diff --git a/versioned_docs/version-v6/vue/navigation.md b/versioned_docs/version-v6/vue/navigation.mdx similarity index 100% rename from versioned_docs/version-v6/vue/navigation.md rename to versioned_docs/version-v6/vue/navigation.mdx diff --git a/docs/vue/overview.md b/versioned_docs/version-v6/vue/overview.mdx similarity index 98% rename from docs/vue/overview.md rename to versioned_docs/version-v6/vue/overview.mdx index 045cb75b123..cd18790e79d 100644 --- a/docs/vue/overview.md +++ b/versioned_docs/version-v6/vue/overview.mdx @@ -32,12 +32,12 @@ While there are no known technical limitations to using `Ionic Vue` with [Cordov ## From the Community - +{/* cspell:disable */} - [Using Vue.js with Ionic & Capacitor](https://dev.to/aaronksaunders/using-vue-js-v3-beta-with-ionic-components-capacitor-plugins-2b6f) - Aaron Saunders - [Building Mobile Apps With Vue3 and Ionic](https://soshace.com/building-mobile-apps-with-vue3-and-ionic/) - Oluwaseun Raphael Afolayan - +{/* cspell:enable */} ## Installation diff --git a/versioned_docs/version-v6/vue/performance.md b/versioned_docs/version-v6/vue/performance.mdx similarity index 100% rename from versioned_docs/version-v6/vue/performance.md rename to versioned_docs/version-v6/vue/performance.mdx diff --git a/versioned_docs/version-v6/vue/platform.md b/versioned_docs/version-v6/vue/platform.mdx similarity index 100% rename from versioned_docs/version-v6/vue/platform.md rename to versioned_docs/version-v6/vue/platform.mdx diff --git a/versioned_docs/version-v6/vue/pwa.md b/versioned_docs/version-v6/vue/pwa.mdx similarity index 100% rename from versioned_docs/version-v6/vue/pwa.md rename to versioned_docs/version-v6/vue/pwa.mdx diff --git a/versioned_docs/version-v6/vue/quickstart.md b/versioned_docs/version-v6/vue/quickstart.mdx similarity index 99% rename from versioned_docs/version-v6/vue/quickstart.md rename to versioned_docs/version-v6/vue/quickstart.mdx index 675f18476aa..7424fc0ae8c 100644 --- a/versioned_docs/version-v6/vue/quickstart.md +++ b/versioned_docs/version-v6/vue/quickstart.mdx @@ -452,7 +452,7 @@ Let's fill the `NewItem.vue` file with some placeholder content for the moment. ``` :::note -Each view must contain an `IonPage` component. Page transitions will not work correctly without it. See the [IonPage Documentation](navigation.md#ionpage) for more information. +Each view must contain an `IonPage` component. Page transitions will not work correctly without it. See the [IonPage Documentation](navigation.mdx#ionpage) for more information. ::: The content here should look similar to the `Home` component. What is different here is the `IonBackButton` component. This is used to navigate back to the previous route. Seems easy enough, right? Ok, but what if we reload the page? @@ -728,7 +728,7 @@ Next, check out [all the APIs](https://capacitorjs.com/docs/apis) that are avail ## Where to go from here -This guide covered the basics of creating an Ionic Vue app, adding some basic navigation, and introducing Capacitor as a way of building native apps. To dive deeper into building complete Ionic Framework apps with Vue and Capacitor, follow our [First App guide](your-first-app.md). +This guide covered the basics of creating an Ionic Vue app, adding some basic navigation, and introducing Capacitor as a way of building native apps. To dive deeper into building complete Ionic Framework apps with Vue and Capacitor, follow our [First App guide](your-first-app.mdx). For a more detailed look at Ionic Frameworks’s components, check out the [component API pages](https://ionicframework.com/docs/components). For more details on Vue, review the [Vue Docs](https://v3.vuejs.org/). To keep building native features, see the [Capacitor docs](https://capacitorjs.com/docs/). diff --git a/versioned_docs/version-v6/vue/slides.md b/versioned_docs/version-v6/vue/slides.mdx similarity index 100% rename from versioned_docs/version-v6/vue/slides.md rename to versioned_docs/version-v6/vue/slides.mdx diff --git a/versioned_docs/version-v6/vue/storage.md b/versioned_docs/version-v6/vue/storage.mdx similarity index 100% rename from versioned_docs/version-v6/vue/storage.md rename to versioned_docs/version-v6/vue/storage.mdx diff --git a/versioned_docs/version-v6/vue/testing.md b/versioned_docs/version-v6/vue/testing.mdx similarity index 100% rename from versioned_docs/version-v6/vue/testing.md rename to versioned_docs/version-v6/vue/testing.mdx diff --git a/versioned_docs/version-v6/vue/troubleshooting.md b/versioned_docs/version-v6/vue/troubleshooting.mdx similarity index 92% rename from versioned_docs/version-v6/vue/troubleshooting.md rename to versioned_docs/version-v6/vue/troubleshooting.mdx index 1483bb9037b..b0f5d6486e3 100644 --- a/versioned_docs/version-v6/vue/troubleshooting.md +++ b/versioned_docs/version-v6/vue/troubleshooting.mdx @@ -41,7 +41,7 @@ To resolve this issue, you need to import the component from `@ionic/vue` and pr ``` -Prefer to register your components globally once? We have you covered. Our [Optimizing Your Build Guide](quickstart.md#optimizing-your-build) shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach. +Prefer to register your components globally once? We have you covered. Our [Optimizing Your Build Guide](quickstart.mdx#optimizing-your-build) shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach. ## Slot attributes are deprecated @@ -79,7 +79,7 @@ ionContentRef.value.scrollToBottom(); In other framework integrations such as Ionic React, this is not needed as any `ref` you provide is automatically forwarded to the underlying Web Component instance. We are unable to do the same thing here due to limitations in how Vue manages refs. -See the [Quickstart Guide](quickstart.md#calling-methods-on-components) for more information. +See the [Quickstart Guide](quickstart.mdx#calling-methods-on-components) for more information. ## Page transitions are not working @@ -113,7 +113,7 @@ In order for page transitions to work correctly, each page must have an `ion-pag ``` -See the [IonPage documentation](navigation.md#ionpage) for more information. +See the [IonPage documentation](navigation.mdx#ionpage) for more information. ## Ionic events bound in JavaScript are not firing diff --git a/versioned_docs/version-v6/vue/utility-functions.md b/versioned_docs/version-v6/vue/utility-functions.mdx similarity index 100% rename from versioned_docs/version-v6/vue/utility-functions.md rename to versioned_docs/version-v6/vue/utility-functions.mdx diff --git a/versioned_docs/version-v6/vue/virtual-scroll.md b/versioned_docs/version-v6/vue/virtual-scroll.mdx similarity index 100% rename from versioned_docs/version-v6/vue/virtual-scroll.md rename to versioned_docs/version-v6/vue/virtual-scroll.mdx diff --git a/versioned_docs/version-v6/vue/your-first-app.md b/versioned_docs/version-v6/vue/your-first-app.mdx similarity index 100% rename from versioned_docs/version-v6/vue/your-first-app.md rename to versioned_docs/version-v6/vue/your-first-app.mdx diff --git a/versioned_docs/version-v6/vue/your-first-app/2-taking-photos.md b/versioned_docs/version-v6/vue/your-first-app/2-taking-photos.mdx similarity index 100% rename from versioned_docs/version-v6/vue/your-first-app/2-taking-photos.md rename to versioned_docs/version-v6/vue/your-first-app/2-taking-photos.mdx diff --git a/versioned_docs/version-v6/vue/your-first-app/3-saving-photos.md b/versioned_docs/version-v6/vue/your-first-app/3-saving-photos.mdx similarity index 100% rename from versioned_docs/version-v6/vue/your-first-app/3-saving-photos.md rename to versioned_docs/version-v6/vue/your-first-app/3-saving-photos.mdx diff --git a/versioned_docs/version-v6/vue/your-first-app/4-loading-photos.md b/versioned_docs/version-v6/vue/your-first-app/4-loading-photos.mdx similarity index 100% rename from versioned_docs/version-v6/vue/your-first-app/4-loading-photos.md rename to versioned_docs/version-v6/vue/your-first-app/4-loading-photos.mdx diff --git a/versioned_docs/version-v6/vue/your-first-app/5-adding-mobile.md b/versioned_docs/version-v6/vue/your-first-app/5-adding-mobile.mdx similarity index 100% rename from versioned_docs/version-v6/vue/your-first-app/5-adding-mobile.md rename to versioned_docs/version-v6/vue/your-first-app/5-adding-mobile.mdx diff --git a/versioned_docs/version-v6/vue/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v6/vue/your-first-app/6-deploying-mobile.mdx similarity index 100% rename from versioned_docs/version-v6/vue/your-first-app/6-deploying-mobile.md rename to versioned_docs/version-v6/vue/your-first-app/6-deploying-mobile.mdx diff --git a/versioned_docs/version-v6/vue/your-first-app/7-live-reload.md b/versioned_docs/version-v6/vue/your-first-app/7-live-reload.mdx similarity index 100% rename from versioned_docs/version-v6/vue/your-first-app/7-live-reload.md rename to versioned_docs/version-v6/vue/your-first-app/7-live-reload.mdx diff --git a/versioned_docs/version-v6/vue/your-first-app/8-distribute.md b/versioned_docs/version-v6/vue/your-first-app/8-distribute.mdx similarity index 100% rename from versioned_docs/version-v6/vue/your-first-app/8-distribute.md rename to versioned_docs/version-v6/vue/your-first-app/8-distribute.mdx From 9a9be017c2e5238734a0ed453eeda1e15ef96c71 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 19 Apr 2024 08:40:22 -0700 Subject: [PATCH 2/4] chore(mdx): use mdx exts for c-d folders (#3456) --- docs/cli/{configuration.md => configuration.mdx} | 2 +- docs/cli/{livereload.md => livereload.mdx} | 2 +- docs/cli/{using-a-proxy.md => using-a-proxy.mdx} | 0 docs/contributing/{coc.md => coc.mdx} | 0 .../contributing/how-to-contribute.mdx | 2 +- .../{cross-platform.md => cross-platform.mdx} | 0 .../{fundamentals.md => fundamentals.mdx} | 2 +- docs/core-concepts/{webview.md => webview.mdx} | 0 ...e-web-apps.md => what-are-progressive-web-apps.mdx} | 0 docs/deployment/{app-store.md => app-store.mdx} | 0 ...{progressive-web-app.md => progressive-web-app.mdx} | 2 +- docs/developer-resources/{books.md => books.mdx} | 0 docs/developer-resources/{courses.md => courses.mdx} | 0 docs/developer-resources/{guides.md => guides.mdx} | 4 ++-- ...ge.md => creating-photo-gallery-device-storage.mdx} | 0 .../guides/first-app-v3/{intro.md => intro.mdx} | 0 .../{ios-android-camera.md => ios-android-camera.mdx} | 0 .../first-app-v3/realtime-updates-ionic-deploy.mdx | 6 +++--- .../guides/first-app-v3/{theming.md => theming.mdx} | 0 ...c-monitoring.md => track-bugs-ionic-monitoring.mdx} | 0 ...ge.md => creating-photo-gallery-device-storage.mdx} | 0 .../guides/first-app-v4/{intro.md => intro.mdx} | 2 +- .../guides/first-app-v4/ios-android-camera.mdx | 2 +- .../guides/first-app-v4/{theming.md => theming.mdx} | 0 docs/developer-resources/{posts.md => posts.mdx} | 0 docs/developer-resources/{tools.md => tools.mdx} | 0 docs/developer-resources/{videos.md => videos.mdx} | 0 docs/developing/{android.md => android.mdx} | 0 docs/developing/{config.md => config.mdx} | 10 +++++----- docs/developing/config/global/{index.md => index.mdx} | 0 .../config/per-component/{index.md => index.mdx} | 0 .../per-platform-fallback/{index.md => index.mdx} | 0 .../per-platform-overrides/{index.md => index.mdx} | 0 .../config/per-platform/{index.md => index.mdx} | 2 +- ...ardware-back-button.md => hardware-back-button.mdx} | 2 +- docs/developing/{ios.md => ios.mdx} | 0 docs/developing/{keyboard.md => keyboard.mdx} | 0 .../{managing-focus.md => managing-focus.mdx} | 0 docs/developing/{previewing.md => previewing.mdx} | 10 +++++----- docs/developing/{scaffolding.md => scaffolding.mdx} | 0 docs/developing/{starting.md => starting.mdx} | 0 docs/developing/{tips.md => tips.mdx} | 0 .../version-v5/cli/commands/{build.md => build.mdx} | 0 .../commands/{capacitor-add.md => capacitor-add.mdx} | 0 .../{capacitor-build.md => capacitor-build.mdx} | 0 .../commands/{capacitor-copy.md => capacitor-copy.mdx} | 0 .../commands/{capacitor-open.md => capacitor-open.mdx} | 0 .../commands/{capacitor-run.md => capacitor-run.mdx} | 0 .../commands/{capacitor-sync.md => capacitor-sync.mdx} | 0 .../{capacitor-update.md => capacitor-update.mdx} | 0 .../cli/commands/{completion.md => completion.mdx} | 0 .../cli/commands/{config-get.md => config-get.mdx} | 0 .../cli/commands/{config-set.md => config-set.mdx} | 0 .../cli/commands/{config-unset.md => config-unset.mdx} | 0 .../commands/{cordova-build.md => cordova-build.mdx} | 0 .../{cordova-compile.md => cordova-compile.mdx} | 0 .../{cordova-emulate.md => cordova-emulate.mdx} | 0 .../{cordova-platform.md => cordova-platform.mdx} | 0 .../commands/{cordova-plugin.md => cordova-plugin.mdx} | 0 .../{cordova-prepare.md => cordova-prepare.mdx} | 0 ...ordova-requirements.md => cordova-requirements.mdx} | 0 .../{cordova-resources.md => cordova-resources.mdx} | 0 .../cli/commands/{cordova-run.md => cordova-run.mdx} | 0 .../cli/commands/{deploy-add.md => deploy-add.mdx} | 0 .../cli/commands/{deploy-build.md => deploy-build.mdx} | 0 .../{deploy-configure.md => deploy-configure.mdx} | 0 .../{deploy-manifest.md => deploy-manifest.mdx} | 0 .../version-v5/cli/commands/{docs.md => docs.mdx} | 0 .../cli/commands/{doctor-check.md => doctor-check.mdx} | 0 .../cli/commands/{doctor-list.md => doctor-list.mdx} | 0 .../cli/commands/{doctor-treat.md => doctor-treat.mdx} | 0 ...{enterprise-register.md => enterprise-register.mdx} | 0 .../cli/commands/{generate.md => generate.mdx} | 0 .../cli/commands/{git-remote.md => git-remote.mdx} | 0 .../version-v5/cli/commands/{info.md => info.mdx} | 0 .../version-v5/cli/commands/{init.md => init.mdx} | 0 ...ntegrations-disable.md => integrations-disable.mdx} | 0 ...{integrations-enable.md => integrations-enable.mdx} | 0 .../{integrations-list.md => integrations-list.mdx} | 0 .../version-v5/cli/commands/{link.md => link.mdx} | 0 .../version-v5/cli/commands/{login.md => login.mdx} | 0 .../version-v5/cli/commands/{logout.md => logout.mdx} | 0 .../commands/{package-build.md => package-build.mdx} | 0 .../commands/{package-deploy.md => package-deploy.mdx} | 0 .../version-v5/cli/commands/{repair.md => repair.mdx} | 0 .../version-v5/cli/commands/{serve.md => serve.mdx} | 0 .../version-v5/cli/commands/{signup.md => signup.mdx} | 0 .../cli/commands/{ssh-add.md => ssh-add.mdx} | 0 .../cli/commands/{ssh-delete.md => ssh-delete.mdx} | 0 .../cli/commands/{ssh-generate.md => ssh-generate.mdx} | 0 .../cli/commands/{ssh-list.md => ssh-list.mdx} | 0 .../cli/commands/{ssh-setup.md => ssh-setup.mdx} | 0 .../cli/commands/{ssh-use.md => ssh-use.mdx} | 0 .../cli/commands/{ssl-generate.md => ssl-generate.mdx} | 0 .../version-v5/cli/commands/{start.md => start.mdx} | 0 .../cli/{configuration.md => configuration.mdx} | 4 ++-- .../version-v5/cli/{livereload.md => livereload.mdx} | 4 ++-- .../cli/{using-a-proxy.md => using-a-proxy.mdx} | 0 .../version-v5/contributing/{coc.md => coc.mdx} | 0 .../{how-to-contribute.md => how-to-contribute.mdx} | 2 +- .../{cross-platform.md => cross-platform.mdx} | 0 .../{fundamentals.md => fundamentals.mdx} | 2 +- .../core-concepts/{webview.md => webview.mdx} | 0 ...e-web-apps.md => what-are-progressive-web-apps.mdx} | 0 .../deployment/{app-store.md => app-store.mdx} | 0 .../deployment/{desktop-app.md => desktop-app.mdx} | 0 .../deployment/{play-store.md => play-store.mdx} | 0 ...{progressive-web-app.md => progressive-web-app.mdx} | 2 +- .../developer-resources/{books.md => books.mdx} | 0 .../developer-resources/{courses.md => courses.mdx} | 0 .../developer-resources/{guides.md => guides.mdx} | 4 ++-- ...ge.md => creating-photo-gallery-device-storage.mdx} | 0 .../guides/first-app-v3/{intro.md => intro.mdx} | 0 .../{ios-android-camera.md => ios-android-camera.mdx} | 0 .../first-app-v3/realtime-updates-ionic-deploy.mdx | 6 +++--- .../guides/first-app-v3/{theming.md => theming.mdx} | 0 ...c-monitoring.md => track-bugs-ionic-monitoring.mdx} | 0 ...ge.md => creating-photo-gallery-device-storage.mdx} | 0 .../developer-resources/guides/first-app-v4/intro.mdx} | 2 +- .../guides/first-app-v4/ios-android-camera.mdx | 2 +- .../guides/first-app-v4/{theming.md => theming.mdx} | 0 .../developer-resources/{posts.md => posts.mdx} | 0 .../developer-resources/{tools.md => tools.mdx} | 0 .../developer-resources/{videos.md => videos.mdx} | 0 .../version-v5/developing/{android.md => android.mdx} | 4 ++-- ...ardware-back-button.md => hardware-back-button.mdx} | 0 .../version-v5/developing/{ios.md => ios.mdx} | 6 +++--- .../developing/{keyboard.md => keyboard.mdx} | 0 .../developing/{previewing.md => previewing.mdx} | 10 +++++----- .../developing/{scaffolding.md => scaffolding.mdx} | 4 ++-- .../developing/{starting.md => starting.mdx} | 0 .../version-v5/developing/{tips.md => tips.mdx} | 0 .../cli/{configuration.md => configuration.mdx} | 2 +- .../version-v6/cli/{livereload.md => livereload.mdx} | 2 +- .../cli/{using-a-proxy.md => using-a-proxy.mdx} | 0 .../version-v6/contributing/{coc.md => coc.mdx} | 0 .../version-v6/contributing/how-to-contribute.mdx | 2 +- .../{cross-platform.md => cross-platform.mdx} | 0 .../{fundamentals.md => fundamentals.mdx} | 2 +- .../core-concepts/{webview.md => webview.mdx} | 0 ...e-web-apps.md => what-are-progressive-web-apps.mdx} | 0 .../deployment/{app-store.md => app-store.mdx} | 0 .../deployment/{desktop-app.md => desktop-app.mdx} | 0 ...{progressive-web-app.md => progressive-web-app.mdx} | 2 +- .../developer-resources/{books.md => books.mdx} | 0 .../developer-resources/{courses.md => courses.mdx} | 0 .../developer-resources/{guides.md => guides.mdx} | 4 ++-- ...ge.md => creating-photo-gallery-device-storage.mdx} | 0 .../guides/first-app-v3/{intro.md => intro.mdx} | 0 .../{ios-android-camera.md => ios-android-camera.mdx} | 0 ...nic-deploy.md => realtime-updates-ionic-deploy.mdx} | 6 +++--- .../guides/first-app-v3/{theming.md => theming.mdx} | 0 ...c-monitoring.md => track-bugs-ionic-monitoring.mdx} | 0 ...ge.md => creating-photo-gallery-device-storage.mdx} | 0 .../developer-resources/guides/first-app-v4/intro.mdx} | 2 +- .../guides/first-app-v4/ios-android-camera.mdx} | 2 +- .../guides/first-app-v4/{theming.md => theming.mdx} | 0 .../developer-resources/{posts.md => posts.mdx} | 0 .../developer-resources/{tools.md => tools.mdx} | 0 .../developer-resources/{videos.md => videos.mdx} | 0 .../version-v6/developing/{android.md => android.mdx} | 4 ++-- .../version-v6/developing/{config.md => config.mdx} | 10 +++++----- .../developing/config/global/{index.md => index.mdx} | 0 .../config/per-component/{index.md => index.mdx} | 0 .../per-platform-fallback/{index.md => index.mdx} | 0 .../per-platform-overrides/{index.md => index.mdx} | 0 .../config/per-platform/{index.md => index.mdx} | 0 ...ardware-back-button.md => hardware-back-button.mdx} | 0 .../version-v6/developing/{ios.md => ios.mdx} | 0 .../developing/{keyboard.md => keyboard.mdx} | 0 .../developing/{previewing.md => previewing.mdx} | 10 +++++----- .../developing/{scaffolding.md => scaffolding.mdx} | 0 .../developing/{starting.md => starting.mdx} | 0 .../version-v6/developing/{tips.md => tips.mdx} | 0 .../version-v7/core-concepts/cross-platform.md | 4 ++-- versioned_docs/version-v7/developing/config.md | 10 +++++----- .../version-v7/developing/config/per-platform/index.md | 8 ++++---- 177 files changed, 85 insertions(+), 85 deletions(-) rename docs/cli/{configuration.md => configuration.mdx} (99%) rename docs/cli/{livereload.md => livereload.mdx} (95%) rename docs/cli/{using-a-proxy.md => using-a-proxy.mdx} (100%) rename docs/contributing/{coc.md => coc.mdx} (100%) rename versioned_docs/version-v6/contributing/how-to-contribute.md => docs/contributing/how-to-contribute.mdx (99%) rename docs/core-concepts/{cross-platform.md => cross-platform.mdx} (100%) rename docs/core-concepts/{fundamentals.md => fundamentals.mdx} (98%) rename docs/core-concepts/{webview.md => webview.mdx} (100%) rename docs/core-concepts/{what-are-progressive-web-apps.md => what-are-progressive-web-apps.mdx} (100%) rename docs/deployment/{app-store.md => app-store.mdx} (100%) rename docs/deployment/{progressive-web-app.md => progressive-web-app.mdx} (97%) rename docs/developer-resources/{books.md => books.mdx} (100%) rename docs/developer-resources/{courses.md => courses.mdx} (100%) rename docs/developer-resources/{guides.md => guides.mdx} (76%) rename docs/developer-resources/guides/first-app-v3/{creating-photo-gallery-device-storage.md => creating-photo-gallery-device-storage.mdx} (100%) rename docs/developer-resources/guides/first-app-v3/{intro.md => intro.mdx} (100%) rename docs/developer-resources/guides/first-app-v3/{ios-android-camera.md => ios-android-camera.mdx} (100%) rename versioned_docs/version-v5/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md => docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx (94%) rename docs/developer-resources/guides/first-app-v3/{theming.md => theming.mdx} (100%) rename docs/developer-resources/guides/first-app-v3/{track-bugs-ionic-monitoring.md => track-bugs-ionic-monitoring.mdx} (100%) rename docs/developer-resources/guides/first-app-v4/{creating-photo-gallery-device-storage.md => creating-photo-gallery-device-storage.mdx} (100%) rename docs/developer-resources/guides/first-app-v4/{intro.md => intro.mdx} (98%) rename versioned_docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.md => docs/developer-resources/guides/first-app-v4/ios-android-camera.mdx (98%) rename docs/developer-resources/guides/first-app-v4/{theming.md => theming.mdx} (100%) rename docs/developer-resources/{posts.md => posts.mdx} (100%) rename docs/developer-resources/{tools.md => tools.mdx} (100%) rename docs/developer-resources/{videos.md => videos.mdx} (100%) rename docs/developing/{android.md => android.mdx} (100%) rename docs/developing/{config.md => config.mdx} (99%) rename docs/developing/config/global/{index.md => index.mdx} (100%) rename docs/developing/config/per-component/{index.md => index.mdx} (100%) rename docs/developing/config/per-platform-fallback/{index.md => index.mdx} (100%) rename docs/developing/config/per-platform-overrides/{index.md => index.mdx} (100%) rename docs/developing/config/per-platform/{index.md => index.mdx} (94%) rename docs/developing/{hardware-back-button.md => hardware-back-button.mdx} (97%) rename docs/developing/{ios.md => ios.mdx} (100%) rename docs/developing/{keyboard.md => keyboard.mdx} (100%) rename docs/developing/{managing-focus.md => managing-focus.mdx} (100%) rename docs/developing/{previewing.md => previewing.mdx} (94%) rename docs/developing/{scaffolding.md => scaffolding.mdx} (100%) rename docs/developing/{starting.md => starting.mdx} (100%) rename docs/developing/{tips.md => tips.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{build.md => build.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{capacitor-add.md => capacitor-add.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{capacitor-build.md => capacitor-build.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{capacitor-copy.md => capacitor-copy.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{capacitor-open.md => capacitor-open.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{capacitor-run.md => capacitor-run.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{capacitor-sync.md => capacitor-sync.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{capacitor-update.md => capacitor-update.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{completion.md => completion.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{config-get.md => config-get.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{config-set.md => config-set.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{config-unset.md => config-unset.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{cordova-build.md => cordova-build.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{cordova-compile.md => cordova-compile.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{cordova-emulate.md => cordova-emulate.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{cordova-platform.md => cordova-platform.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{cordova-plugin.md => cordova-plugin.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{cordova-prepare.md => cordova-prepare.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{cordova-requirements.md => cordova-requirements.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{cordova-resources.md => cordova-resources.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{cordova-run.md => cordova-run.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{deploy-add.md => deploy-add.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{deploy-build.md => deploy-build.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{deploy-configure.md => deploy-configure.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{deploy-manifest.md => deploy-manifest.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{docs.md => docs.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{doctor-check.md => doctor-check.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{doctor-list.md => doctor-list.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{doctor-treat.md => doctor-treat.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{enterprise-register.md => enterprise-register.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{generate.md => generate.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{git-remote.md => git-remote.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{info.md => info.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{init.md => init.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{integrations-disable.md => integrations-disable.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{integrations-enable.md => integrations-enable.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{integrations-list.md => integrations-list.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{link.md => link.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{login.md => login.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{logout.md => logout.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{package-build.md => package-build.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{package-deploy.md => package-deploy.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{repair.md => repair.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{serve.md => serve.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{signup.md => signup.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{ssh-add.md => ssh-add.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{ssh-delete.md => ssh-delete.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{ssh-generate.md => ssh-generate.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{ssh-list.md => ssh-list.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{ssh-setup.md => ssh-setup.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{ssh-use.md => ssh-use.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{ssl-generate.md => ssl-generate.mdx} (100%) rename versioned_docs/version-v5/cli/commands/{start.md => start.mdx} (100%) rename versioned_docs/version-v5/cli/{configuration.md => configuration.mdx} (98%) rename versioned_docs/version-v5/cli/{livereload.md => livereload.mdx} (96%) rename versioned_docs/version-v5/cli/{using-a-proxy.md => using-a-proxy.mdx} (100%) rename versioned_docs/version-v5/contributing/{coc.md => coc.mdx} (100%) rename versioned_docs/version-v5/contributing/{how-to-contribute.md => how-to-contribute.mdx} (99%) rename versioned_docs/version-v5/core-concepts/{cross-platform.md => cross-platform.mdx} (100%) rename versioned_docs/version-v5/core-concepts/{fundamentals.md => fundamentals.mdx} (98%) rename versioned_docs/version-v5/core-concepts/{webview.md => webview.mdx} (100%) rename versioned_docs/version-v5/core-concepts/{what-are-progressive-web-apps.md => what-are-progressive-web-apps.mdx} (100%) rename versioned_docs/version-v5/deployment/{app-store.md => app-store.mdx} (100%) rename versioned_docs/version-v5/deployment/{desktop-app.md => desktop-app.mdx} (100%) rename versioned_docs/version-v5/deployment/{play-store.md => play-store.mdx} (100%) rename versioned_docs/version-v5/deployment/{progressive-web-app.md => progressive-web-app.mdx} (96%) rename versioned_docs/version-v5/developer-resources/{books.md => books.mdx} (100%) rename versioned_docs/version-v5/developer-resources/{courses.md => courses.mdx} (100%) rename versioned_docs/version-v5/developer-resources/{guides.md => guides.mdx} (76%) rename versioned_docs/version-v5/developer-resources/guides/first-app-v3/{creating-photo-gallery-device-storage.md => creating-photo-gallery-device-storage.mdx} (100%) rename versioned_docs/version-v5/developer-resources/guides/first-app-v3/{intro.md => intro.mdx} (100%) rename versioned_docs/version-v5/developer-resources/guides/first-app-v3/{ios-android-camera.md => ios-android-camera.mdx} (100%) rename docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md => versioned_docs/version-v5/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx (94%) rename versioned_docs/version-v5/developer-resources/guides/first-app-v3/{theming.md => theming.mdx} (100%) rename versioned_docs/version-v5/developer-resources/guides/first-app-v3/{track-bugs-ionic-monitoring.md => track-bugs-ionic-monitoring.mdx} (100%) rename versioned_docs/version-v5/developer-resources/guides/first-app-v4/{creating-photo-gallery-device-storage.md => creating-photo-gallery-device-storage.mdx} (100%) rename versioned_docs/{version-v6/developer-resources/guides/first-app-v4/intro.md => version-v5/developer-resources/guides/first-app-v4/intro.mdx} (98%) rename docs/developer-resources/guides/first-app-v4/ios-android-camera.md => versioned_docs/version-v5/developer-resources/guides/first-app-v4/ios-android-camera.mdx (98%) rename versioned_docs/version-v5/developer-resources/guides/first-app-v4/{theming.md => theming.mdx} (100%) rename versioned_docs/version-v5/developer-resources/{posts.md => posts.mdx} (100%) rename versioned_docs/version-v5/developer-resources/{tools.md => tools.mdx} (100%) rename versioned_docs/version-v5/developer-resources/{videos.md => videos.mdx} (100%) rename versioned_docs/version-v5/developing/{android.md => android.mdx} (98%) rename versioned_docs/version-v5/developing/{hardware-back-button.md => hardware-back-button.mdx} (100%) rename versioned_docs/version-v5/developing/{ios.md => ios.mdx} (98%) rename versioned_docs/version-v5/developing/{keyboard.md => keyboard.mdx} (100%) rename versioned_docs/version-v5/developing/{previewing.md => previewing.mdx} (85%) rename versioned_docs/version-v5/developing/{scaffolding.md => scaffolding.mdx} (91%) rename versioned_docs/version-v5/developing/{starting.md => starting.mdx} (100%) rename versioned_docs/version-v5/developing/{tips.md => tips.mdx} (100%) rename versioned_docs/version-v6/cli/{configuration.md => configuration.mdx} (99%) rename versioned_docs/version-v6/cli/{livereload.md => livereload.mdx} (96%) rename versioned_docs/version-v6/cli/{using-a-proxy.md => using-a-proxy.mdx} (100%) rename versioned_docs/version-v6/contributing/{coc.md => coc.mdx} (100%) rename docs/contributing/how-to-contribute.md => versioned_docs/version-v6/contributing/how-to-contribute.mdx (99%) rename versioned_docs/version-v6/core-concepts/{cross-platform.md => cross-platform.mdx} (100%) rename versioned_docs/version-v6/core-concepts/{fundamentals.md => fundamentals.mdx} (98%) rename versioned_docs/version-v6/core-concepts/{webview.md => webview.mdx} (100%) rename versioned_docs/version-v6/core-concepts/{what-are-progressive-web-apps.md => what-are-progressive-web-apps.mdx} (100%) rename versioned_docs/version-v6/deployment/{app-store.md => app-store.mdx} (100%) rename versioned_docs/version-v6/deployment/{desktop-app.md => desktop-app.mdx} (100%) rename versioned_docs/version-v6/deployment/{progressive-web-app.md => progressive-web-app.mdx} (97%) rename versioned_docs/version-v6/developer-resources/{books.md => books.mdx} (100%) rename versioned_docs/version-v6/developer-resources/{courses.md => courses.mdx} (100%) rename versioned_docs/version-v6/developer-resources/{guides.md => guides.mdx} (76%) rename versioned_docs/version-v6/developer-resources/guides/first-app-v3/{creating-photo-gallery-device-storage.md => creating-photo-gallery-device-storage.mdx} (100%) rename versioned_docs/version-v6/developer-resources/guides/first-app-v3/{intro.md => intro.mdx} (100%) rename versioned_docs/version-v6/developer-resources/guides/first-app-v3/{ios-android-camera.md => ios-android-camera.mdx} (100%) rename versioned_docs/version-v6/developer-resources/guides/first-app-v3/{realtime-updates-ionic-deploy.md => realtime-updates-ionic-deploy.mdx} (94%) rename versioned_docs/version-v6/developer-resources/guides/first-app-v3/{theming.md => theming.mdx} (100%) rename versioned_docs/version-v6/developer-resources/guides/first-app-v3/{track-bugs-ionic-monitoring.md => track-bugs-ionic-monitoring.mdx} (100%) rename versioned_docs/version-v6/developer-resources/guides/first-app-v4/{creating-photo-gallery-device-storage.md => creating-photo-gallery-device-storage.mdx} (100%) rename versioned_docs/{version-v5/developer-resources/guides/first-app-v4/intro.md => version-v6/developer-resources/guides/first-app-v4/intro.mdx} (98%) rename versioned_docs/{version-v5/developer-resources/guides/first-app-v4/ios-android-camera.md => version-v6/developer-resources/guides/first-app-v4/ios-android-camera.mdx} (98%) rename versioned_docs/version-v6/developer-resources/guides/first-app-v4/{theming.md => theming.mdx} (100%) rename versioned_docs/version-v6/developer-resources/{posts.md => posts.mdx} (100%) rename versioned_docs/version-v6/developer-resources/{tools.md => tools.mdx} (100%) rename versioned_docs/version-v6/developer-resources/{videos.md => videos.mdx} (100%) rename versioned_docs/version-v6/developing/{android.md => android.mdx} (98%) rename versioned_docs/version-v6/developing/{config.md => config.mdx} (99%) rename versioned_docs/version-v6/developing/config/global/{index.md => index.mdx} (100%) rename versioned_docs/version-v6/developing/config/per-component/{index.md => index.mdx} (100%) rename versioned_docs/version-v6/developing/config/per-platform-fallback/{index.md => index.mdx} (100%) rename versioned_docs/version-v6/developing/config/per-platform-overrides/{index.md => index.mdx} (100%) rename versioned_docs/version-v6/developing/config/per-platform/{index.md => index.mdx} (100%) rename versioned_docs/version-v6/developing/{hardware-back-button.md => hardware-back-button.mdx} (100%) rename versioned_docs/version-v6/developing/{ios.md => ios.mdx} (100%) rename versioned_docs/version-v6/developing/{keyboard.md => keyboard.mdx} (100%) rename versioned_docs/version-v6/developing/{previewing.md => previewing.mdx} (94%) rename versioned_docs/version-v6/developing/{scaffolding.md => scaffolding.mdx} (100%) rename versioned_docs/version-v6/developing/{starting.md => starting.mdx} (100%) rename versioned_docs/version-v6/developing/{tips.md => tips.mdx} (100%) diff --git a/docs/cli/configuration.md b/docs/cli/configuration.mdx similarity index 99% rename from docs/cli/configuration.md rename to docs/cli/configuration.mdx index 9b3d7d31a95..35f861a9ff0 100644 --- a/docs/cli/configuration.md +++ b/docs/cli/configuration.mdx @@ -52,7 +52,7 @@ Each Ionic project has a project configuration file, usually at the project's ro The CLI will look for the following environment variables: - `IONIC_CONFIG_DIRECTORY`: The directory of the global CLI config. Defaults to `~/.ionic`. -- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. See [Using a Proxy](using-a-proxy.md). +- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. See [Using a Proxy](using-a-proxy.mdx). - `IONIC_TOKEN`: Automatically authenticates with [Appflow](https://ionic.io/appflow). ## Flags diff --git a/docs/cli/livereload.md b/docs/cli/livereload.mdx similarity index 95% rename from docs/cli/livereload.md rename to docs/cli/livereload.mdx index 4d2d160ee78..2d60e5fc0de 100644 --- a/docs/cli/livereload.md +++ b/docs/cli/livereload.mdx @@ -1,6 +1,6 @@ # Live Reload -Using the Live Reload option will reload the browser or [Web View](../core-concepts/webview.md) when you change your app's code in your development environment. This is particularly useful for developing using hardware devices. +Using the Live Reload option will reload the browser or [Web View](../core-concepts/webview.mdx) when you change your app's code in your development environment. This is particularly useful for developing using hardware devices. ## Terms diff --git a/docs/cli/using-a-proxy.md b/docs/cli/using-a-proxy.mdx similarity index 100% rename from docs/cli/using-a-proxy.md rename to docs/cli/using-a-proxy.mdx diff --git a/docs/contributing/coc.md b/docs/contributing/coc.mdx similarity index 100% rename from docs/contributing/coc.md rename to docs/contributing/coc.mdx diff --git a/versioned_docs/version-v6/contributing/how-to-contribute.md b/docs/contributing/how-to-contribute.mdx similarity index 99% rename from versioned_docs/version-v6/contributing/how-to-contribute.md rename to docs/contributing/how-to-contribute.mdx index df5f6efbd23..da368fb421f 100644 --- a/versioned_docs/version-v6/contributing/how-to-contribute.md +++ b/docs/contributing/how-to-contribute.mdx @@ -8,7 +8,7 @@ Thanks for the interest in contributing to Ionic Framework! ## Contributing Etiquette -Please see the [Contributor Code of Conduct](coc.md) for information on the rules of conduct. +Please see the [Contributor Code of Conduct](coc.mdx) for information on the rules of conduct. ## Creating an Issue diff --git a/docs/core-concepts/cross-platform.md b/docs/core-concepts/cross-platform.mdx similarity index 100% rename from docs/core-concepts/cross-platform.md rename to docs/core-concepts/cross-platform.mdx diff --git a/docs/core-concepts/fundamentals.md b/docs/core-concepts/fundamentals.mdx similarity index 98% rename from docs/core-concepts/fundamentals.md rename to docs/core-concepts/fundamentals.mdx index a409e57bc0b..5702d217c6d 100644 --- a/docs/core-concepts/fundamentals.md +++ b/docs/core-concepts/fundamentals.mdx @@ -38,7 +38,7 @@ For apps that are built with Angular and `@ionic/angular`, we recommend using th An amazing feature of apps built with web technologies (such as Ionic apps!) is that it can run on virtually any platform: desktop computers, phones, tablets, cars, refrigerators, and more! The same code base for Ionic apps can work on many platforms because it is based on web standards and common APIs that are shared across these platforms. -One of the most common use cases for Ionic is to build an app which can be downloaded from both the App Store and Play Store. Both iOS and Android software development kits (SDKs) provide [Web Views](webview.md) which render any Ionic app, while still allowing for full Native SDK access. +One of the most common use cases for Ionic is to build an app which can be downloaded from both the App Store and Play Store. Both iOS and Android software development kits (SDKs) provide [Web Views](webview.mdx) which render any Ionic app, while still allowing for full Native SDK access. Projects such as Capacitor and Cordova are commonly used to give Ionic apps this access to Native SDKs. This means developers can quickly build out an app using common web development tools, and still have access to native features such as the device's accelerometer, camera, GPS, and more. diff --git a/docs/core-concepts/webview.md b/docs/core-concepts/webview.mdx similarity index 100% rename from docs/core-concepts/webview.md rename to docs/core-concepts/webview.mdx diff --git a/docs/core-concepts/what-are-progressive-web-apps.md b/docs/core-concepts/what-are-progressive-web-apps.mdx similarity index 100% rename from docs/core-concepts/what-are-progressive-web-apps.md rename to docs/core-concepts/what-are-progressive-web-apps.mdx diff --git a/docs/deployment/app-store.md b/docs/deployment/app-store.mdx similarity index 100% rename from docs/deployment/app-store.md rename to docs/deployment/app-store.mdx diff --git a/docs/deployment/progressive-web-app.md b/docs/deployment/progressive-web-app.mdx similarity index 97% rename from docs/deployment/progressive-web-app.md rename to docs/deployment/progressive-web-app.mdx index 3a7e522ec61..3a023ca07dd 100644 --- a/docs/deployment/progressive-web-app.md +++ b/docs/deployment/progressive-web-app.mdx @@ -14,7 +14,7 @@ import DocsCards from '@components/global/DocsCards'; /> -Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a native app. Not sure what PWAs are? Check out Ionic's PWA Overview or the [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.md) page for more info. +Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a native app. Not sure what PWAs are? Check out Ionic's PWA Overview or the [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.mdx) page for more info. For the frameworks Ionic supports, we've created dedicated guides that go into more detail. Below are links for Angular, React, and Vue. diff --git a/docs/developer-resources/books.md b/docs/developer-resources/books.mdx similarity index 100% rename from docs/developer-resources/books.md rename to docs/developer-resources/books.mdx diff --git a/docs/developer-resources/courses.md b/docs/developer-resources/courses.mdx similarity index 100% rename from docs/developer-resources/courses.md rename to docs/developer-resources/courses.mdx diff --git a/docs/developer-resources/guides.md b/docs/developer-resources/guides.mdx similarity index 76% rename from docs/developer-resources/guides.md rename to docs/developer-resources/guides.mdx index dbe6d9477b8..c0590b83684 100644 --- a/docs/developer-resources/guides.md +++ b/docs/developer-resources/guides.mdx @@ -1,9 +1,9 @@ # Guides -### [Your First Ionic App - v3](guides/first-app-v3/intro.md) +### [Your First Ionic App - v3](guides/first-app-v3/intro.mdx) Follow along as we create a working Photo Gallery app using Ionic Framework v3 and Appflow. -### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.md) +### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.mdx) Follow along as we create a working Photo Gallery app using Ionic Framework v4 and Cordova. diff --git a/docs/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md b/docs/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx similarity index 100% rename from docs/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md rename to docs/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx diff --git a/docs/developer-resources/guides/first-app-v3/intro.md b/docs/developer-resources/guides/first-app-v3/intro.mdx similarity index 100% rename from docs/developer-resources/guides/first-app-v3/intro.md rename to docs/developer-resources/guides/first-app-v3/intro.mdx diff --git a/docs/developer-resources/guides/first-app-v3/ios-android-camera.md b/docs/developer-resources/guides/first-app-v3/ios-android-camera.mdx similarity index 100% rename from docs/developer-resources/guides/first-app-v3/ios-android-camera.md rename to docs/developer-resources/guides/first-app-v3/ios-android-camera.mdx diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md b/docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx similarity index 94% rename from versioned_docs/version-v5/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md rename to docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx index da6f9462ecc..d887ce45855 100644 --- a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md +++ b/docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx @@ -70,7 +70,7 @@ Next, create a local, native build of the app. ## Android Builds -Follow the [Android Setup instructions](../../../developing/android.md), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run: +Follow the [Android Setup instructions](../../../developing/android.mdx), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run: ```shell ionic cordova build android --prod @@ -80,13 +80,13 @@ This will generate a unsigned debug build (meaning the app can run on any Androi ## iOS Builds -iOS is [a bit trickier to set up](../../../developing/ios.md) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run: +iOS is [a bit trickier to set up](../../../developing/ios.mdx) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run: ```shell ionic cordova build ios --prod ``` -Then, continue to [follow the instructions here](../../../deployment/app-store.md) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice. +Then, continue to [follow the instructions here](../../../deployment/app-store.mdx) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice. ## Add the Native App to Your Local Device diff --git a/docs/developer-resources/guides/first-app-v3/theming.md b/docs/developer-resources/guides/first-app-v3/theming.mdx similarity index 100% rename from docs/developer-resources/guides/first-app-v3/theming.md rename to docs/developer-resources/guides/first-app-v3/theming.mdx diff --git a/docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md b/docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx similarity index 100% rename from docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md rename to docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx diff --git a/docs/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md b/docs/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx similarity index 100% rename from docs/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md rename to docs/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx diff --git a/docs/developer-resources/guides/first-app-v4/intro.md b/docs/developer-resources/guides/first-app-v4/intro.mdx similarity index 98% rename from docs/developer-resources/guides/first-app-v4/intro.md rename to docs/developer-resources/guides/first-app-v4/intro.mdx index bffc7ea9c28..8d705d4dc49 100644 --- a/docs/developer-resources/guides/first-app-v4/intro.md +++ b/docs/developer-resources/guides/first-app-v4/intro.mdx @@ -30,7 +30,7 @@ npm install -g @ionic/cli cordova :::note The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur. -Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../../../developing/tips.md#resolving-permission-errors) for more information. +Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../../../developing/tips.mdx#resolving-permission-errors) for more information. ::: ## Create an App diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.md b/docs/developer-resources/guides/first-app-v4/ios-android-camera.mdx similarity index 98% rename from versioned_docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.md rename to docs/developer-resources/guides/first-app-v4/ios-android-camera.mdx index 8908090edec..d5c4dfcb129 100644 --- a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.md +++ b/docs/developer-resources/guides/first-app-v4/ios-android-camera.mdx @@ -13,7 +13,7 @@ $ ionic cordova platform add android These commands will create a `config.xml` file, which is used to define Cordova iOS and Android settings. Cordova reads this file and applies each setting as it builds each native app binary. -There are more steps to configure [iOS](../../../developing/ios.md) and [Android](../../../developing/android.md) native tooling. +There are more steps to configure [iOS](../../../developing/ios.mdx) and [Android](../../../developing/android.mdx) native tooling. Much better! Now we can add the camera functionality. By the way, you can find reference code for this [on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4). diff --git a/docs/developer-resources/guides/first-app-v4/theming.md b/docs/developer-resources/guides/first-app-v4/theming.mdx similarity index 100% rename from docs/developer-resources/guides/first-app-v4/theming.md rename to docs/developer-resources/guides/first-app-v4/theming.mdx diff --git a/docs/developer-resources/posts.md b/docs/developer-resources/posts.mdx similarity index 100% rename from docs/developer-resources/posts.md rename to docs/developer-resources/posts.mdx diff --git a/docs/developer-resources/tools.md b/docs/developer-resources/tools.mdx similarity index 100% rename from docs/developer-resources/tools.md rename to docs/developer-resources/tools.mdx diff --git a/docs/developer-resources/videos.md b/docs/developer-resources/videos.mdx similarity index 100% rename from docs/developer-resources/videos.md rename to docs/developer-resources/videos.mdx diff --git a/docs/developing/android.md b/docs/developing/android.mdx similarity index 100% rename from docs/developing/android.md rename to docs/developing/android.mdx diff --git a/docs/developing/config.md b/docs/developing/config.mdx similarity index 99% rename from docs/developing/config.md rename to docs/developing/config.mdx index 389033b4cca..533754d39ef 100644 --- a/docs/developing/config.md +++ b/docs/developing/config.mdx @@ -13,7 +13,7 @@ The available config keys can be found in the [`IonicConfig`](#ionicconfig) inte The following example disables ripple effects and default the mode to Material Design: -import GlobalExample from '@site/docs/developing/config/global/index.md'; +import GlobalExample from '@site/docs/developing/config/global/index.mdx'; @@ -21,7 +21,7 @@ import GlobalExample from '@site/docs/developing/config/global/index.md'; Ionic Config is not reactive. Updating the config's value after the component has rendered will result in the previous value. It is recommended to use a component's properties instead of updating the config, when you require reactive values. -import PerComponentExample from '@site/docs/developing/config/per-component/index.md'; +import PerComponentExample from '@site/docs/developing/config/per-component/index.mdx'; @@ -31,7 +31,7 @@ Ionic Config can also be set on a per-platform basis. For example, this allows y In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser. -import PerPlatformExample from '@site/docs/developing/config/per-platform/index.md'; +import PerPlatformExample from '@site/docs/developing/config/per-platform/index.mdx'; @@ -39,7 +39,7 @@ import PerPlatformExample from '@site/docs/developing/config/per-platform/index. The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match: -import PerPlatformFallbackExample from '@site/docs/developing/config/per-platform-overrides/index.md'; +import PerPlatformFallbackExample from '@site/docs/developing/config/per-platform-overrides/index.mdx'; @@ -47,7 +47,7 @@ import PerPlatformFallbackExample from '@site/docs/developing/config/per-platfor This final example allows you to accumulate a config object based upon different platform requirements. -import PerPlatformOverridesExample from '@site/docs/developing/config/per-platform-fallback/index.md'; +import PerPlatformOverridesExample from '@site/docs/developing/config/per-platform-fallback/index.mdx'; diff --git a/docs/developing/config/global/index.md b/docs/developing/config/global/index.mdx similarity index 100% rename from docs/developing/config/global/index.md rename to docs/developing/config/global/index.mdx diff --git a/docs/developing/config/per-component/index.md b/docs/developing/config/per-component/index.mdx similarity index 100% rename from docs/developing/config/per-component/index.md rename to docs/developing/config/per-component/index.mdx diff --git a/docs/developing/config/per-platform-fallback/index.md b/docs/developing/config/per-platform-fallback/index.mdx similarity index 100% rename from docs/developing/config/per-platform-fallback/index.md rename to docs/developing/config/per-platform-fallback/index.mdx diff --git a/docs/developing/config/per-platform-overrides/index.md b/docs/developing/config/per-platform-overrides/index.mdx similarity index 100% rename from docs/developing/config/per-platform-overrides/index.md rename to docs/developing/config/per-platform-overrides/index.mdx diff --git a/docs/developing/config/per-platform/index.md b/docs/developing/config/per-platform/index.mdx similarity index 94% rename from docs/developing/config/per-platform/index.md rename to docs/developing/config/per-platform/index.mdx index a7338da3084..b14a99e4184 100644 --- a/docs/developing/config/per-platform/index.md +++ b/docs/developing/config/per-platform/index.mdx @@ -16,7 +16,7 @@ import TabItem from '@theme/TabItem'; :::note Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly. -See the [Angular Platform Documentation](../../../angular/platform.mdx) for the types of platforms you can detect. +See the [Angular Platform Documentation](../../angular/platform.mdx) for the types of platforms you can detect. ::: ```ts title="app.module.ts" diff --git a/docs/developing/hardware-back-button.md b/docs/developing/hardware-back-button.mdx similarity index 97% rename from docs/developing/hardware-back-button.md rename to docs/developing/hardware-back-button.mdx index 3f7b0d9f4ad..03dffec34da 100644 --- a/docs/developing/hardware-back-button.md +++ b/docs/developing/hardware-back-button.mdx @@ -40,7 +40,7 @@ The table below shows how hardware back button support varies by environment. ### Hardware Back Button in a Browser or a PWA -Ionic has experimental support for handling the hardware back button in a browser or a PWA by setting [`experimentalCloseWatcher: true` in the IonicConfig](./config.md). When this feature is enabled, Ionic will use the [Close Watcher API](https://github.com/WICG/close-watcher) to pass any close requests through the `ionBackButton` event. This includes pressing the hardware back button to navigate or the Escape key to dismiss a modal. +Ionic has experimental support for handling the hardware back button in a browser or a PWA by setting [`experimentalCloseWatcher: true` in the IonicConfig](./config.mdx). When this feature is enabled, Ionic will use the [Close Watcher API](https://github.com/WICG/close-watcher) to pass any close requests through the `ionBackButton` event. This includes pressing the hardware back button to navigate or the Escape key to dismiss a modal. Chrome has support for Close Watcher starting in [Chrome 120](https://developer.chrome.com/blog/new-in-chrome-120). diff --git a/docs/developing/ios.md b/docs/developing/ios.mdx similarity index 100% rename from docs/developing/ios.md rename to docs/developing/ios.mdx diff --git a/docs/developing/keyboard.md b/docs/developing/keyboard.mdx similarity index 100% rename from docs/developing/keyboard.md rename to docs/developing/keyboard.mdx diff --git a/docs/developing/managing-focus.md b/docs/developing/managing-focus.mdx similarity index 100% rename from docs/developing/managing-focus.md rename to docs/developing/managing-focus.mdx diff --git a/docs/developing/previewing.md b/docs/developing/previewing.mdx similarity index 94% rename from docs/developing/previewing.md rename to docs/developing/previewing.mdx index d3e3e513fa5..fa7a153af01 100644 --- a/docs/developing/previewing.md +++ b/docs/developing/previewing.mdx @@ -12,9 +12,9 @@ title: Previewing There are many different options to test native functionality depending on your target platforms and needs. -- Run locally in a web browser (using [Platform Detection](../core-concepts/cross-platform.md) for native functionality) -- [Deploy to iOS](ios.md) -- [Deploy to Android](android.md) +- Run locally in a web browser (using [Platform Detection](../core-concepts/cross-platform.mdx) for native functionality) +- [Deploy to iOS](ios.mdx) +- [Deploy to Android](android.mdx) ## Run Locally in a Web Browser @@ -44,8 +44,8 @@ If the external link isn't listed on the terminal, then run `ionic serve --exter ::: -When implementing native functionality, use [Platform Detection](../core-concepts/cross-platform.md). -When you're ready to test on a real device, see here for [iOS](ios.md) and [Android](android.md). +When implementing native functionality, use [Platform Detection](../core-concepts/cross-platform.mdx). +When you're ready to test on a real device, see here for [iOS](ios.mdx) and [Android](android.mdx). ## Simulating a Mobile Viewport diff --git a/docs/developing/scaffolding.md b/docs/developing/scaffolding.mdx similarity index 100% rename from docs/developing/scaffolding.md rename to docs/developing/scaffolding.mdx diff --git a/docs/developing/starting.md b/docs/developing/starting.mdx similarity index 100% rename from docs/developing/starting.md rename to docs/developing/starting.mdx diff --git a/docs/developing/tips.md b/docs/developing/tips.mdx similarity index 100% rename from docs/developing/tips.md rename to docs/developing/tips.mdx diff --git a/versioned_docs/version-v5/cli/commands/build.md b/versioned_docs/version-v5/cli/commands/build.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/build.md rename to versioned_docs/version-v5/cli/commands/build.mdx diff --git a/versioned_docs/version-v5/cli/commands/capacitor-add.md b/versioned_docs/version-v5/cli/commands/capacitor-add.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/capacitor-add.md rename to versioned_docs/version-v5/cli/commands/capacitor-add.mdx diff --git a/versioned_docs/version-v5/cli/commands/capacitor-build.md b/versioned_docs/version-v5/cli/commands/capacitor-build.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/capacitor-build.md rename to versioned_docs/version-v5/cli/commands/capacitor-build.mdx diff --git a/versioned_docs/version-v5/cli/commands/capacitor-copy.md b/versioned_docs/version-v5/cli/commands/capacitor-copy.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/capacitor-copy.md rename to versioned_docs/version-v5/cli/commands/capacitor-copy.mdx diff --git a/versioned_docs/version-v5/cli/commands/capacitor-open.md b/versioned_docs/version-v5/cli/commands/capacitor-open.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/capacitor-open.md rename to versioned_docs/version-v5/cli/commands/capacitor-open.mdx diff --git a/versioned_docs/version-v5/cli/commands/capacitor-run.md b/versioned_docs/version-v5/cli/commands/capacitor-run.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/capacitor-run.md rename to versioned_docs/version-v5/cli/commands/capacitor-run.mdx diff --git a/versioned_docs/version-v5/cli/commands/capacitor-sync.md b/versioned_docs/version-v5/cli/commands/capacitor-sync.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/capacitor-sync.md rename to versioned_docs/version-v5/cli/commands/capacitor-sync.mdx diff --git a/versioned_docs/version-v5/cli/commands/capacitor-update.md b/versioned_docs/version-v5/cli/commands/capacitor-update.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/capacitor-update.md rename to versioned_docs/version-v5/cli/commands/capacitor-update.mdx diff --git a/versioned_docs/version-v5/cli/commands/completion.md b/versioned_docs/version-v5/cli/commands/completion.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/completion.md rename to versioned_docs/version-v5/cli/commands/completion.mdx diff --git a/versioned_docs/version-v5/cli/commands/config-get.md b/versioned_docs/version-v5/cli/commands/config-get.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/config-get.md rename to versioned_docs/version-v5/cli/commands/config-get.mdx diff --git a/versioned_docs/version-v5/cli/commands/config-set.md b/versioned_docs/version-v5/cli/commands/config-set.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/config-set.md rename to versioned_docs/version-v5/cli/commands/config-set.mdx diff --git a/versioned_docs/version-v5/cli/commands/config-unset.md b/versioned_docs/version-v5/cli/commands/config-unset.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/config-unset.md rename to versioned_docs/version-v5/cli/commands/config-unset.mdx diff --git a/versioned_docs/version-v5/cli/commands/cordova-build.md b/versioned_docs/version-v5/cli/commands/cordova-build.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/cordova-build.md rename to versioned_docs/version-v5/cli/commands/cordova-build.mdx diff --git a/versioned_docs/version-v5/cli/commands/cordova-compile.md b/versioned_docs/version-v5/cli/commands/cordova-compile.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/cordova-compile.md rename to versioned_docs/version-v5/cli/commands/cordova-compile.mdx diff --git a/versioned_docs/version-v5/cli/commands/cordova-emulate.md b/versioned_docs/version-v5/cli/commands/cordova-emulate.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/cordova-emulate.md rename to versioned_docs/version-v5/cli/commands/cordova-emulate.mdx diff --git a/versioned_docs/version-v5/cli/commands/cordova-platform.md b/versioned_docs/version-v5/cli/commands/cordova-platform.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/cordova-platform.md rename to versioned_docs/version-v5/cli/commands/cordova-platform.mdx diff --git a/versioned_docs/version-v5/cli/commands/cordova-plugin.md b/versioned_docs/version-v5/cli/commands/cordova-plugin.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/cordova-plugin.md rename to versioned_docs/version-v5/cli/commands/cordova-plugin.mdx diff --git a/versioned_docs/version-v5/cli/commands/cordova-prepare.md b/versioned_docs/version-v5/cli/commands/cordova-prepare.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/cordova-prepare.md rename to versioned_docs/version-v5/cli/commands/cordova-prepare.mdx diff --git a/versioned_docs/version-v5/cli/commands/cordova-requirements.md b/versioned_docs/version-v5/cli/commands/cordova-requirements.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/cordova-requirements.md rename to versioned_docs/version-v5/cli/commands/cordova-requirements.mdx diff --git a/versioned_docs/version-v5/cli/commands/cordova-resources.md b/versioned_docs/version-v5/cli/commands/cordova-resources.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/cordova-resources.md rename to versioned_docs/version-v5/cli/commands/cordova-resources.mdx diff --git a/versioned_docs/version-v5/cli/commands/cordova-run.md b/versioned_docs/version-v5/cli/commands/cordova-run.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/cordova-run.md rename to versioned_docs/version-v5/cli/commands/cordova-run.mdx diff --git a/versioned_docs/version-v5/cli/commands/deploy-add.md b/versioned_docs/version-v5/cli/commands/deploy-add.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/deploy-add.md rename to versioned_docs/version-v5/cli/commands/deploy-add.mdx diff --git a/versioned_docs/version-v5/cli/commands/deploy-build.md b/versioned_docs/version-v5/cli/commands/deploy-build.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/deploy-build.md rename to versioned_docs/version-v5/cli/commands/deploy-build.mdx diff --git a/versioned_docs/version-v5/cli/commands/deploy-configure.md b/versioned_docs/version-v5/cli/commands/deploy-configure.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/deploy-configure.md rename to versioned_docs/version-v5/cli/commands/deploy-configure.mdx diff --git a/versioned_docs/version-v5/cli/commands/deploy-manifest.md b/versioned_docs/version-v5/cli/commands/deploy-manifest.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/deploy-manifest.md rename to versioned_docs/version-v5/cli/commands/deploy-manifest.mdx diff --git a/versioned_docs/version-v5/cli/commands/docs.md b/versioned_docs/version-v5/cli/commands/docs.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/docs.md rename to versioned_docs/version-v5/cli/commands/docs.mdx diff --git a/versioned_docs/version-v5/cli/commands/doctor-check.md b/versioned_docs/version-v5/cli/commands/doctor-check.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/doctor-check.md rename to versioned_docs/version-v5/cli/commands/doctor-check.mdx diff --git a/versioned_docs/version-v5/cli/commands/doctor-list.md b/versioned_docs/version-v5/cli/commands/doctor-list.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/doctor-list.md rename to versioned_docs/version-v5/cli/commands/doctor-list.mdx diff --git a/versioned_docs/version-v5/cli/commands/doctor-treat.md b/versioned_docs/version-v5/cli/commands/doctor-treat.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/doctor-treat.md rename to versioned_docs/version-v5/cli/commands/doctor-treat.mdx diff --git a/versioned_docs/version-v5/cli/commands/enterprise-register.md b/versioned_docs/version-v5/cli/commands/enterprise-register.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/enterprise-register.md rename to versioned_docs/version-v5/cli/commands/enterprise-register.mdx diff --git a/versioned_docs/version-v5/cli/commands/generate.md b/versioned_docs/version-v5/cli/commands/generate.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/generate.md rename to versioned_docs/version-v5/cli/commands/generate.mdx diff --git a/versioned_docs/version-v5/cli/commands/git-remote.md b/versioned_docs/version-v5/cli/commands/git-remote.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/git-remote.md rename to versioned_docs/version-v5/cli/commands/git-remote.mdx diff --git a/versioned_docs/version-v5/cli/commands/info.md b/versioned_docs/version-v5/cli/commands/info.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/info.md rename to versioned_docs/version-v5/cli/commands/info.mdx diff --git a/versioned_docs/version-v5/cli/commands/init.md b/versioned_docs/version-v5/cli/commands/init.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/init.md rename to versioned_docs/version-v5/cli/commands/init.mdx diff --git a/versioned_docs/version-v5/cli/commands/integrations-disable.md b/versioned_docs/version-v5/cli/commands/integrations-disable.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/integrations-disable.md rename to versioned_docs/version-v5/cli/commands/integrations-disable.mdx diff --git a/versioned_docs/version-v5/cli/commands/integrations-enable.md b/versioned_docs/version-v5/cli/commands/integrations-enable.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/integrations-enable.md rename to versioned_docs/version-v5/cli/commands/integrations-enable.mdx diff --git a/versioned_docs/version-v5/cli/commands/integrations-list.md b/versioned_docs/version-v5/cli/commands/integrations-list.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/integrations-list.md rename to versioned_docs/version-v5/cli/commands/integrations-list.mdx diff --git a/versioned_docs/version-v5/cli/commands/link.md b/versioned_docs/version-v5/cli/commands/link.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/link.md rename to versioned_docs/version-v5/cli/commands/link.mdx diff --git a/versioned_docs/version-v5/cli/commands/login.md b/versioned_docs/version-v5/cli/commands/login.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/login.md rename to versioned_docs/version-v5/cli/commands/login.mdx diff --git a/versioned_docs/version-v5/cli/commands/logout.md b/versioned_docs/version-v5/cli/commands/logout.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/logout.md rename to versioned_docs/version-v5/cli/commands/logout.mdx diff --git a/versioned_docs/version-v5/cli/commands/package-build.md b/versioned_docs/version-v5/cli/commands/package-build.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/package-build.md rename to versioned_docs/version-v5/cli/commands/package-build.mdx diff --git a/versioned_docs/version-v5/cli/commands/package-deploy.md b/versioned_docs/version-v5/cli/commands/package-deploy.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/package-deploy.md rename to versioned_docs/version-v5/cli/commands/package-deploy.mdx diff --git a/versioned_docs/version-v5/cli/commands/repair.md b/versioned_docs/version-v5/cli/commands/repair.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/repair.md rename to versioned_docs/version-v5/cli/commands/repair.mdx diff --git a/versioned_docs/version-v5/cli/commands/serve.md b/versioned_docs/version-v5/cli/commands/serve.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/serve.md rename to versioned_docs/version-v5/cli/commands/serve.mdx diff --git a/versioned_docs/version-v5/cli/commands/signup.md b/versioned_docs/version-v5/cli/commands/signup.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/signup.md rename to versioned_docs/version-v5/cli/commands/signup.mdx diff --git a/versioned_docs/version-v5/cli/commands/ssh-add.md b/versioned_docs/version-v5/cli/commands/ssh-add.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/ssh-add.md rename to versioned_docs/version-v5/cli/commands/ssh-add.mdx diff --git a/versioned_docs/version-v5/cli/commands/ssh-delete.md b/versioned_docs/version-v5/cli/commands/ssh-delete.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/ssh-delete.md rename to versioned_docs/version-v5/cli/commands/ssh-delete.mdx diff --git a/versioned_docs/version-v5/cli/commands/ssh-generate.md b/versioned_docs/version-v5/cli/commands/ssh-generate.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/ssh-generate.md rename to versioned_docs/version-v5/cli/commands/ssh-generate.mdx diff --git a/versioned_docs/version-v5/cli/commands/ssh-list.md b/versioned_docs/version-v5/cli/commands/ssh-list.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/ssh-list.md rename to versioned_docs/version-v5/cli/commands/ssh-list.mdx diff --git a/versioned_docs/version-v5/cli/commands/ssh-setup.md b/versioned_docs/version-v5/cli/commands/ssh-setup.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/ssh-setup.md rename to versioned_docs/version-v5/cli/commands/ssh-setup.mdx diff --git a/versioned_docs/version-v5/cli/commands/ssh-use.md b/versioned_docs/version-v5/cli/commands/ssh-use.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/ssh-use.md rename to versioned_docs/version-v5/cli/commands/ssh-use.mdx diff --git a/versioned_docs/version-v5/cli/commands/ssl-generate.md b/versioned_docs/version-v5/cli/commands/ssl-generate.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/ssl-generate.md rename to versioned_docs/version-v5/cli/commands/ssl-generate.mdx diff --git a/versioned_docs/version-v5/cli/commands/start.md b/versioned_docs/version-v5/cli/commands/start.mdx similarity index 100% rename from versioned_docs/version-v5/cli/commands/start.md rename to versioned_docs/version-v5/cli/commands/start.mdx diff --git a/versioned_docs/version-v5/cli/configuration.md b/versioned_docs/version-v5/cli/configuration.mdx similarity index 98% rename from versioned_docs/version-v5/cli/configuration.md rename to versioned_docs/version-v5/cli/configuration.mdx index 63d6ca786af..2065b7da882 100644 --- a/versioned_docs/version-v5/cli/configuration.md +++ b/versioned_docs/version-v5/cli/configuration.mdx @@ -4,7 +4,7 @@ Configuration values are stored in JSON files. The Ionic CLI maintains a global configuration file, usually located at `~/.ionic/config.json`, and project configuration files, usually at the project's root directory as `ionic.config.json`. -The CLI provides commands for setting and printing config values from project config files and the global CLI config file. See `ionic config --help` or see the documentation for usage of [`ionic config get`](commands/config-get.md) and [`ionic config set`](commands/config-set.md). +The CLI provides commands for setting and printing config values from project config files and the global CLI config file. See `ionic config --help` or see the documentation for usage of [`ionic config get`](commands/config-get.mdx) and [`ionic config set`](commands/config-set.mdx). ### Project Configuration File @@ -42,7 +42,7 @@ Each Ionic project has a project configuration file, usually at the project's ro The CLI will look for the following environment variables: - `IONIC_CONFIG_DIRECTORY`: The directory of the global CLI config. Defaults to `~/.ionic`. -- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. See [Using a Proxy](using-a-proxy.md). +- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. See [Using a Proxy](using-a-proxy.mdx). - `IONIC_TOKEN`: Automatically authenticates with [Appflow](https://ionic.io/appflow). ## Flags diff --git a/versioned_docs/version-v5/cli/livereload.md b/versioned_docs/version-v5/cli/livereload.mdx similarity index 96% rename from versioned_docs/version-v5/cli/livereload.md rename to versioned_docs/version-v5/cli/livereload.mdx index d43ea298b02..81787c9f9de 100644 --- a/versioned_docs/version-v5/cli/livereload.md +++ b/versioned_docs/version-v5/cli/livereload.mdx @@ -1,6 +1,6 @@ # Live Reload -One option that can boost productivity when building Ionic apps is **Live Reload** (or **live-reload**). When active, Live Reload will reload the browser or [Web View](../core-concepts/webview.md) when changes in the app are detected. This is particularly useful for developing using hardware devices. +One option that can boost productivity when building Ionic apps is **Live Reload** (or **live-reload**). When active, Live Reload will reload the browser or [Web View](../core-concepts/webview.mdx) when changes in the app are detected. This is particularly useful for developing using hardware devices. ## Terms @@ -61,6 +61,6 @@ Remember, with the `--external` option, others on your Wi-Fi network will be abl ## Tips -- With Cordova, use the `--device`, `--emulator`, and `--target` options to narrow down target devices. Use the `--list` option to list all targets. See usage in the [command docs](commands/cordova-run.md). +- With Cordova, use the `--device`, `--emulator`, and `--target` options to narrow down target devices. Use the `--list` option to list all targets. See usage in the [command docs](commands/cordova-run.mdx). - You can separate the dev server process and the deploy process by using `ionic serve` and the `--livereload-url` option of `ionic cordova run` or `ionic capacitor run`. - For Android, it is possible to configure [adb](https://developer.android.com/studio/command-line/adb) to always forward ports while the adb server is running (see `adb reverse`). With port forwarding set up, an external address would no longer be required. You can also setup the adb bridge over TCP such that subsequent deploys no longer need a USB cable. diff --git a/versioned_docs/version-v5/cli/using-a-proxy.md b/versioned_docs/version-v5/cli/using-a-proxy.mdx similarity index 100% rename from versioned_docs/version-v5/cli/using-a-proxy.md rename to versioned_docs/version-v5/cli/using-a-proxy.mdx diff --git a/versioned_docs/version-v5/contributing/coc.md b/versioned_docs/version-v5/contributing/coc.mdx similarity index 100% rename from versioned_docs/version-v5/contributing/coc.md rename to versioned_docs/version-v5/contributing/coc.mdx diff --git a/versioned_docs/version-v5/contributing/how-to-contribute.md b/versioned_docs/version-v5/contributing/how-to-contribute.mdx similarity index 99% rename from versioned_docs/version-v5/contributing/how-to-contribute.md rename to versioned_docs/version-v5/contributing/how-to-contribute.mdx index df5f6efbd23..da368fb421f 100644 --- a/versioned_docs/version-v5/contributing/how-to-contribute.md +++ b/versioned_docs/version-v5/contributing/how-to-contribute.mdx @@ -8,7 +8,7 @@ Thanks for the interest in contributing to Ionic Framework! ## Contributing Etiquette -Please see the [Contributor Code of Conduct](coc.md) for information on the rules of conduct. +Please see the [Contributor Code of Conduct](coc.mdx) for information on the rules of conduct. ## Creating an Issue diff --git a/versioned_docs/version-v5/core-concepts/cross-platform.md b/versioned_docs/version-v5/core-concepts/cross-platform.mdx similarity index 100% rename from versioned_docs/version-v5/core-concepts/cross-platform.md rename to versioned_docs/version-v5/core-concepts/cross-platform.mdx diff --git a/versioned_docs/version-v5/core-concepts/fundamentals.md b/versioned_docs/version-v5/core-concepts/fundamentals.mdx similarity index 98% rename from versioned_docs/version-v5/core-concepts/fundamentals.md rename to versioned_docs/version-v5/core-concepts/fundamentals.mdx index 23d8f728e8c..7b564c6f329 100644 --- a/versioned_docs/version-v5/core-concepts/fundamentals.md +++ b/versioned_docs/version-v5/core-concepts/fundamentals.mdx @@ -31,7 +31,7 @@ For apps that are built with Angular and `@ionic/angular`, we recommend using th An amazing feature of apps built with web technologies (such as Ionic apps!) is that it can run on virtually any platform: desktop computers, phones, tablets, cars, refrigerators, and more! The same code base for Ionic apps can work on many platforms because it is based on web standards and common APIs that are shared across these platforms. -One of the most common use cases for Ionic is to build an app which can be downloaded from both the App Store and Play Store. Both iOS and Android software development kits (SDKs) provide [Web Views](webview.md) which render any Ionic app, while still allowing for full Native SDK access. +One of the most common use cases for Ionic is to build an app which can be downloaded from both the App Store and Play Store. Both iOS and Android software development kits (SDKs) provide [Web Views](webview.mdx) which render any Ionic app, while still allowing for full Native SDK access. Projects such as Capacitor and Cordova are commonly used to give Ionic apps this access to Native SDKs. This means developers can quickly build out an app using common web development tools, and still have access to native features such as the device's accelerometer, camera, GPS, and more. diff --git a/versioned_docs/version-v5/core-concepts/webview.md b/versioned_docs/version-v5/core-concepts/webview.mdx similarity index 100% rename from versioned_docs/version-v5/core-concepts/webview.md rename to versioned_docs/version-v5/core-concepts/webview.mdx diff --git a/versioned_docs/version-v5/core-concepts/what-are-progressive-web-apps.md b/versioned_docs/version-v5/core-concepts/what-are-progressive-web-apps.mdx similarity index 100% rename from versioned_docs/version-v5/core-concepts/what-are-progressive-web-apps.md rename to versioned_docs/version-v5/core-concepts/what-are-progressive-web-apps.mdx diff --git a/versioned_docs/version-v5/deployment/app-store.md b/versioned_docs/version-v5/deployment/app-store.mdx similarity index 100% rename from versioned_docs/version-v5/deployment/app-store.md rename to versioned_docs/version-v5/deployment/app-store.mdx diff --git a/versioned_docs/version-v5/deployment/desktop-app.md b/versioned_docs/version-v5/deployment/desktop-app.mdx similarity index 100% rename from versioned_docs/version-v5/deployment/desktop-app.md rename to versioned_docs/version-v5/deployment/desktop-app.mdx diff --git a/versioned_docs/version-v5/deployment/play-store.md b/versioned_docs/version-v5/deployment/play-store.mdx similarity index 100% rename from versioned_docs/version-v5/deployment/play-store.md rename to versioned_docs/version-v5/deployment/play-store.mdx diff --git a/versioned_docs/version-v5/deployment/progressive-web-app.md b/versioned_docs/version-v5/deployment/progressive-web-app.mdx similarity index 96% rename from versioned_docs/version-v5/deployment/progressive-web-app.md rename to versioned_docs/version-v5/deployment/progressive-web-app.mdx index 98efa8b40e0..46de694920a 100644 --- a/versioned_docs/version-v5/deployment/progressive-web-app.md +++ b/versioned_docs/version-v5/deployment/progressive-web-app.mdx @@ -9,7 +9,7 @@ import DocsCards from '@components/global/DocsCards'; # Deploying a Progressive Web App -Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a native app. Not sure what PWAs are? Check out Ionic's PWA Overview or the [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.md) page for more info. +Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a native app. Not sure what PWAs are? Check out Ionic's PWA Overview or the [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.mdx) page for more info. For the frameworks Ionic supports, we've created dedicated guides that go into more detail. Below are links for Angular and React. diff --git a/versioned_docs/version-v5/developer-resources/books.md b/versioned_docs/version-v5/developer-resources/books.mdx similarity index 100% rename from versioned_docs/version-v5/developer-resources/books.md rename to versioned_docs/version-v5/developer-resources/books.mdx diff --git a/versioned_docs/version-v5/developer-resources/courses.md b/versioned_docs/version-v5/developer-resources/courses.mdx similarity index 100% rename from versioned_docs/version-v5/developer-resources/courses.md rename to versioned_docs/version-v5/developer-resources/courses.mdx diff --git a/versioned_docs/version-v5/developer-resources/guides.md b/versioned_docs/version-v5/developer-resources/guides.mdx similarity index 76% rename from versioned_docs/version-v5/developer-resources/guides.md rename to versioned_docs/version-v5/developer-resources/guides.mdx index dbe6d9477b8..c0590b83684 100644 --- a/versioned_docs/version-v5/developer-resources/guides.md +++ b/versioned_docs/version-v5/developer-resources/guides.mdx @@ -1,9 +1,9 @@ # Guides -### [Your First Ionic App - v3](guides/first-app-v3/intro.md) +### [Your First Ionic App - v3](guides/first-app-v3/intro.mdx) Follow along as we create a working Photo Gallery app using Ionic Framework v3 and Appflow. -### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.md) +### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.mdx) Follow along as we create a working Photo Gallery app using Ionic Framework v4 and Cordova. diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx similarity index 100% rename from versioned_docs/version-v5/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md rename to versioned_docs/version-v5/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/intro.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v3/intro.mdx similarity index 100% rename from versioned_docs/version-v5/developer-resources/guides/first-app-v3/intro.md rename to versioned_docs/version-v5/developer-resources/guides/first-app-v3/intro.mdx diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/ios-android-camera.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v3/ios-android-camera.mdx similarity index 100% rename from versioned_docs/version-v5/developer-resources/guides/first-app-v3/ios-android-camera.md rename to versioned_docs/version-v5/developer-resources/guides/first-app-v3/ios-android-camera.mdx diff --git a/docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx similarity index 94% rename from docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md rename to versioned_docs/version-v5/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx index da6f9462ecc..d887ce45855 100644 --- a/docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md +++ b/versioned_docs/version-v5/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx @@ -70,7 +70,7 @@ Next, create a local, native build of the app. ## Android Builds -Follow the [Android Setup instructions](../../../developing/android.md), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run: +Follow the [Android Setup instructions](../../../developing/android.mdx), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run: ```shell ionic cordova build android --prod @@ -80,13 +80,13 @@ This will generate a unsigned debug build (meaning the app can run on any Androi ## iOS Builds -iOS is [a bit trickier to set up](../../../developing/ios.md) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run: +iOS is [a bit trickier to set up](../../../developing/ios.mdx) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run: ```shell ionic cordova build ios --prod ``` -Then, continue to [follow the instructions here](../../../deployment/app-store.md) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice. +Then, continue to [follow the instructions here](../../../deployment/app-store.mdx) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice. ## Add the Native App to Your Local Device diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/theming.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v3/theming.mdx similarity index 100% rename from versioned_docs/version-v5/developer-resources/guides/first-app-v3/theming.md rename to versioned_docs/version-v5/developer-resources/guides/first-app-v3/theming.mdx diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx similarity index 100% rename from versioned_docs/version-v5/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md rename to versioned_docs/version-v5/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx similarity index 100% rename from versioned_docs/version-v5/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md rename to versioned_docs/version-v5/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/intro.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v4/intro.mdx similarity index 98% rename from versioned_docs/version-v6/developer-resources/guides/first-app-v4/intro.md rename to versioned_docs/version-v5/developer-resources/guides/first-app-v4/intro.mdx index bffc7ea9c28..8d705d4dc49 100644 --- a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/intro.md +++ b/versioned_docs/version-v5/developer-resources/guides/first-app-v4/intro.mdx @@ -30,7 +30,7 @@ npm install -g @ionic/cli cordova :::note The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur. -Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../../../developing/tips.md#resolving-permission-errors) for more information. +Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../../../developing/tips.mdx#resolving-permission-errors) for more information. ::: ## Create an App diff --git a/docs/developer-resources/guides/first-app-v4/ios-android-camera.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v4/ios-android-camera.mdx similarity index 98% rename from docs/developer-resources/guides/first-app-v4/ios-android-camera.md rename to versioned_docs/version-v5/developer-resources/guides/first-app-v4/ios-android-camera.mdx index 8908090edec..d5c4dfcb129 100644 --- a/docs/developer-resources/guides/first-app-v4/ios-android-camera.md +++ b/versioned_docs/version-v5/developer-resources/guides/first-app-v4/ios-android-camera.mdx @@ -13,7 +13,7 @@ $ ionic cordova platform add android These commands will create a `config.xml` file, which is used to define Cordova iOS and Android settings. Cordova reads this file and applies each setting as it builds each native app binary. -There are more steps to configure [iOS](../../../developing/ios.md) and [Android](../../../developing/android.md) native tooling. +There are more steps to configure [iOS](../../../developing/ios.mdx) and [Android](../../../developing/android.mdx) native tooling. Much better! Now we can add the camera functionality. By the way, you can find reference code for this [on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4). diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/theming.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v4/theming.mdx similarity index 100% rename from versioned_docs/version-v5/developer-resources/guides/first-app-v4/theming.md rename to versioned_docs/version-v5/developer-resources/guides/first-app-v4/theming.mdx diff --git a/versioned_docs/version-v5/developer-resources/posts.md b/versioned_docs/version-v5/developer-resources/posts.mdx similarity index 100% rename from versioned_docs/version-v5/developer-resources/posts.md rename to versioned_docs/version-v5/developer-resources/posts.mdx diff --git a/versioned_docs/version-v5/developer-resources/tools.md b/versioned_docs/version-v5/developer-resources/tools.mdx similarity index 100% rename from versioned_docs/version-v5/developer-resources/tools.md rename to versioned_docs/version-v5/developer-resources/tools.mdx diff --git a/versioned_docs/version-v5/developer-resources/videos.md b/versioned_docs/version-v5/developer-resources/videos.mdx similarity index 100% rename from versioned_docs/version-v5/developer-resources/videos.md rename to versioned_docs/version-v5/developer-resources/videos.mdx diff --git a/versioned_docs/version-v5/developing/android.md b/versioned_docs/version-v5/developing/android.mdx similarity index 98% rename from versioned_docs/version-v5/developing/android.md rename to versioned_docs/version-v5/developing/android.mdx index ebcfdd3e2de..5fc55e32866 100644 --- a/versioned_docs/version-v5/developing/android.md +++ b/versioned_docs/version-v5/developing/android.mdx @@ -11,7 +11,7 @@ This guide covers how to run and debug Ionic apps on Android emulators and devic [Android Studio](https://developer.android.com/studio/) is the IDE for creating native Android apps. It includes the [Android SDK](../reference/glossary.md#android-sdk), which will need to be configured for use in the command line. -Android Studio is also used to [create Android virtual devices](android.md#creating-an-android-virtual-device), which are required for the Android emulator. Ionic apps can also be [launched to a device](android.md#set-up-an-android-device). +Android Studio is also used to [create Android virtual devices](android.mdx#creating-an-android-virtual-device), which are required for the Android emulator. Ionic apps can also be [launched to a device](android.mdx#set-up-an-android-device). :::note We don't recommend using Android Studio for _developing_ Ionic apps. Instead, it should only really be used to build and run your apps for the native Android platform and to manage the Android SDK and virtual devices. @@ -112,7 +112,7 @@ If you are using any version of **`cordova-android`** below `10.0.0`, install th ### Gradle - +{/* prettier-ignore */} Gradle is the build tool used in Android apps and must be installed separately. See the install page for details. ## Project Setup diff --git a/versioned_docs/version-v5/developing/hardware-back-button.md b/versioned_docs/version-v5/developing/hardware-back-button.mdx similarity index 100% rename from versioned_docs/version-v5/developing/hardware-back-button.md rename to versioned_docs/version-v5/developing/hardware-back-button.mdx diff --git a/versioned_docs/version-v5/developing/ios.md b/versioned_docs/version-v5/developing/ios.mdx similarity index 98% rename from versioned_docs/version-v5/developing/ios.md rename to versioned_docs/version-v5/developing/ios.mdx index f9244962211..a30a8d1187b 100644 --- a/versioned_docs/version-v5/developing/ios.md +++ b/versioned_docs/version-v5/developing/ios.mdx @@ -77,7 +77,7 @@ Before apps can be deployed to iOS simulators and devices, the native project mu For Cordova, open the `config.xml` file and modify the `id` attribute of the root element, ``. See [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) for more information. - +{/* prettier-ignore */} 1. Open the project in Xcode. For Capacitor, run the following to open the app in Xcode: @@ -88,12 +88,12 @@ Before apps can be deployed to iOS simulators and devices, the native project mu For Cordova, open Xcode. Use **File** » **Open** and locate the app. Open the app's `platforms/ios` directory. - +{/* prettier-ignore */} 1. In Project navigator, select the project root to open the project editor. Under the **Identity** section, verify that the Package ID that was set matches the Bundle Identifier. ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png) - +{/* prettier-ignore */} 1. In the same project editor, under the Signing section, ensure Automatically manage signing is enabled. Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing. ![Xcode Signing Setup](/img/running/ios-xcode-signing-setup.png) diff --git a/versioned_docs/version-v5/developing/keyboard.md b/versioned_docs/version-v5/developing/keyboard.mdx similarity index 100% rename from versioned_docs/version-v5/developing/keyboard.md rename to versioned_docs/version-v5/developing/keyboard.mdx diff --git a/versioned_docs/version-v5/developing/previewing.md b/versioned_docs/version-v5/developing/previewing.mdx similarity index 85% rename from versioned_docs/version-v5/developing/previewing.md rename to versioned_docs/version-v5/developing/previewing.mdx index 10330b093e8..db5f7093fc0 100644 --- a/versioned_docs/version-v5/developing/previewing.md +++ b/versioned_docs/version-v5/developing/previewing.mdx @@ -2,9 +2,9 @@ There are many different options to test native functionality depending on your target platforms and needs. -- Run locally in a web browser (using [Platform Detection](../core-concepts/cross-platform.md) for native functionality) -- [Deploy to iOS](ios.md) -- [Deploy to Android](android.md) +- Run locally in a web browser (using [Platform Detection](../core-concepts/cross-platform.mdx) for native functionality) +- [Deploy to iOS](ios.mdx) +- [Deploy to Android](android.mdx) ## Run Locally in a Web Browser @@ -28,5 +28,5 @@ $ ionic serve With `ionic serve` running, continue developing your app. As you save changes, the app reloads with those changes applied. -When implementing native functionality, use [Platform Detection](../core-concepts/cross-platform.md). -When you're ready to test on a real device, see here for [iOS](ios.md) and [Android](android.md). +When implementing native functionality, use [Platform Detection](../core-concepts/cross-platform.mdx). +When you're ready to test on a real device, see here for [iOS](ios.mdx) and [Android](android.mdx). diff --git a/versioned_docs/version-v5/developing/scaffolding.md b/versioned_docs/version-v5/developing/scaffolding.mdx similarity index 91% rename from versioned_docs/version-v5/developing/scaffolding.md rename to versioned_docs/version-v5/developing/scaffolding.mdx index c46c2eabd72..7d11da620e7 100644 --- a/versioned_docs/version-v5/developing/scaffolding.md +++ b/versioned_docs/version-v5/developing/scaffolding.mdx @@ -34,7 +34,7 @@ The `src/app/` directory contains the root app component and module as well as a ## Generating New Features -The Ionic CLI can generate new app features with the [`ionic generate`](../cli/commands/generate.md) command. By running `ionic generate` in the command line, a selection prompt is displayed which lists the available features that can be generated. +The Ionic CLI can generate new app features with the [`ionic generate`](../cli/commands/generate.mdx) command. By running `ionic generate` in the command line, a selection prompt is displayed which lists the available features that can be generated. ```shell-session $ ionic generate @@ -78,4 +78,4 @@ The Ionic CLI uses the underlying framework tooling to stay close to best practi After creating the files and directories for the new page, the CLI will also update the router configuration to include the new page. This reduces the amount of manual work needed to keep the development lifecycle moving. -For more details, run `ionic g --help` from the command line or see [the documentation](../cli/commands/generate.md) for `ionic generate`. +For more details, run `ionic g --help` from the command line or see [the documentation](../cli/commands/generate.mdx) for `ionic generate`. diff --git a/versioned_docs/version-v5/developing/starting.md b/versioned_docs/version-v5/developing/starting.mdx similarity index 100% rename from versioned_docs/version-v5/developing/starting.md rename to versioned_docs/version-v5/developing/starting.mdx diff --git a/versioned_docs/version-v5/developing/tips.md b/versioned_docs/version-v5/developing/tips.mdx similarity index 100% rename from versioned_docs/version-v5/developing/tips.md rename to versioned_docs/version-v5/developing/tips.mdx diff --git a/versioned_docs/version-v6/cli/configuration.md b/versioned_docs/version-v6/cli/configuration.mdx similarity index 99% rename from versioned_docs/version-v6/cli/configuration.md rename to versioned_docs/version-v6/cli/configuration.mdx index 9b3d7d31a95..35f861a9ff0 100644 --- a/versioned_docs/version-v6/cli/configuration.md +++ b/versioned_docs/version-v6/cli/configuration.mdx @@ -52,7 +52,7 @@ Each Ionic project has a project configuration file, usually at the project's ro The CLI will look for the following environment variables: - `IONIC_CONFIG_DIRECTORY`: The directory of the global CLI config. Defaults to `~/.ionic`. -- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. See [Using a Proxy](using-a-proxy.md). +- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. See [Using a Proxy](using-a-proxy.mdx). - `IONIC_TOKEN`: Automatically authenticates with [Appflow](https://ionic.io/appflow). ## Flags diff --git a/versioned_docs/version-v6/cli/livereload.md b/versioned_docs/version-v6/cli/livereload.mdx similarity index 96% rename from versioned_docs/version-v6/cli/livereload.md rename to versioned_docs/version-v6/cli/livereload.mdx index 67a571ef1cd..3b403732ac5 100644 --- a/versioned_docs/version-v6/cli/livereload.md +++ b/versioned_docs/version-v6/cli/livereload.mdx @@ -1,6 +1,6 @@ # Live Reload -One option that can boost productivity when building Ionic apps is **Live Reload** (or **live-reload**). When active, Live Reload will reload the browser or [Web View](../core-concepts/webview.md) when changes in the app are detected. This is particularly useful for developing using hardware devices. +One option that can boost productivity when building Ionic apps is **Live Reload** (or **live-reload**). When active, Live Reload will reload the browser or [Web View](../core-concepts/webview.mdx) when changes in the app are detected. This is particularly useful for developing using hardware devices. ## Terms diff --git a/versioned_docs/version-v6/cli/using-a-proxy.md b/versioned_docs/version-v6/cli/using-a-proxy.mdx similarity index 100% rename from versioned_docs/version-v6/cli/using-a-proxy.md rename to versioned_docs/version-v6/cli/using-a-proxy.mdx diff --git a/versioned_docs/version-v6/contributing/coc.md b/versioned_docs/version-v6/contributing/coc.mdx similarity index 100% rename from versioned_docs/version-v6/contributing/coc.md rename to versioned_docs/version-v6/contributing/coc.mdx diff --git a/docs/contributing/how-to-contribute.md b/versioned_docs/version-v6/contributing/how-to-contribute.mdx similarity index 99% rename from docs/contributing/how-to-contribute.md rename to versioned_docs/version-v6/contributing/how-to-contribute.mdx index df5f6efbd23..da368fb421f 100644 --- a/docs/contributing/how-to-contribute.md +++ b/versioned_docs/version-v6/contributing/how-to-contribute.mdx @@ -8,7 +8,7 @@ Thanks for the interest in contributing to Ionic Framework! ## Contributing Etiquette -Please see the [Contributor Code of Conduct](coc.md) for information on the rules of conduct. +Please see the [Contributor Code of Conduct](coc.mdx) for information on the rules of conduct. ## Creating an Issue diff --git a/versioned_docs/version-v6/core-concepts/cross-platform.md b/versioned_docs/version-v6/core-concepts/cross-platform.mdx similarity index 100% rename from versioned_docs/version-v6/core-concepts/cross-platform.md rename to versioned_docs/version-v6/core-concepts/cross-platform.mdx diff --git a/versioned_docs/version-v6/core-concepts/fundamentals.md b/versioned_docs/version-v6/core-concepts/fundamentals.mdx similarity index 98% rename from versioned_docs/version-v6/core-concepts/fundamentals.md rename to versioned_docs/version-v6/core-concepts/fundamentals.mdx index 97a09499934..7a3c7eab4d5 100644 --- a/versioned_docs/version-v6/core-concepts/fundamentals.md +++ b/versioned_docs/version-v6/core-concepts/fundamentals.mdx @@ -38,7 +38,7 @@ For apps that are built with Angular and `@ionic/angular`, we recommend using th An amazing feature of apps built with web technologies (such as Ionic apps!) is that it can run on virtually any platform: desktop computers, phones, tablets, cars, refrigerators, and more! The same code base for Ionic apps can work on many platforms because it is based on web standards and common APIs that are shared across these platforms. -One of the most common use cases for Ionic is to build an app which can be downloaded from both the App Store and Play Store. Both iOS and Android software development kits (SDKs) provide [Web Views](webview.md) which render any Ionic app, while still allowing for full Native SDK access. +One of the most common use cases for Ionic is to build an app which can be downloaded from both the App Store and Play Store. Both iOS and Android software development kits (SDKs) provide [Web Views](webview.mdx) which render any Ionic app, while still allowing for full Native SDK access. Projects such as Capacitor and Cordova are commonly used to give Ionic apps this access to Native SDKs. This means developers can quickly build out an app using common web development tools, and still have access to native features such as the device's accelerometer, camera, GPS, and more. diff --git a/versioned_docs/version-v6/core-concepts/webview.md b/versioned_docs/version-v6/core-concepts/webview.mdx similarity index 100% rename from versioned_docs/version-v6/core-concepts/webview.md rename to versioned_docs/version-v6/core-concepts/webview.mdx diff --git a/versioned_docs/version-v6/core-concepts/what-are-progressive-web-apps.md b/versioned_docs/version-v6/core-concepts/what-are-progressive-web-apps.mdx similarity index 100% rename from versioned_docs/version-v6/core-concepts/what-are-progressive-web-apps.md rename to versioned_docs/version-v6/core-concepts/what-are-progressive-web-apps.mdx diff --git a/versioned_docs/version-v6/deployment/app-store.md b/versioned_docs/version-v6/deployment/app-store.mdx similarity index 100% rename from versioned_docs/version-v6/deployment/app-store.md rename to versioned_docs/version-v6/deployment/app-store.mdx diff --git a/versioned_docs/version-v6/deployment/desktop-app.md b/versioned_docs/version-v6/deployment/desktop-app.mdx similarity index 100% rename from versioned_docs/version-v6/deployment/desktop-app.md rename to versioned_docs/version-v6/deployment/desktop-app.mdx diff --git a/versioned_docs/version-v6/deployment/progressive-web-app.md b/versioned_docs/version-v6/deployment/progressive-web-app.mdx similarity index 97% rename from versioned_docs/version-v6/deployment/progressive-web-app.md rename to versioned_docs/version-v6/deployment/progressive-web-app.mdx index 6fc348f877b..c13ba7cbbce 100644 --- a/versioned_docs/version-v6/deployment/progressive-web-app.md +++ b/versioned_docs/version-v6/deployment/progressive-web-app.mdx @@ -14,7 +14,7 @@ import DocsCards from '@components/global/DocsCards'; /> -Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a native app. Not sure what PWAs are? Check out Ionic's PWA Overview or the [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.md) page for more info. +Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a native app. Not sure what PWAs are? Check out Ionic's PWA Overview or the [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.mdx) page for more info. For the frameworks Ionic supports, we've created dedicated guides that go into more detail. Below are links for Angular and React. diff --git a/versioned_docs/version-v6/developer-resources/books.md b/versioned_docs/version-v6/developer-resources/books.mdx similarity index 100% rename from versioned_docs/version-v6/developer-resources/books.md rename to versioned_docs/version-v6/developer-resources/books.mdx diff --git a/versioned_docs/version-v6/developer-resources/courses.md b/versioned_docs/version-v6/developer-resources/courses.mdx similarity index 100% rename from versioned_docs/version-v6/developer-resources/courses.md rename to versioned_docs/version-v6/developer-resources/courses.mdx diff --git a/versioned_docs/version-v6/developer-resources/guides.md b/versioned_docs/version-v6/developer-resources/guides.mdx similarity index 76% rename from versioned_docs/version-v6/developer-resources/guides.md rename to versioned_docs/version-v6/developer-resources/guides.mdx index dbe6d9477b8..c0590b83684 100644 --- a/versioned_docs/version-v6/developer-resources/guides.md +++ b/versioned_docs/version-v6/developer-resources/guides.mdx @@ -1,9 +1,9 @@ # Guides -### [Your First Ionic App - v3](guides/first-app-v3/intro.md) +### [Your First Ionic App - v3](guides/first-app-v3/intro.mdx) Follow along as we create a working Photo Gallery app using Ionic Framework v3 and Appflow. -### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.md) +### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.mdx) Follow along as we create a working Photo Gallery app using Ionic Framework v4 and Cordova. diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx similarity index 100% rename from versioned_docs/version-v6/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md rename to versioned_docs/version-v6/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/intro.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/intro.mdx similarity index 100% rename from versioned_docs/version-v6/developer-resources/guides/first-app-v3/intro.md rename to versioned_docs/version-v6/developer-resources/guides/first-app-v3/intro.mdx diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/ios-android-camera.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/ios-android-camera.mdx similarity index 100% rename from versioned_docs/version-v6/developer-resources/guides/first-app-v3/ios-android-camera.md rename to versioned_docs/version-v6/developer-resources/guides/first-app-v3/ios-android-camera.mdx diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx similarity index 94% rename from versioned_docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md rename to versioned_docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx index da6f9462ecc..d887ce45855 100644 --- a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md +++ b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx @@ -70,7 +70,7 @@ Next, create a local, native build of the app. ## Android Builds -Follow the [Android Setup instructions](../../../developing/android.md), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run: +Follow the [Android Setup instructions](../../../developing/android.mdx), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run: ```shell ionic cordova build android --prod @@ -80,13 +80,13 @@ This will generate a unsigned debug build (meaning the app can run on any Androi ## iOS Builds -iOS is [a bit trickier to set up](../../../developing/ios.md) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run: +iOS is [a bit trickier to set up](../../../developing/ios.mdx) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run: ```shell ionic cordova build ios --prod ``` -Then, continue to [follow the instructions here](../../../deployment/app-store.md) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice. +Then, continue to [follow the instructions here](../../../deployment/app-store.mdx) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice. ## Add the Native App to Your Local Device diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/theming.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/theming.mdx similarity index 100% rename from versioned_docs/version-v6/developer-resources/guides/first-app-v3/theming.md rename to versioned_docs/version-v6/developer-resources/guides/first-app-v3/theming.mdx diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx similarity index 100% rename from versioned_docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md rename to versioned_docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx similarity index 100% rename from versioned_docs/version-v6/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md rename to versioned_docs/version-v6/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/intro.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/intro.mdx similarity index 98% rename from versioned_docs/version-v5/developer-resources/guides/first-app-v4/intro.md rename to versioned_docs/version-v6/developer-resources/guides/first-app-v4/intro.mdx index bffc7ea9c28..8d705d4dc49 100644 --- a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/intro.md +++ b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/intro.mdx @@ -30,7 +30,7 @@ npm install -g @ionic/cli cordova :::note The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur. -Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../../../developing/tips.md#resolving-permission-errors) for more information. +Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../../../developing/tips.mdx#resolving-permission-errors) for more information. ::: ## Create an App diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/ios-android-camera.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.mdx similarity index 98% rename from versioned_docs/version-v5/developer-resources/guides/first-app-v4/ios-android-camera.md rename to versioned_docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.mdx index 8908090edec..d5c4dfcb129 100644 --- a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/ios-android-camera.md +++ b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.mdx @@ -13,7 +13,7 @@ $ ionic cordova platform add android These commands will create a `config.xml` file, which is used to define Cordova iOS and Android settings. Cordova reads this file and applies each setting as it builds each native app binary. -There are more steps to configure [iOS](../../../developing/ios.md) and [Android](../../../developing/android.md) native tooling. +There are more steps to configure [iOS](../../../developing/ios.mdx) and [Android](../../../developing/android.mdx) native tooling. Much better! Now we can add the camera functionality. By the way, you can find reference code for this [on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4). diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/theming.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/theming.mdx similarity index 100% rename from versioned_docs/version-v6/developer-resources/guides/first-app-v4/theming.md rename to versioned_docs/version-v6/developer-resources/guides/first-app-v4/theming.mdx diff --git a/versioned_docs/version-v6/developer-resources/posts.md b/versioned_docs/version-v6/developer-resources/posts.mdx similarity index 100% rename from versioned_docs/version-v6/developer-resources/posts.md rename to versioned_docs/version-v6/developer-resources/posts.mdx diff --git a/versioned_docs/version-v6/developer-resources/tools.md b/versioned_docs/version-v6/developer-resources/tools.mdx similarity index 100% rename from versioned_docs/version-v6/developer-resources/tools.md rename to versioned_docs/version-v6/developer-resources/tools.mdx diff --git a/versioned_docs/version-v6/developer-resources/videos.md b/versioned_docs/version-v6/developer-resources/videos.mdx similarity index 100% rename from versioned_docs/version-v6/developer-resources/videos.md rename to versioned_docs/version-v6/developer-resources/videos.mdx diff --git a/versioned_docs/version-v6/developing/android.md b/versioned_docs/version-v6/developing/android.mdx similarity index 98% rename from versioned_docs/version-v6/developing/android.md rename to versioned_docs/version-v6/developing/android.mdx index e38e12e4a6a..17c2056c757 100644 --- a/versioned_docs/version-v6/developing/android.md +++ b/versioned_docs/version-v6/developing/android.mdx @@ -17,7 +17,7 @@ This guide covers how to run and debug Ionic apps on Android emulators and devic [Android Studio](https://developer.android.com/studio/) is the IDE for creating native Android apps. It includes the [Android SDK](../reference/glossary.md#android-sdk), which will need to be configured for use in the command line. -Android Studio is also used to [create Android virtual devices](android.md#creating-an-android-virtual-device), which are required for the Android emulator. Ionic apps can also be [launched to a device](android.md#set-up-an-android-device). +Android Studio is also used to [create Android virtual devices](android.mdx#creating-an-android-virtual-device), which are required for the Android emulator. Ionic apps can also be [launched to a device](android.mdx#set-up-an-android-device). :::note We don't recommend using Android Studio for _developing_ Ionic apps. Instead, it should only really be used to build and run your apps for the native Android platform and to manage the Android SDK and virtual devices. @@ -112,7 +112,7 @@ If you are using any version of **`cordova-android`** below `10.0.0`, install th ### Gradle - +{/* prettier-ignore */} Gradle is the build tool used in Android apps and must be installed separately. See the install page for details. ## Project Setup diff --git a/versioned_docs/version-v6/developing/config.md b/versioned_docs/version-v6/developing/config.mdx similarity index 99% rename from versioned_docs/version-v6/developing/config.md rename to versioned_docs/version-v6/developing/config.mdx index f73ce133123..0d4dacdf251 100644 --- a/versioned_docs/version-v6/developing/config.md +++ b/versioned_docs/version-v6/developing/config.mdx @@ -10,7 +10,7 @@ The available config keys can be found in the [`IonicConfig`](#ionicconfig) inte The following example disables ripple effects and default the mode to Material Design: -import GlobalExample from './config/global/index.md'; +import GlobalExample from './config/global/index.mdx'; @@ -18,7 +18,7 @@ import GlobalExample from './config/global/index.md'; Ionic Config is not reactive. Updating the config's value after the component has rendered will result in the previous value. It is recommended to use a component's properties instead of updating the config, when you require reactive values. -import PerComponentExample from './config/per-component/index.md'; +import PerComponentExample from './config/per-component/index.mdx'; @@ -28,7 +28,7 @@ Ionic Config can also be set on a per-platform basis. For example, this allows y In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser. -import PerPlatformExample from './config/per-platform/index.md'; +import PerPlatformExample from './config/per-platform/index.mdx'; @@ -36,7 +36,7 @@ import PerPlatformExample from './config/per-platform/index.md'; The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match: -import PerPlatformFallbackExample from './config/per-platform-overrides/index.md'; +import PerPlatformFallbackExample from './config/per-platform-overrides/index.mdx'; @@ -44,7 +44,7 @@ import PerPlatformFallbackExample from './config/per-platform-overrides/index.md This final example allows you to accumulate a config object based upon different platform requirements. -import PerPlatformOverridesExample from './config/per-platform-fallback/index.md'; +import PerPlatformOverridesExample from './config/per-platform-fallback/index.mdx'; diff --git a/versioned_docs/version-v6/developing/config/global/index.md b/versioned_docs/version-v6/developing/config/global/index.mdx similarity index 100% rename from versioned_docs/version-v6/developing/config/global/index.md rename to versioned_docs/version-v6/developing/config/global/index.mdx diff --git a/versioned_docs/version-v6/developing/config/per-component/index.md b/versioned_docs/version-v6/developing/config/per-component/index.mdx similarity index 100% rename from versioned_docs/version-v6/developing/config/per-component/index.md rename to versioned_docs/version-v6/developing/config/per-component/index.mdx diff --git a/versioned_docs/version-v6/developing/config/per-platform-fallback/index.md b/versioned_docs/version-v6/developing/config/per-platform-fallback/index.mdx similarity index 100% rename from versioned_docs/version-v6/developing/config/per-platform-fallback/index.md rename to versioned_docs/version-v6/developing/config/per-platform-fallback/index.mdx diff --git a/versioned_docs/version-v6/developing/config/per-platform-overrides/index.md b/versioned_docs/version-v6/developing/config/per-platform-overrides/index.mdx similarity index 100% rename from versioned_docs/version-v6/developing/config/per-platform-overrides/index.md rename to versioned_docs/version-v6/developing/config/per-platform-overrides/index.mdx diff --git a/versioned_docs/version-v6/developing/config/per-platform/index.md b/versioned_docs/version-v6/developing/config/per-platform/index.mdx similarity index 100% rename from versioned_docs/version-v6/developing/config/per-platform/index.md rename to versioned_docs/version-v6/developing/config/per-platform/index.mdx diff --git a/versioned_docs/version-v6/developing/hardware-back-button.md b/versioned_docs/version-v6/developing/hardware-back-button.mdx similarity index 100% rename from versioned_docs/version-v6/developing/hardware-back-button.md rename to versioned_docs/version-v6/developing/hardware-back-button.mdx diff --git a/versioned_docs/version-v6/developing/ios.md b/versioned_docs/version-v6/developing/ios.mdx similarity index 100% rename from versioned_docs/version-v6/developing/ios.md rename to versioned_docs/version-v6/developing/ios.mdx diff --git a/versioned_docs/version-v6/developing/keyboard.md b/versioned_docs/version-v6/developing/keyboard.mdx similarity index 100% rename from versioned_docs/version-v6/developing/keyboard.md rename to versioned_docs/version-v6/developing/keyboard.mdx diff --git a/versioned_docs/version-v6/developing/previewing.md b/versioned_docs/version-v6/developing/previewing.mdx similarity index 94% rename from versioned_docs/version-v6/developing/previewing.md rename to versioned_docs/version-v6/developing/previewing.mdx index 6c558d2d5de..6883df0b176 100644 --- a/versioned_docs/version-v6/developing/previewing.md +++ b/versioned_docs/version-v6/developing/previewing.mdx @@ -12,9 +12,9 @@ title: Previewing There are many different options to test native functionality depending on your target platforms and needs. -- Run locally in a web browser (using [Platform Detection](../core-concepts/cross-platform.md) for native functionality) -- [Deploy to iOS](ios.md) -- [Deploy to Android](android.md) +- Run locally in a web browser (using [Platform Detection](../core-concepts/cross-platform.mdx) for native functionality) +- [Deploy to iOS](ios.mdx) +- [Deploy to Android](android.mdx) ## Run Locally in a Web Browser @@ -38,8 +38,8 @@ $ ionic serve With `ionic serve` running, continue developing your app. As you save changes, the app reloads with those changes applied. -When implementing native functionality, use [Platform Detection](../core-concepts/cross-platform.md). -When you're ready to test on a real device, see here for [iOS](ios.md) and [Android](android.md). +When implementing native functionality, use [Platform Detection](../core-concepts/cross-platform.mdx). +When you're ready to test on a real device, see here for [iOS](ios.mdx) and [Android](android.mdx). ## Simulating a Mobile Viewport diff --git a/versioned_docs/version-v6/developing/scaffolding.md b/versioned_docs/version-v6/developing/scaffolding.mdx similarity index 100% rename from versioned_docs/version-v6/developing/scaffolding.md rename to versioned_docs/version-v6/developing/scaffolding.mdx diff --git a/versioned_docs/version-v6/developing/starting.md b/versioned_docs/version-v6/developing/starting.mdx similarity index 100% rename from versioned_docs/version-v6/developing/starting.md rename to versioned_docs/version-v6/developing/starting.mdx diff --git a/versioned_docs/version-v6/developing/tips.md b/versioned_docs/version-v6/developing/tips.mdx similarity index 100% rename from versioned_docs/version-v6/developing/tips.md rename to versioned_docs/version-v6/developing/tips.mdx diff --git a/versioned_docs/version-v7/core-concepts/cross-platform.md b/versioned_docs/version-v7/core-concepts/cross-platform.md index 9d2e39248b9..b8aed70bb75 100644 --- a/versioned_docs/version-v7/core-concepts/cross-platform.md +++ b/versioned_docs/version-v7/core-concepts/cross-platform.md @@ -67,7 +67,7 @@ This will render 5 items with a width of 100% each. This may look great on a mob -To improve this experience, we can wrap the items in a [Grid](../api/grid.md) component. The view can be easily rewritten into something more usable on larger screens: +To improve this experience, we can wrap the items in a [Grid](../api/grid.mdx) component. The view can be easily rewritten into something more usable on larger screens: ```html @@ -149,7 +149,7 @@ There’s a lot going on in the example above. These are the key points: - The `size` attribute can have a breakpoint added to it, `size-{breakpoint}`. This value sets the size for the specified breakpoint and above. -For more information on customizing with grid, see the [Grid](../api/grid.md) documentation. +For more information on customizing with grid, see the [Grid](../api/grid.mdx) documentation. ## Storage diff --git a/versioned_docs/version-v7/developing/config.md b/versioned_docs/version-v7/developing/config.md index b97ec2cd1ae..31a7f3a4a8a 100644 --- a/versioned_docs/version-v7/developing/config.md +++ b/versioned_docs/version-v7/developing/config.md @@ -13,7 +13,7 @@ The available config keys can be found in the [`IonicConfig`](#ionicconfig) inte The following example disables ripple effects and default the mode to Material Design: -import GlobalExample from '@site/docs/developing/config/global/index.md'; +import GlobalExample from '@site/versioned_docs/version-v7/developing/config/global/index.md'; @@ -21,7 +21,7 @@ import GlobalExample from '@site/docs/developing/config/global/index.md'; Ionic Config is not reactive. Updating the config's value after the component has rendered will result in the previous value. It is recommended to use a component's properties instead of updating the config, when you require reactive values. -import PerComponentExample from '@site/docs/developing/config/per-component/index.md'; +import PerComponentExample from '@site/versioned_docs/version-v7/developing/config/per-component/index.md'; @@ -31,7 +31,7 @@ Ionic Config can also be set on a per-platform basis. For example, this allows y In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser. -import PerPlatformExample from '@site/docs/developing/config/per-platform/index.md'; +import PerPlatformExample from '@site/versioned_docs/version-v7/developing/config/per-platform/index.md'; @@ -39,7 +39,7 @@ import PerPlatformExample from '@site/docs/developing/config/per-platform/index. The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match: -import PerPlatformFallbackExample from '@site/docs/developing/config/per-platform-overrides/index.md'; +import PerPlatformFallbackExample from '@site/versioned_docs/version-v7/developing/config/per-platform-overrides/index.md'; @@ -47,7 +47,7 @@ import PerPlatformFallbackExample from '@site/docs/developing/config/per-platfor This final example allows you to accumulate a config object based upon different platform requirements. -import PerPlatformOverridesExample from '@site/docs/developing/config/per-platform-fallback/index.md'; +import PerPlatformOverridesExample from '@site/versioned_docs/version-v7/developing/config/per-platform-fallback/index.md'; diff --git a/versioned_docs/version-v7/developing/config/per-platform/index.md b/versioned_docs/version-v7/developing/config/per-platform/index.md index b088a7e6bf6..a7338da3084 100644 --- a/versioned_docs/version-v7/developing/config/per-platform/index.md +++ b/versioned_docs/version-v7/developing/config/per-platform/index.md @@ -16,7 +16,7 @@ import TabItem from '@theme/TabItem'; :::note Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly. -See the [Angular Platform Documentation](../angular/platform) for the types of platforms you can detect. +See the [Angular Platform Documentation](../../../angular/platform.mdx) for the types of platforms you can detect. ::: ```ts title="app.module.ts" @@ -39,7 +39,7 @@ import { isPlatform, IonicModule } from '@ionic/angular'; :::note Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly. -See the [Angular Platform Documentation](../angular/platform) for the types of platforms you can detect. +See the [Angular Platform Documentation](../../../angular/platform.mdx) for the types of platforms you can detect. ::: ```ts title="main.ts" @@ -59,7 +59,7 @@ bootstrapApplication(AppComponent, { :::note -See the [React Platform Documentation](../react/platform) for the types of platforms you can detect. +See the [React Platform Documentation](../../../react/platform.mdx) for the types of platforms you can detect. ::: ```tsx title="App.tsx" @@ -74,7 +74,7 @@ setupIonicReact({ :::note -See the [Vue Platform Documentation](../vue/platform) for the types of platforms you can detect. +See the [Vue Platform Documentation](../../../vue/platform.mdx) for the types of platforms you can detect. ::: ```ts title="main.ts" From 54208178a11661c59a31c1ee4782df5b858f4310 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 19 Apr 2024 10:02:52 -0700 Subject: [PATCH 3/4] chore(mdx): use mdx exts for i-u folders (#3457) --- docs/angular/your-first-app.mdx | 2 +- docs/api/action-sheet.mdx | 2 +- docs/api/alert.mdx | 2 +- docs/api/col.mdx | 2 +- docs/api/content.mdx | 4 +- docs/api/datetime.mdx | 4 +- docs/api/fab.mdx | 2 +- docs/api/grid.mdx | 8 +- docs/api/item.mdx | 4 +- docs/api/nav.mdx | 2 +- docs/api/router.mdx | 2 +- docs/api/row.mdx | 2 +- docs/api/tabs.mdx | 2 +- docs/api/text.mdx | 2 +- docs/api/toast.mdx | 2 +- docs/cli.md | 6 +- docs/cli/configuration.mdx | 2 +- docs/core-concepts/fundamentals.mdx | 8 +- docs/core-concepts/webview.mdx | 8 +- .../guides/first-app-v4/theming.mdx | 2 +- docs/developer-resources/tools.mdx | 2 +- docs/developing/config.mdx | 80 +++++++++---------- docs/developing/config/per-platform/index.mdx | 2 +- docs/index.md | 8 +- docs/intro/{cdn.md => cdn.mdx} | 6 +- docs/intro/{cli.md => cli.mdx} | 4 +- .../intro/environment.mdx | 6 +- docs/intro/{first-app.md => first-app.mdx} | 0 docs/intro/{next.md => next.mdx} | 0 ...code-extension.md => vscode-extension.mdx} | 0 .../{css-utilities.md => css-utilities.mdx} | 6 +- ...nt-scaling.md => dynamic-font-scaling.mdx} | 0 ...-stylesheets.md => global-stylesheets.mdx} | 16 ++-- docs/layout/{structure.md => structure.mdx} | 0 ...nic-react-to-an-existing-react-project.mdx | 4 +- ...browser-support.md => browser-support.mdx} | 0 docs/reference/{glossary.md => glossary.mdx} | 4 +- .../{release-notes.md => release-notes.mdx} | 0 docs/reference/{support.md => support.mdx} | 2 +- .../{versioning.md => versioning.mdx} | 2 +- docs/techniques/{security.md => security.mdx} | 0 docs/test/page1.md | 3 - docs/test/page1.mdx | 3 + docs/test/page2.md | 3 - docs/test/page2.mdx | 3 + docs/theming/{advanced.md => advanced.mdx} | 4 +- docs/theming/{basics.md => basics.mdx} | 10 +-- ...color-generator.md => color-generator.mdx} | 0 .../colors.md => docs/theming/colors.mdx | 8 +- ...s-shadow-parts.md => css-shadow-parts.mdx} | 4 +- .../{css-variables.md => css-variables.mdx} | 2 +- docs/theming/{dark-mode.md => dark-mode.mdx} | 2 +- .../theming/platform-styles.mdx | 2 +- docs/theming/{themes.md => themes.mdx} | 2 +- docs/troubleshooting/{build.md => build.mdx} | 0 docs/troubleshooting/{cors.md => cors.mdx} | 0 .../{debugging.md => debugging.mdx} | 0 .../troubleshooting/{native.md => native.mdx} | 8 +- .../{runtime.md => runtime.mdx} | 2 +- docs/updating/{4-0.md => 4-0.mdx} | 2 +- docs/updating/{5-0.md => 5-0.mdx} | 2 +- docs/updating/{6-0.md => 6-0.mdx} | 4 +- docs/updating/{7-0.md => 7-0.mdx} | 4 +- .../{animations.md => animations.mdx} | 2 +- docs/utilities/{gestures.md => gestures.mdx} | 2 +- docs/vue/navigation.mdx | 8 +- docs/vue/utility-functions.mdx | 4 +- versioned_docs/version-v5/api/col.mdx | 4 +- versioned_docs/version-v5/api/grid.mdx | 2 +- versioned_docs/version-v5/api/item.mdx | 4 +- versioned_docs/version-v5/api/row.mdx | 4 +- versioned_docs/version-v5/cli.md | 2 +- .../version-v5/cli/configuration.mdx | 2 +- .../version-v5/core-concepts/fundamentals.mdx | 4 +- .../version-v5/core-concepts/webview.mdx | 8 +- .../guides/first-app-v4/theming.mdx | 2 +- .../version-v5/developer-resources/tools.mdx | 2 +- .../version-v5/developing/android.mdx | 8 +- versioned_docs/version-v5/developing/ios.mdx | 10 +-- versioned_docs/version-v5/index.md | 6 +- .../version-v5/intro/{cdn.md => cdn.mdx} | 6 +- .../version-v5/intro/{cli.md => cli.mdx} | 4 +- .../intro/{environment.md => environment.mdx} | 6 +- .../intro/{first-app.md => first-app.mdx} | 0 .../version-v5/intro/{next.md => next.mdx} | 0 .../{css-utilities.md => css-utilities.mdx} | 6 +- ...-stylesheets.md => global-stylesheets.mdx} | 14 ++-- .../version-v5/layout/{grid.md => grid.mdx} | 10 +-- .../version-v5/layout/{rtl.md => rtl.mdx} | 0 .../layout/{structure.md => structure.mdx} | 0 .../native/{abbyy-rtr.md => abbyy-rtr.mdx} | 0 .../{action-sheet.md => action-sheet.mdx} | 0 .../native/{adjust.md => adjust.mdx} | 0 .../native/{admob-plus.md => admob-plus.mdx} | 0 .../version-v5/native/{admob.md => admob.mdx} | 0 .../native/{aes-256.md => aes-256.mdx} | 0 .../{all-in-one-sdk.md => all-in-one-sdk.mdx} | 0 ...ics-firebase.md => analytics-firebase.mdx} | 0 ...oid-exoplayer.md => android-exoplayer.mdx} | 0 ...full-screen.md => android-full-screen.mdx} | 0 .../{android-notch.md => android-notch.mdx} | 0 ...permissions.md => android-permissions.mdx} | 0 .../native/{anyline.md => anyline.mdx} | 0 ...p-availability.md => app-availability.mdx} | 0 ...-analytics.md => app-center-analytics.mdx} | 0 ...nter-crashes.md => app-center-crashes.mdx} | 0 ...app-center-push.md => app-center-push.mdx} | 0 ...app-preferences.md => app-preferences.mdx} | 0 .../native/{app-rate.md => app-rate.mdx} | 0 .../{app-version.md => app-version.mdx} | 0 .../{apple-wallet.md => apple-wallet.mdx} | 0 .../native/{appsflyer.md => appsflyer.mdx} | 0 ...ckground-fetch.md => background-fetch.mdx} | 0 ...location.md => background-geolocation.mdx} | 0 ...background-mode.md => background-mode.mdx} | 0 ...ground-upload.md => background-upload.mdx} | 0 .../version-v5/native/{badge.md => badge.mdx} | 0 ...barcode-scanner.md => barcode-scanner.mdx} | 0 .../{battery-status.md => battery-status.mdx} | 0 .../native/{biocatch.md => biocatch.mdx} | 0 ...etric-wrapper.md => biometric-wrapper.mdx} | 0 .../version-v5/native/{ble.md => ble.mdx} | 0 .../native/{blinkid.md => blinkid.mdx} | 0 .../{bluetooth-le.md => bluetooth-le.mdx} | 0 ...uetooth-serial.md => bluetooth-serial.mdx} | 0 .../native/{branch-io.md => branch-io.mdx} | 0 .../{broadcaster.md => broadcaster.mdx} | 0 .../native/{build-info.md => build-info.mdx} | 0 .../native/{calendar.md => calendar.mdx} | 0 .../{call-directory.md => call-directory.mdx} | 0 .../{call-number.md => call-number.mdx} | 0 .../{camera-preview.md => camera-preview.mdx} | 0 .../native/{camera.md => camera.mdx} | 0 .../native/{chooser.md => chooser.mdx} | 0 .../native/{clevertap.md => clevertap.mdx} | 0 .../native/{clipboard.md => clipboard.mdx} | 0 .../{cloud-settings.md => cloud-settings.mdx} | 0 .../native/{code-push.md => code-push.mdx} | 0 .../{custom-uisdk.md => custom-uisdk.mdx} | 0 .../native/{deeplinks.md => deeplinks.mdx} | 0 ...device-accounts.md => device-accounts.mdx} | 0 .../{device-motion.md => device-motion.mdx} | 0 ...-orientation.md => device-orientation.mdx} | 0 .../native/{device.md => device.mdx} | 0 .../native/{dfu-update.md => dfu-update.mdx} | 0 .../native/{diagnostic.md => diagnostic.mdx} | 0 .../native/{dialogs.md => dialogs.mdx} | 0 .../version-v5/native/{dns.md => dns.mdx} | 0 ...document-picker.md => document-picker.mdx} | 0 ...cument-scanner.md => document-scanner.mdx} | 0 ...document-viewer.md => document-viewer.mdx} | 0 .../{email-composer.md => email-composer.mdx} | 0 .../native/{fabric.md => fabric.mdx} | 0 .../native/{facebook.md => facebook.mdx} | 0 .../version-v5/native/{fcm.md => fcm.mdx} | 0 .../{file-opener.md => file-opener.mdx} | 0 .../native/{file-path.md => file-path.mdx} | 0 .../{file-transfer.md => file-transfer.mdx} | 0 .../version-v5/native/{file.md => file.mdx} | 0 ...se-analytics.md => firebase-analytics.mdx} | 0 ...ication.md => firebase-authentication.mdx} | 0 ...firebase-config.md => firebase-config.mdx} | 0 .../{firebase-crash.md => firebase-crash.mdx} | 0 ...rashlytics.md => firebase-crashlytics.mdx} | 0 ...ic-links.md => firebase-dynamic-links.mdx} | 0 ...se-messaging.md => firebase-messaging.mdx} | 0 ...firebase-vision.md => firebase-vision.mdx} | 0 .../native/{firebase-x.md => firebase-x.mdx} | 0 .../native/{firebase.md => firebase.mdx} | 0 .../native/{flashlight.md => flashlight.mdx} | 0 ...ound-service.md => foreground-service.mdx} | 0 .../version-v5/native/{ftp.md => ftp.mdx} | 0 ...gao-de-location.md => gao-de-location.mdx} | 0 ...ui-sdk-plugin.md => ge-tui-sdk-plugin.mdx} | 0 .../{geolocation.md => geolocation.mdx} | 0 .../{globalization.md => globalization.mdx} | 0 ...ogle-analytics.md => google-analytics.mdx} | 0 .../{google-nearby.md => google-nearby.mdx} | 0 .../{google-plus.md => google-plus.mdx} | 0 .../native/{health-kit.md => health-kit.mdx} | 0 .../native/{health.md => health.mdx} | 0 .../version-v5/native/{http.md => http.mdx} | 0 ...iamport-cordova.md => iamport-cordova.mdx} | 0 .../native/{ibeacon.md => ibeacon.mdx} | 0 .../{image-picker.md => image-picker.mdx} | 0 .../version-v5/native/{imap.md => imap.mdx} | 0 .../{in-app-browser.md => in-app-browser.mdx} | 0 ...pp-purchase-2.md => in-app-purchase-2.mdx} | 0 .../{in-app-review.md => in-app-review.mdx} | 0 .../native/{insomnia.md => insomnia.mdx} | 0 .../native/{instagram.md => instagram.mdx} | 0 .../native/{intercom.md => intercom.mdx} | 0 .../{ionic-webview.md => ionic-webview.mdx} | 0 ...=> ios-aswebauthenticationsession-api.mdx} | 0 .../native/{is-debug.md => is-debug.mdx} | 0 .../native/{keyboard.md => keyboard.mdx} | 0 .../native/{keychain.md => keychain.mdx} | 0 .../{kommunicate.md => kommunicate.mdx} | 0 ...unch-navigator.md => launch-navigator.mdx} | 0 .../{launch-review.md => launch-review.mdx} | 0 .../native/{line-login.md => line-login.mdx} | 0 ...tifications.md => local-notifications.mdx} | 0 ...tion-accuracy.md => location-accuracy.mdx} | 0 ...ash-screen.md => lottie-splash-screen.mdx} | 0 .../{media-capture.md => media-capture.mdx} | 0 .../version-v5/native/{media.md => media.mdx} | 0 .../native/{metrix.md => metrix.mdx} | 0 .../native/{mixpanel.md => mixpanel.mdx} | 0 ...mlkit-translate.md => mlkit-translate.mdx} | 0 ...bile-messaging.md => mobile-messaging.mdx} | 0 ...picker.md => multiple-document-picker.mdx} | 0 .../{music-controls.md => music-controls.mdx} | 0 .../{native-audio.md => native-audio.mdx} | 0 ...native-geocoder.md => native-geocoder.mdx} | 0 ...native-keyboard.md => native-keyboard.mdx} | 0 ...sitions.md => native-page-transitions.mdx} | 0 .../{native-storage.md => native-storage.mdx} | 0 ...ork-interface.md => network-interface.mdx} | 0 .../native/{network.md => network.mdx} | 0 .../version-v5/native/{nfc.md => nfc.mdx} | 0 .../version-v5/native/{ocr.md => ocr.mdx} | 0 .../native/{onesignal.md => onesignal.mdx} | 0 ...e-settings.md => open-native-settings.mdx} | 0 .../native/{openalpr.md => openalpr.mdx} | 0 .../{pdf-generator.md => pdf-generator.mdx} | 0 .../{photo-library.md => photo-library.mdx} | 0 .../{photo-viewer.md => photo-viewer.mdx} | 0 .../native/{printer.md => printer.mdx} | 0 ...pdfkit-cordova.md => pspdfkit-cordova.mdx} | 0 .../native/{purchases.md => purchases.mdx} | 0 .../version-v5/native/{push.md => push.mdx} | 0 .../{pushape-push.md => pushape-push.mdx} | 0 ...ntroller.md => safari-view-controller.mdx} | 0 ...-orientation.md => screen-orientation.mdx} | 0 ...ice-discovery.md => service-discovery.mdx} | 0 .../version-v5/native/{shake.md => shake.mdx} | 0 ...n-with-apple.md => sign-in-with-apple.mdx} | 0 .../native/{smartlook.md => smartlook.mdx} | 0 .../{sms-retriever.md => sms-retriever.mdx} | 0 .../version-v5/native/{sms.md => sms.mdx} | 0 .../{social-sharing.md => social-sharing.mdx} | 0 ...-recognition.md => speech-recognition.mdx} | 0 .../{spinner-dialog.md => spinner-dialog.mdx} | 0 .../{splash-screen.md => splash-screen.mdx} | 0 .../{spotify-auth.md => spotify-auth.mdx} | 0 .../{sqlite-db-copy.md => sqlite-db-copy.mdx} | 0 .../{sqlite-porter.md => sqlite-porter.mdx} | 0 .../native/{sqlite.md => sqlite.mdx} | 0 .../native/{star-prnt.md => star-prnt.mdx} | 0 .../native/{status-bar.md => status-bar.mdx} | 0 ...streaming-media.md => streaming-media.mdx} | 0 .../native/{stripe.md => stripe.mdx} | 0 .../native/{sum-up.md => sum-up.mdx} | 0 .../{taptic-engine.md => taptic-engine.mdx} | 0 ...identifier.md => tealium-adidentifier.mdx} | 0 ...eferrer.md => tealium-installreferrer.mdx} | 0 .../native/{tealium.md => tealium.mdx} | 0 ...theme-detection.md => theme-detection.mdx} | 0 ...three-dee-touch.md => three-dee-touch.mdx} | 0 .../version-v5/native/{toast.md => toast.mdx} | 0 .../native/{touch-id.md => touch-id.mdx} | 0 ...cordova-sdk.md => unvired-cordova-sdk.mdx} | 0 .../native/{uptime.md => uptime.mdx} | 0 .../{urbanairship.md => urbanairship.mdx} | 0 ...ordova-sdk.md => usabilla-cordova-sdk.mdx} | 0 .../version-v5/native/{vibes.md => vibes.mdx} | 0 .../native/{vibration.md => vibration.mdx} | 0 .../{video-editor.md => video-editor.mdx} | 0 .../{video-player.md => video-player.mdx} | 0 .../native/{web-intent.md => web-intent.mdx} | 0 .../native/{web-server.md => web-server.mdx} | 0 ...socket-server.md => web-socket-server.mdx} | 0 .../native/{webengage.md => webengage.mdx} | 0 .../native/{wechat.md => wechat.mdx} | 0 .../{wheel-selector.md => wheel-selector.mdx} | 0 .../{wifi-wizard-2.md => wifi-wizard-2.mdx} | 0 .../native/{wonderpush.md => wonderpush.mdx} | 0 ...deo-player.md => youtube-video-player.mdx} | 0 .../version-v5/native/{zbar.md => zbar.mdx} | 0 .../native/{zeroconf.md => zeroconf.mdx} | 0 .../version-v5/native/{zoom.md => zoom.mdx} | 0 ...browser-support.md => browser-support.mdx} | 0 .../reference/{glossary.md => glossary.mdx} | 4 +- .../reference/{migration.md => migration.mdx} | 0 .../{release-notes.md => release-notes.mdx} | 0 .../reference/{support.md => support.mdx} | 2 +- .../{versioning.md => versioning.mdx} | 2 +- .../techniques/{security.md => security.mdx} | 0 versioned_docs/version-v5/test/page1.md | 3 - versioned_docs/version-v5/test/page1.mdx | 3 + versioned_docs/version-v5/test/page2.md | 3 - versioned_docs/version-v5/test/page2.mdx | 3 + .../theming/{advanced.md => advanced.mdx} | 8 +- .../theming/{basics.md => basics.mdx} | 10 +-- ...color-generator.md => color-generator.mdx} | 0 .../theming/{colors.md => colors.mdx} | 8 +- ...s-shadow-parts.md => css-shadow-parts.mdx} | 6 +- .../{css-variables.md => css-variables.mdx} | 2 +- .../theming/{dark-mode.md => dark-mode.mdx} | 8 +- ...platform-styles.md => platform-styles.mdx} | 2 +- .../theming/{themes.md => themes.mdx} | 2 +- .../troubleshooting/{build.md => build.mdx} | 0 .../troubleshooting/{cors.md => cors.mdx} | 2 +- .../{debugging.md => debugging.mdx} | 6 +- .../troubleshooting/{native.md => native.mdx} | 8 +- .../{runtime.md => runtime.mdx} | 0 .../{animations.md => animations.mdx} | 8 +- .../utilities/{gestures.md => gestures.mdx} | 2 +- versioned_docs/version-v6/api/col.mdx | 2 +- versioned_docs/version-v6/api/datetime.mdx | 2 +- versioned_docs/version-v6/api/grid.mdx | 6 +- versioned_docs/version-v6/api/item.mdx | 2 +- versioned_docs/version-v6/api/nav.mdx | 2 +- versioned_docs/version-v6/api/router.mdx | 2 +- versioned_docs/version-v6/api/row.mdx | 2 +- versioned_docs/version-v6/api/tabs.mdx | 2 +- versioned_docs/version-v6/api/text.mdx | 2 +- versioned_docs/version-v6/cli.md | 2 +- .../version-v6/cli/configuration.mdx | 2 +- .../version-v6/core-concepts/fundamentals.mdx | 6 +- .../version-v6/core-concepts/webview.mdx | 8 +- .../guides/first-app-v4/theming.mdx | 2 +- .../version-v6/developer-resources/tools.mdx | 2 +- .../version-v6/developing/android.mdx | 8 +- .../version-v6/developing/config.mdx | 78 +++++++++--------- versioned_docs/version-v6/developing/ios.mdx | 10 +-- versioned_docs/version-v6/index.md | 8 +- .../version-v6/intro/{cdn.md => cdn.mdx} | 6 +- .../version-v6/intro/{cli.md => cli.mdx} | 4 +- .../version-v6/intro/environment.mdx | 6 +- .../intro/{first-app.md => first-app.mdx} | 0 .../version-v6/intro/{next.md => next.mdx} | 0 ...to-ionic-6.md => upgrading-to-ionic-6.mdx} | 2 +- ...code-extension.md => vscode-extension.mdx} | 0 .../{css-utilities.md => css-utilities.mdx} | 6 +- ...-stylesheets.md => global-stylesheets.mdx} | 14 ++-- .../layout/{structure.md => structure.mdx} | 0 ...browser-support.md => browser-support.mdx} | 0 .../reference/{glossary.md => glossary.mdx} | 4 +- .../reference/{migration.md => migration.mdx} | 0 .../{release-notes.md => release-notes.mdx} | 0 .../reference/{support.md => support.mdx} | 2 +- .../{versioning.md => versioning.mdx} | 2 +- .../techniques/{security.md => security.mdx} | 0 versioned_docs/version-v6/test/page1.md | 3 - versioned_docs/version-v6/test/page1.mdx | 3 + versioned_docs/version-v6/test/page2.md | 3 - versioned_docs/version-v6/test/page2.mdx | 3 + .../theming/{advanced.md => advanced.mdx} | 8 +- .../theming/{basics.md => basics.mdx} | 10 +-- ...color-generator.md => color-generator.mdx} | 0 .../version-v6/theming/colors.mdx | 8 +- ...s-shadow-parts.md => css-shadow-parts.mdx} | 6 +- .../{css-variables.md => css-variables.mdx} | 2 +- .../theming/{dark-mode.md => dark-mode.mdx} | 10 +-- .../version-v6/theming/platform-styles.mdx | 2 +- .../theming/{themes.md => themes.mdx} | 2 +- .../troubleshooting/{build.md => build.mdx} | 0 .../troubleshooting/{cors.md => cors.mdx} | 0 .../{debugging.md => debugging.mdx} | 0 .../troubleshooting/{native.md => native.mdx} | 8 +- .../{runtime.md => runtime.mdx} | 0 .../{animations.md => animations.mdx} | 8 +- .../utilities/{gestures.md => gestures.mdx} | 2 +- versioned_docs/version-v6/vue/navigation.mdx | 6 +- .../version-v6/vue/utility-functions.mdx | 4 +- versioned_docs/version-v7/updating/4-0.md | 4 +- 367 files changed, 388 insertions(+), 388 deletions(-) rename docs/intro/{cdn.md => cdn.mdx} (94%) rename docs/intro/{cli.md => cli.mdx} (83%) rename versioned_docs/version-v6/intro/environment.md => docs/intro/environment.mdx (88%) rename docs/intro/{first-app.md => first-app.mdx} (100%) rename docs/intro/{next.md => next.mdx} (100%) rename docs/intro/{vscode-extension.md => vscode-extension.mdx} (100%) rename docs/layout/{css-utilities.md => css-utilities.mdx} (98%) rename docs/layout/{dynamic-font-scaling.md => dynamic-font-scaling.mdx} (100%) rename docs/layout/{global-stylesheets.md => global-stylesheets.mdx} (79%) rename docs/layout/{structure.md => structure.mdx} (100%) rename docs/reference/{browser-support.md => browser-support.mdx} (100%) rename docs/reference/{glossary.md => glossary.mdx} (99%) rename docs/reference/{release-notes.md => release-notes.mdx} (100%) rename docs/reference/{support.md => support.mdx} (99%) rename docs/reference/{versioning.md => versioning.mdx} (98%) rename docs/techniques/{security.md => security.mdx} (100%) delete mode 100644 docs/test/page1.md create mode 100644 docs/test/page1.mdx delete mode 100644 docs/test/page2.md create mode 100644 docs/test/page2.mdx rename docs/theming/{advanced.md => advanced.mdx} (97%) rename docs/theming/{basics.md => basics.mdx} (90%) rename docs/theming/{color-generator.md => color-generator.mdx} (100%) rename versioned_docs/version-v6/theming/colors.md => docs/theming/colors.mdx (88%) rename docs/theming/{css-shadow-parts.md => css-shadow-parts.mdx} (95%) rename docs/theming/{css-variables.md => css-variables.mdx} (97%) rename docs/theming/{dark-mode.md => dark-mode.mdx} (99%) rename versioned_docs/version-v6/theming/platform-styles.md => docs/theming/platform-styles.mdx (95%) rename docs/theming/{themes.md => themes.mdx} (97%) rename docs/troubleshooting/{build.md => build.mdx} (100%) rename docs/troubleshooting/{cors.md => cors.mdx} (100%) rename docs/troubleshooting/{debugging.md => debugging.mdx} (100%) rename docs/troubleshooting/{native.md => native.mdx} (96%) rename docs/troubleshooting/{runtime.md => runtime.mdx} (98%) rename docs/updating/{4-0.md => 4-0.mdx} (98%) rename docs/updating/{5-0.md => 5-0.mdx} (94%) rename docs/updating/{6-0.md => 6-0.mdx} (98%) rename docs/updating/{7-0.md => 7-0.mdx} (96%) rename docs/utilities/{animations.md => animations.mdx} (99%) rename docs/utilities/{gestures.md => gestures.mdx} (99%) rename versioned_docs/version-v5/intro/{cdn.md => cdn.mdx} (94%) rename versioned_docs/version-v5/intro/{cli.md => cli.mdx} (80%) rename versioned_docs/version-v5/intro/{environment.md => environment.mdx} (87%) rename versioned_docs/version-v5/intro/{first-app.md => first-app.mdx} (100%) rename versioned_docs/version-v5/intro/{next.md => next.mdx} (100%) rename versioned_docs/version-v5/layout/{css-utilities.md => css-utilities.mdx} (98%) rename versioned_docs/version-v5/layout/{global-stylesheets.md => global-stylesheets.mdx} (79%) rename versioned_docs/version-v5/layout/{grid.md => grid.mdx} (97%) rename versioned_docs/version-v5/layout/{rtl.md => rtl.mdx} (100%) rename versioned_docs/version-v5/layout/{structure.md => structure.mdx} (100%) rename versioned_docs/version-v5/native/{abbyy-rtr.md => abbyy-rtr.mdx} (100%) rename versioned_docs/version-v5/native/{action-sheet.md => action-sheet.mdx} (100%) rename versioned_docs/version-v5/native/{adjust.md => adjust.mdx} (100%) rename versioned_docs/version-v5/native/{admob-plus.md => admob-plus.mdx} (100%) rename versioned_docs/version-v5/native/{admob.md => admob.mdx} (100%) rename versioned_docs/version-v5/native/{aes-256.md => aes-256.mdx} (100%) rename versioned_docs/version-v5/native/{all-in-one-sdk.md => all-in-one-sdk.mdx} (100%) rename versioned_docs/version-v5/native/{analytics-firebase.md => analytics-firebase.mdx} (100%) rename versioned_docs/version-v5/native/{android-exoplayer.md => android-exoplayer.mdx} (100%) rename versioned_docs/version-v5/native/{android-full-screen.md => android-full-screen.mdx} (100%) rename versioned_docs/version-v5/native/{android-notch.md => android-notch.mdx} (100%) rename versioned_docs/version-v5/native/{android-permissions.md => android-permissions.mdx} (100%) rename versioned_docs/version-v5/native/{anyline.md => anyline.mdx} (100%) rename versioned_docs/version-v5/native/{app-availability.md => app-availability.mdx} (100%) rename versioned_docs/version-v5/native/{app-center-analytics.md => app-center-analytics.mdx} (100%) rename versioned_docs/version-v5/native/{app-center-crashes.md => app-center-crashes.mdx} (100%) rename versioned_docs/version-v5/native/{app-center-push.md => app-center-push.mdx} (100%) rename versioned_docs/version-v5/native/{app-preferences.md => app-preferences.mdx} (100%) rename versioned_docs/version-v5/native/{app-rate.md => app-rate.mdx} (100%) rename versioned_docs/version-v5/native/{app-version.md => app-version.mdx} (100%) rename versioned_docs/version-v5/native/{apple-wallet.md => apple-wallet.mdx} (100%) rename versioned_docs/version-v5/native/{appsflyer.md => appsflyer.mdx} (100%) rename versioned_docs/version-v5/native/{background-fetch.md => background-fetch.mdx} (100%) rename versioned_docs/version-v5/native/{background-geolocation.md => background-geolocation.mdx} (100%) rename versioned_docs/version-v5/native/{background-mode.md => background-mode.mdx} (100%) rename versioned_docs/version-v5/native/{background-upload.md => background-upload.mdx} (100%) rename versioned_docs/version-v5/native/{badge.md => badge.mdx} (100%) rename versioned_docs/version-v5/native/{barcode-scanner.md => barcode-scanner.mdx} (100%) rename versioned_docs/version-v5/native/{battery-status.md => battery-status.mdx} (100%) rename versioned_docs/version-v5/native/{biocatch.md => biocatch.mdx} (100%) rename versioned_docs/version-v5/native/{biometric-wrapper.md => biometric-wrapper.mdx} (100%) rename versioned_docs/version-v5/native/{ble.md => ble.mdx} (100%) rename versioned_docs/version-v5/native/{blinkid.md => blinkid.mdx} (100%) rename versioned_docs/version-v5/native/{bluetooth-le.md => bluetooth-le.mdx} (100%) rename versioned_docs/version-v5/native/{bluetooth-serial.md => bluetooth-serial.mdx} (100%) rename versioned_docs/version-v5/native/{branch-io.md => branch-io.mdx} (100%) rename versioned_docs/version-v5/native/{broadcaster.md => broadcaster.mdx} (100%) rename versioned_docs/version-v5/native/{build-info.md => build-info.mdx} (100%) rename versioned_docs/version-v5/native/{calendar.md => calendar.mdx} (100%) rename versioned_docs/version-v5/native/{call-directory.md => call-directory.mdx} (100%) rename versioned_docs/version-v5/native/{call-number.md => call-number.mdx} (100%) rename versioned_docs/version-v5/native/{camera-preview.md => camera-preview.mdx} (100%) rename versioned_docs/version-v5/native/{camera.md => camera.mdx} (100%) rename versioned_docs/version-v5/native/{chooser.md => chooser.mdx} (100%) rename versioned_docs/version-v5/native/{clevertap.md => clevertap.mdx} (100%) rename versioned_docs/version-v5/native/{clipboard.md => clipboard.mdx} (100%) rename versioned_docs/version-v5/native/{cloud-settings.md => cloud-settings.mdx} (100%) rename versioned_docs/version-v5/native/{code-push.md => code-push.mdx} (100%) rename versioned_docs/version-v5/native/{custom-uisdk.md => custom-uisdk.mdx} (100%) rename versioned_docs/version-v5/native/{deeplinks.md => deeplinks.mdx} (100%) rename versioned_docs/version-v5/native/{device-accounts.md => device-accounts.mdx} (100%) rename versioned_docs/version-v5/native/{device-motion.md => device-motion.mdx} (100%) rename versioned_docs/version-v5/native/{device-orientation.md => device-orientation.mdx} (100%) rename versioned_docs/version-v5/native/{device.md => device.mdx} (100%) rename versioned_docs/version-v5/native/{dfu-update.md => dfu-update.mdx} (100%) rename versioned_docs/version-v5/native/{diagnostic.md => diagnostic.mdx} (100%) rename versioned_docs/version-v5/native/{dialogs.md => dialogs.mdx} (100%) rename versioned_docs/version-v5/native/{dns.md => dns.mdx} (100%) rename versioned_docs/version-v5/native/{document-picker.md => document-picker.mdx} (100%) rename versioned_docs/version-v5/native/{document-scanner.md => document-scanner.mdx} (100%) rename versioned_docs/version-v5/native/{document-viewer.md => document-viewer.mdx} (100%) rename versioned_docs/version-v5/native/{email-composer.md => email-composer.mdx} (100%) rename versioned_docs/version-v5/native/{fabric.md => fabric.mdx} (100%) rename versioned_docs/version-v5/native/{facebook.md => facebook.mdx} (100%) rename versioned_docs/version-v5/native/{fcm.md => fcm.mdx} (100%) rename versioned_docs/version-v5/native/{file-opener.md => file-opener.mdx} (100%) rename versioned_docs/version-v5/native/{file-path.md => file-path.mdx} (100%) rename versioned_docs/version-v5/native/{file-transfer.md => file-transfer.mdx} (100%) rename versioned_docs/version-v5/native/{file.md => file.mdx} (100%) rename versioned_docs/version-v5/native/{firebase-analytics.md => firebase-analytics.mdx} (100%) rename versioned_docs/version-v5/native/{firebase-authentication.md => firebase-authentication.mdx} (100%) rename versioned_docs/version-v5/native/{firebase-config.md => firebase-config.mdx} (100%) rename versioned_docs/version-v5/native/{firebase-crash.md => firebase-crash.mdx} (100%) rename versioned_docs/version-v5/native/{firebase-crashlytics.md => firebase-crashlytics.mdx} (100%) rename versioned_docs/version-v5/native/{firebase-dynamic-links.md => firebase-dynamic-links.mdx} (100%) rename versioned_docs/version-v5/native/{firebase-messaging.md => firebase-messaging.mdx} (100%) rename versioned_docs/version-v5/native/{firebase-vision.md => firebase-vision.mdx} (100%) rename versioned_docs/version-v5/native/{firebase-x.md => firebase-x.mdx} (100%) rename versioned_docs/version-v5/native/{firebase.md => firebase.mdx} (100%) rename versioned_docs/version-v5/native/{flashlight.md => flashlight.mdx} (100%) rename versioned_docs/version-v5/native/{foreground-service.md => foreground-service.mdx} (100%) rename versioned_docs/version-v5/native/{ftp.md => ftp.mdx} (100%) rename versioned_docs/version-v5/native/{gao-de-location.md => gao-de-location.mdx} (100%) rename versioned_docs/version-v5/native/{ge-tui-sdk-plugin.md => ge-tui-sdk-plugin.mdx} (100%) rename versioned_docs/version-v5/native/{geolocation.md => geolocation.mdx} (100%) rename versioned_docs/version-v5/native/{globalization.md => globalization.mdx} (100%) rename versioned_docs/version-v5/native/{google-analytics.md => google-analytics.mdx} (100%) rename versioned_docs/version-v5/native/{google-nearby.md => google-nearby.mdx} (100%) rename versioned_docs/version-v5/native/{google-plus.md => google-plus.mdx} (100%) rename versioned_docs/version-v5/native/{health-kit.md => health-kit.mdx} (100%) rename versioned_docs/version-v5/native/{health.md => health.mdx} (100%) rename versioned_docs/version-v5/native/{http.md => http.mdx} (100%) rename versioned_docs/version-v5/native/{iamport-cordova.md => iamport-cordova.mdx} (100%) rename versioned_docs/version-v5/native/{ibeacon.md => ibeacon.mdx} (100%) rename versioned_docs/version-v5/native/{image-picker.md => image-picker.mdx} (100%) rename versioned_docs/version-v5/native/{imap.md => imap.mdx} (100%) rename versioned_docs/version-v5/native/{in-app-browser.md => in-app-browser.mdx} (100%) rename versioned_docs/version-v5/native/{in-app-purchase-2.md => in-app-purchase-2.mdx} (100%) rename versioned_docs/version-v5/native/{in-app-review.md => in-app-review.mdx} (100%) rename versioned_docs/version-v5/native/{insomnia.md => insomnia.mdx} (100%) rename versioned_docs/version-v5/native/{instagram.md => instagram.mdx} (100%) rename versioned_docs/version-v5/native/{intercom.md => intercom.mdx} (100%) rename versioned_docs/version-v5/native/{ionic-webview.md => ionic-webview.mdx} (100%) rename versioned_docs/version-v5/native/{ios-aswebauthenticationsession-api.md => ios-aswebauthenticationsession-api.mdx} (100%) rename versioned_docs/version-v5/native/{is-debug.md => is-debug.mdx} (100%) rename versioned_docs/version-v5/native/{keyboard.md => keyboard.mdx} (100%) rename versioned_docs/version-v5/native/{keychain.md => keychain.mdx} (100%) rename versioned_docs/version-v5/native/{kommunicate.md => kommunicate.mdx} (100%) rename versioned_docs/version-v5/native/{launch-navigator.md => launch-navigator.mdx} (100%) rename versioned_docs/version-v5/native/{launch-review.md => launch-review.mdx} (100%) rename versioned_docs/version-v5/native/{line-login.md => line-login.mdx} (100%) rename versioned_docs/version-v5/native/{local-notifications.md => local-notifications.mdx} (100%) rename versioned_docs/version-v5/native/{location-accuracy.md => location-accuracy.mdx} (100%) rename versioned_docs/version-v5/native/{lottie-splash-screen.md => lottie-splash-screen.mdx} (100%) rename versioned_docs/version-v5/native/{media-capture.md => media-capture.mdx} (100%) rename versioned_docs/version-v5/native/{media.md => media.mdx} (100%) rename versioned_docs/version-v5/native/{metrix.md => metrix.mdx} (100%) rename versioned_docs/version-v5/native/{mixpanel.md => mixpanel.mdx} (100%) rename versioned_docs/version-v5/native/{mlkit-translate.md => mlkit-translate.mdx} (100%) rename versioned_docs/version-v5/native/{mobile-messaging.md => mobile-messaging.mdx} (100%) rename versioned_docs/version-v5/native/{multiple-document-picker.md => multiple-document-picker.mdx} (100%) rename versioned_docs/version-v5/native/{music-controls.md => music-controls.mdx} (100%) rename versioned_docs/version-v5/native/{native-audio.md => native-audio.mdx} (100%) rename versioned_docs/version-v5/native/{native-geocoder.md => native-geocoder.mdx} (100%) rename versioned_docs/version-v5/native/{native-keyboard.md => native-keyboard.mdx} (100%) rename versioned_docs/version-v5/native/{native-page-transitions.md => native-page-transitions.mdx} (100%) rename versioned_docs/version-v5/native/{native-storage.md => native-storage.mdx} (100%) rename versioned_docs/version-v5/native/{network-interface.md => network-interface.mdx} (100%) rename versioned_docs/version-v5/native/{network.md => network.mdx} (100%) rename versioned_docs/version-v5/native/{nfc.md => nfc.mdx} (100%) rename versioned_docs/version-v5/native/{ocr.md => ocr.mdx} (100%) rename versioned_docs/version-v5/native/{onesignal.md => onesignal.mdx} (100%) rename versioned_docs/version-v5/native/{open-native-settings.md => open-native-settings.mdx} (100%) rename versioned_docs/version-v5/native/{openalpr.md => openalpr.mdx} (100%) rename versioned_docs/version-v5/native/{pdf-generator.md => pdf-generator.mdx} (100%) rename versioned_docs/version-v5/native/{photo-library.md => photo-library.mdx} (100%) rename versioned_docs/version-v5/native/{photo-viewer.md => photo-viewer.mdx} (100%) rename versioned_docs/version-v5/native/{printer.md => printer.mdx} (100%) rename versioned_docs/version-v5/native/{pspdfkit-cordova.md => pspdfkit-cordova.mdx} (100%) rename versioned_docs/version-v5/native/{purchases.md => purchases.mdx} (100%) rename versioned_docs/version-v5/native/{push.md => push.mdx} (100%) rename versioned_docs/version-v5/native/{pushape-push.md => pushape-push.mdx} (100%) rename versioned_docs/version-v5/native/{safari-view-controller.md => safari-view-controller.mdx} (100%) rename versioned_docs/version-v5/native/{screen-orientation.md => screen-orientation.mdx} (100%) rename versioned_docs/version-v5/native/{service-discovery.md => service-discovery.mdx} (100%) rename versioned_docs/version-v5/native/{shake.md => shake.mdx} (100%) rename versioned_docs/version-v5/native/{sign-in-with-apple.md => sign-in-with-apple.mdx} (100%) rename versioned_docs/version-v5/native/{smartlook.md => smartlook.mdx} (100%) rename versioned_docs/version-v5/native/{sms-retriever.md => sms-retriever.mdx} (100%) rename versioned_docs/version-v5/native/{sms.md => sms.mdx} (100%) rename versioned_docs/version-v5/native/{social-sharing.md => social-sharing.mdx} (100%) rename versioned_docs/version-v5/native/{speech-recognition.md => speech-recognition.mdx} (100%) rename versioned_docs/version-v5/native/{spinner-dialog.md => spinner-dialog.mdx} (100%) rename versioned_docs/version-v5/native/{splash-screen.md => splash-screen.mdx} (100%) rename versioned_docs/version-v5/native/{spotify-auth.md => spotify-auth.mdx} (100%) rename versioned_docs/version-v5/native/{sqlite-db-copy.md => sqlite-db-copy.mdx} (100%) rename versioned_docs/version-v5/native/{sqlite-porter.md => sqlite-porter.mdx} (100%) rename versioned_docs/version-v5/native/{sqlite.md => sqlite.mdx} (100%) rename versioned_docs/version-v5/native/{star-prnt.md => star-prnt.mdx} (100%) rename versioned_docs/version-v5/native/{status-bar.md => status-bar.mdx} (100%) rename versioned_docs/version-v5/native/{streaming-media.md => streaming-media.mdx} (100%) rename versioned_docs/version-v5/native/{stripe.md => stripe.mdx} (100%) rename versioned_docs/version-v5/native/{sum-up.md => sum-up.mdx} (100%) rename versioned_docs/version-v5/native/{taptic-engine.md => taptic-engine.mdx} (100%) rename versioned_docs/version-v5/native/{tealium-adidentifier.md => tealium-adidentifier.mdx} (100%) rename versioned_docs/version-v5/native/{tealium-installreferrer.md => tealium-installreferrer.mdx} (100%) rename versioned_docs/version-v5/native/{tealium.md => tealium.mdx} (100%) rename versioned_docs/version-v5/native/{theme-detection.md => theme-detection.mdx} (100%) rename versioned_docs/version-v5/native/{three-dee-touch.md => three-dee-touch.mdx} (100%) rename versioned_docs/version-v5/native/{toast.md => toast.mdx} (100%) rename versioned_docs/version-v5/native/{touch-id.md => touch-id.mdx} (100%) rename versioned_docs/version-v5/native/{unvired-cordova-sdk.md => unvired-cordova-sdk.mdx} (100%) rename versioned_docs/version-v5/native/{uptime.md => uptime.mdx} (100%) rename versioned_docs/version-v5/native/{urbanairship.md => urbanairship.mdx} (100%) rename versioned_docs/version-v5/native/{usabilla-cordova-sdk.md => usabilla-cordova-sdk.mdx} (100%) rename versioned_docs/version-v5/native/{vibes.md => vibes.mdx} (100%) rename versioned_docs/version-v5/native/{vibration.md => vibration.mdx} (100%) rename versioned_docs/version-v5/native/{video-editor.md => video-editor.mdx} (100%) rename versioned_docs/version-v5/native/{video-player.md => video-player.mdx} (100%) rename versioned_docs/version-v5/native/{web-intent.md => web-intent.mdx} (100%) rename versioned_docs/version-v5/native/{web-server.md => web-server.mdx} (100%) rename versioned_docs/version-v5/native/{web-socket-server.md => web-socket-server.mdx} (100%) rename versioned_docs/version-v5/native/{webengage.md => webengage.mdx} (100%) rename versioned_docs/version-v5/native/{wechat.md => wechat.mdx} (100%) rename versioned_docs/version-v5/native/{wheel-selector.md => wheel-selector.mdx} (100%) rename versioned_docs/version-v5/native/{wifi-wizard-2.md => wifi-wizard-2.mdx} (100%) rename versioned_docs/version-v5/native/{wonderpush.md => wonderpush.mdx} (100%) rename versioned_docs/version-v5/native/{youtube-video-player.md => youtube-video-player.mdx} (100%) rename versioned_docs/version-v5/native/{zbar.md => zbar.mdx} (100%) rename versioned_docs/version-v5/native/{zeroconf.md => zeroconf.mdx} (100%) rename versioned_docs/version-v5/native/{zoom.md => zoom.mdx} (100%) rename versioned_docs/version-v5/reference/{browser-support.md => browser-support.mdx} (100%) rename versioned_docs/version-v5/reference/{glossary.md => glossary.mdx} (99%) rename versioned_docs/version-v5/reference/{migration.md => migration.mdx} (100%) rename versioned_docs/version-v5/reference/{release-notes.md => release-notes.mdx} (100%) rename versioned_docs/version-v5/reference/{support.md => support.mdx} (99%) rename versioned_docs/version-v5/reference/{versioning.md => versioning.mdx} (98%) rename versioned_docs/version-v5/techniques/{security.md => security.mdx} (100%) delete mode 100644 versioned_docs/version-v5/test/page1.md create mode 100644 versioned_docs/version-v5/test/page1.mdx delete mode 100644 versioned_docs/version-v5/test/page2.md create mode 100644 versioned_docs/version-v5/test/page2.mdx rename versioned_docs/version-v5/theming/{advanced.md => advanced.mdx} (94%) rename versioned_docs/version-v5/theming/{basics.md => basics.mdx} (90%) rename versioned_docs/version-v5/theming/{color-generator.md => color-generator.mdx} (100%) rename versioned_docs/version-v5/theming/{colors.md => colors.mdx} (88%) rename versioned_docs/version-v5/theming/{css-shadow-parts.md => css-shadow-parts.mdx} (95%) rename versioned_docs/version-v5/theming/{css-variables.md => css-variables.mdx} (97%) rename versioned_docs/version-v5/theming/{dark-mode.md => dark-mode.mdx} (97%) rename versioned_docs/version-v5/theming/{platform-styles.md => platform-styles.mdx} (95%) rename versioned_docs/version-v5/theming/{themes.md => themes.mdx} (97%) rename versioned_docs/version-v5/troubleshooting/{build.md => build.mdx} (100%) rename versioned_docs/version-v5/troubleshooting/{cors.md => cors.mdx} (98%) rename versioned_docs/version-v5/troubleshooting/{debugging.md => debugging.mdx} (98%) rename versioned_docs/version-v5/troubleshooting/{native.md => native.mdx} (96%) rename versioned_docs/version-v5/troubleshooting/{runtime.md => runtime.mdx} (100%) rename versioned_docs/version-v5/utilities/{animations.md => animations.mdx} (99%) rename versioned_docs/version-v5/utilities/{gestures.md => gestures.mdx} (99%) rename versioned_docs/version-v6/intro/{cdn.md => cdn.mdx} (94%) rename versioned_docs/version-v6/intro/{cli.md => cli.mdx} (83%) rename docs/intro/environment.md => versioned_docs/version-v6/intro/environment.mdx (88%) rename versioned_docs/version-v6/intro/{first-app.md => first-app.mdx} (100%) rename versioned_docs/version-v6/intro/{next.md => next.mdx} (100%) rename versioned_docs/version-v6/intro/{upgrading-to-ionic-6.md => upgrading-to-ionic-6.mdx} (99%) rename versioned_docs/version-v6/intro/{vscode-extension.md => vscode-extension.mdx} (100%) rename versioned_docs/version-v6/layout/{css-utilities.md => css-utilities.mdx} (98%) rename versioned_docs/version-v6/layout/{global-stylesheets.md => global-stylesheets.mdx} (81%) rename versioned_docs/version-v6/layout/{structure.md => structure.mdx} (100%) rename versioned_docs/version-v6/reference/{browser-support.md => browser-support.mdx} (100%) rename versioned_docs/version-v6/reference/{glossary.md => glossary.mdx} (99%) rename versioned_docs/version-v6/reference/{migration.md => migration.mdx} (100%) rename versioned_docs/version-v6/reference/{release-notes.md => release-notes.mdx} (100%) rename versioned_docs/version-v6/reference/{support.md => support.mdx} (99%) rename versioned_docs/version-v6/reference/{versioning.md => versioning.mdx} (98%) rename versioned_docs/version-v6/techniques/{security.md => security.mdx} (100%) delete mode 100644 versioned_docs/version-v6/test/page1.md create mode 100644 versioned_docs/version-v6/test/page1.mdx delete mode 100644 versioned_docs/version-v6/test/page2.md create mode 100644 versioned_docs/version-v6/test/page2.mdx rename versioned_docs/version-v6/theming/{advanced.md => advanced.mdx} (96%) rename versioned_docs/version-v6/theming/{basics.md => basics.mdx} (90%) rename versioned_docs/version-v6/theming/{color-generator.md => color-generator.mdx} (100%) rename docs/theming/colors.md => versioned_docs/version-v6/theming/colors.mdx (88%) rename versioned_docs/version-v6/theming/{css-shadow-parts.md => css-shadow-parts.mdx} (95%) rename versioned_docs/version-v6/theming/{css-variables.md => css-variables.mdx} (97%) rename versioned_docs/version-v6/theming/{dark-mode.md => dark-mode.mdx} (97%) rename docs/theming/platform-styles.md => versioned_docs/version-v6/theming/platform-styles.mdx (95%) rename versioned_docs/version-v6/theming/{themes.md => themes.mdx} (97%) rename versioned_docs/version-v6/troubleshooting/{build.md => build.mdx} (100%) rename versioned_docs/version-v6/troubleshooting/{cors.md => cors.mdx} (100%) rename versioned_docs/version-v6/troubleshooting/{debugging.md => debugging.mdx} (100%) rename versioned_docs/version-v6/troubleshooting/{native.md => native.mdx} (96%) rename versioned_docs/version-v6/troubleshooting/{runtime.md => runtime.mdx} (100%) rename versioned_docs/version-v6/utilities/{animations.md => animations.mdx} (99%) rename versioned_docs/version-v6/utilities/{gestures.md => gestures.mdx} (99%) diff --git a/docs/angular/your-first-app.mdx b/docs/angular/your-first-app.mdx index b876e2f66c4..449d03c10e1 100644 --- a/docs/angular/your-first-app.mdx +++ b/docs/angular/your-first-app.mdx @@ -25,7 +25,7 @@ Here’s the finished app running on all 3 platforms: > :::note -Looking for the previous version of this guide that covered Ionic 4 and Cordova? [See here.](../developer-resources/guides/first-app-v4/intro.md) +Looking for the previous version of this guide that covered Ionic 4 and Cordova? [See here.](../developer-resources/guides/first-app-v4/intro.mdx) ::: ## What We'll Build diff --git a/docs/api/action-sheet.mdx b/docs/api/action-sheet.mdx index afbec37e566..767667ceae8 100644 --- a/docs/api/action-sheet.mdx +++ b/docs/api/action-sheet.mdx @@ -99,7 +99,7 @@ import CssCustomProperties from '@site/static/usage/v8/action-sheet/theming/css- ### Screen Readers -Action Sheets set aria properties in order to be [accessible](../reference/glossary#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the action sheet is being used in an app. +Action Sheets set aria properties in order to be [accessible](../reference/glossary.mdx#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the action sheet is being used in an app. #### Role diff --git a/docs/api/alert.mdx b/docs/api/alert.mdx index b35622c1faf..6a9d79dcc14 100644 --- a/docs/api/alert.mdx +++ b/docs/api/alert.mdx @@ -113,7 +113,7 @@ import Customization from '@site/static/usage/v8/alert/customization/index.md'; ### Screen Readers -Alerts set aria properties in order to be [accessible](../reference/glossary#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the alert is being used in an app. +Alerts set aria properties in order to be [accessible](../reference/glossary.mdx#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the alert is being used in an app. #### Role diff --git a/docs/api/col.mdx b/docs/api/col.mdx index ebc54b7f02f..0a201dfa091 100644 --- a/docs/api/col.mdx +++ b/docs/api/col.mdx @@ -25,7 +25,7 @@ See the [grid](./grid) documentation 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](/docs/layout/css-utilities#flex-item-properties) that can be applied to a column to customize this behavior. +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](/docs/layout/css-utilities.mdx#flex-item-properties) that can be applied to a column to customize this behavior. diff --git a/docs/api/content.mdx b/docs/api/content.mdx index 832e22cd9d1..10219dec0dd 100644 --- a/docs/api/content.mdx +++ b/docs/api/content.mdx @@ -22,7 +22,7 @@ The content component provides an easy to use content area with some useful meth to control the scrollable area. There should only be one content in a single 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](/docs/layout/css-utilities) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties). +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](/docs/layout/css-utilities.mdx) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties). ## Basic Usage @@ -97,7 +97,7 @@ import CSSProps from '@site/static/usage/v8/content/theming/css-properties/index ### Safe Area Padding -The content component will not automatically apply padding to any of its sides to account for the [safe area](/docs/theming/advanced#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.md#application-variables). +The content component will not automatically apply padding to any of its sides to account for the [safe area](/docs/theming/advanced.mdx#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.mdx#application-variables). The most common use case for this is to apply padding to the top of the content to account for the status bar. This can be done by setting the `padding-top` property to the value of the `--ion-safe-area-top` variable. diff --git a/docs/api/datetime.mdx b/docs/api/datetime.mdx index a820311f1b3..bb5f3546a5d 100644 --- a/docs/api/datetime.mdx +++ b/docs/api/datetime.mdx @@ -308,7 +308,7 @@ Developers can provide their own buttons for advanced custom behavior. Using the `highlightedDates` property, developers can style particular dates with custom text or background colors. This property can be defined as either an array of dates and their colors, or a callback that receives an ISO string and returns the colors to use. -When specifying colors, any valid CSS color format can be used. This includes hex codes, `rgba`, [color variables](../theming/colors), etc. +When specifying colors, any valid CSS color format can be used. This includes hex codes, `rgba`, [color variables](../theming/colors.mdx), etc. To maintain a consistent user experience, the style of selected date(s) will always override custom highlights. @@ -332,7 +332,7 @@ A callback is better when the highlighted dates are recurring, such as birthdays ### Global Theming -Ionic's powerful theming system can be used to easily change your entire app to match a certain theme. In this example, we used the [Color Creator](../theming/colors#new-color-creator) and the [Stepped Color Generator](../theming/themes#stepped-color-generator) to create a rose color palette that we can use for `ion-datetime`. +Ionic's powerful theming system can be used to easily change your entire app to match a certain theme. In this example, we used the [Color Creator](../theming/colors#new-color-creator) and the [Stepped Color Generator](../theming/themes.mdx#stepped-color-generator) to create a rose color palette that we can use for `ion-datetime`. The benefit of this approach is that every component, not just `ion-datetime`, can automatically take advantage of this theme. diff --git a/docs/api/fab.mdx b/docs/api/fab.mdx index 3e665ad8159..37ea87bbf90 100644 --- a/docs/api/fab.mdx +++ b/docs/api/fab.mdx @@ -43,7 +43,7 @@ import Positioning from '@site/static/usage/v8/fab/positioning/index.md'; ### Safe Area -If there is no `ion-header` or `ion-footer` component, the fab may be covered by a device's notch, status bar, or other device UI. In these cases, the [safe area](/docs/theming/advanced#safe-area-padding) on the top and bottom is not taken into account. This can be adjusted by using the [`--ion-safe-area-(dir)` variables](/docs/theming/advanced#application-variables). +If there is no `ion-header` or `ion-footer` component, the fab may be covered by a device's notch, status bar, or other device UI. In these cases, the [safe area](/docs/theming/advanced.mdx#safe-area-padding) on the top and bottom is not taken into account. This can be adjusted by using the [`--ion-safe-area-(dir)` variables](/docs/theming/advanced.mdx#application-variables). When using a fab with `vertical` set to `"top"` without an `ion-header`, the top margin needs to be set: diff --git a/docs/api/grid.mdx b/docs/api/grid.mdx index f9dc32faa3b..b113efc5916 100644 --- a/docs/api/grid.mdx +++ b/docs/api/grid.mdx @@ -31,7 +31,7 @@ The grid is a powerful mobile-first flexbox system for building custom layouts. - Columns without a value for size will automatically have equal widths. For example, four columns will each automatically be 25% wide. - Column widths are set as a percentage, so they’re always fluid and sized relative to their parent element. - There is padding between individual columns. However, the padding can be removed from the grid and - columns by adding the `ion-no-padding` class to the grid. See the [CSS Utilities](../layout/css-utilities) for more styles that can be applied to the grid. + columns by adding the `ion-no-padding` class to the grid. See the [CSS Utilities](../layout/css-utilities.mdx) for more styles that can be applied to the grid. - There are five grid tiers, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large. - Grid tiers are based on minimum widths, meaning they apply to their tier and all those larger than them (e.g., `size-sm="4"` applies to small, medium, large, and extra large devices). @@ -39,7 +39,7 @@ The grid is a powerful mobile-first flexbox system for building custom layouts. ## Default Breakpoints -The default breakpoints for the grid and the corresponding properties are defined in the table below. Breakpoint values can not be customized at this time. For more information on why they can't be customized, see [Variables in Media Queries](../theming/advanced#variables-in-media-queries). +The default breakpoints for the grid and the corresponding properties are defined in the table below. Breakpoint values can not be customized at this time. For more information on why they can't be customized, see [Variables in Media Queries](../theming/advanced.mdx#variables-in-media-queries). | Name | Value | Width Property | Offset Property | Push Property | Pull Property | Description | | ---- | ------ | -------------- | --------------- | ------------- | ------------- | ------------------------------------ | @@ -151,7 +151,7 @@ import PushPullResponsive from '@site/static/usage/v8/grid/push-pull-responsive/ ### Vertical Alignment -All columns can be vertically aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](/layout/css-utilities#flex-container-properties). +All columns can be vertically aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](/layout/css-utilities.mdx#flex-container-properties). import VerticalAlignment from '@site/static/usage/v8/grid/vertical-alignment/index.md'; @@ -160,7 +160,7 @@ import VerticalAlignment from '@site/static/usage/v8/grid/vertical-alignment/ind ### Horizontal Alignment -All columns can be horizontally aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](/layout/css-utilities.md#flex-container-properties). +All columns can be horizontally aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](/layout/css-utilities.mdx#flex-container-properties). import HorizontalAlignment from '@site/static/usage/v8/grid/horizontal-alignment/index.md'; diff --git a/docs/api/item.mdx b/docs/api/item.mdx index 0aa9521a58f..a220e9c1168 100644 --- a/docs/api/item.mdx +++ b/docs/api/item.mdx @@ -25,7 +25,7 @@ Items are elements that can contain text, icons, avatars, images, inputs, and an ## Basic Usage -Items left align text and wrap when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using `.ion-text-nowrap` in the below example. See the [CSS Utilities Documentation](/docs/layout/css-utilities) for more classes that can be added to an item to transform the text. +Items left align text and wrap when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using `.ion-text-nowrap` in the below example. See the [CSS Utilities Documentation](/docs/layout/css-utilities.mdx) for more classes that can be added to an item to transform the text. import Basic from '@site/static/usage/v8/item/basic/index.md'; @@ -186,7 +186,7 @@ This feature is not enabled by default on clickable items for the `md` mode, but --item-detail-push-show: true; ``` -See the [theming documentation](/docs/theming/css-variables) for more information. */} +See the [theming documentation](/docs/theming/css-variables.mdx) for more information. */} ## Item Lines diff --git a/docs/api/nav.mdx b/docs/api/nav.mdx index 3cce798832c..be3670fca90 100644 --- a/docs/api/nav.mdx +++ b/docs/api/nav.mdx @@ -22,7 +22,7 @@ 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. For example, you should not push a new component to `ion-nav` and expect the URL to update. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL. :::note -`ion-nav` is not meant to be used for routing. Instead, see the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation), or [`ion-router`](./router) for vanilla JavaScript projects. +`ion-nav` is not meant to be used for routing. Instead, see the routing guides for [Angular](../angular/navigation.mdx), [React](../react/navigation.mdx), and [Vue](../vue/navigation.mdx), or [`ion-router`](./router) for vanilla JavaScript projects. ::: ## Using NavLink diff --git a/docs/api/router.mdx b/docs/api/router.mdx index 2d061c0f7a4..ca4ef164fcf 100644 --- a/docs/api/router.mdx +++ b/docs/api/router.mdx @@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; The router is a component for handling routing inside vanilla and Stencil JavaScript projects. :::note - Note: This component should only be used with vanilla and Stencil JavaScript projects. See the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation) for framework-specific routing solutions. + Note: This component should only be used with vanilla and Stencil JavaScript projects. See the routing guides for [Angular](../angular/navigation.mdx), [React](../react/navigation.mdx), and [Vue](../vue/navigation.mdx) for framework-specific routing solutions. ::: diff --git a/docs/api/row.mdx b/docs/api/row.mdx index 4172ef4a478..65c43586c3a 100644 --- a/docs/api/row.mdx +++ b/docs/api/row.mdx @@ -25,7 +25,7 @@ See the [grid](./grid) documentation 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](/docs/layout/css-utilities#flex-container-properties) that can be applied to a row to customize this behavior. +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](/docs/layout/css-utilities.mdx#flex-container-properties) that can be applied to a row to customize this behavior. diff --git a/docs/api/tabs.mdx b/docs/api/tabs.mdx index f476ad8c2b5..1adf8f9f99d 100644 --- a/docs/api/tabs.mdx +++ b/docs/api/tabs.mdx @@ -42,7 +42,7 @@ import Router from '@site/static/usage/v8/tabs/router/index.md'; :::tip Best Practices -Ionic has guides on best practices for routing patterns with tabs. Check out the guides for [Angular](/angular/navigation#working-with-tabs), [React](/react/navigation#working-with-tabs), and [Vue](/vue/navigation#working-with-tabs) for additional information. +Ionic has guides on best practices for routing patterns with tabs. Check out the guides for [Angular](../angular/navigation.mdx#working-with-tabs), [React](../react/navigation.mdx#working-with-tabs), and [Vue](../vue/navigation.mdx#working-with-tabs) for additional information. ::: diff --git a/docs/api/text.mdx b/docs/api/text.mdx index 1d4ae4f44a5..1ea22b66192 100644 --- a/docs/api/text.mdx +++ b/docs/api/text.mdx @@ -28,7 +28,7 @@ import Basic from '@site/static/usage/v8/text/basic/index.md'; ## Theming -The text component can be customized by changing any of the default [colors](../../docs/theming/colors) Ionic provides. +The text component can be customized by changing any of the default [colors](../theming/colors.mdx) Ionic provides. ## Properties diff --git a/docs/api/toast.mdx b/docs/api/toast.mdx index 5cfb07be716..feb07f9ea7a 100644 --- a/docs/api/toast.mdx +++ b/docs/api/toast.mdx @@ -110,7 +110,7 @@ Toasts are intended to be subtle notifications and are not intended to interrupt ### Screen Readers -Toasts set aria properties in order to be [accessible](../reference/glossary#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the toast is being used in an app. +Toasts set aria properties in order to be [accessible](../reference/glossary.mdx#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the toast is being used in an app. #### Role diff --git a/docs/cli.md b/docs/cli.md index a75302d0937..efdc21ff611 100644 --- a/docs/cli.md +++ b/docs/cli.md @@ -11,7 +11,7 @@ sidebar_label: Overview /> -The Ionic command-line interface ([CLI](/docs/reference/glossary#cli)) is the go-to tool for developing Ionic apps. +The Ionic command-line interface ([CLI](/docs/reference/glossary.mdx#cli)) is the go-to tool for developing Ionic apps. ## Installation @@ -41,14 +41,14 @@ For some commands, such as `ionic serve`, the help documentation is contextual t ## Architecture -The Ionic CLI is built with [TypeScript](/docs/reference/glossary#typescript) and [Node.js](/docs/reference/glossary#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source GitHub repository. +The Ionic CLI is built with [TypeScript](/docs/reference/glossary.mdx#typescript) and [Node.js](/docs/reference/glossary.mdx#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source GitHub repository. ## Troubleshooting To troubleshoot issues with the Ionic CLI, the following may be useful: - Make sure the latest version of the Ionic CLI is installed. Get the installed version by running `ionic --version`. -- Make sure the latest Node LTS is installed. See [Node & npm](/docs/intro/environment#node-npm) environment setup. +- Make sure the latest Node LTS is installed. See [Node & npm](/docs/intro/environment.mdx#node-npm) environment setup. - The `--verbose` flag prints debugging messages, which may narrow down the issue. - Connection issues may be due to improperly configured proxy settings. See [Using a Proxy](/docs/cli/using-a-proxy) to configure request proxying. - The global Ionic CLI configuration directory is `~/.ionic` on all platforms. It can safely be deleted and the Ionic CLI will repopulate it, but all configuration (including user sessions) will be lost. Configure this directory with [CLI environment variables](/docs/cli/configuration#environment-variables). diff --git a/docs/cli/configuration.mdx b/docs/cli/configuration.mdx index 35f861a9ff0..d9d99985f03 100644 --- a/docs/cli/configuration.mdx +++ b/docs/cli/configuration.mdx @@ -121,7 +121,7 @@ module.exports = function (ctx) { Available in CLI 6.2.0+ -The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.md#monorepo). +The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.mdx#monorepo). :::note These docs give an overview of the multi-app feature of the Ionic CLI, but don't really go into details for each framework. diff --git a/docs/core-concepts/fundamentals.mdx b/docs/core-concepts/fundamentals.mdx index 5702d217c6d..3f0087f5985 100644 --- a/docs/core-concepts/fundamentals.mdx +++ b/docs/core-concepts/fundamentals.mdx @@ -15,13 +15,13 @@ For those completely new to Ionic app development, it can be helpful to get a hi ## UI Components -Ionic Framework is a library of UI Components, which are reusable elements that serve as the building blocks for an application. Ionic Components are built with [web standards](../reference/glossary.md#web-standards) using HTML, CSS, and JavaScript. Though the components are pre-built, they're designed from the ground up to be highly customizable so apps can make each component their own, allowing each app to have its own look and feel. More specifically, Ionic components can be easily themed to globally change appearance across an entire app. For more information about customizing the look, please see [Theming](../theming/basics.md). +Ionic Framework is a library of UI Components, which are reusable elements that serve as the building blocks for an application. Ionic Components are built with [web standards](../reference/glossary.mdx#web-standards) using HTML, CSS, and JavaScript. Though the components are pre-built, they're designed from the ground up to be highly customizable so apps can make each component their own, allowing each app to have its own look and feel. More specifically, Ionic components can be easily themed to globally change appearance across an entire app. For more information about customizing the look, please see [Theming](../theming/basics.mdx). ## Adaptive Styling Adaptive Styling is a built-in feature of Ionic Framework which allows app developers to use the same code base for multiple platforms. Every Ionic component adapts its look to the platform on which the app is running on. For example, Apple devices, such as the iPhone and iPad, use Apple's own iOS design language. Similarly, Android devices use Google's design language called Material Design. -By making subtle design changes between the platforms, users are provided with a familiar app experience. An Ionic app downloaded from Apple's App Store will get the iOS theme, while an Ionic app downloaded from Android's Play Store will get the Material Design theme. For the apps that are viewed as a Progressive Web App (PWA) from a browser, Ionic will default to using the Material Design theme. Additionally, deciding which platform to use in certain scenarios is entirely configurable. More information about adaptive styling can be found in [Theming](../theming/basics.md). +By making subtle design changes between the platforms, users are provided with a familiar app experience. An Ionic app downloaded from Apple's App Store will get the iOS theme, while an Ionic app downloaded from Android's Play Store will get the Material Design theme. For the apps that are viewed as a Progressive Web App (PWA) from a browser, Ionic will default to using the Material Design theme. Additionally, deciding which platform to use in certain scenarios is entirely configurable. More information about adaptive styling can be found in [Theming](../theming/basics.mdx). ## Navigation @@ -44,10 +44,10 @@ Projects such as CapacitorCSS which allows us to take advantage of the flexibility that CSS properties (variables) provide. This makes it incredibly easy to design an app that looks great while following the web standard. We provide a set of colors so developers can have some great defaults, but we encourage overriding them to create designs that match a brand, company or a desired color palette. Everything from the background color of an application to the text color is fully customizable. More information on app theming can be found in [Theming](../theming/basics.md). +At the core, Ionic Framework is built using CSS which allows us to take advantage of the flexibility that CSS properties (variables) provide. This makes it incredibly easy to design an app that looks great while following the web standard. We provide a set of colors so developers can have some great defaults, but we encourage overriding them to create designs that match a brand, company or a desired color palette. Everything from the background color of an application to the text color is fully customizable. More information on app theming can be found in [Theming](../theming/basics.mdx). ## Events Many Ionic components use [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) to inform developers of important state changes in the components. For example, an `ion-datetime` component will emit `ionChange` whenever the selected date has changed. -Developers can use standard events such as `click` as they normally would. However, many events emitted within a component's [shadow root](../reference/glossary.md#shadow) will be [retargeted](https://dom.spec.whatwg.org/#retarget) to the host element. This may result in multiple `click` handlers executing even if the user only clicked once. As a result, developers should rely on Ionic's events to be properly informed of state changes on Ionic components. Ionic's events are prefixed with `ion` to avoid collisions with standard events. Each component's documentation page has a list of available events that developers can listen for in their applications. +Developers can use standard events such as `click` as they normally would. However, many events emitted within a component's [shadow root](../reference/glossary.mdx#shadow) will be [retargeted](https://dom.spec.whatwg.org/#retarget) to the host element. This may result in multiple `click` handlers executing even if the user only clicked once. As a result, developers should rely on Ionic's events to be properly informed of state changes on Ionic components. Ionic's events are prefixed with `ion` to avoid collisions with standard events. Each component's documentation page has a list of available events that developers can listen for in their applications. diff --git a/docs/core-concepts/webview.mdx b/docs/core-concepts/webview.mdx index a314d09f566..a93673097b5 100644 --- a/docs/core-concepts/webview.mdx +++ b/docs/core-concepts/webview.mdx @@ -12,13 +12,13 @@ title: Web View Web Views power web apps on native devices. -The Web View is automatically provided for apps integrated with [Capacitor](../reference/glossary.md#capacitor). +The Web View is automatically provided for apps integrated with [Capacitor](../reference/glossary.mdx#capacitor). -For [Cordova](../reference/glossary.md#cordova), Ionic maintains a Web View plugin. The plugin is provided by default when using the Ionic CLI. +For [Cordova](../reference/glossary.mdx#cordova), Ionic maintains a Web View plugin. The plugin is provided by default when using the Ionic CLI. ## What is a Web View? -Ionic apps are built using [web technologies](../reference/glossary.md#web-standards) and are rendered using Web Views, which are a full screen and full-powered web browser. +Ionic apps are built using [web technologies](../reference/glossary.mdx#web-standards) and are rendered using Web Views, which are a full screen and full-powered web browser. Modern Web Views offer many built-in HTML5 APIs for hardware functionality such as cameras, sensors, GPS, speakers, and Bluetooth, but sometimes it may also be necessary to access platform-specific hardware APIs. In Ionic apps, hardware APIs can be accessed through a bridge layer, typically by using native plugins which expose JavaScript APIs. @@ -28,7 +28,7 @@ The Ionic Web View plugin is specialized for modern JavaScript apps. For both iO ### CORS -Web Views enforce [CORS](../reference/glossary.md#cors), so it's important that external services properly handle cross-origin requests. See the [CORS FAQs](../troubleshooting/cors.md) for information on dealing with CORS in Ionic apps. +Web Views enforce [CORS](../reference/glossary.mdx#cors), so it's important that external services properly handle cross-origin requests. See the [CORS FAQs](../troubleshooting/cors.mdx) for information on dealing with CORS in Ionic apps. ### File Protocol diff --git a/docs/developer-resources/guides/first-app-v4/theming.mdx b/docs/developer-resources/guides/first-app-v4/theming.mdx index 6170b2d673a..3839bb9d451 100644 --- a/docs/developer-resources/guides/first-app-v4/theming.mdx +++ b/docs/developer-resources/guides/first-app-v4/theming.mdx @@ -27,7 +27,7 @@ By changing these variables here and there, you can easily update the entire the } ``` -The easiest and most powerful way to create custom color palettes for your app’s UI is Ionic's [Color Generator tool](../../../theming/color-generator.md). As you change a color’s hex values, the embedded demo app automatically reflects the new colors. When you've finished making changes, simply copy and paste the generated code directly into your Ionic project. +The easiest and most powerful way to create custom color palettes for your app’s UI is Ionic's [Color Generator tool](../../../theming/color-generator.mdx). As you change a color’s hex values, the embedded demo app automatically reflects the new colors. When you've finished making changes, simply copy and paste the generated code directly into your Ionic project. But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to: diff --git a/docs/developer-resources/tools.mdx b/docs/developer-resources/tools.mdx index 0cd5ac7d7f3..aa1a7301ba9 100644 --- a/docs/developer-resources/tools.mdx +++ b/docs/developer-resources/tools.mdx @@ -12,7 +12,7 @@ Quickly get started with a new Ionic app entirely in the browser! Check out the features that make working with TypeScript amazing. -### [Glossary](../reference/glossary.md) +### [Glossary](../reference/glossary.mdx) A list of common terms you'll see while developing in Ionic. diff --git a/docs/developing/config.mdx b/docs/developing/config.mdx index 533754d39ef..8942b3897a4 100644 --- a/docs/developing/config.mdx +++ b/docs/developing/config.mdx @@ -162,43 +162,43 @@ class AppComponent { Below are the config options that Ionic uses. -| Config | Type | Description | -| --------------------------- | --------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `actionSheetEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation". | -| `actionSheetLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation". | -| `alertEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-alert`, overriding the default "animation". | -| `alertLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-alert`, overriding the default "animation". | -| `animated` | `boolean` | If `true`, Ionic will enable all animations and transitions across the app. | -| `backButtonDefaultHref` | `string` | Overrides the default value for the `defaultHref` property in all `` components. | -| `backButtonIcon` | `string` | Overrides the default icon in all `` components. | -| `backButtonText` | `string` | Overrides the default text in all `` components. | -| `innerHTMLTemplatesEnabled` | `boolean` | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `true`, content passed to the relevant components will be parsed as HTML instead of plaintext. Defaults to `false`. | -| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. | -| `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | -| `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". | -| `loadingLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-loading`, overriding the default "animation". | -| `loadingSpinner` | `SpinnerTypes` | Overrides the default spinner for all `ion-loading` overlays. | -| `menuIcon` | `string` | Overrides the default icon in all `` components. | -| `menuType` | `string` | Overrides the default menu type for all `` components. | -| `modalEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-modal`, overriding the default "animation". | -| `modalLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-modal`, overriding the default "animation". | -| `mode` | `Mode` | The mode determines which platform styles to use for the whole application. | -| `navAnimation` | `AnimationBuilder` | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. | -| `pickerEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-picker`, overriding the default "animation". | -| `pickerLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-picker`, overriding the default "animation". | -| `platform` | [`PlatformConfig`](/docs/angular/platform#customizing-platform-detection-methods) | Overrides the default platform detection methods. | -| `popoverEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-popover`, overriding the default "animation". | -| `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". | -| `refreshingIcon` | `string` | Overrides the default icon in all `` components. | -| `refreshingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | -| `rippleEffect` | `boolean` | If `true`, Material Design ripple effects will be enabled across the app. | -| `sanitizerEnabled` | `boolean` | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML. | -| `spinner` | `SpinnerTypes` | Overrides the default spinner in all `` components. | -| `statusTap` | `boolean` | If `true`, clicking or tapping the status bar will cause the content to scroll to the top. | -| `swipeBackEnabled` | `boolean` | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application. | -| `tabButtonLayout` | `TabButtonLayout` | Overrides the default "layout" of all `ion-bar-button` across the whole application. | -| `toastDuration` | `number` | Overrides the default `duration` for all `ion-toast` components. | -| `toastEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-toast`, overriding the default "animation". | -| `toastLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-toast`, overriding the default "animation". | -| `toggleOnOffLabels` | `boolean` | Overrides the default `enableOnOffLabels` in all `ion-toggle` components. | -| `experimentalCloseWatcher` | `boolean` | If `true`, the [CloseWatcher API](https://github.com/WICG/close-watcher) will be used to handle all Escape key and hardware back button presses to dismiss menus and overlays and to navigate. Note that the `hardwareBackButton` config option must also be `true`. (experimental) | +| Config | Type | Description | +| --------------------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `actionSheetEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation". | +| `actionSheetLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation". | +| `alertEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-alert`, overriding the default "animation". | +| `alertLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-alert`, overriding the default "animation". | +| `animated` | `boolean` | If `true`, Ionic will enable all animations and transitions across the app. | +| `backButtonDefaultHref` | `string` | Overrides the default value for the `defaultHref` property in all `` components. | +| `backButtonIcon` | `string` | Overrides the default icon in all `` components. | +| `backButtonText` | `string` | Overrides the default text in all `` components. | +| `innerHTMLTemplatesEnabled` | `boolean` | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `true`, content passed to the relevant components will be parsed as HTML instead of plaintext. Defaults to `false`. | +| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. | +| `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | +| `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". | +| `loadingLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-loading`, overriding the default "animation". | +| `loadingSpinner` | `SpinnerTypes` | Overrides the default spinner for all `ion-loading` overlays. | +| `menuIcon` | `string` | Overrides the default icon in all `` components. | +| `menuType` | `string` | Overrides the default menu type for all `` components. | +| `modalEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-modal`, overriding the default "animation". | +| `modalLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-modal`, overriding the default "animation". | +| `mode` | `Mode` | The mode determines which platform styles to use for the whole application. | +| `navAnimation` | `AnimationBuilder` | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. | +| `pickerEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-picker`, overriding the default "animation". | +| `pickerLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-picker`, overriding the default "animation". | +| `platform` | [`PlatformConfig`](/docs/angular/platform.mdx#customizing-platform-detection-methods) | Overrides the default platform detection methods. | +| `popoverEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-popover`, overriding the default "animation". | +| `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". | +| `refreshingIcon` | `string` | Overrides the default icon in all `` components. | +| `refreshingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | +| `rippleEffect` | `boolean` | If `true`, Material Design ripple effects will be enabled across the app. | +| `sanitizerEnabled` | `boolean` | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML. | +| `spinner` | `SpinnerTypes` | Overrides the default spinner in all `` components. | +| `statusTap` | `boolean` | If `true`, clicking or tapping the status bar will cause the content to scroll to the top. | +| `swipeBackEnabled` | `boolean` | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application. | +| `tabButtonLayout` | `TabButtonLayout` | Overrides the default "layout" of all `ion-bar-button` across the whole application. | +| `toastDuration` | `number` | Overrides the default `duration` for all `ion-toast` components. | +| `toastEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-toast`, overriding the default "animation". | +| `toastLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-toast`, overriding the default "animation". | +| `toggleOnOffLabels` | `boolean` | Overrides the default `enableOnOffLabels` in all `ion-toggle` components. | +| `experimentalCloseWatcher` | `boolean` | If `true`, the [CloseWatcher API](https://github.com/WICG/close-watcher) will be used to handle all Escape key and hardware back button presses to dismiss menus and overlays and to navigate. Note that the `hardwareBackButton` config option must also be `true`. (experimental) | diff --git a/docs/developing/config/per-platform/index.mdx b/docs/developing/config/per-platform/index.mdx index b14a99e4184..a7338da3084 100644 --- a/docs/developing/config/per-platform/index.mdx +++ b/docs/developing/config/per-platform/index.mdx @@ -16,7 +16,7 @@ import TabItem from '@theme/TabItem'; :::note Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly. -See the [Angular Platform Documentation](../../angular/platform.mdx) for the types of platforms you can detect. +See the [Angular Platform Documentation](../../../angular/platform.mdx) for the types of platforms you can detect. ::: ```ts title="app.module.ts" diff --git a/docs/index.md b/docs/index.md index b590ab6d7d2..d1f25abe254 100644 --- a/docs/index.md +++ b/docs/index.md @@ -24,7 +24,7 @@ import DocsCards from '@components/global/DocsCards'; Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.mdx), [React](react.mdx), and [Vue](vue/overview.mdx). -Get started building by [installing Ionic](intro/cli.md) or following our [First App Tutorial](intro/next.md#build-your-first-app) to learn the main concepts. +Get started building by [installing Ionic](intro/cli.mdx) or following our [First App Tutorial](intro/next.mdx#build-your-first-app) to learn the main concepts. @@ -58,11 +58,11 @@ Get started building by [installing Ionic](intro/cli.md) or following our [First ## Overview -Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.mdx), [React](react.mdx), or [Vue](vue/overview.mdx). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.md). If you’d like to learn more about Ionic before diving in, we created a video to walk you through the basics. +Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.mdx), [React](react.mdx), or [Vue](vue/overview.mdx). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.mdx). If you’d like to learn more about Ionic before diving in, we created a video to walk you through the basics. ### One codebase, running everywhere -Ionic is the only mobile app stack that enables web developers to build apps for all major app stores and the mobile web from a single codebase. And with [Adaptive Styling](theming/platform-styles.md), Ionic apps look and feel at home on every device. +Ionic is the only mobile app stack that enables web developers to build apps for all major app stores and the mobile web from a single codebase. And with [Adaptive Styling](theming/platform-styles.mdx), Ionic apps look and feel at home on every device. ### A focus on performance @@ -84,7 +84,7 @@ Build and deploy apps that work across multiple platforms, such as native iOS, A ### Web Standards-based -Ionic is built on top of reliable, [standardized web technologies](reference/glossary.md#web-standards): HTML, CSS, and JavaScript, using modern Web APIs such as Custom Elements and Shadow DOM. Because of this, Ionic components have a stable API, and aren't at the whim of a single platform vendor. +Ionic is built on top of reliable, [standardized web technologies](reference/glossary.mdx#web-standards): HTML, CSS, and JavaScript, using modern Web APIs such as Custom Elements and Shadow DOM. Because of this, Ionic components have a stable API, and aren't at the whim of a single platform vendor. ### Beautiful Design diff --git a/docs/intro/cdn.md b/docs/intro/cdn.mdx similarity index 94% rename from docs/intro/cdn.md rename to docs/intro/cdn.mdx index a90c4a6b250..1f9696aa558 100644 --- a/docs/intro/cdn.md +++ b/docs/intro/cdn.mdx @@ -25,7 +25,7 @@ It's recommended to use [jsdelivr](https://www.jsdelivr.com/) to access the Fram ``` -With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic [Global Stylesheets](../layout/global-stylesheets). +With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic [Global Stylesheets](../layout/global-stylesheets.mdx). :::note This does not install Angular or any other frameworks. This allows use of the Ionic Framework core components without a framework. @@ -33,13 +33,13 @@ This does not install Angular or any other frameworks. This allows use of the Io ## Ionic + Angular -When using Ionic Framework in an Angular project, install the latest `@ionic/angular` package from [npm](../reference/glossary.md#npm). This comes with all of the Ionic Framework components and Angular specific services and features. +When using Ionic Framework in an Angular project, install the latest `@ionic/angular` package from [npm](../reference/glossary.mdx#npm). This comes with all of the Ionic Framework components and Angular specific services and features. ```shell npm install @ionic/angular@latest --save ``` -Each time there is a new Ionic Framework release, this [version](../reference/versioning.md) will need to be updated to get the latest features and fixes. The version can be [updated using npm](../developing/tips.md#updating-dependencies), as well. +Each time there is a new Ionic Framework release, this [version](../reference/versioning.mdx) will need to be updated to get the latest features and fixes. The version can be [updated using npm](../developing/tips.md#updating-dependencies), as well. For adding Ionic to an already existing Angular project, use the Angular CLI's `ng add` feature. diff --git a/docs/intro/cli.md b/docs/intro/cli.mdx similarity index 83% rename from docs/intro/cli.md rename to docs/intro/cli.mdx index 0ddf23169d3..d2782c40f27 100644 --- a/docs/intro/cli.md +++ b/docs/intro/cli.mdx @@ -13,13 +13,13 @@ import AppWizard from '@components/page/intro/AppWizard'; /> -Ionic apps are created and developed primarily through the Ionic [command-line](../reference/glossary.md#cli) utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way. It is also the main tool through which to run the app and connect it to other services, such as Appflow. +Ionic apps are created and developed primarily through the Ionic [command-line](../reference/glossary.mdx#cli) utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way. It is also the main tool through which to run the app and connect it to other services, such as Appflow. ## Install the Ionic CLI -Before proceeding, make sure your computer has [Node.js](../reference/glossary.md#node) installed. See [these instructions](environment.md) to set up an environment for Ionic. +Before proceeding, make sure your computer has [Node.js](../reference/glossary.mdx#node) installed. See [these instructions](environment.mdx) to set up an environment for Ionic. Install the Ionic CLI with npm: diff --git a/versioned_docs/version-v6/intro/environment.md b/docs/intro/environment.mdx similarity index 88% rename from versioned_docs/version-v6/intro/environment.md rename to docs/intro/environment.mdx index 476dda2acf1..ce34f960a7c 100644 --- a/versioned_docs/version-v6/intro/environment.md +++ b/docs/intro/environment.mdx @@ -29,9 +29,9 @@ Git Bash (from git-scm.com) do ## Node & npm -Almost all tooling for modern JavaScript projects is based in [Node.js](../reference/glossary.md#node). The [download page](https://nodejs.org/en/download/) has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure best compatibility. +Almost all tooling for modern JavaScript projects is based in [Node.js](../reference/glossary.mdx#node). The [download page](https://nodejs.org/en/download/) has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure best compatibility. -Node is bundled with [npm](../reference/glossary.md#npm), the package manager for JavaScript. +Node is bundled with [npm](../reference/glossary.mdx#npm), the package manager for JavaScript. To verify the installation, open a new terminal window and run: @@ -46,7 +46,7 @@ Permission errors are common on macOS when installing global packages with `npm` ## Git -Although not required, the version control system [Git](../reference/glossary.md#git) is highly recommended. +Although not required, the version control system [Git](../reference/glossary.mdx#git) is highly recommended. Git is often accompanied by a Git Host, such as [GitHub](https://github.com/), in which case additional setup is required. Follow the tutorial from the Git Host's documentation to set up Git: diff --git a/docs/intro/first-app.md b/docs/intro/first-app.mdx similarity index 100% rename from docs/intro/first-app.md rename to docs/intro/first-app.mdx diff --git a/docs/intro/next.md b/docs/intro/next.mdx similarity index 100% rename from docs/intro/next.md rename to docs/intro/next.mdx diff --git a/docs/intro/vscode-extension.md b/docs/intro/vscode-extension.mdx similarity index 100% rename from docs/intro/vscode-extension.md rename to docs/intro/vscode-extension.mdx diff --git a/docs/layout/css-utilities.md b/docs/layout/css-utilities.mdx similarity index 98% rename from docs/layout/css-utilities.md rename to docs/layout/css-utilities.mdx index 29ad62298b4..afb08ab6e3a 100644 --- a/docs/layout/css-utilities.md +++ b/docs/layout/css-utilities.mdx @@ -13,7 +13,7 @@ title: CSS Utilities Ionic Framework provides a set of CSS utility classes that can be used on any element in order to modify the text, element placement or adjust the padding and margin. :::note -If your app was not started using an available Ionic Framework starter, the stylesheets listed in the [optional section of the global stylesheets](global-stylesheets.md#optional) will need to be included in order for these styles to work. +If your app was not started using an available Ionic Framework starter, the stylesheets listed in the [optional section of the global stylesheets](global-stylesheets.mdx#optional) will need to be included in order for these styles to work. ::: ## Text Modification @@ -230,7 +230,7 @@ There are also additional classes to modify the visibility based on the screen s The padding class sets the padding area of an element. The padding area is the space between the content of the element and its border. -The default amount of `padding` to be applied is `16px` and is set by the `--ion-padding` variable. See the [CSS Variables](../theming/css-variables.md) section for more information on how to change these values. +The default amount of `padding` to be applied is `16px` and is set by the `--ion-padding` variable. See the [CSS Variables](../theming/css-variables.mdx) section for more information on how to change these values. ```html @@ -280,7 +280,7 @@ The default amount of `padding` to be applied is `16px` and is set by the `--ion The margin area extends the border area with an empty area used to separate the element from its neighbors. -The default amount of `margin` to be applied is `16px` and is set by the `--ion-margin` variable. See the [CSS Variables](../theming/css-variables.md) section for more information on how to change these values. +The default amount of `margin` to be applied is `16px` and is set by the `--ion-margin` variable. See the [CSS Variables](../theming/css-variables.mdx) section for more information on how to change these values. ```html diff --git a/docs/layout/dynamic-font-scaling.md b/docs/layout/dynamic-font-scaling.mdx similarity index 100% rename from docs/layout/dynamic-font-scaling.md rename to docs/layout/dynamic-font-scaling.mdx diff --git a/docs/layout/global-stylesheets.md b/docs/layout/global-stylesheets.mdx similarity index 79% rename from docs/layout/global-stylesheets.md rename to docs/layout/global-stylesheets.mdx index 83eca607543..32fd0e0d5ba 100644 --- a/docs/layout/global-stylesheets.md +++ b/docs/layout/global-stylesheets.mdx @@ -32,7 +32,7 @@ Applies styles to `` and defaults `box-sizing` to `border-box`. It ensures #### typography.css -Typography changes the font-family of the entire document and modifies the font styles for heading elements. It also applies positioning styles to some native text elements. This file is necessary for [Dynamic Font Scaling](./dynamic-font-scaling) to work. +Typography changes the font-family of the entire document and modifies the font styles for heading elements. It also applies positioning styles to some native text elements. This file is necessary for [Dynamic Font Scaling](./dynamic-font-scaling.mdx) to work. #### normalize.css @@ -44,28 +44,28 @@ The following set of CSS files are optional and can safely be commented out or r #### padding.css -Adds utility classes to modify the padding or margin on any element, see [CSS Utilities](css-utilities.md#content-space) for usage information. +Adds utility classes to modify the padding or margin on any element, see [CSS Utilities](css-utilities.mdx#content-space) for usage information. #### float-elements.css -Adds utility classes to float an element based on the breakpoint and side, see [CSS Utilities](css-utilities.md#element-placement) for usage information. +Adds utility classes to float an element based on the breakpoint and side, see [CSS Utilities](css-utilities.mdx#element-placement) for usage information. #### text-alignment.css -Adds utility classes to align the text of an element or adjust the white space based on the breakpoint, see [CSS Utilities](css-utilities.md#text-alignment) for usage information. +Adds utility classes to align the text of an element or adjust the white space based on the breakpoint, see [CSS Utilities](css-utilities.mdx#text-alignment) for usage information. #### text-transformation.css -Adds utility classes to transform the text of an element to `uppercase`, `lowercase` or `capitalize` based on the breakpoint, see [CSS Utilities](css-utilities.md#text-transformation) for usage information. +Adds utility classes to transform the text of an element to `uppercase`, `lowercase` or `capitalize` based on the breakpoint, see [CSS Utilities](css-utilities.mdx#text-transformation) for usage information. #### flex-utils.css -Adds utility classes to align flex containers and items, see [CSS Utilities](css-utilities.md#flex-properties) for usage information. +Adds utility classes to align flex containers and items, see [CSS Utilities](css-utilities.mdx#flex-properties) for usage information. #### display.css -Adds utility classes to hide any element based on the breakpoint, see [CSS Utilities](css-utilities.md#element-display) for usage information. +Adds utility classes to hide any element based on the breakpoint, see [CSS Utilities](css-utilities.mdx#element-display) for usage information. ## Usage -Refer to [Ionic Packages](../intro/cdn.md) for how to include the global stylesheets based on the framework and [CSS Utilities](css-utilities.md) for how to use the optional utilities. +Refer to [Ionic Packages](../intro/cdn.mdx) for how to include the global stylesheets based on the framework and [CSS Utilities](css-utilities.mdx) for how to use the optional utilities. diff --git a/docs/layout/structure.md b/docs/layout/structure.mdx similarity index 100% rename from docs/layout/structure.md rename to docs/layout/structure.mdx diff --git a/docs/react/adding-ionic-react-to-an-existing-react-project.mdx b/docs/react/adding-ionic-react-to-an-existing-react-project.mdx index 20bf7b3fcb7..f892a2b84bd 100644 --- a/docs/react/adding-ionic-react-to-an-existing-react-project.mdx +++ b/docs/react/adding-ionic-react-to-an-existing-react-project.mdx @@ -131,13 +131,13 @@ Now you can setup Ionic pages like so: ::: -For more information on routing and navigation in Ionic React, see [here](/docs/react/navigation). +For more information on routing and navigation in Ionic React, see [here](/docs/react/navigation.mdx). ### Customize the Theme To customize the look and feel of the components, Ionic has CSS variables you can [override](https://ionicframework.com/docs/theming/colors#modifying-colors) to provide a theme for your components. Set these in your main CSS file. -For more info on theming your Ionic app, see the guide [here](/docs/theming/themes). +For more info on theming your Ionic app, see the guide [here](/docs/theming/themes.mdx). ### Wrapping up diff --git a/docs/reference/browser-support.md b/docs/reference/browser-support.mdx similarity index 100% rename from docs/reference/browser-support.md rename to docs/reference/browser-support.mdx diff --git a/docs/reference/glossary.md b/docs/reference/glossary.mdx similarity index 99% rename from docs/reference/glossary.md rename to docs/reference/glossary.mdx index 110d5514beb..6a3d43814dd 100644 --- a/docs/reference/glossary.md +++ b/docs/reference/glossary.mdx @@ -92,7 +92,7 @@ title: Glossary

- +{/* cspell:disable */}
@@ -111,7 +111,7 @@ title: Glossary

- +{/* cspell:enable */}
diff --git a/docs/reference/release-notes.md b/docs/reference/release-notes.mdx similarity index 100% rename from docs/reference/release-notes.md rename to docs/reference/release-notes.mdx diff --git a/docs/reference/support.md b/docs/reference/support.mdx similarity index 99% rename from docs/reference/support.md rename to docs/reference/support.mdx index 9e5076c9251..979e8b04af0 100644 --- a/docs/reference/support.md +++ b/docs/reference/support.mdx @@ -58,7 +58,7 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo Angular's support policy for iOS is the two most recent major versions. This means that changes to your Angular project may be necessary to use Ionic Angular v4-v6 on iOS 13. To support iOS 13, change the project `target` specified in `compilerOptions` in the tsconfig.json to `es5`. Without this change an error of `Unexpected token '.' in promiseReactionJob` will occur on app startup in iOS 13. -Note that later versions of Ionic do not support iOS 13; see [mobile support table here](./browser-support#mobile-browsers). +Note that later versions of Ionic do not support iOS 13; see [mobile support table here](./browser-support.mdx#mobile-browsers). #### Ionic React diff --git a/docs/reference/versioning.md b/docs/reference/versioning.mdx similarity index 98% rename from docs/reference/versioning.md rename to docs/reference/versioning.mdx index 7c48549721e..9f17aa98877 100644 --- a/docs/reference/versioning.md +++ b/docs/reference/versioning.mdx @@ -1,6 +1,6 @@ # Versioning - +{/* TOC goes here */} Ionic Framework follows the Semantic Versioning (SemVer) convention: major.minor.patch. Incompatible API changes increment the major version, adding backwards-compatible functionality increments the minor version, and backwards-compatible bug fixes increment the patch version. diff --git a/docs/techniques/security.md b/docs/techniques/security.mdx similarity index 100% rename from docs/techniques/security.md rename to docs/techniques/security.mdx diff --git a/docs/test/page1.md b/docs/test/page1.md deleted file mode 100644 index d965196cf5d..00000000000 --- a/docs/test/page1.md +++ /dev/null @@ -1,3 +0,0 @@ -# Testing Page 1 - -This is Testing page 1, Get to Testing Page 2 [here](page2.md). diff --git a/docs/test/page1.mdx b/docs/test/page1.mdx new file mode 100644 index 00000000000..cd5b72410d0 --- /dev/null +++ b/docs/test/page1.mdx @@ -0,0 +1,3 @@ +# Testing Page 1 + +This is Testing page 1, Get to Testing Page 2 [here](page2.mdx). diff --git a/docs/test/page2.md b/docs/test/page2.md deleted file mode 100644 index 2d2d61adacf..00000000000 --- a/docs/test/page2.md +++ /dev/null @@ -1,3 +0,0 @@ -# Testing Page 2 - -This is Testing page 2, Get to Testing Page 1 [here](page1.md). diff --git a/docs/test/page2.mdx b/docs/test/page2.mdx new file mode 100644 index 00000000000..5ebdef8dca0 --- /dev/null +++ b/docs/test/page2.mdx @@ -0,0 +1,3 @@ +# Testing Page 2 + +This is Testing page 2, Get to Testing Page 1 [here](page1.mdx). diff --git a/docs/theming/advanced.md b/docs/theming/advanced.mdx similarity index 97% rename from docs/theming/advanced.md rename to docs/theming/advanced.mdx index 8f3b75379c9..78a560dee4d 100644 --- a/docs/theming/advanced.md +++ b/docs/theming/advanced.mdx @@ -106,7 +106,7 @@ There is not yet full CSS properties (variables). CSS variables add dynamic values to an otherwise static language. This is something that has traditionally required a CSS preprocessor like Sass. The look of an application can easily be changed by changing the value of any of the [CSS Variables](css-variables.md) Ionic Framework provides. +The Ionic Framework components are themed using CSS properties (variables). CSS variables add dynamic values to an otherwise static language. This is something that has traditionally required a CSS preprocessor like Sass. The look of an application can easily be changed by changing the value of any of the [CSS Variables](css-variables.mdx) Ionic Framework provides. ## CSS Shadow Parts -CSS Shadow Parts were added to make it easier to fully customize Ionic Framework Shadow components. In the past, components that use Shadow DOM were unable to have elements inside of their shadow tree styled directly. With the addition of Shadow parts, there is no longer a need for CSS variables for every property on an inner element of a Shadow component. For more information on customizing Ionic Framework components using parts, see the [CSS Shadow Parts](css-shadow-parts.md) guide. +CSS Shadow Parts were added to make it easier to fully customize Ionic Framework Shadow components. In the past, components that use Shadow DOM were unable to have elements inside of their shadow tree styled directly. With the addition of Shadow parts, there is no longer a need for CSS variables for every property on an inner element of a Shadow component. For more information on customizing Ionic Framework components using parts, see the [CSS Shadow Parts](css-shadow-parts.mdx) guide. ## Branding -Ionic provides application colors that can be used to theme an application to match a brand or color scheme. The default theme uses a light background, but everything from the background color to the text color is fully customizable. For more information on branding, see [Themes](themes.md). +Ionic provides application colors that can be used to theme an application to match a brand or color scheme. The default theme uses a light background, but everything from the background color to the text color is fully customizable. For more information on branding, see [Themes](themes.mdx). diff --git a/docs/theming/color-generator.md b/docs/theming/color-generator.mdx similarity index 100% rename from docs/theming/color-generator.md rename to docs/theming/color-generator.mdx diff --git a/versioned_docs/version-v6/theming/colors.md b/docs/theming/colors.mdx similarity index 88% rename from versioned_docs/version-v6/theming/colors.md rename to docs/theming/colors.mdx index 666389851a0..9692c33fd00 100644 --- a/versioned_docs/version-v6/theming/colors.md +++ b/docs/theming/colors.mdx @@ -33,7 +33,7 @@ A color can be applied to an Ionic component in order to change the default colo ## Layered Colors -Each color consists of the following properties: a `base`, `contrast`, `shade`, and `tint`. The `base` and `contrast` colors also require a `rgb` property which is the same color, just in rgb format. See [The Alpha Problem](advanced.md#the-alpha-problem) for an explanation of why the `rgb` property is also needed. Select from the dropdown below to see all of the default colors Ionic provides and their variations. +Each color consists of the following properties: a `base`, `contrast`, `shade`, and `tint`. The `base` and `contrast` colors also require a `rgb` property which is the same color, just in rgb format. See [The Alpha Problem](advanced.mdx#the-alpha-problem) for an explanation of why the `rgb` property is also needed. Select from the dropdown below to see all of the default colors Ionic provides and their variations. @@ -55,10 +55,10 @@ To change the default values of a color, all of the listed variations for that c When `secondary` is applied to a button, not only is the base color #006600 used, but the contrast color #ffffff is used for the text, along with shade #005a00 and tint #1a751a colors for the different states of the button. :::note -Not sure how to get the variation colors from the base color? Try out our [Color Generator](color-generator.md) that calculates all of the variations and provides code to copy/paste into an app! +Not sure how to get the variation colors from the base color? Try out our [Color Generator](color-generator.mdx) that calculates all of the variations and provides code to copy/paste into an app! ::: -See the [CSS Variables documentation](css-variables.md) for more information on CSS variables. +See the [CSS Variables documentation](css-variables.mdx) for more information on CSS variables. ## Adding Colors @@ -105,7 +105,7 @@ div { } ``` -See the [CSS Variables documentation](css-variables.md) for more information on setting and using CSS variables. +See the [CSS Variables documentation](css-variables.mdx) for more information on setting and using CSS variables. ## New Color Creator diff --git a/docs/theming/css-shadow-parts.md b/docs/theming/css-shadow-parts.mdx similarity index 95% rename from docs/theming/css-shadow-parts.md rename to docs/theming/css-shadow-parts.mdx index 271dd4e9f9a..fd8b57fbb4f 100644 --- a/docs/theming/css-shadow-parts.md +++ b/docs/theming/css-shadow-parts.mdx @@ -107,7 +107,7 @@ All exposed parts for an Ionic Framework component can be found under the CSS Sh In order to have parts a component must meet the following criteria: -- It is a [Shadow DOM](../reference/glossary.md#shadow) component. If it is a [Scoped](../reference/glossary.md#scoped) or Light DOM component, the child elements can be targeted directly. If a component is Scoped or Shadow, it will be listed by its name on its [component documentation page](../components.md). +- It is a [Shadow DOM](../reference/glossary.mdx#shadow) component. If it is a [Scoped](../reference/glossary.mdx#scoped) or Light DOM component, the child elements can be targeted directly. If a component is Scoped or Shadow, it will be listed by its name on its [component documentation page](../components.md). - It contains children elements. For example, `ion-card-header` is a Shadow component, but all styles are applied to the host element. Since it has no child elements, there’s no need for parts. - The children elements are not structural. In certain components, including `ion-title`, the child element is a structural element used to position the inner elements. We do not recommend customizing structural elements as this can have unexpected results. @@ -119,7 +119,7 @@ We welcome recommendations for additional parts. Please create a browser support meets the requirements before implementing parts in an app. If browser support for older versions is required, we recommend continuing to use [CSS Variables](../theming/css-variables.md) for styling. +CSS Shadow Parts are supported in the recent versions of all of the major browsers. However, some of the older versions do not support shadow parts. Verify the browser support meets the requirements before implementing parts in an app. If browser support for older versions is required, we recommend continuing to use [CSS Variables](../theming/css-variables.mdx) for styling. ### Vendor Prefixed Pseudo-Elements diff --git a/docs/theming/css-variables.md b/docs/theming/css-variables.mdx similarity index 97% rename from docs/theming/css-variables.md rename to docs/theming/css-variables.mdx index d800a6cf059..31c2b89693a 100644 --- a/docs/theming/css-variables.md +++ b/docs/theming/css-variables.mdx @@ -95,4 +95,4 @@ Ionic provides variables that exist at the component level, such as `--backgroun ### Global Variables -There are several global variables that Ionic provides in order to make theming an entire application easier. For more information, see [Colors](colors.md), [Themes](themes.md) and [Advanced Theming](advanced.md). +There are several global variables that Ionic provides in order to make theming an entire application easier. For more information, see [Colors](colors.mdx), [Themes](themes.mdx) and [Advanced Theming](advanced.mdx). diff --git a/docs/theming/dark-mode.md b/docs/theming/dark-mode.mdx similarity index 99% rename from docs/theming/dark-mode.md rename to docs/theming/dark-mode.mdx index 3794b653481..01a3f5de8ab 100644 --- a/docs/theming/dark-mode.md +++ b/docs/theming/dark-mode.mdx @@ -201,7 +201,7 @@ For more information regarding `color-scheme` please see https://web.dev/color-s ::: :::note -For developers looking to customize the theme color under the status bar in Safari on iOS 15 or the toolbar in Safari on macOS, see [`theme-color` Meta](./advanced.md#theme-color-meta). +For developers looking to customize the theme color under the status bar in Safari on iOS 15 or the toolbar in Safari on macOS, see [`theme-color` Meta](./advanced.mdx#theme-color-meta). ::: ## Ionic Dark Palette diff --git a/versioned_docs/version-v6/theming/platform-styles.md b/docs/theming/platform-styles.mdx similarity index 95% rename from versioned_docs/version-v6/theming/platform-styles.md rename to docs/theming/platform-styles.mdx index 77d0a5665fc..8fc612833fa 100644 --- a/versioned_docs/version-v6/theming/platform-styles.md +++ b/docs/theming/platform-styles.mdx @@ -48,4 +48,4 @@ There are also many global CSS variables that can be used to override the styles } ``` -There are many global variables that can be overridden by mode, including [Ionic's color variables](colors.md), [theme variables](themes.md) and [global component variables](advanced.md). +There are many global variables that can be overridden by mode, including [Ionic's color variables](colors.mdx), [theme variables](themes.mdx) and [global component variables](advanced.mdx). diff --git a/docs/theming/themes.md b/docs/theming/themes.mdx similarity index 97% rename from docs/theming/themes.md rename to docs/theming/themes.mdx index c69d885aa1d..e4923caf40f 100644 --- a/docs/theming/themes.md +++ b/docs/theming/themes.mdx @@ -19,7 +19,7 @@ Ionic provides several global variables that are used throughout components to c The application colors are used in multiple places in Ionic. These are useful for easily creating dark palettes or themes that match a brand. -It is important to note that the background and text color variables also require a rgb variable to be set in rgb format. See [The Alpha Problem](advanced.md#the-alpha-problem) for an explanation of why the `rgb` property is also needed. +It is important to note that the background and text color variables also require a rgb variable to be set in rgb format. See [The Alpha Problem](advanced.mdx#the-alpha-problem) for an explanation of why the `rgb` property is also needed. | Name | Description | | ------------------------------------------ | ---------------------------------------------------- | diff --git a/docs/troubleshooting/build.md b/docs/troubleshooting/build.mdx similarity index 100% rename from docs/troubleshooting/build.md rename to docs/troubleshooting/build.mdx diff --git a/docs/troubleshooting/cors.md b/docs/troubleshooting/cors.mdx similarity index 100% rename from docs/troubleshooting/cors.md rename to docs/troubleshooting/cors.mdx diff --git a/docs/troubleshooting/debugging.md b/docs/troubleshooting/debugging.mdx similarity index 100% rename from docs/troubleshooting/debugging.md rename to docs/troubleshooting/debugging.mdx diff --git a/docs/troubleshooting/native.md b/docs/troubleshooting/native.mdx similarity index 96% rename from docs/troubleshooting/native.md rename to docs/troubleshooting/native.mdx index b757c5d0d59..dfb3195c915 100644 --- a/docs/troubleshooting/native.md +++ b/docs/troubleshooting/native.mdx @@ -18,13 +18,13 @@ Code Signing Error: Failed to create provisioning profile. The app ID "com.csfor Running an app on an iOS device requires a provisioning profile. If a provisioning profile has not been created yet follow these directions: -1. Set the [Package ID](../reference/glossary.md#package-id). +1. Set the [Package ID](../reference/glossary.mdx#package-id). For Capacitor, open the `capacitor.config.json` file and modify the `appId` property. For Cordova, open the `config.xml` file and modify the `id` attribute of the root element, ``. See [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) for more information. - +{/* prettier-ignore */} 2. Open the project in Xcode. For Capacitor, run the following to open the app in Xcode: @@ -35,12 +35,12 @@ Running an app on an iOS device requires a provisioning profile. If a provisioni For Cordova, open Xcode. Use **File** » **Open** and locate the app. Open the app's `platforms/ios` directory. - +{/* prettier-ignore */} 3. In Project navigator, select the project root to open the project editor. Under the **Identity** section, verify that the Package ID that was set matches the Bundle Identifier. ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png) - +{/* prettier-ignore */} 4. In the same project editor, under the Signing section, ensure Automatically manage signing is enabled. Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing. ![Xcode Signing Setup](/img/running/ios-xcode-signing-setup.png) diff --git a/docs/troubleshooting/runtime.md b/docs/troubleshooting/runtime.mdx similarity index 98% rename from docs/troubleshooting/runtime.md rename to docs/troubleshooting/runtime.mdx index c0466b288f9..ba982763c07 100644 --- a/docs/troubleshooting/runtime.md +++ b/docs/troubleshooting/runtime.mdx @@ -208,7 +208,7 @@ class MyApp { } ``` - +{/* This is referenced in Ionic Framework component documentation so we explicitly define the anchor so it remains consistent. */} ## Accessing `this` in a function callback returns `undefined` {#accessing-this} diff --git a/docs/updating/4-0.md b/docs/updating/4-0.mdx similarity index 98% rename from docs/updating/4-0.md rename to docs/updating/4-0.mdx index a913acf4cd3..9a2eb07043f 100644 --- a/docs/updating/4-0.md +++ b/docs/updating/4-0.mdx @@ -261,7 +261,7 @@ One upside is that for the most part, the Ionic UI components you know and love Here are some considerations to review before beginning the upgrade: - **App complexity**: Naturally, the larger and more complex the app is, the longer it will take to migrate. -- **Framework support**: In 2019, Ionic will release full support for React. You can also use Ionic Framework components [without a framework](../intro/cdn.md). Since these are not production-ready yet, we recommend sticking with Angular or waiting until the other framework support is available. +- **Framework support**: In 2019, Ionic will release full support for React. You can also use Ionic Framework components [without a framework](../intro/cdn.mdx). Since these are not production-ready yet, we recommend sticking with Angular or waiting until the other framework support is available. - **Budget and team makeup**: The length of a migration project will vary based on the size of your team, the complexity of the app, and the amount of time allotted to make the transition. ### Suggested Strategy diff --git a/docs/updating/5-0.md b/docs/updating/5-0.mdx similarity index 94% rename from docs/updating/5-0.md rename to docs/updating/5-0.mdx index 6a5f621b4e9..074984ce181 100644 --- a/docs/updating/5-0.md +++ b/docs/updating/5-0.mdx @@ -7,7 +7,7 @@ title: Updating to v5 Migrating an app from Ionic 4 to 5 requires a few updates to the API properties, CSS utilities, and the installed package dependencies. :::note -This guide assumes that you have already updated your app to the latest version of Ionic 4. Make sure you have followed the [Updating to Ionic 4 Guide](./4-0) before starting this guide. +This guide assumes that you have already updated your app to the latest version of Ionic 4. Make sure you have followed the [Updating to Ionic 4 Guide](./4-0.mdx) before starting this guide. ::: :::info Breaking Changes diff --git a/docs/updating/6-0.md b/docs/updating/6-0.mdx similarity index 98% rename from docs/updating/6-0.md rename to docs/updating/6-0.mdx index d9f7ef2cec6..90e5db36a89 100644 --- a/docs/updating/6-0.md +++ b/docs/updating/6-0.mdx @@ -5,7 +5,7 @@ title: Updating to v6 # Updating from Ionic 5 to 6 :::note -This guide assumes that you have already updated your app to the latest version of Ionic 5. Make sure you have followed the [Updating to Ionic 5 Guide](./5-0) before starting this guide. +This guide assumes that you have already updated your app to the latest version of Ionic 5. Make sure you have followed the [Updating to Ionic 5 Guide](./5-0.mdx) before starting this guide. ::: :::info Breaking Changes @@ -414,7 +414,7 @@ Ensure `null` is not passed in as a value to the `placeholder` property. We reco ### Browser Support -The list of browsers that Ionic supports has changed. Review the [Browser Support Guide](../reference/browser-support) to ensure you are deploying apps to supported browsers. +The list of browsers that Ionic supports has changed. Review the [Browser Support Guide](../reference/browser-support.mdx) to ensure you are deploying apps to supported browsers. If you have a `browserslist` or `.browserslistrc` file, update it with the following content: diff --git a/docs/updating/7-0.md b/docs/updating/7-0.mdx similarity index 96% rename from docs/updating/7-0.md rename to docs/updating/7-0.mdx index b2301a246cc..c7fafe8b551 100644 --- a/docs/updating/7-0.md +++ b/docs/updating/7-0.mdx @@ -5,7 +5,7 @@ title: Updating to v7 # Updating from Ionic 6 to 7 :::note -This guide assumes that you have already updated your app to the latest version of Ionic 6. Make sure you have followed the [Upgrading to Ionic 6 Guide](./6-0) before starting this guide. +This guide assumes that you have already updated your app to the latest version of Ionic 6. Make sure you have followed the [Upgrading to Ionic 6 Guide](./6-0.mdx) before starting this guide. ::: :::info Breaking Changes @@ -77,7 +77,7 @@ npm install @ionic/core@7 ### Browser Support -The list of browsers that Ionic supports has changed. Review the [Browser Support Guide](../reference/browser-support) to ensure you are deploying apps to supported browsers. +The list of browsers that Ionic supports has changed. Review the [Browser Support Guide](../reference/browser-support.mdx) to ensure you are deploying apps to supported browsers. If you have a `browserslist` or `.browserslistrc` file, update it with the following content: diff --git a/docs/utilities/animations.md b/docs/utilities/animations.mdx similarity index 99% rename from docs/utilities/animations.md rename to docs/utilities/animations.mdx index 9c9515d00b3..3c35742d6aa 100644 --- a/docs/utilities/animations.md +++ b/docs/utilities/animations.mdx @@ -212,7 +212,7 @@ import Chain from '@site/static/usage/v8/animations/chain/index.md'; ## Gesture Animations -Ionic Animations gives developers the ability to create powerful gesture-based animations by integrating seamlessly with [Ionic Gestures](gestures.md). +Ionic Animations gives developers the ability to create powerful gesture-based animations by integrating seamlessly with [Ionic Gestures](gestures.mdx). In the following example we are creating a track along which we can drag the card element. Our `animation` object will take care of moving the card element either left or right, and our `gesture` object will instruct the `animation` object which direction to move in. diff --git a/docs/utilities/gestures.md b/docs/utilities/gestures.mdx similarity index 99% rename from docs/utilities/gestures.md rename to docs/utilities/gestures.mdx index 60d16272454..5e045f9436e 100644 --- a/docs/utilities/gestures.md +++ b/docs/utilities/gestures.mdx @@ -178,7 +178,7 @@ In the example below, we want to be able to detect double clicks on an element. ## Gesture Animations -See our guide on implementing gesture animations: [Gesture Animations with Ionic Animations](animations.md#gesture-animations) +See our guide on implementing gesture animations: [Gesture Animations with Ionic Animations](animations.mdx#gesture-animations) ## Types diff --git a/docs/vue/navigation.mdx b/docs/vue/navigation.mdx index 1286ab01537..2ad8828ed53 100644 --- a/docs/vue/navigation.mdx +++ b/docs/vue/navigation.mdx @@ -140,7 +140,7 @@ The `router-link` attribute can be set on any Ionic Vue component, and the route The `router-direction` attribute accepts values of `forward`, `back`, or `none` and is used to control the direction of the page transition. -The `router-animation` attribute accepts an `AnimationBuilder` function and is used to provide a custom page transition that is only used when clicking the component it is provided on. The `AnimationBuilder` type is a function that returns an Ionic Animation instance. See the [Animations documentation](../utilities/animations) for more information on using animations in Ionic Vue. +The `router-animation` attribute accepts an `AnimationBuilder` function and is used to provide a custom page transition that is only used when clicking the component it is provided on. The `AnimationBuilder` type is a function that returns an Ionic Animation instance. See the [Animations documentation](../utilities/animations.mdx) for more information on using animations in Ionic Vue. ```html Click Me @@ -192,7 +192,7 @@ The example above has the app navigate to `/page2` with a custom animation that `useIonRouter` uses the Vue `inject()` function and should only be used inside of your `setup()` function. ::: -See the [useIonRouter documentation](./utility-functions#router) for more details as well as type information. +See the [useIonRouter documentation](./utility-functions.mdx#router) for more details as well as type information. ### Navigating using `router.go` @@ -574,11 +574,11 @@ Components presented via `IonModal` or `IonPopover` do not typically need an `Io ### useIonRouter -▸ **useIonRouter**(): [`UseIonRouterResult`](utility-functions#useionrouterresult) +▸ **useIonRouter**(): [`UseIonRouterResult`](utility-functions.mdx#useionrouterresult) Returns the Ionic router instance, containing API methods for navigating, customizing page transitions and routing context for native features. This function can be used in combination with the [`useRouter`](https://router.vuejs.org/api/index.html#userouter) function from Vue. -For example usages, please refer to our [Utility Functions](utility-functions#useionrouter). +For example usages, please refer to our [Utility Functions](utility-functions.mdx#useionrouter). ## URL Parameters diff --git a/docs/vue/utility-functions.mdx b/docs/vue/utility-functions.mdx index d5461a255a9..295ba5f545f 100644 --- a/docs/vue/utility-functions.mdx +++ b/docs/vue/utility-functions.mdx @@ -85,7 +85,7 @@ useIonRouter(): UseIonRouterResult; - The `replace` method is the equivalent of calling `ionRouter.navigate(location, 'root', 'replace', animation)`. -See the [Vue Navigation Documentation](./navigation#navigating-using-useionrouter) for more usage examples. +See the [Vue Navigation Documentation](./navigation.mdx#navigating-using-useionrouter) for more usage examples. ## Hardware Back Button @@ -181,4 +181,4 @@ export default defineComponent({ Pages in your app need to be using the `IonPage` component in order for lifecycle methods and hooks to fire properly. ::: -See the [Vue Lifecycle Documentation](./lifecycle) for more information and usage examples. +See the [Vue Lifecycle Documentation](./lifecycle.mdx) for more information and usage examples. diff --git a/versioned_docs/version-v5/api/col.mdx b/versioned_docs/version-v5/api/col.mdx index 76f38559c77..3e18bff33a8 100644 --- a/versioned_docs/version-v5/api/col.mdx +++ b/versioned_docs/version-v5/api/col.mdx @@ -17,11 +17,11 @@ import Slots from '@ionic-internal/component-api/v5/col/slots.md'; Columns are cellular components of the [grid](grid.mdx) system and go inside of a [row](row.mdx). They will expand to fill their row. All content within a grid should go inside of a column. -See [Grid Layout](../layout/grid.md) for more information. +See [Grid Layout](../layout/grid.mdx) 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. +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.mdx#flex-item-properties) that can be applied to a column to customize this behavior. ## Properties diff --git a/versioned_docs/version-v5/api/grid.mdx b/versioned_docs/version-v5/api/grid.mdx index 1c486c531f6..e427372bf35 100644 --- a/versioned_docs/version-v5/api/grid.mdx +++ b/versioned_docs/version-v5/api/grid.mdx @@ -22,7 +22,7 @@ The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units — a grid, [row(s)](row.mdx) and [column(s)](col.mdx). 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. -See the [Responsive Grid documentation](../layout/grid.md) for more information. +See the [Responsive Grid documentation](../layout/grid.mdx) for more information. ## Usage diff --git a/versioned_docs/version-v5/api/item.mdx b/versioned_docs/version-v5/api/item.mdx index 8a9eed17088..9175a076d4a 100644 --- a/versioned_docs/version-v5/api/item.mdx +++ b/versioned_docs/version-v5/api/item.mdx @@ -34,7 +34,7 @@ This feature is not enabled by default on clickable items for the `md` mode, but --item-detail-push-show: true; ``` -See the [theming documentation](../theming/css-variables.md) for more information. */} +See the [theming documentation](../theming/css-variables.mdx) for more information. */} ## Item Placement @@ -50,7 +50,7 @@ The below chart details the item slots and where it will place the element insid ### 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. +Items left align text and add an ellipsis when the text is wider than the item. See the [CSS Utilities Documentation](../layout/css-utilities.mdx) for classes that can be added to `` to transform the text. ## Input Highlight diff --git a/versioned_docs/version-v5/api/row.mdx b/versioned_docs/version-v5/api/row.mdx index 15c5d725e3c..b96f63b591b 100644 --- a/versioned_docs/version-v5/api/row.mdx +++ b/versioned_docs/version-v5/api/row.mdx @@ -17,11 +17,11 @@ import Slots from '@ionic-internal/component-api/v5/row/slots.md'; Rows are horizontal components of the [grid](grid.mdx) system and contain varying numbers of [columns](col.mdx). They ensure the columns are positioned properly. -See [Grid Layout](../layout/grid.md) for more information. +See [Grid Layout](../layout/grid.mdx) 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. +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.mdx#flex-container-properties) that can be applied to a row to customize this behavior. ## Properties diff --git a/versioned_docs/version-v5/cli.md b/versioned_docs/version-v5/cli.md index c0536705c77..bd813e68848 100644 --- a/versioned_docs/version-v5/cli.md +++ b/versioned_docs/version-v5/cli.md @@ -36,7 +36,7 @@ For some commands, such as `ionic serve`, the help documentation is contextual t ## Architecture -The Ionic CLI is built with [TypeScript](/docs/reference/glossary#typescript) and [Node.js](/docs/reference/glossary#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source GitHub repository. +The Ionic CLI is built with [TypeScript](/docs/reference/glossary#typescript) and [Node.js](/docs/reference/glossary.mdx#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source GitHub repository. ## Troubleshooting diff --git a/versioned_docs/version-v5/cli/configuration.mdx b/versioned_docs/version-v5/cli/configuration.mdx index 2065b7da882..db3e9eb2751 100644 --- a/versioned_docs/version-v5/cli/configuration.mdx +++ b/versioned_docs/version-v5/cli/configuration.mdx @@ -111,7 +111,7 @@ module.exports = function (ctx) { Available in CLI 6.2.0+ -The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.md#monorepo). +The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.mdx#monorepo). :::note These docs give an overview of the multi-app feature of the Ionic CLI, but don't really go into details for each framework. diff --git a/versioned_docs/version-v5/core-concepts/fundamentals.mdx b/versioned_docs/version-v5/core-concepts/fundamentals.mdx index 7b564c6f329..ae74b3ce424 100644 --- a/versioned_docs/version-v5/core-concepts/fundamentals.mdx +++ b/versioned_docs/version-v5/core-concepts/fundamentals.mdx @@ -8,13 +8,13 @@ For those completely new to Ionic app development, it can be helpful to get a hi ## UI Components -Ionic Framework is a library of UI Components, which are reusable elements that serve as the building blocks for an application. Ionic Components are built with [web standards](../reference/glossary.md#web-standards) using HTML, CSS, and JavaScript. Though the components are pre-built, they're designed from the ground up to be highly customizable so apps can make each component their own, allowing each app to have its own look and feel. More specifically, Ionic components can be easily themed to globally change appearance across an entire app. For more information about customizing the look, please see [Theming](../theming/basics.md). +Ionic Framework is a library of UI Components, which are reusable elements that serve as the building blocks for an application. Ionic Components are built with [web standards](../reference/glossary.mdx#web-standards) using HTML, CSS, and JavaScript. Though the components are pre-built, they're designed from the ground up to be highly customizable so apps can make each component their own, allowing each app to have its own look and feel. More specifically, Ionic components can be easily themed to globally change appearance across an entire app. For more information about customizing the look, please see [Theming](../theming/basics.mdx). ## Adaptive Styling Adaptive Styling is a built-in feature of Ionic Framework which allows app developers to use the same code base for multiple platforms. Every Ionic component adapts its look to the platform on which the app is running on. For example, Apple devices, such as the iPhone and iPad, use Apple's own iOS design language. Similarly, Android devices use Google's design language called Material Design. -By making subtle design changes between the platforms, users are provided with a familiar app experience. An Ionic app downloaded from Apple's App Store will get the iOS theme, while an Ionic app downloaded from Android's Play Store will get the Material Design theme. For the apps that are viewed as a Progressive Web App (PWA) from a browser, Ionic will default to using the Material Design theme. Additionally, deciding which platform to use in certain scenarios is entirely configurable. More information about adaptive styling can be found in [Theming](../theming/basics.md). +By making subtle design changes between the platforms, users are provided with a familiar app experience. An Ionic app downloaded from Apple's App Store will get the iOS theme, while an Ionic app downloaded from Android's Play Store will get the Material Design theme. For the apps that are viewed as a Progressive Web App (PWA) from a browser, Ionic will default to using the Material Design theme. Additionally, deciding which platform to use in certain scenarios is entirely configurable. More information about adaptive styling can be found in [Theming](../theming/basics.mdx). ## Navigation diff --git a/versioned_docs/version-v5/core-concepts/webview.mdx b/versioned_docs/version-v5/core-concepts/webview.mdx index 3a2b7628586..5e44273563a 100644 --- a/versioned_docs/version-v5/core-concepts/webview.mdx +++ b/versioned_docs/version-v5/core-concepts/webview.mdx @@ -2,13 +2,13 @@ Web Views power web apps on native devices. -The Web View is automatically provided for apps integrated with [Capacitor](../reference/glossary.md#capacitor). +The Web View is automatically provided for apps integrated with [Capacitor](../reference/glossary.mdx#capacitor). -For [Cordova](../reference/glossary.md#cordova), Ionic maintains a Web View plugin. The plugin is provided by default when using the Ionic CLI. +For [Cordova](../reference/glossary.mdx#cordova), Ionic maintains a Web View plugin. The plugin is provided by default when using the Ionic CLI. ## What is a Web View? -Ionic apps are built using [web technologies](../reference/glossary.md#web-standards) and are rendered using Web Views, which are a full screen and full-powered web browser. +Ionic apps are built using [web technologies](../reference/glossary.mdx#web-standards) and are rendered using Web Views, which are a full screen and full-powered web browser. Modern Web Views offer many built-in HTML5 APIs for hardware functionality such as cameras, sensors, GPS, speakers, and Bluetooth, but sometimes it may also be necessary to access platform-specific hardware APIs. In Ionic apps, hardware APIs can be accessed through a bridge layer, typically by using native plugins which expose JavaScript APIs. @@ -18,7 +18,7 @@ The Ionic Web View plugin is specialized for modern JavaScript apps. For both iO ### CORS -Web Views enforce [CORS](../reference/glossary.md#cors), so it's important that external services properly handle cross-origin requests. See the [CORS FAQs](../troubleshooting/cors.md) for information on dealing with CORS in Ionic apps. +Web Views enforce [CORS](../reference/glossary.mdx#cors), so it's important that external services properly handle cross-origin requests. See the [CORS FAQs](../troubleshooting/cors.mdx) for information on dealing with CORS in Ionic apps. ### File Protocol diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/theming.mdx b/versioned_docs/version-v5/developer-resources/guides/first-app-v4/theming.mdx index 6170b2d673a..3839bb9d451 100644 --- a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/theming.mdx +++ b/versioned_docs/version-v5/developer-resources/guides/first-app-v4/theming.mdx @@ -27,7 +27,7 @@ By changing these variables here and there, you can easily update the entire the } ``` -The easiest and most powerful way to create custom color palettes for your app’s UI is Ionic's [Color Generator tool](../../../theming/color-generator.md). As you change a color’s hex values, the embedded demo app automatically reflects the new colors. When you've finished making changes, simply copy and paste the generated code directly into your Ionic project. +The easiest and most powerful way to create custom color palettes for your app’s UI is Ionic's [Color Generator tool](../../../theming/color-generator.mdx). As you change a color’s hex values, the embedded demo app automatically reflects the new colors. When you've finished making changes, simply copy and paste the generated code directly into your Ionic project. But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to: diff --git a/versioned_docs/version-v5/developer-resources/tools.mdx b/versioned_docs/version-v5/developer-resources/tools.mdx index 0cd5ac7d7f3..aa1a7301ba9 100644 --- a/versioned_docs/version-v5/developer-resources/tools.mdx +++ b/versioned_docs/version-v5/developer-resources/tools.mdx @@ -12,7 +12,7 @@ Quickly get started with a new Ionic app entirely in the browser! Check out the features that make working with TypeScript amazing. -### [Glossary](../reference/glossary.md) +### [Glossary](../reference/glossary.mdx) A list of common terms you'll see while developing in Ionic. diff --git a/versioned_docs/version-v5/developing/android.mdx b/versioned_docs/version-v5/developing/android.mdx index 5fc55e32866..712b538eafb 100644 --- a/versioned_docs/version-v5/developing/android.mdx +++ b/versioned_docs/version-v5/developing/android.mdx @@ -4,11 +4,11 @@ sidebar_label: Developing for Android # Android Development -This guide covers how to run and debug Ionic apps on Android emulators and devices using [Capacitor](../reference/glossary.md#capacitor) or [Cordova](../reference/glossary.md#cordova). Android apps can be developed on Windows, macOS, and Linux. +This guide covers how to run and debug Ionic apps on Android emulators and devices using [Capacitor](../reference/glossary.mdx#capacitor) or [Cordova](../reference/glossary.mdx#cordova). Android apps can be developed on Windows, macOS, and Linux. ## Android Studio -[Android Studio](https://developer.android.com/studio/) is the IDE for creating native Android apps. It includes the [Android SDK](../reference/glossary.md#android-sdk), which +[Android Studio](https://developer.android.com/studio/) is the IDE for creating native Android apps. It includes the [Android SDK](../reference/glossary.mdx#android-sdk), which will need to be configured for use in the command line. Android Studio is also used to [create Android virtual devices](android.mdx#creating-an-android-virtual-device), which are required for the Android emulator. Ionic apps can also be [launched to a device](android.mdx#set-up-an-android-device). @@ -133,7 +133,7 @@ Before apps can be deployed to Android simulators and devices, the native projec $ ionic cordova prepare android ``` -2. **Set the [Package ID](../reference/glossary.md#package-id).** +2. **Set the [Package ID](../reference/glossary.mdx#package-id).** For Capacitor, open the `capacitor.config.json` file and modify the `appId` property. @@ -167,7 +167,7 @@ When running on a device make sure the device and your development machine are c ## Running with Cordova -The Ionic CLI can build, copy, and deploy Ionic apps to Android simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.md#livereload) functionality. +The Ionic CLI can build, copy, and deploy Ionic apps to Android simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.mdx#livereload) functionality. Run the following to start a long-running CLI process that boots up a live-reload server: diff --git a/versioned_docs/version-v5/developing/ios.mdx b/versioned_docs/version-v5/developing/ios.mdx index a30a8d1187b..3f9f4a7fd90 100644 --- a/versioned_docs/version-v5/developing/ios.mdx +++ b/versioned_docs/version-v5/developing/ios.mdx @@ -5,14 +5,14 @@ skipIntros: true # iOS Development -This guide covers how to run and debug Ionic apps on iOS simulators and devices using [Capacitor](../reference/glossary.md#capacitor) or [Cordova](../reference/glossary.md#cordova). iOS apps can only be developed on macOS with Xcode installed. +This guide covers how to run and debug Ionic apps on iOS simulators and devices using [Capacitor](../reference/glossary.mdx#capacitor) or [Cordova](../reference/glossary.mdx#cordova). iOS apps can only be developed on macOS with Xcode installed. There are two workflows for running Ionic apps on iOS: - [Running with Xcode](#running-with-xcode) - [Running with the Ionic CLI](#running-with-the-ionic-cli) -The Xcode approach is generally more stable, but the Ionic CLI approach offers [live-reload](../reference/glossary.md#livereload) functionality. +The Xcode approach is generally more stable, but the Ionic CLI approach offers [live-reload](../reference/glossary.mdx#livereload) functionality. ## Xcode Setup @@ -46,7 +46,7 @@ Additional setup is required for Cordova to support programmatic builds. This se ### ios-sim & ios-deploy -The [`ios-sim`](https://github.com/ios-control/ios-sim) and [`ios-deploy`](https://github.com/ios-control/ios-deploy) are utilities that deploy apps to the iOS simulator and iOS devices during development. They can be installed globally with [npm](../reference/glossary.md#npm). +The [`ios-sim`](https://github.com/ios-control/ios-sim) and [`ios-deploy`](https://github.com/ios-control/ios-deploy) are utilities that deploy apps to the iOS simulator and iOS devices during development. They can be installed globally with [npm](../reference/glossary.mdx#npm). ```shell $ npm install -g ios-sim @@ -71,7 +71,7 @@ Before apps can be deployed to iOS simulators and devices, the native project mu $ ionic cordova prepare ios ``` -1. Set the [Package ID](../reference/glossary.md#package-id). +1. Set the [Package ID](../reference/glossary.mdx#package-id). For Capacitor, open the `capacitor.config.json` file and modify the `appId` property. @@ -124,7 +124,7 @@ In this workflow, Xcode can automatically fix common compilation and signing iss ## Running with the Ionic CLI -The Ionic CLI can build, copy, and deploy Ionic apps to iOS simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.md#livereload) functionality. +The Ionic CLI can build, copy, and deploy Ionic apps to iOS simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.mdx#livereload) functionality. With live-reload, changes made to the app's source files trigger a rebuild of web assets and the changes are reflected on the simulator or device without having to deploy again. diff --git a/versioned_docs/version-v5/index.md b/versioned_docs/version-v5/index.md index 875f2cb6ea5..451291d3bd8 100644 --- a/versioned_docs/version-v5/index.md +++ b/versioned_docs/version-v5/index.md @@ -15,7 +15,7 @@ import DocsCards from '@components/global/DocsCards'; Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.mdx), [React](react.mdx), and [Vue](vue/overview.mdx). -Get started building by [installing Ionic](intro/cli.md) or following our [First App Tutorial](intro/next.md#build-your-first-app) to learn the main concepts. +Get started building by [installing Ionic](intro/cli.mdx) or following our [First App Tutorial](intro/next.mdx#build-your-first-app) to learn the main concepts. @@ -49,11 +49,11 @@ Get started building by [installing Ionic](intro/cli.md) or following our [First ## Overview -Ionic Framework focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.mdx), [React](react.mdx), or [Vue](vue/overview.mdx). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.md). If you’d like to learn more about Ionic Framework before diving in, we created a video to walk you through the basics. +Ionic Framework focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.mdx), [React](react.mdx), or [Vue](vue/overview.mdx). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.mdx). If you’d like to learn more about Ionic Framework before diving in, we created a video to walk you through the basics. ### One codebase, running everywhere -Ionic is the only mobile app stack that enables web developers to build apps for all major app stores and the mobile web from a single codebase. And with [Adaptive Styling](theming/platform-styles.md), Ionic apps look and feel at home on every device. +Ionic is the only mobile app stack that enables web developers to build apps for all major app stores and the mobile web from a single codebase. And with [Adaptive Styling](theming/platform-styles.mdx), Ionic apps look and feel at home on every device. ### A focus on performance diff --git a/versioned_docs/version-v5/intro/cdn.md b/versioned_docs/version-v5/intro/cdn.mdx similarity index 94% rename from versioned_docs/version-v5/intro/cdn.md rename to versioned_docs/version-v5/intro/cdn.mdx index 577515b06b2..a50ed1df70c 100644 --- a/versioned_docs/version-v5/intro/cdn.md +++ b/versioned_docs/version-v5/intro/cdn.mdx @@ -18,7 +18,7 @@ It's recommended to use [jsdelivr](https://www.jsdelivr.com/) to access the Fram ``` -With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic [Global Stylesheets](../layout/global-stylesheets). +With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic [Global Stylesheets](../layout/global-stylesheets.mdx). :::note This does not install Angular or any other frameworks. This allows use of the Ionic Framework core components without a framework. @@ -26,13 +26,13 @@ This does not install Angular or any other frameworks. This allows use of the Io ## Ionic + Angular -When using Ionic Framework in an Angular project, install the latest `@ionic/angular` package from [npm](../reference/glossary.md#npm). This comes with all of the Ionic Framework components and Angular specific services and features. +When using Ionic Framework in an Angular project, install the latest `@ionic/angular` package from [npm](../reference/glossary.mdx#npm). This comes with all of the Ionic Framework components and Angular specific services and features. ```shell npm install @ionic/angular@latest --save ``` -Each time there is a new Ionic Framework release, this [version](../reference/versioning.md) will need to be updated to get the latest features and fixes. The version can be [updated using npm](../developing/tips.md#updating-dependencies), as well. +Each time there is a new Ionic Framework release, this [version](../reference/versioning.mdx) will need to be updated to get the latest features and fixes. The version can be [updated using npm](../developing/tips.md#updating-dependencies), as well. For adding Ionic to an already existing Angular project, use the Angular CLI's `ng add` feature. diff --git a/versioned_docs/version-v5/intro/cli.md b/versioned_docs/version-v5/intro/cli.mdx similarity index 80% rename from versioned_docs/version-v5/intro/cli.md rename to versioned_docs/version-v5/intro/cli.mdx index ba08c4bfba9..d2229af39dd 100644 --- a/versioned_docs/version-v5/intro/cli.md +++ b/versioned_docs/version-v5/intro/cli.mdx @@ -6,13 +6,13 @@ import AppWizard from '@components/page/intro/AppWizard'; # Installing Ionic -Ionic apps are created and developed primarily through the Ionic [command-line](../reference/glossary.md#cli) utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way. It is also the main tool through which to run the app and connect it to other services, such as Appflow. +Ionic apps are created and developed primarily through the Ionic [command-line](../reference/glossary.mdx#cli) utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way. It is also the main tool through which to run the app and connect it to other services, such as Appflow. ## Install the Ionic CLI -Before proceeding, make sure your computer has [Node.js](../reference/glossary.md#node) installed. See [these instructions](environment.md) to set up an environment for Ionic. +Before proceeding, make sure your computer has [Node.js](../reference/glossary.mdx#node) installed. See [these instructions](environment.mdx) to set up an environment for Ionic. Install the Ionic CLI with npm: diff --git a/versioned_docs/version-v5/intro/environment.md b/versioned_docs/version-v5/intro/environment.mdx similarity index 87% rename from versioned_docs/version-v5/intro/environment.md rename to versioned_docs/version-v5/intro/environment.mdx index ac423003d8d..edee6038ff5 100644 --- a/versioned_docs/version-v5/intro/environment.md +++ b/versioned_docs/version-v5/intro/environment.mdx @@ -19,9 +19,9 @@ Git Bash (from git-scm.com) do ## Node & npm -Almost all tooling for modern JavaScript projects is based in [Node.js](../reference/glossary.md#node). The [download page](https://nodejs.org/en/download/) has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure best compatibility. +Almost all tooling for modern JavaScript projects is based in [Node.js](../reference/glossary.mdx#node). The [download page](https://nodejs.org/en/download/) has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure best compatibility. -Node is bundled with [npm](../reference/glossary.md#npm), the package manager for JavaScript. +Node is bundled with [npm](../reference/glossary.mdx#npm), the package manager for JavaScript. To verify the installation, open a new terminal window and run: @@ -36,7 +36,7 @@ Permission errors are common on macOS when installing global packages with `npm` ## Git -Although not required, the version control system [Git](../reference/glossary.md#git) is highly recommended. +Although not required, the version control system [Git](../reference/glossary.mdx#git) is highly recommended. Git is often accompanied by a Git Host, such as [GitHub](https://github.com/), in which case additional setup is required. Follow the tutorial from the Git Host's documentation to set up Git: diff --git a/versioned_docs/version-v5/intro/first-app.md b/versioned_docs/version-v5/intro/first-app.mdx similarity index 100% rename from versioned_docs/version-v5/intro/first-app.md rename to versioned_docs/version-v5/intro/first-app.mdx diff --git a/versioned_docs/version-v5/intro/next.md b/versioned_docs/version-v5/intro/next.mdx similarity index 100% rename from versioned_docs/version-v5/intro/next.md rename to versioned_docs/version-v5/intro/next.mdx diff --git a/versioned_docs/version-v5/layout/css-utilities.md b/versioned_docs/version-v5/layout/css-utilities.mdx similarity index 98% rename from versioned_docs/version-v5/layout/css-utilities.md rename to versioned_docs/version-v5/layout/css-utilities.mdx index c2dfe9934d4..2ae1cc0b5a6 100644 --- a/versioned_docs/version-v5/layout/css-utilities.md +++ b/versioned_docs/version-v5/layout/css-utilities.mdx @@ -7,7 +7,7 @@ title: CSS Utilities Ionic Framework provides a set of CSS utility classes that can be used on any element in order to modify the text, element placement or adjust the padding and margin. :::note -If your app was not started using an available Ionic Framework starter, the stylesheets listed in the [optional section of the global stylesheets](global-stylesheets.md#optional) will need to be included in order for these styles to work. +If your app was not started using an available Ionic Framework starter, the stylesheets listed in the [optional section of the global stylesheets](global-stylesheets.mdx#optional) will need to be included in order for these styles to work. ::: ## Text Modification @@ -207,7 +207,7 @@ There are also additional classes to modify the visibility based on the screen s The padding class sets the padding area of an element. The padding area is the space between the content of the element and its border. -The default amount of `padding` to be applied is `16px` and is set by the `--ion-padding` variable. See the [CSS Variables](../theming/css-variables.md) section for more information on how to change these values. +The default amount of `padding` to be applied is `16px` and is set by the `--ion-padding` variable. See the [CSS Variables](../theming/css-variables.mdx) section for more information on how to change these values. ```html @@ -257,7 +257,7 @@ The default amount of `padding` to be applied is `16px` and is set by the `--ion The margin area extends the border area with an empty area used to separate the element from its neighbors. -The default amount of `margin` to be applied is `16px` and is set by the `--ion-margin` variable. See the [CSS Variables](../theming/css-variables.md) section for more information on how to change these values. +The default amount of `margin` to be applied is `16px` and is set by the `--ion-margin` variable. See the [CSS Variables](../theming/css-variables.mdx) section for more information on how to change these values. ```html diff --git a/versioned_docs/version-v5/layout/global-stylesheets.md b/versioned_docs/version-v5/layout/global-stylesheets.mdx similarity index 79% rename from versioned_docs/version-v5/layout/global-stylesheets.md rename to versioned_docs/version-v5/layout/global-stylesheets.mdx index f02df1116c4..7c327fbe4be 100644 --- a/versioned_docs/version-v5/layout/global-stylesheets.md +++ b/versioned_docs/version-v5/layout/global-stylesheets.mdx @@ -38,28 +38,28 @@ The following set of CSS files are optional and can safely be commented out or r #### padding.css -Adds utility classes to modify the padding or margin on any element, see [CSS Utilities](css-utilities.md#content-space) for usage information. +Adds utility classes to modify the padding or margin on any element, see [CSS Utilities](css-utilities.mdx#content-space) for usage information. #### float-elements.css -Adds utility classes to float an element based on the breakpoint and side, see [CSS Utilities](css-utilities.md#element-placement) for usage information. +Adds utility classes to float an element based on the breakpoint and side, see [CSS Utilities](css-utilities.mdx#element-placement) for usage information. #### text-alignment.css -Adds utility classes to align the text of an element or adjust the white space based on the breakpoint, see [CSS Utilities](css-utilities.md#text-alignment) for usage information. +Adds utility classes to align the text of an element or adjust the white space based on the breakpoint, see [CSS Utilities](css-utilities.mdx#text-alignment) for usage information. #### text-transformation.css -Adds utility classes to transform the text of an element to `uppercase`, `lowercase` or `capitalize` based on the breakpoint, see [CSS Utilities](css-utilities.md#text-transformation) for usage information. +Adds utility classes to transform the text of an element to `uppercase`, `lowercase` or `capitalize` based on the breakpoint, see [CSS Utilities](css-utilities.mdx#text-transformation) for usage information. #### flex-utils.css -Adds utility classes to align flex containers and items, see [CSS Utilities](css-utilities.md#flex-properties) for usage information. +Adds utility classes to align flex containers and items, see [CSS Utilities](css-utilities.mdx#flex-properties) for usage information. #### display.css -Adds utility classes to hide any element based on the breakpoint, see [CSS Utilities](css-utilities.md#element-display) for usage information. +Adds utility classes to hide any element based on the breakpoint, see [CSS Utilities](css-utilities.mdx#element-display) for usage information. ## Usage -Refer to [Ionic Packages](../intro/cdn.md) for how to include the global stylesheets based on the framework and [CSS Utilities](css-utilities.md) for how to use the optional utilities. +Refer to [Ionic Packages](../intro/cdn.mdx) for how to include the global stylesheets based on the framework and [CSS Utilities](css-utilities.mdx) for how to use the optional utilities. diff --git a/versioned_docs/version-v5/layout/grid.md b/versioned_docs/version-v5/layout/grid.mdx similarity index 97% rename from versioned_docs/version-v5/layout/grid.md rename to versioned_docs/version-v5/layout/grid.mdx index fd049770977..b92360e6fd8 100644 --- a/versioned_docs/version-v5/layout/grid.md +++ b/versioned_docs/version-v5/layout/grid.mdx @@ -35,7 +35,7 @@ The grid is a powerful mobile-first flexbox system for building custom layouts. - Columns without a value for size will automatically have equal widths. For example, four instances of `size-sm` will each automatically be 25% wide for the small breakpoint and up. - Column widths are set as a percentage, so they’re always fluid and sized relative to their parent element. - Columns have padding between individual columns, however, the padding can be removed from the grid and - columns by adding the `ion-no-padding` class to the grid. See the [CSS Utilities](css-utilities.md) for more styles that can be applied to the grid. + columns by adding the `ion-no-padding` class to the grid. See the [CSS Utilities](css-utilities.mdx) for more styles that can be applied to the grid. - There are five grid tiers, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large. - Grid tiers are based on minimum widths, meaning they apply to their tier and all those larger than them (e.g., `size-sm="4"` applies to small, medium, large, and extra large devices). @@ -71,7 +71,7 @@ The grid takes up the entire width of the screen by default. This can be modifie ## Default breakpoints -The default breakpoints are defined in the table below. Breakpoints can not be customized at this time. For more information on why they can't be customized, see [Variables in Media Queries](../theming/advanced.md#variables-in-media-queries). +The default breakpoints are defined in the table below. Breakpoints can not be customized at this time. For more information on why they can't be customized, see [Variables in Media Queries](../theming/advanced.mdx#variables-in-media-queries). | Name | Value | Width Prefix | Offset Prefix | Push Prefix | Pull Prefix | Description | | ---- | ------ | ------------ | ------------- | ----------- | ----------- | ------------------------------------ | @@ -322,7 +322,7 @@ You can view a live example of this in Angular [here](https://stackblitz.com/edi ### Vertical alignment -All columns can be vertically aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](css-utilities.md#flex-container-properties). +All columns can be vertically aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](css-utilities.mdx#flex-container-properties). ```html @@ -373,7 +373,7 @@ All columns can be vertically aligned inside of a row by adding different classe ``` -Columns can also align themselves differently than other columns by adding the alignment class directly to the column. For a list of available classes, see [css utilities](css-utilities.md#flex-item-properties). +Columns can also align themselves differently than other columns by adding the alignment class directly to the column. For a list of available classes, see [css utilities](css-utilities.mdx#flex-item-properties). ```html @@ -400,7 +400,7 @@ You can view a live example of this in Angular [here](https://stackblitz.com/edi ### Horizontal alignment -All columns can be horizontally aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](css-utilities.md#flex-container-properties). +All columns can be horizontally aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](css-utilities.mdx#flex-container-properties). ```html diff --git a/versioned_docs/version-v5/layout/rtl.md b/versioned_docs/version-v5/layout/rtl.mdx similarity index 100% rename from versioned_docs/version-v5/layout/rtl.md rename to versioned_docs/version-v5/layout/rtl.mdx diff --git a/versioned_docs/version-v5/layout/structure.md b/versioned_docs/version-v5/layout/structure.mdx similarity index 100% rename from versioned_docs/version-v5/layout/structure.md rename to versioned_docs/version-v5/layout/structure.mdx diff --git a/versioned_docs/version-v5/native/abbyy-rtr.md b/versioned_docs/version-v5/native/abbyy-rtr.mdx similarity index 100% rename from versioned_docs/version-v5/native/abbyy-rtr.md rename to versioned_docs/version-v5/native/abbyy-rtr.mdx diff --git a/versioned_docs/version-v5/native/action-sheet.md b/versioned_docs/version-v5/native/action-sheet.mdx similarity index 100% rename from versioned_docs/version-v5/native/action-sheet.md rename to versioned_docs/version-v5/native/action-sheet.mdx diff --git a/versioned_docs/version-v5/native/adjust.md b/versioned_docs/version-v5/native/adjust.mdx similarity index 100% rename from versioned_docs/version-v5/native/adjust.md rename to versioned_docs/version-v5/native/adjust.mdx diff --git a/versioned_docs/version-v5/native/admob-plus.md b/versioned_docs/version-v5/native/admob-plus.mdx similarity index 100% rename from versioned_docs/version-v5/native/admob-plus.md rename to versioned_docs/version-v5/native/admob-plus.mdx diff --git a/versioned_docs/version-v5/native/admob.md b/versioned_docs/version-v5/native/admob.mdx similarity index 100% rename from versioned_docs/version-v5/native/admob.md rename to versioned_docs/version-v5/native/admob.mdx diff --git a/versioned_docs/version-v5/native/aes-256.md b/versioned_docs/version-v5/native/aes-256.mdx similarity index 100% rename from versioned_docs/version-v5/native/aes-256.md rename to versioned_docs/version-v5/native/aes-256.mdx diff --git a/versioned_docs/version-v5/native/all-in-one-sdk.md b/versioned_docs/version-v5/native/all-in-one-sdk.mdx similarity index 100% rename from versioned_docs/version-v5/native/all-in-one-sdk.md rename to versioned_docs/version-v5/native/all-in-one-sdk.mdx diff --git a/versioned_docs/version-v5/native/analytics-firebase.md b/versioned_docs/version-v5/native/analytics-firebase.mdx similarity index 100% rename from versioned_docs/version-v5/native/analytics-firebase.md rename to versioned_docs/version-v5/native/analytics-firebase.mdx diff --git a/versioned_docs/version-v5/native/android-exoplayer.md b/versioned_docs/version-v5/native/android-exoplayer.mdx similarity index 100% rename from versioned_docs/version-v5/native/android-exoplayer.md rename to versioned_docs/version-v5/native/android-exoplayer.mdx diff --git a/versioned_docs/version-v5/native/android-full-screen.md b/versioned_docs/version-v5/native/android-full-screen.mdx similarity index 100% rename from versioned_docs/version-v5/native/android-full-screen.md rename to versioned_docs/version-v5/native/android-full-screen.mdx diff --git a/versioned_docs/version-v5/native/android-notch.md b/versioned_docs/version-v5/native/android-notch.mdx similarity index 100% rename from versioned_docs/version-v5/native/android-notch.md rename to versioned_docs/version-v5/native/android-notch.mdx diff --git a/versioned_docs/version-v5/native/android-permissions.md b/versioned_docs/version-v5/native/android-permissions.mdx similarity index 100% rename from versioned_docs/version-v5/native/android-permissions.md rename to versioned_docs/version-v5/native/android-permissions.mdx diff --git a/versioned_docs/version-v5/native/anyline.md b/versioned_docs/version-v5/native/anyline.mdx similarity index 100% rename from versioned_docs/version-v5/native/anyline.md rename to versioned_docs/version-v5/native/anyline.mdx diff --git a/versioned_docs/version-v5/native/app-availability.md b/versioned_docs/version-v5/native/app-availability.mdx similarity index 100% rename from versioned_docs/version-v5/native/app-availability.md rename to versioned_docs/version-v5/native/app-availability.mdx diff --git a/versioned_docs/version-v5/native/app-center-analytics.md b/versioned_docs/version-v5/native/app-center-analytics.mdx similarity index 100% rename from versioned_docs/version-v5/native/app-center-analytics.md rename to versioned_docs/version-v5/native/app-center-analytics.mdx diff --git a/versioned_docs/version-v5/native/app-center-crashes.md b/versioned_docs/version-v5/native/app-center-crashes.mdx similarity index 100% rename from versioned_docs/version-v5/native/app-center-crashes.md rename to versioned_docs/version-v5/native/app-center-crashes.mdx diff --git a/versioned_docs/version-v5/native/app-center-push.md b/versioned_docs/version-v5/native/app-center-push.mdx similarity index 100% rename from versioned_docs/version-v5/native/app-center-push.md rename to versioned_docs/version-v5/native/app-center-push.mdx diff --git a/versioned_docs/version-v5/native/app-preferences.md b/versioned_docs/version-v5/native/app-preferences.mdx similarity index 100% rename from versioned_docs/version-v5/native/app-preferences.md rename to versioned_docs/version-v5/native/app-preferences.mdx diff --git a/versioned_docs/version-v5/native/app-rate.md b/versioned_docs/version-v5/native/app-rate.mdx similarity index 100% rename from versioned_docs/version-v5/native/app-rate.md rename to versioned_docs/version-v5/native/app-rate.mdx diff --git a/versioned_docs/version-v5/native/app-version.md b/versioned_docs/version-v5/native/app-version.mdx similarity index 100% rename from versioned_docs/version-v5/native/app-version.md rename to versioned_docs/version-v5/native/app-version.mdx diff --git a/versioned_docs/version-v5/native/apple-wallet.md b/versioned_docs/version-v5/native/apple-wallet.mdx similarity index 100% rename from versioned_docs/version-v5/native/apple-wallet.md rename to versioned_docs/version-v5/native/apple-wallet.mdx diff --git a/versioned_docs/version-v5/native/appsflyer.md b/versioned_docs/version-v5/native/appsflyer.mdx similarity index 100% rename from versioned_docs/version-v5/native/appsflyer.md rename to versioned_docs/version-v5/native/appsflyer.mdx diff --git a/versioned_docs/version-v5/native/background-fetch.md b/versioned_docs/version-v5/native/background-fetch.mdx similarity index 100% rename from versioned_docs/version-v5/native/background-fetch.md rename to versioned_docs/version-v5/native/background-fetch.mdx diff --git a/versioned_docs/version-v5/native/background-geolocation.md b/versioned_docs/version-v5/native/background-geolocation.mdx similarity index 100% rename from versioned_docs/version-v5/native/background-geolocation.md rename to versioned_docs/version-v5/native/background-geolocation.mdx diff --git a/versioned_docs/version-v5/native/background-mode.md b/versioned_docs/version-v5/native/background-mode.mdx similarity index 100% rename from versioned_docs/version-v5/native/background-mode.md rename to versioned_docs/version-v5/native/background-mode.mdx diff --git a/versioned_docs/version-v5/native/background-upload.md b/versioned_docs/version-v5/native/background-upload.mdx similarity index 100% rename from versioned_docs/version-v5/native/background-upload.md rename to versioned_docs/version-v5/native/background-upload.mdx diff --git a/versioned_docs/version-v5/native/badge.md b/versioned_docs/version-v5/native/badge.mdx similarity index 100% rename from versioned_docs/version-v5/native/badge.md rename to versioned_docs/version-v5/native/badge.mdx diff --git a/versioned_docs/version-v5/native/barcode-scanner.md b/versioned_docs/version-v5/native/barcode-scanner.mdx similarity index 100% rename from versioned_docs/version-v5/native/barcode-scanner.md rename to versioned_docs/version-v5/native/barcode-scanner.mdx diff --git a/versioned_docs/version-v5/native/battery-status.md b/versioned_docs/version-v5/native/battery-status.mdx similarity index 100% rename from versioned_docs/version-v5/native/battery-status.md rename to versioned_docs/version-v5/native/battery-status.mdx diff --git a/versioned_docs/version-v5/native/biocatch.md b/versioned_docs/version-v5/native/biocatch.mdx similarity index 100% rename from versioned_docs/version-v5/native/biocatch.md rename to versioned_docs/version-v5/native/biocatch.mdx diff --git a/versioned_docs/version-v5/native/biometric-wrapper.md b/versioned_docs/version-v5/native/biometric-wrapper.mdx similarity index 100% rename from versioned_docs/version-v5/native/biometric-wrapper.md rename to versioned_docs/version-v5/native/biometric-wrapper.mdx diff --git a/versioned_docs/version-v5/native/ble.md b/versioned_docs/version-v5/native/ble.mdx similarity index 100% rename from versioned_docs/version-v5/native/ble.md rename to versioned_docs/version-v5/native/ble.mdx diff --git a/versioned_docs/version-v5/native/blinkid.md b/versioned_docs/version-v5/native/blinkid.mdx similarity index 100% rename from versioned_docs/version-v5/native/blinkid.md rename to versioned_docs/version-v5/native/blinkid.mdx diff --git a/versioned_docs/version-v5/native/bluetooth-le.md b/versioned_docs/version-v5/native/bluetooth-le.mdx similarity index 100% rename from versioned_docs/version-v5/native/bluetooth-le.md rename to versioned_docs/version-v5/native/bluetooth-le.mdx diff --git a/versioned_docs/version-v5/native/bluetooth-serial.md b/versioned_docs/version-v5/native/bluetooth-serial.mdx similarity index 100% rename from versioned_docs/version-v5/native/bluetooth-serial.md rename to versioned_docs/version-v5/native/bluetooth-serial.mdx diff --git a/versioned_docs/version-v5/native/branch-io.md b/versioned_docs/version-v5/native/branch-io.mdx similarity index 100% rename from versioned_docs/version-v5/native/branch-io.md rename to versioned_docs/version-v5/native/branch-io.mdx diff --git a/versioned_docs/version-v5/native/broadcaster.md b/versioned_docs/version-v5/native/broadcaster.mdx similarity index 100% rename from versioned_docs/version-v5/native/broadcaster.md rename to versioned_docs/version-v5/native/broadcaster.mdx diff --git a/versioned_docs/version-v5/native/build-info.md b/versioned_docs/version-v5/native/build-info.mdx similarity index 100% rename from versioned_docs/version-v5/native/build-info.md rename to versioned_docs/version-v5/native/build-info.mdx diff --git a/versioned_docs/version-v5/native/calendar.md b/versioned_docs/version-v5/native/calendar.mdx similarity index 100% rename from versioned_docs/version-v5/native/calendar.md rename to versioned_docs/version-v5/native/calendar.mdx diff --git a/versioned_docs/version-v5/native/call-directory.md b/versioned_docs/version-v5/native/call-directory.mdx similarity index 100% rename from versioned_docs/version-v5/native/call-directory.md rename to versioned_docs/version-v5/native/call-directory.mdx diff --git a/versioned_docs/version-v5/native/call-number.md b/versioned_docs/version-v5/native/call-number.mdx similarity index 100% rename from versioned_docs/version-v5/native/call-number.md rename to versioned_docs/version-v5/native/call-number.mdx diff --git a/versioned_docs/version-v5/native/camera-preview.md b/versioned_docs/version-v5/native/camera-preview.mdx similarity index 100% rename from versioned_docs/version-v5/native/camera-preview.md rename to versioned_docs/version-v5/native/camera-preview.mdx diff --git a/versioned_docs/version-v5/native/camera.md b/versioned_docs/version-v5/native/camera.mdx similarity index 100% rename from versioned_docs/version-v5/native/camera.md rename to versioned_docs/version-v5/native/camera.mdx diff --git a/versioned_docs/version-v5/native/chooser.md b/versioned_docs/version-v5/native/chooser.mdx similarity index 100% rename from versioned_docs/version-v5/native/chooser.md rename to versioned_docs/version-v5/native/chooser.mdx diff --git a/versioned_docs/version-v5/native/clevertap.md b/versioned_docs/version-v5/native/clevertap.mdx similarity index 100% rename from versioned_docs/version-v5/native/clevertap.md rename to versioned_docs/version-v5/native/clevertap.mdx diff --git a/versioned_docs/version-v5/native/clipboard.md b/versioned_docs/version-v5/native/clipboard.mdx similarity index 100% rename from versioned_docs/version-v5/native/clipboard.md rename to versioned_docs/version-v5/native/clipboard.mdx diff --git a/versioned_docs/version-v5/native/cloud-settings.md b/versioned_docs/version-v5/native/cloud-settings.mdx similarity index 100% rename from versioned_docs/version-v5/native/cloud-settings.md rename to versioned_docs/version-v5/native/cloud-settings.mdx diff --git a/versioned_docs/version-v5/native/code-push.md b/versioned_docs/version-v5/native/code-push.mdx similarity index 100% rename from versioned_docs/version-v5/native/code-push.md rename to versioned_docs/version-v5/native/code-push.mdx diff --git a/versioned_docs/version-v5/native/custom-uisdk.md b/versioned_docs/version-v5/native/custom-uisdk.mdx similarity index 100% rename from versioned_docs/version-v5/native/custom-uisdk.md rename to versioned_docs/version-v5/native/custom-uisdk.mdx diff --git a/versioned_docs/version-v5/native/deeplinks.md b/versioned_docs/version-v5/native/deeplinks.mdx similarity index 100% rename from versioned_docs/version-v5/native/deeplinks.md rename to versioned_docs/version-v5/native/deeplinks.mdx diff --git a/versioned_docs/version-v5/native/device-accounts.md b/versioned_docs/version-v5/native/device-accounts.mdx similarity index 100% rename from versioned_docs/version-v5/native/device-accounts.md rename to versioned_docs/version-v5/native/device-accounts.mdx diff --git a/versioned_docs/version-v5/native/device-motion.md b/versioned_docs/version-v5/native/device-motion.mdx similarity index 100% rename from versioned_docs/version-v5/native/device-motion.md rename to versioned_docs/version-v5/native/device-motion.mdx diff --git a/versioned_docs/version-v5/native/device-orientation.md b/versioned_docs/version-v5/native/device-orientation.mdx similarity index 100% rename from versioned_docs/version-v5/native/device-orientation.md rename to versioned_docs/version-v5/native/device-orientation.mdx diff --git a/versioned_docs/version-v5/native/device.md b/versioned_docs/version-v5/native/device.mdx similarity index 100% rename from versioned_docs/version-v5/native/device.md rename to versioned_docs/version-v5/native/device.mdx diff --git a/versioned_docs/version-v5/native/dfu-update.md b/versioned_docs/version-v5/native/dfu-update.mdx similarity index 100% rename from versioned_docs/version-v5/native/dfu-update.md rename to versioned_docs/version-v5/native/dfu-update.mdx diff --git a/versioned_docs/version-v5/native/diagnostic.md b/versioned_docs/version-v5/native/diagnostic.mdx similarity index 100% rename from versioned_docs/version-v5/native/diagnostic.md rename to versioned_docs/version-v5/native/diagnostic.mdx diff --git a/versioned_docs/version-v5/native/dialogs.md b/versioned_docs/version-v5/native/dialogs.mdx similarity index 100% rename from versioned_docs/version-v5/native/dialogs.md rename to versioned_docs/version-v5/native/dialogs.mdx diff --git a/versioned_docs/version-v5/native/dns.md b/versioned_docs/version-v5/native/dns.mdx similarity index 100% rename from versioned_docs/version-v5/native/dns.md rename to versioned_docs/version-v5/native/dns.mdx diff --git a/versioned_docs/version-v5/native/document-picker.md b/versioned_docs/version-v5/native/document-picker.mdx similarity index 100% rename from versioned_docs/version-v5/native/document-picker.md rename to versioned_docs/version-v5/native/document-picker.mdx diff --git a/versioned_docs/version-v5/native/document-scanner.md b/versioned_docs/version-v5/native/document-scanner.mdx similarity index 100% rename from versioned_docs/version-v5/native/document-scanner.md rename to versioned_docs/version-v5/native/document-scanner.mdx diff --git a/versioned_docs/version-v5/native/document-viewer.md b/versioned_docs/version-v5/native/document-viewer.mdx similarity index 100% rename from versioned_docs/version-v5/native/document-viewer.md rename to versioned_docs/version-v5/native/document-viewer.mdx diff --git a/versioned_docs/version-v5/native/email-composer.md b/versioned_docs/version-v5/native/email-composer.mdx similarity index 100% rename from versioned_docs/version-v5/native/email-composer.md rename to versioned_docs/version-v5/native/email-composer.mdx diff --git a/versioned_docs/version-v5/native/fabric.md b/versioned_docs/version-v5/native/fabric.mdx similarity index 100% rename from versioned_docs/version-v5/native/fabric.md rename to versioned_docs/version-v5/native/fabric.mdx diff --git a/versioned_docs/version-v5/native/facebook.md b/versioned_docs/version-v5/native/facebook.mdx similarity index 100% rename from versioned_docs/version-v5/native/facebook.md rename to versioned_docs/version-v5/native/facebook.mdx diff --git a/versioned_docs/version-v5/native/fcm.md b/versioned_docs/version-v5/native/fcm.mdx similarity index 100% rename from versioned_docs/version-v5/native/fcm.md rename to versioned_docs/version-v5/native/fcm.mdx diff --git a/versioned_docs/version-v5/native/file-opener.md b/versioned_docs/version-v5/native/file-opener.mdx similarity index 100% rename from versioned_docs/version-v5/native/file-opener.md rename to versioned_docs/version-v5/native/file-opener.mdx diff --git a/versioned_docs/version-v5/native/file-path.md b/versioned_docs/version-v5/native/file-path.mdx similarity index 100% rename from versioned_docs/version-v5/native/file-path.md rename to versioned_docs/version-v5/native/file-path.mdx diff --git a/versioned_docs/version-v5/native/file-transfer.md b/versioned_docs/version-v5/native/file-transfer.mdx similarity index 100% rename from versioned_docs/version-v5/native/file-transfer.md rename to versioned_docs/version-v5/native/file-transfer.mdx diff --git a/versioned_docs/version-v5/native/file.md b/versioned_docs/version-v5/native/file.mdx similarity index 100% rename from versioned_docs/version-v5/native/file.md rename to versioned_docs/version-v5/native/file.mdx diff --git a/versioned_docs/version-v5/native/firebase-analytics.md b/versioned_docs/version-v5/native/firebase-analytics.mdx similarity index 100% rename from versioned_docs/version-v5/native/firebase-analytics.md rename to versioned_docs/version-v5/native/firebase-analytics.mdx diff --git a/versioned_docs/version-v5/native/firebase-authentication.md b/versioned_docs/version-v5/native/firebase-authentication.mdx similarity index 100% rename from versioned_docs/version-v5/native/firebase-authentication.md rename to versioned_docs/version-v5/native/firebase-authentication.mdx diff --git a/versioned_docs/version-v5/native/firebase-config.md b/versioned_docs/version-v5/native/firebase-config.mdx similarity index 100% rename from versioned_docs/version-v5/native/firebase-config.md rename to versioned_docs/version-v5/native/firebase-config.mdx diff --git a/versioned_docs/version-v5/native/firebase-crash.md b/versioned_docs/version-v5/native/firebase-crash.mdx similarity index 100% rename from versioned_docs/version-v5/native/firebase-crash.md rename to versioned_docs/version-v5/native/firebase-crash.mdx diff --git a/versioned_docs/version-v5/native/firebase-crashlytics.md b/versioned_docs/version-v5/native/firebase-crashlytics.mdx similarity index 100% rename from versioned_docs/version-v5/native/firebase-crashlytics.md rename to versioned_docs/version-v5/native/firebase-crashlytics.mdx diff --git a/versioned_docs/version-v5/native/firebase-dynamic-links.md b/versioned_docs/version-v5/native/firebase-dynamic-links.mdx similarity index 100% rename from versioned_docs/version-v5/native/firebase-dynamic-links.md rename to versioned_docs/version-v5/native/firebase-dynamic-links.mdx diff --git a/versioned_docs/version-v5/native/firebase-messaging.md b/versioned_docs/version-v5/native/firebase-messaging.mdx similarity index 100% rename from versioned_docs/version-v5/native/firebase-messaging.md rename to versioned_docs/version-v5/native/firebase-messaging.mdx diff --git a/versioned_docs/version-v5/native/firebase-vision.md b/versioned_docs/version-v5/native/firebase-vision.mdx similarity index 100% rename from versioned_docs/version-v5/native/firebase-vision.md rename to versioned_docs/version-v5/native/firebase-vision.mdx diff --git a/versioned_docs/version-v5/native/firebase-x.md b/versioned_docs/version-v5/native/firebase-x.mdx similarity index 100% rename from versioned_docs/version-v5/native/firebase-x.md rename to versioned_docs/version-v5/native/firebase-x.mdx diff --git a/versioned_docs/version-v5/native/firebase.md b/versioned_docs/version-v5/native/firebase.mdx similarity index 100% rename from versioned_docs/version-v5/native/firebase.md rename to versioned_docs/version-v5/native/firebase.mdx diff --git a/versioned_docs/version-v5/native/flashlight.md b/versioned_docs/version-v5/native/flashlight.mdx similarity index 100% rename from versioned_docs/version-v5/native/flashlight.md rename to versioned_docs/version-v5/native/flashlight.mdx diff --git a/versioned_docs/version-v5/native/foreground-service.md b/versioned_docs/version-v5/native/foreground-service.mdx similarity index 100% rename from versioned_docs/version-v5/native/foreground-service.md rename to versioned_docs/version-v5/native/foreground-service.mdx diff --git a/versioned_docs/version-v5/native/ftp.md b/versioned_docs/version-v5/native/ftp.mdx similarity index 100% rename from versioned_docs/version-v5/native/ftp.md rename to versioned_docs/version-v5/native/ftp.mdx diff --git a/versioned_docs/version-v5/native/gao-de-location.md b/versioned_docs/version-v5/native/gao-de-location.mdx similarity index 100% rename from versioned_docs/version-v5/native/gao-de-location.md rename to versioned_docs/version-v5/native/gao-de-location.mdx diff --git a/versioned_docs/version-v5/native/ge-tui-sdk-plugin.md b/versioned_docs/version-v5/native/ge-tui-sdk-plugin.mdx similarity index 100% rename from versioned_docs/version-v5/native/ge-tui-sdk-plugin.md rename to versioned_docs/version-v5/native/ge-tui-sdk-plugin.mdx diff --git a/versioned_docs/version-v5/native/geolocation.md b/versioned_docs/version-v5/native/geolocation.mdx similarity index 100% rename from versioned_docs/version-v5/native/geolocation.md rename to versioned_docs/version-v5/native/geolocation.mdx diff --git a/versioned_docs/version-v5/native/globalization.md b/versioned_docs/version-v5/native/globalization.mdx similarity index 100% rename from versioned_docs/version-v5/native/globalization.md rename to versioned_docs/version-v5/native/globalization.mdx diff --git a/versioned_docs/version-v5/native/google-analytics.md b/versioned_docs/version-v5/native/google-analytics.mdx similarity index 100% rename from versioned_docs/version-v5/native/google-analytics.md rename to versioned_docs/version-v5/native/google-analytics.mdx diff --git a/versioned_docs/version-v5/native/google-nearby.md b/versioned_docs/version-v5/native/google-nearby.mdx similarity index 100% rename from versioned_docs/version-v5/native/google-nearby.md rename to versioned_docs/version-v5/native/google-nearby.mdx diff --git a/versioned_docs/version-v5/native/google-plus.md b/versioned_docs/version-v5/native/google-plus.mdx similarity index 100% rename from versioned_docs/version-v5/native/google-plus.md rename to versioned_docs/version-v5/native/google-plus.mdx diff --git a/versioned_docs/version-v5/native/health-kit.md b/versioned_docs/version-v5/native/health-kit.mdx similarity index 100% rename from versioned_docs/version-v5/native/health-kit.md rename to versioned_docs/version-v5/native/health-kit.mdx diff --git a/versioned_docs/version-v5/native/health.md b/versioned_docs/version-v5/native/health.mdx similarity index 100% rename from versioned_docs/version-v5/native/health.md rename to versioned_docs/version-v5/native/health.mdx diff --git a/versioned_docs/version-v5/native/http.md b/versioned_docs/version-v5/native/http.mdx similarity index 100% rename from versioned_docs/version-v5/native/http.md rename to versioned_docs/version-v5/native/http.mdx diff --git a/versioned_docs/version-v5/native/iamport-cordova.md b/versioned_docs/version-v5/native/iamport-cordova.mdx similarity index 100% rename from versioned_docs/version-v5/native/iamport-cordova.md rename to versioned_docs/version-v5/native/iamport-cordova.mdx diff --git a/versioned_docs/version-v5/native/ibeacon.md b/versioned_docs/version-v5/native/ibeacon.mdx similarity index 100% rename from versioned_docs/version-v5/native/ibeacon.md rename to versioned_docs/version-v5/native/ibeacon.mdx diff --git a/versioned_docs/version-v5/native/image-picker.md b/versioned_docs/version-v5/native/image-picker.mdx similarity index 100% rename from versioned_docs/version-v5/native/image-picker.md rename to versioned_docs/version-v5/native/image-picker.mdx diff --git a/versioned_docs/version-v5/native/imap.md b/versioned_docs/version-v5/native/imap.mdx similarity index 100% rename from versioned_docs/version-v5/native/imap.md rename to versioned_docs/version-v5/native/imap.mdx diff --git a/versioned_docs/version-v5/native/in-app-browser.md b/versioned_docs/version-v5/native/in-app-browser.mdx similarity index 100% rename from versioned_docs/version-v5/native/in-app-browser.md rename to versioned_docs/version-v5/native/in-app-browser.mdx diff --git a/versioned_docs/version-v5/native/in-app-purchase-2.md b/versioned_docs/version-v5/native/in-app-purchase-2.mdx similarity index 100% rename from versioned_docs/version-v5/native/in-app-purchase-2.md rename to versioned_docs/version-v5/native/in-app-purchase-2.mdx diff --git a/versioned_docs/version-v5/native/in-app-review.md b/versioned_docs/version-v5/native/in-app-review.mdx similarity index 100% rename from versioned_docs/version-v5/native/in-app-review.md rename to versioned_docs/version-v5/native/in-app-review.mdx diff --git a/versioned_docs/version-v5/native/insomnia.md b/versioned_docs/version-v5/native/insomnia.mdx similarity index 100% rename from versioned_docs/version-v5/native/insomnia.md rename to versioned_docs/version-v5/native/insomnia.mdx diff --git a/versioned_docs/version-v5/native/instagram.md b/versioned_docs/version-v5/native/instagram.mdx similarity index 100% rename from versioned_docs/version-v5/native/instagram.md rename to versioned_docs/version-v5/native/instagram.mdx diff --git a/versioned_docs/version-v5/native/intercom.md b/versioned_docs/version-v5/native/intercom.mdx similarity index 100% rename from versioned_docs/version-v5/native/intercom.md rename to versioned_docs/version-v5/native/intercom.mdx diff --git a/versioned_docs/version-v5/native/ionic-webview.md b/versioned_docs/version-v5/native/ionic-webview.mdx similarity index 100% rename from versioned_docs/version-v5/native/ionic-webview.md rename to versioned_docs/version-v5/native/ionic-webview.mdx diff --git a/versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.md b/versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.mdx similarity index 100% rename from versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.md rename to versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.mdx diff --git a/versioned_docs/version-v5/native/is-debug.md b/versioned_docs/version-v5/native/is-debug.mdx similarity index 100% rename from versioned_docs/version-v5/native/is-debug.md rename to versioned_docs/version-v5/native/is-debug.mdx diff --git a/versioned_docs/version-v5/native/keyboard.md b/versioned_docs/version-v5/native/keyboard.mdx similarity index 100% rename from versioned_docs/version-v5/native/keyboard.md rename to versioned_docs/version-v5/native/keyboard.mdx diff --git a/versioned_docs/version-v5/native/keychain.md b/versioned_docs/version-v5/native/keychain.mdx similarity index 100% rename from versioned_docs/version-v5/native/keychain.md rename to versioned_docs/version-v5/native/keychain.mdx diff --git a/versioned_docs/version-v5/native/kommunicate.md b/versioned_docs/version-v5/native/kommunicate.mdx similarity index 100% rename from versioned_docs/version-v5/native/kommunicate.md rename to versioned_docs/version-v5/native/kommunicate.mdx diff --git a/versioned_docs/version-v5/native/launch-navigator.md b/versioned_docs/version-v5/native/launch-navigator.mdx similarity index 100% rename from versioned_docs/version-v5/native/launch-navigator.md rename to versioned_docs/version-v5/native/launch-navigator.mdx diff --git a/versioned_docs/version-v5/native/launch-review.md b/versioned_docs/version-v5/native/launch-review.mdx similarity index 100% rename from versioned_docs/version-v5/native/launch-review.md rename to versioned_docs/version-v5/native/launch-review.mdx diff --git a/versioned_docs/version-v5/native/line-login.md b/versioned_docs/version-v5/native/line-login.mdx similarity index 100% rename from versioned_docs/version-v5/native/line-login.md rename to versioned_docs/version-v5/native/line-login.mdx diff --git a/versioned_docs/version-v5/native/local-notifications.md b/versioned_docs/version-v5/native/local-notifications.mdx similarity index 100% rename from versioned_docs/version-v5/native/local-notifications.md rename to versioned_docs/version-v5/native/local-notifications.mdx diff --git a/versioned_docs/version-v5/native/location-accuracy.md b/versioned_docs/version-v5/native/location-accuracy.mdx similarity index 100% rename from versioned_docs/version-v5/native/location-accuracy.md rename to versioned_docs/version-v5/native/location-accuracy.mdx diff --git a/versioned_docs/version-v5/native/lottie-splash-screen.md b/versioned_docs/version-v5/native/lottie-splash-screen.mdx similarity index 100% rename from versioned_docs/version-v5/native/lottie-splash-screen.md rename to versioned_docs/version-v5/native/lottie-splash-screen.mdx diff --git a/versioned_docs/version-v5/native/media-capture.md b/versioned_docs/version-v5/native/media-capture.mdx similarity index 100% rename from versioned_docs/version-v5/native/media-capture.md rename to versioned_docs/version-v5/native/media-capture.mdx diff --git a/versioned_docs/version-v5/native/media.md b/versioned_docs/version-v5/native/media.mdx similarity index 100% rename from versioned_docs/version-v5/native/media.md rename to versioned_docs/version-v5/native/media.mdx diff --git a/versioned_docs/version-v5/native/metrix.md b/versioned_docs/version-v5/native/metrix.mdx similarity index 100% rename from versioned_docs/version-v5/native/metrix.md rename to versioned_docs/version-v5/native/metrix.mdx diff --git a/versioned_docs/version-v5/native/mixpanel.md b/versioned_docs/version-v5/native/mixpanel.mdx similarity index 100% rename from versioned_docs/version-v5/native/mixpanel.md rename to versioned_docs/version-v5/native/mixpanel.mdx diff --git a/versioned_docs/version-v5/native/mlkit-translate.md b/versioned_docs/version-v5/native/mlkit-translate.mdx similarity index 100% rename from versioned_docs/version-v5/native/mlkit-translate.md rename to versioned_docs/version-v5/native/mlkit-translate.mdx diff --git a/versioned_docs/version-v5/native/mobile-messaging.md b/versioned_docs/version-v5/native/mobile-messaging.mdx similarity index 100% rename from versioned_docs/version-v5/native/mobile-messaging.md rename to versioned_docs/version-v5/native/mobile-messaging.mdx diff --git a/versioned_docs/version-v5/native/multiple-document-picker.md b/versioned_docs/version-v5/native/multiple-document-picker.mdx similarity index 100% rename from versioned_docs/version-v5/native/multiple-document-picker.md rename to versioned_docs/version-v5/native/multiple-document-picker.mdx diff --git a/versioned_docs/version-v5/native/music-controls.md b/versioned_docs/version-v5/native/music-controls.mdx similarity index 100% rename from versioned_docs/version-v5/native/music-controls.md rename to versioned_docs/version-v5/native/music-controls.mdx diff --git a/versioned_docs/version-v5/native/native-audio.md b/versioned_docs/version-v5/native/native-audio.mdx similarity index 100% rename from versioned_docs/version-v5/native/native-audio.md rename to versioned_docs/version-v5/native/native-audio.mdx diff --git a/versioned_docs/version-v5/native/native-geocoder.md b/versioned_docs/version-v5/native/native-geocoder.mdx similarity index 100% rename from versioned_docs/version-v5/native/native-geocoder.md rename to versioned_docs/version-v5/native/native-geocoder.mdx diff --git a/versioned_docs/version-v5/native/native-keyboard.md b/versioned_docs/version-v5/native/native-keyboard.mdx similarity index 100% rename from versioned_docs/version-v5/native/native-keyboard.md rename to versioned_docs/version-v5/native/native-keyboard.mdx diff --git a/versioned_docs/version-v5/native/native-page-transitions.md b/versioned_docs/version-v5/native/native-page-transitions.mdx similarity index 100% rename from versioned_docs/version-v5/native/native-page-transitions.md rename to versioned_docs/version-v5/native/native-page-transitions.mdx diff --git a/versioned_docs/version-v5/native/native-storage.md b/versioned_docs/version-v5/native/native-storage.mdx similarity index 100% rename from versioned_docs/version-v5/native/native-storage.md rename to versioned_docs/version-v5/native/native-storage.mdx diff --git a/versioned_docs/version-v5/native/network-interface.md b/versioned_docs/version-v5/native/network-interface.mdx similarity index 100% rename from versioned_docs/version-v5/native/network-interface.md rename to versioned_docs/version-v5/native/network-interface.mdx diff --git a/versioned_docs/version-v5/native/network.md b/versioned_docs/version-v5/native/network.mdx similarity index 100% rename from versioned_docs/version-v5/native/network.md rename to versioned_docs/version-v5/native/network.mdx diff --git a/versioned_docs/version-v5/native/nfc.md b/versioned_docs/version-v5/native/nfc.mdx similarity index 100% rename from versioned_docs/version-v5/native/nfc.md rename to versioned_docs/version-v5/native/nfc.mdx diff --git a/versioned_docs/version-v5/native/ocr.md b/versioned_docs/version-v5/native/ocr.mdx similarity index 100% rename from versioned_docs/version-v5/native/ocr.md rename to versioned_docs/version-v5/native/ocr.mdx diff --git a/versioned_docs/version-v5/native/onesignal.md b/versioned_docs/version-v5/native/onesignal.mdx similarity index 100% rename from versioned_docs/version-v5/native/onesignal.md rename to versioned_docs/version-v5/native/onesignal.mdx diff --git a/versioned_docs/version-v5/native/open-native-settings.md b/versioned_docs/version-v5/native/open-native-settings.mdx similarity index 100% rename from versioned_docs/version-v5/native/open-native-settings.md rename to versioned_docs/version-v5/native/open-native-settings.mdx diff --git a/versioned_docs/version-v5/native/openalpr.md b/versioned_docs/version-v5/native/openalpr.mdx similarity index 100% rename from versioned_docs/version-v5/native/openalpr.md rename to versioned_docs/version-v5/native/openalpr.mdx diff --git a/versioned_docs/version-v5/native/pdf-generator.md b/versioned_docs/version-v5/native/pdf-generator.mdx similarity index 100% rename from versioned_docs/version-v5/native/pdf-generator.md rename to versioned_docs/version-v5/native/pdf-generator.mdx diff --git a/versioned_docs/version-v5/native/photo-library.md b/versioned_docs/version-v5/native/photo-library.mdx similarity index 100% rename from versioned_docs/version-v5/native/photo-library.md rename to versioned_docs/version-v5/native/photo-library.mdx diff --git a/versioned_docs/version-v5/native/photo-viewer.md b/versioned_docs/version-v5/native/photo-viewer.mdx similarity index 100% rename from versioned_docs/version-v5/native/photo-viewer.md rename to versioned_docs/version-v5/native/photo-viewer.mdx diff --git a/versioned_docs/version-v5/native/printer.md b/versioned_docs/version-v5/native/printer.mdx similarity index 100% rename from versioned_docs/version-v5/native/printer.md rename to versioned_docs/version-v5/native/printer.mdx diff --git a/versioned_docs/version-v5/native/pspdfkit-cordova.md b/versioned_docs/version-v5/native/pspdfkit-cordova.mdx similarity index 100% rename from versioned_docs/version-v5/native/pspdfkit-cordova.md rename to versioned_docs/version-v5/native/pspdfkit-cordova.mdx diff --git a/versioned_docs/version-v5/native/purchases.md b/versioned_docs/version-v5/native/purchases.mdx similarity index 100% rename from versioned_docs/version-v5/native/purchases.md rename to versioned_docs/version-v5/native/purchases.mdx diff --git a/versioned_docs/version-v5/native/push.md b/versioned_docs/version-v5/native/push.mdx similarity index 100% rename from versioned_docs/version-v5/native/push.md rename to versioned_docs/version-v5/native/push.mdx diff --git a/versioned_docs/version-v5/native/pushape-push.md b/versioned_docs/version-v5/native/pushape-push.mdx similarity index 100% rename from versioned_docs/version-v5/native/pushape-push.md rename to versioned_docs/version-v5/native/pushape-push.mdx diff --git a/versioned_docs/version-v5/native/safari-view-controller.md b/versioned_docs/version-v5/native/safari-view-controller.mdx similarity index 100% rename from versioned_docs/version-v5/native/safari-view-controller.md rename to versioned_docs/version-v5/native/safari-view-controller.mdx diff --git a/versioned_docs/version-v5/native/screen-orientation.md b/versioned_docs/version-v5/native/screen-orientation.mdx similarity index 100% rename from versioned_docs/version-v5/native/screen-orientation.md rename to versioned_docs/version-v5/native/screen-orientation.mdx diff --git a/versioned_docs/version-v5/native/service-discovery.md b/versioned_docs/version-v5/native/service-discovery.mdx similarity index 100% rename from versioned_docs/version-v5/native/service-discovery.md rename to versioned_docs/version-v5/native/service-discovery.mdx diff --git a/versioned_docs/version-v5/native/shake.md b/versioned_docs/version-v5/native/shake.mdx similarity index 100% rename from versioned_docs/version-v5/native/shake.md rename to versioned_docs/version-v5/native/shake.mdx diff --git a/versioned_docs/version-v5/native/sign-in-with-apple.md b/versioned_docs/version-v5/native/sign-in-with-apple.mdx similarity index 100% rename from versioned_docs/version-v5/native/sign-in-with-apple.md rename to versioned_docs/version-v5/native/sign-in-with-apple.mdx diff --git a/versioned_docs/version-v5/native/smartlook.md b/versioned_docs/version-v5/native/smartlook.mdx similarity index 100% rename from versioned_docs/version-v5/native/smartlook.md rename to versioned_docs/version-v5/native/smartlook.mdx diff --git a/versioned_docs/version-v5/native/sms-retriever.md b/versioned_docs/version-v5/native/sms-retriever.mdx similarity index 100% rename from versioned_docs/version-v5/native/sms-retriever.md rename to versioned_docs/version-v5/native/sms-retriever.mdx diff --git a/versioned_docs/version-v5/native/sms.md b/versioned_docs/version-v5/native/sms.mdx similarity index 100% rename from versioned_docs/version-v5/native/sms.md rename to versioned_docs/version-v5/native/sms.mdx diff --git a/versioned_docs/version-v5/native/social-sharing.md b/versioned_docs/version-v5/native/social-sharing.mdx similarity index 100% rename from versioned_docs/version-v5/native/social-sharing.md rename to versioned_docs/version-v5/native/social-sharing.mdx diff --git a/versioned_docs/version-v5/native/speech-recognition.md b/versioned_docs/version-v5/native/speech-recognition.mdx similarity index 100% rename from versioned_docs/version-v5/native/speech-recognition.md rename to versioned_docs/version-v5/native/speech-recognition.mdx diff --git a/versioned_docs/version-v5/native/spinner-dialog.md b/versioned_docs/version-v5/native/spinner-dialog.mdx similarity index 100% rename from versioned_docs/version-v5/native/spinner-dialog.md rename to versioned_docs/version-v5/native/spinner-dialog.mdx diff --git a/versioned_docs/version-v5/native/splash-screen.md b/versioned_docs/version-v5/native/splash-screen.mdx similarity index 100% rename from versioned_docs/version-v5/native/splash-screen.md rename to versioned_docs/version-v5/native/splash-screen.mdx diff --git a/versioned_docs/version-v5/native/spotify-auth.md b/versioned_docs/version-v5/native/spotify-auth.mdx similarity index 100% rename from versioned_docs/version-v5/native/spotify-auth.md rename to versioned_docs/version-v5/native/spotify-auth.mdx diff --git a/versioned_docs/version-v5/native/sqlite-db-copy.md b/versioned_docs/version-v5/native/sqlite-db-copy.mdx similarity index 100% rename from versioned_docs/version-v5/native/sqlite-db-copy.md rename to versioned_docs/version-v5/native/sqlite-db-copy.mdx diff --git a/versioned_docs/version-v5/native/sqlite-porter.md b/versioned_docs/version-v5/native/sqlite-porter.mdx similarity index 100% rename from versioned_docs/version-v5/native/sqlite-porter.md rename to versioned_docs/version-v5/native/sqlite-porter.mdx diff --git a/versioned_docs/version-v5/native/sqlite.md b/versioned_docs/version-v5/native/sqlite.mdx similarity index 100% rename from versioned_docs/version-v5/native/sqlite.md rename to versioned_docs/version-v5/native/sqlite.mdx diff --git a/versioned_docs/version-v5/native/star-prnt.md b/versioned_docs/version-v5/native/star-prnt.mdx similarity index 100% rename from versioned_docs/version-v5/native/star-prnt.md rename to versioned_docs/version-v5/native/star-prnt.mdx diff --git a/versioned_docs/version-v5/native/status-bar.md b/versioned_docs/version-v5/native/status-bar.mdx similarity index 100% rename from versioned_docs/version-v5/native/status-bar.md rename to versioned_docs/version-v5/native/status-bar.mdx diff --git a/versioned_docs/version-v5/native/streaming-media.md b/versioned_docs/version-v5/native/streaming-media.mdx similarity index 100% rename from versioned_docs/version-v5/native/streaming-media.md rename to versioned_docs/version-v5/native/streaming-media.mdx diff --git a/versioned_docs/version-v5/native/stripe.md b/versioned_docs/version-v5/native/stripe.mdx similarity index 100% rename from versioned_docs/version-v5/native/stripe.md rename to versioned_docs/version-v5/native/stripe.mdx diff --git a/versioned_docs/version-v5/native/sum-up.md b/versioned_docs/version-v5/native/sum-up.mdx similarity index 100% rename from versioned_docs/version-v5/native/sum-up.md rename to versioned_docs/version-v5/native/sum-up.mdx diff --git a/versioned_docs/version-v5/native/taptic-engine.md b/versioned_docs/version-v5/native/taptic-engine.mdx similarity index 100% rename from versioned_docs/version-v5/native/taptic-engine.md rename to versioned_docs/version-v5/native/taptic-engine.mdx diff --git a/versioned_docs/version-v5/native/tealium-adidentifier.md b/versioned_docs/version-v5/native/tealium-adidentifier.mdx similarity index 100% rename from versioned_docs/version-v5/native/tealium-adidentifier.md rename to versioned_docs/version-v5/native/tealium-adidentifier.mdx diff --git a/versioned_docs/version-v5/native/tealium-installreferrer.md b/versioned_docs/version-v5/native/tealium-installreferrer.mdx similarity index 100% rename from versioned_docs/version-v5/native/tealium-installreferrer.md rename to versioned_docs/version-v5/native/tealium-installreferrer.mdx diff --git a/versioned_docs/version-v5/native/tealium.md b/versioned_docs/version-v5/native/tealium.mdx similarity index 100% rename from versioned_docs/version-v5/native/tealium.md rename to versioned_docs/version-v5/native/tealium.mdx diff --git a/versioned_docs/version-v5/native/theme-detection.md b/versioned_docs/version-v5/native/theme-detection.mdx similarity index 100% rename from versioned_docs/version-v5/native/theme-detection.md rename to versioned_docs/version-v5/native/theme-detection.mdx diff --git a/versioned_docs/version-v5/native/three-dee-touch.md b/versioned_docs/version-v5/native/three-dee-touch.mdx similarity index 100% rename from versioned_docs/version-v5/native/three-dee-touch.md rename to versioned_docs/version-v5/native/three-dee-touch.mdx diff --git a/versioned_docs/version-v5/native/toast.md b/versioned_docs/version-v5/native/toast.mdx similarity index 100% rename from versioned_docs/version-v5/native/toast.md rename to versioned_docs/version-v5/native/toast.mdx diff --git a/versioned_docs/version-v5/native/touch-id.md b/versioned_docs/version-v5/native/touch-id.mdx similarity index 100% rename from versioned_docs/version-v5/native/touch-id.md rename to versioned_docs/version-v5/native/touch-id.mdx diff --git a/versioned_docs/version-v5/native/unvired-cordova-sdk.md b/versioned_docs/version-v5/native/unvired-cordova-sdk.mdx similarity index 100% rename from versioned_docs/version-v5/native/unvired-cordova-sdk.md rename to versioned_docs/version-v5/native/unvired-cordova-sdk.mdx diff --git a/versioned_docs/version-v5/native/uptime.md b/versioned_docs/version-v5/native/uptime.mdx similarity index 100% rename from versioned_docs/version-v5/native/uptime.md rename to versioned_docs/version-v5/native/uptime.mdx diff --git a/versioned_docs/version-v5/native/urbanairship.md b/versioned_docs/version-v5/native/urbanairship.mdx similarity index 100% rename from versioned_docs/version-v5/native/urbanairship.md rename to versioned_docs/version-v5/native/urbanairship.mdx diff --git a/versioned_docs/version-v5/native/usabilla-cordova-sdk.md b/versioned_docs/version-v5/native/usabilla-cordova-sdk.mdx similarity index 100% rename from versioned_docs/version-v5/native/usabilla-cordova-sdk.md rename to versioned_docs/version-v5/native/usabilla-cordova-sdk.mdx diff --git a/versioned_docs/version-v5/native/vibes.md b/versioned_docs/version-v5/native/vibes.mdx similarity index 100% rename from versioned_docs/version-v5/native/vibes.md rename to versioned_docs/version-v5/native/vibes.mdx diff --git a/versioned_docs/version-v5/native/vibration.md b/versioned_docs/version-v5/native/vibration.mdx similarity index 100% rename from versioned_docs/version-v5/native/vibration.md rename to versioned_docs/version-v5/native/vibration.mdx diff --git a/versioned_docs/version-v5/native/video-editor.md b/versioned_docs/version-v5/native/video-editor.mdx similarity index 100% rename from versioned_docs/version-v5/native/video-editor.md rename to versioned_docs/version-v5/native/video-editor.mdx diff --git a/versioned_docs/version-v5/native/video-player.md b/versioned_docs/version-v5/native/video-player.mdx similarity index 100% rename from versioned_docs/version-v5/native/video-player.md rename to versioned_docs/version-v5/native/video-player.mdx diff --git a/versioned_docs/version-v5/native/web-intent.md b/versioned_docs/version-v5/native/web-intent.mdx similarity index 100% rename from versioned_docs/version-v5/native/web-intent.md rename to versioned_docs/version-v5/native/web-intent.mdx diff --git a/versioned_docs/version-v5/native/web-server.md b/versioned_docs/version-v5/native/web-server.mdx similarity index 100% rename from versioned_docs/version-v5/native/web-server.md rename to versioned_docs/version-v5/native/web-server.mdx diff --git a/versioned_docs/version-v5/native/web-socket-server.md b/versioned_docs/version-v5/native/web-socket-server.mdx similarity index 100% rename from versioned_docs/version-v5/native/web-socket-server.md rename to versioned_docs/version-v5/native/web-socket-server.mdx diff --git a/versioned_docs/version-v5/native/webengage.md b/versioned_docs/version-v5/native/webengage.mdx similarity index 100% rename from versioned_docs/version-v5/native/webengage.md rename to versioned_docs/version-v5/native/webengage.mdx diff --git a/versioned_docs/version-v5/native/wechat.md b/versioned_docs/version-v5/native/wechat.mdx similarity index 100% rename from versioned_docs/version-v5/native/wechat.md rename to versioned_docs/version-v5/native/wechat.mdx diff --git a/versioned_docs/version-v5/native/wheel-selector.md b/versioned_docs/version-v5/native/wheel-selector.mdx similarity index 100% rename from versioned_docs/version-v5/native/wheel-selector.md rename to versioned_docs/version-v5/native/wheel-selector.mdx diff --git a/versioned_docs/version-v5/native/wifi-wizard-2.md b/versioned_docs/version-v5/native/wifi-wizard-2.mdx similarity index 100% rename from versioned_docs/version-v5/native/wifi-wizard-2.md rename to versioned_docs/version-v5/native/wifi-wizard-2.mdx diff --git a/versioned_docs/version-v5/native/wonderpush.md b/versioned_docs/version-v5/native/wonderpush.mdx similarity index 100% rename from versioned_docs/version-v5/native/wonderpush.md rename to versioned_docs/version-v5/native/wonderpush.mdx diff --git a/versioned_docs/version-v5/native/youtube-video-player.md b/versioned_docs/version-v5/native/youtube-video-player.mdx similarity index 100% rename from versioned_docs/version-v5/native/youtube-video-player.md rename to versioned_docs/version-v5/native/youtube-video-player.mdx diff --git a/versioned_docs/version-v5/native/zbar.md b/versioned_docs/version-v5/native/zbar.mdx similarity index 100% rename from versioned_docs/version-v5/native/zbar.md rename to versioned_docs/version-v5/native/zbar.mdx diff --git a/versioned_docs/version-v5/native/zeroconf.md b/versioned_docs/version-v5/native/zeroconf.mdx similarity index 100% rename from versioned_docs/version-v5/native/zeroconf.md rename to versioned_docs/version-v5/native/zeroconf.mdx diff --git a/versioned_docs/version-v5/native/zoom.md b/versioned_docs/version-v5/native/zoom.mdx similarity index 100% rename from versioned_docs/version-v5/native/zoom.md rename to versioned_docs/version-v5/native/zoom.mdx diff --git a/versioned_docs/version-v5/reference/browser-support.md b/versioned_docs/version-v5/reference/browser-support.mdx similarity index 100% rename from versioned_docs/version-v5/reference/browser-support.md rename to versioned_docs/version-v5/reference/browser-support.mdx diff --git a/versioned_docs/version-v5/reference/glossary.md b/versioned_docs/version-v5/reference/glossary.mdx similarity index 99% rename from versioned_docs/version-v5/reference/glossary.md rename to versioned_docs/version-v5/reference/glossary.mdx index e17e08704f2..99277d6f5bb 100644 --- a/versioned_docs/version-v5/reference/glossary.md +++ b/versioned_docs/version-v5/reference/glossary.mdx @@ -68,7 +68,7 @@

- +{/* cspell:disable */}
@@ -87,7 +87,7 @@

- +{/* cspell:enable */}
diff --git a/versioned_docs/version-v5/reference/migration.md b/versioned_docs/version-v5/reference/migration.mdx similarity index 100% rename from versioned_docs/version-v5/reference/migration.md rename to versioned_docs/version-v5/reference/migration.mdx diff --git a/versioned_docs/version-v5/reference/release-notes.md b/versioned_docs/version-v5/reference/release-notes.mdx similarity index 100% rename from versioned_docs/version-v5/reference/release-notes.md rename to versioned_docs/version-v5/reference/release-notes.mdx diff --git a/versioned_docs/version-v5/reference/support.md b/versioned_docs/version-v5/reference/support.mdx similarity index 99% rename from versioned_docs/version-v5/reference/support.md rename to versioned_docs/version-v5/reference/support.mdx index 1a420876b28..6e83f33d96f 100644 --- a/versioned_docs/version-v5/reference/support.md +++ b/versioned_docs/version-v5/reference/support.mdx @@ -6,7 +6,7 @@ The Ionic Framework has been 100% open source (MIT) since the very beginning, an ## Framework Maintenance and Support Status -Given the reality of time and resource restraints as well as the desire to keep innovating in the frontend development space, over time it becomes necessary for the Ionic team to shift focus to newer versions of the Framework. However, Ionic will do everything it can to make the transition to newer versions as smooth as possible. The Ionic team recommends updating to the newest version of the Ionic Framework for the latest features, improvements and stability updates. For more details, consult [the Migration page](migration.md). +Given the reality of time and resource restraints as well as the desire to keep innovating in the frontend development space, over time it becomes necessary for the Ionic team to shift focus to newer versions of the Framework. However, Ionic will do everything it can to make the transition to newer versions as smooth as possible. The Ionic team recommends updating to the newest version of the Ionic Framework for the latest features, improvements and stability updates. For more details, consult [the Migration page](migration.mdx). The current status of each Ionic Framework version is: diff --git a/versioned_docs/version-v5/reference/versioning.md b/versioned_docs/version-v5/reference/versioning.mdx similarity index 98% rename from versioned_docs/version-v5/reference/versioning.md rename to versioned_docs/version-v5/reference/versioning.mdx index c7e746da92b..b7f89e2879b 100644 --- a/versioned_docs/version-v5/reference/versioning.md +++ b/versioned_docs/version-v5/reference/versioning.mdx @@ -1,6 +1,6 @@ # Versioning - +{/* TOC goes here */} Ionic Framework follows the Semantic Versioning (SemVer) convention: major.minor.patch. Incompatible API changes increment the major version, adding backwards-compatible functionality increments the minor version, and backwards-compatible bug fixes increment the patch version. diff --git a/versioned_docs/version-v5/techniques/security.md b/versioned_docs/version-v5/techniques/security.mdx similarity index 100% rename from versioned_docs/version-v5/techniques/security.md rename to versioned_docs/version-v5/techniques/security.mdx diff --git a/versioned_docs/version-v5/test/page1.md b/versioned_docs/version-v5/test/page1.md deleted file mode 100644 index d965196cf5d..00000000000 --- a/versioned_docs/version-v5/test/page1.md +++ /dev/null @@ -1,3 +0,0 @@ -# Testing Page 1 - -This is Testing page 1, Get to Testing Page 2 [here](page2.md). diff --git a/versioned_docs/version-v5/test/page1.mdx b/versioned_docs/version-v5/test/page1.mdx new file mode 100644 index 00000000000..cd5b72410d0 --- /dev/null +++ b/versioned_docs/version-v5/test/page1.mdx @@ -0,0 +1,3 @@ +# Testing Page 1 + +This is Testing page 1, Get to Testing Page 2 [here](page2.mdx). diff --git a/versioned_docs/version-v5/test/page2.md b/versioned_docs/version-v5/test/page2.md deleted file mode 100644 index 2d2d61adacf..00000000000 --- a/versioned_docs/version-v5/test/page2.md +++ /dev/null @@ -1,3 +0,0 @@ -# Testing Page 2 - -This is Testing page 2, Get to Testing Page 1 [here](page1.md). diff --git a/versioned_docs/version-v5/test/page2.mdx b/versioned_docs/version-v5/test/page2.mdx new file mode 100644 index 00000000000..5ebdef8dca0 --- /dev/null +++ b/versioned_docs/version-v5/test/page2.mdx @@ -0,0 +1,3 @@ +# Testing Page 2 + +This is Testing page 2, Get to Testing Page 1 [here](page1.mdx). diff --git a/versioned_docs/version-v5/theming/advanced.md b/versioned_docs/version-v5/theming/advanced.mdx similarity index 94% rename from versioned_docs/version-v5/theming/advanced.md rename to versioned_docs/version-v5/theming/advanced.mdx index dc0f3af3250..16c9460666b 100644 --- a/versioned_docs/version-v5/theming/advanced.md +++ b/versioned_docs/version-v5/theming/advanced.mdx @@ -23,8 +23,8 @@ While the application and stepped variables in the themes section are useful for | `--ion-safe-area-right` | Adjust the safe area inset right of the app | | `--ion-safe-area-bottom` | Adjust the safe area inset bottom of the app | | `--ion-safe-area-left` | Adjust the safe area inset left of the app | -| `--ion-margin` | Adjust the margin of the [Margin attributes](../layout/css-utilities.md#element-margin) | -| `--ion-padding` | Adjust the padding of the [Padding attributes](../layout/css-utilities.md#element-padding) | +| `--ion-margin` | Adjust the margin of the [Margin attributes](../layout/css-utilities.mdx#element-margin) | +| `--ion-padding` | Adjust the padding of the [Padding attributes](../layout/css-utilities.mdx#element-padding) | ### Grid Variables @@ -66,7 +66,7 @@ There is not yet full CSS properties (variables). CSS variables add dynamic values to an otherwise static language. This is something that has traditionally required a CSS preprocessor like Sass. The look of an application can easily be changed by changing the value of any of the [CSS Variables](css-variables.md) Ionic Framework provides. +The Ionic Framework components are themed using CSS properties (variables). CSS variables add dynamic values to an otherwise static language. This is something that has traditionally required a CSS preprocessor like Sass. The look of an application can easily be changed by changing the value of any of the [CSS Variables](css-variables.mdx) Ionic Framework provides. ## CSS Shadow Parts -CSS Shadow Parts were added to make it easier to fully customize Ionic Framework Shadow components. In the past, components that use Shadow DOM were unable to have elements inside of their shadow tree styled directly. With the addition of Shadow parts, there is no longer a need for CSS variables for every property on an inner element of a Shadow component. For more information on customizing Ionic Framework components using parts, see the [CSS Shadow Parts](css-shadow-parts.md) guide. +CSS Shadow Parts were added to make it easier to fully customize Ionic Framework Shadow components. In the past, components that use Shadow DOM were unable to have elements inside of their shadow tree styled directly. With the addition of Shadow parts, there is no longer a need for CSS variables for every property on an inner element of a Shadow component. For more information on customizing Ionic Framework components using parts, see the [CSS Shadow Parts](css-shadow-parts.mdx) guide. ## Branding -Ionic provides application colors that can be used to theme an application to match a brand or color scheme. The default theme uses a light background, but everything from the background color to the text color is fully customizable. For more information on branding, see [Themes](themes.md). +Ionic provides application colors that can be used to theme an application to match a brand or color scheme. The default theme uses a light background, but everything from the background color to the text color is fully customizable. For more information on branding, see [Themes](themes.mdx). diff --git a/versioned_docs/version-v5/theming/color-generator.md b/versioned_docs/version-v5/theming/color-generator.mdx similarity index 100% rename from versioned_docs/version-v5/theming/color-generator.md rename to versioned_docs/version-v5/theming/color-generator.mdx diff --git a/versioned_docs/version-v5/theming/colors.md b/versioned_docs/version-v5/theming/colors.mdx similarity index 88% rename from versioned_docs/version-v5/theming/colors.md rename to versioned_docs/version-v5/theming/colors.mdx index dad9ab020bf..8c64c48dbdb 100644 --- a/versioned_docs/version-v5/theming/colors.md +++ b/versioned_docs/version-v5/theming/colors.mdx @@ -27,7 +27,7 @@ A color can be applied to an Ionic component in order to change the default colo ## Layered Colors -Each color consists of the following properties: a `base`, `contrast`, `shade`, and `tint`. The `base` and `contrast` colors also require a `rgb` property which is the same color, just in rgb format. See [The Alpha Problem](advanced.md#the-alpha-problem) for an explanation of why the `rgb` property is also needed. Select from the dropdown below to see all of the default colors Ionic provides and their variations. +Each color consists of the following properties: a `base`, `contrast`, `shade`, and `tint`. The `base` and `contrast` colors also require a `rgb` property which is the same color, just in rgb format. See [The Alpha Problem](advanced.mdx#the-alpha-problem) for an explanation of why the `rgb` property is also needed. Select from the dropdown below to see all of the default colors Ionic provides and their variations. @@ -49,10 +49,10 @@ To change the default values of a color, all of the listed variations for that c When `secondary` is applied to a button, not only is the base color #006600 used, but the contrast color #ffffff is used for the text, along with shade #005a00 and tint #1a751a colors for the different states of the button. :::note -Not sure how to get the variation colors from the base color? Try out our [Color Generator](color-generator.md) that calculates all of the variations and provides code to copy/paste into an app! +Not sure how to get the variation colors from the base color? Try out our [Color Generator](color-generator.mdx) that calculates all of the variations and provides code to copy/paste into an app! ::: -See the [CSS Variables documentation](css-variables.md) for more information on CSS variables. +See the [CSS Variables documentation](css-variables.mdx) for more information on CSS variables. ## Adding Colors @@ -99,7 +99,7 @@ div { } ``` -See the [CSS Variables documentation](css-variables.md) for more information on setting and using CSS variables. +See the [CSS Variables documentation](css-variables.mdx) for more information on setting and using CSS variables. ## New Color Creator diff --git a/versioned_docs/version-v5/theming/css-shadow-parts.md b/versioned_docs/version-v5/theming/css-shadow-parts.mdx similarity index 95% rename from versioned_docs/version-v5/theming/css-shadow-parts.md rename to versioned_docs/version-v5/theming/css-shadow-parts.mdx index b77072f998a..fe2c075c8cb 100644 --- a/versioned_docs/version-v5/theming/css-shadow-parts.md +++ b/versioned_docs/version-v5/theming/css-shadow-parts.mdx @@ -97,7 +97,7 @@ All exposed parts for an Ionic Framework component can be found under the CSS Sh In order to have parts a component must meet the following criteria: -- It is a [Shadow DOM](../reference/glossary.md#shadow) component. If it is a [Scoped](../reference/glossary.md#scoped)> or Light DOM component, the child elements can be targeted directly. If a component is Scoped or Shadow, it will be listed by its name on its [component documentation page](../components.md). +- It is a [Shadow DOM](../reference/glossary.mdx#shadow) component. If it is a [Scoped](../reference/glossary.mdx#scoped)> or Light DOM component, the child elements can be targeted directly. If a component is Scoped or Shadow, it will be listed by its name on its [component documentation page](../components.md). - It contains children elements. For example, `ion-card-header` is a Shadow component, but all styles are applied to the host element. Since it has no child elements, there’s no need for parts. - The children elements are not structural. In certain components, including `ion-title`, the child element is a structural element used to position the inner elements. We do not recommend customizing structural elements as this can have unexpected results. @@ -109,11 +109,11 @@ We welcome recommendations for additional parts. Please create a browser support meets the requirements before implementing parts in an app. If browser support for older versions is required, we recommend continuing to use [CSS Variables](../theming/css-variables.md) for styling. +CSS Shadow Parts are supported in the recent versions of all of the major browsers. However, some of the older versions do not support shadow parts. Verify the browser support meets the requirements before implementing parts in an app. If browser support for older versions is required, we recommend continuing to use [CSS Variables](../theming/css-variables.mdx) for styling. ### Vendor Prefixed Pseudo-Elements - +{/* prettier-ignore */} Vendor prefixed pseudo-elements are not supported at this time. An example of this would be any of the `::-webkit-scrollbar` pseudo-elements: ```css diff --git a/versioned_docs/version-v5/theming/css-variables.md b/versioned_docs/version-v5/theming/css-variables.mdx similarity index 97% rename from versioned_docs/version-v5/theming/css-variables.md rename to versioned_docs/version-v5/theming/css-variables.mdx index f162682b503..e60c6f024af 100644 --- a/versioned_docs/version-v5/theming/css-variables.md +++ b/versioned_docs/version-v5/theming/css-variables.mdx @@ -91,4 +91,4 @@ Ionic provides variables that exist at the component level, such as `--backgroun ### Global Variables -There are several global variables that Ionic provides in order to make theming an entire application easier. For more information, see [Colors](colors.md), [Themes](themes.md) and [Advanced Theming](advanced.md). +There are several global variables that Ionic provides in order to make theming an entire application easier. For more information, see [Colors](colors.mdx), [Themes](themes.mdx) and [Advanced Theming](advanced.mdx). diff --git a/versioned_docs/version-v5/theming/dark-mode.md b/versioned_docs/version-v5/theming/dark-mode.mdx similarity index 97% rename from versioned_docs/version-v5/theming/dark-mode.md rename to versioned_docs/version-v5/theming/dark-mode.mdx index e93e895e990..6351385d714 100644 --- a/versioned_docs/version-v5/theming/dark-mode.md +++ b/versioned_docs/version-v5/theming/dark-mode.mdx @@ -78,7 +78,7 @@ function toggleDarkTheme(shouldAdd) { Tip: make sure to view the Codepen below in a [supported browser](https://caniuse.com/#feat=prefers-color-scheme) and then try changing the system preferences on your device between light & dark mode. Here's [how to enable dark mode on Windows 10](https://blogs.windows.com/windowsexperience/2016/08/08/windows-10-tip-personalize-your-pc-by-enabling-the-dark-theme/) and [how to enable it on a Mac](https://support.apple.com/en-us/HT208976). ::: - +{/* Codepen https://codepen.io/ionic/pen/jONzJpG */} @@ -111,7 +111,7 @@ function checkToggle(shouldCheck) { } ``` - +{/* Codepen https://codepen.io/ionic/pen/zYOpQLj */} @@ -145,14 +145,14 @@ For more information regarding `color-scheme` please see https://web.dev/color-s Ionic has a recommended theme for variables to use in order to get a dark mode based on the device running the app. It can be broken down into the following parts: -1. Changing the default [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement the dark background in the `body.dark` selector. +1. Changing the default [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement the dark background in the `body.dark` selector. 1. Setting variables for the dark theme on `ios` devices. 1. Setting variables for the dark theme on `md` devices. The following code can be copied and pasted into an app to get Ionic's dark theme. We add the `dark` class to the document body using JavaScript as mentioned in the [combining with JavaScript](#combining-with-javascript) section. The dark mode will not be enabled until the `dark` class is added to the document body. :::note -For more information on the variables that are being changed, including other variables that can be added to further customize, see [Themes](themes.md). +For more information on the variables that are being changed, including other variables that can be added to further customize, see [Themes](themes.mdx). ::: ```css diff --git a/versioned_docs/version-v5/theming/platform-styles.md b/versioned_docs/version-v5/theming/platform-styles.mdx similarity index 95% rename from versioned_docs/version-v5/theming/platform-styles.md rename to versioned_docs/version-v5/theming/platform-styles.mdx index d6214b3c302..63e04926be8 100644 --- a/versioned_docs/version-v5/theming/platform-styles.md +++ b/versioned_docs/version-v5/theming/platform-styles.mdx @@ -44,4 +44,4 @@ There are also many global CSS variables that can be used to override the styles } ``` -There are many global variables that can be overridden by mode, including [Ionic's color variables](colors.md), [theme variables](themes.md) and [global component variables](advanced.md). +There are many global variables that can be overridden by mode, including [Ionic's color variables](colors.mdx), [theme variables](themes.mdx) and [global component variables](advanced.mdx). diff --git a/versioned_docs/version-v5/theming/themes.md b/versioned_docs/version-v5/theming/themes.mdx similarity index 97% rename from versioned_docs/version-v5/theming/themes.md rename to versioned_docs/version-v5/theming/themes.mdx index 22879ad1b64..e7eb72c3479 100644 --- a/versioned_docs/version-v5/theming/themes.md +++ b/versioned_docs/version-v5/theming/themes.mdx @@ -15,7 +15,7 @@ Ionic provides several global variables that are used throughout components to c The application colors are used in multiple places in Ionic. These are useful for easily creating dark themes or themes that match a brand. -It is important to note that the background and text color variables also require a rgb variable to be set in rgb format. See [The Alpha Problem](advanced.md#the-alpha-problem) for an explanation of why the `rgb` property is also needed. +It is important to note that the background and text color variables also require a rgb variable to be set in rgb format. See [The Alpha Problem](advanced.mdx#the-alpha-problem) for an explanation of why the `rgb` property is also needed. | Name | Description | | ------------------------------------------ | ---------------------------------------------------- | diff --git a/versioned_docs/version-v5/troubleshooting/build.md b/versioned_docs/version-v5/troubleshooting/build.mdx similarity index 100% rename from versioned_docs/version-v5/troubleshooting/build.md rename to versioned_docs/version-v5/troubleshooting/build.mdx diff --git a/versioned_docs/version-v5/troubleshooting/cors.md b/versioned_docs/version-v5/troubleshooting/cors.mdx similarity index 98% rename from versioned_docs/version-v5/troubleshooting/cors.md rename to versioned_docs/version-v5/troubleshooting/cors.mdx index 26b208f1086..8cb6a321315 100644 --- a/versioned_docs/version-v5/troubleshooting/cors.md +++ b/versioned_docs/version-v5/troubleshooting/cors.mdx @@ -229,7 +229,7 @@ If you are trying to connect to a 3rd-party API, first check in its documentatio #### 1. Native-only apps (iOS/Android) -Use the [HTTP plugin from Ionic Native](../native/http.md) to make the requests natively from outside the webview. Please note that this plugin doesn't work in the browser, so the development and testing of the app must always be done in a device or simulator going forward. +Use the [HTTP plugin from Ionic Native](../native/http.mdx) to make the requests natively from outside the webview. Please note that this plugin doesn't work in the browser, so the development and testing of the app must always be done in a device or simulator going forward. ##### Usage in Ionic Angular 4 diff --git a/versioned_docs/version-v5/troubleshooting/debugging.md b/versioned_docs/version-v5/troubleshooting/debugging.mdx similarity index 98% rename from versioned_docs/version-v5/troubleshooting/debugging.md rename to versioned_docs/version-v5/troubleshooting/debugging.mdx index 56c1c98ad14..59991f3f326 100644 --- a/versioned_docs/version-v5/troubleshooting/debugging.md +++ b/versioned_docs/version-v5/troubleshooting/debugging.mdx @@ -45,7 +45,7 @@ The app preview may not automatically appear when you open Chrome Developer Tool ## Debugging with Visual Studio locally in Chrome (both Android & iOS) - +{/* prettier-ignore */} Visual Studio Code can also be used to debug an Ionic app running in the Chrome web browser.{' '} To do this, run your app in the browser using `ionic serve`. Take note of the port that your app is running on. Next, open your Ionic project using Visual Studio Code. @@ -58,10 +58,10 @@ In the debug target dropdown menu, select **Launch against Chrome**, then click ## Debugging with Visual Studio Code in Android - +{/* prettier-ignore */} Visual Studio Code has a dedicated plugin for debugging apps that run in an Android WebView. - +{/* prettier-ignore */} The plugin creates a bridge between the device and the Visual Studio Code developer tools and permits debugging right from the editor. diff --git a/versioned_docs/version-v5/troubleshooting/native.md b/versioned_docs/version-v5/troubleshooting/native.mdx similarity index 96% rename from versioned_docs/version-v5/troubleshooting/native.md rename to versioned_docs/version-v5/troubleshooting/native.mdx index eda83138bfe..badfea21a5f 100644 --- a/versioned_docs/version-v5/troubleshooting/native.md +++ b/versioned_docs/version-v5/troubleshooting/native.mdx @@ -8,13 +8,13 @@ Code Signing Error: Failed to create provisioning profile. The app ID "com.csfor Running an app on an iOS device requires a provisioning profile. If a provisioning profile has not been created yet follow these directions: -1. Set the [Package ID](../reference/glossary.md#package-id). +1. Set the [Package ID](../reference/glossary.mdx#package-id). For Capacitor, open the `capacitor.config.json` file and modify the `appId` property. For Cordova, open the `config.xml` file and modify the `id` attribute of the root element, ``. See [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) for more information. - +{/* prettier-ignore */} 2. Open the project in Xcode. For Capacitor, run the following to open the app in Xcode: @@ -25,13 +25,13 @@ Running an app on an iOS device requires a provisioning profile. If a provisioni For Cordova, open Xcode. Use **File** » **Open** and locate the app. Open the app's `platforms/ios` directory. - +{/* prettier-ignore */} 3. In Project navigator, select the project root to open the project editor. Under the **Identity** section, verify that the Package ID that was set matches the Bundle Identifier. ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png) - +{/* prettier-ignore */} 4. In the same project editor, under the Signing section, ensure Automatically manage signing is enabled. Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing. diff --git a/versioned_docs/version-v5/troubleshooting/runtime.md b/versioned_docs/version-v5/troubleshooting/runtime.mdx similarity index 100% rename from versioned_docs/version-v5/troubleshooting/runtime.md rename to versioned_docs/version-v5/troubleshooting/runtime.mdx diff --git a/versioned_docs/version-v5/utilities/animations.md b/versioned_docs/version-v5/utilities/animations.mdx similarity index 99% rename from versioned_docs/version-v5/utilities/animations.md rename to versioned_docs/version-v5/utilities/animations.mdx index e1fe5b310cd..5224990b0a8 100644 --- a/versioned_docs/version-v5/utilities/animations.md +++ b/versioned_docs/version-v5/utilities/animations.mdx @@ -507,7 +507,7 @@ const parent = createAnimation() This example shows 3 child animations controlled by a single parent animation. Animations `squareA` and `squareB` inherit the parent animation's duration of 2000ms, but animation `squareC` has a duration of 5000ms since it was explicitly set. - +{/* cspell:disable-next-line */} @@ -626,7 +626,7 @@ In this example, an inline opacity of 0.2 is set on the `.square` element prior See [Methods](#methods) for a complete list of hooks. - +{/* cspell:disable-next-line */} @@ -844,7 +844,7 @@ await squareC.play(); ## Gesture Animations -Ionic Animations gives developers the ability to create powerful gesture-based animations by integrating seamlessly with [Ionic Gestures](gestures.md). +Ionic Animations gives developers the ability to create powerful gesture-based animations by integrating seamlessly with [Ionic Gestures](gestures.mdx). ### Usage @@ -1494,7 +1494,7 @@ export default defineComponent({ ```` - +{/* cspell:disable-next-line */} diff --git a/versioned_docs/version-v5/utilities/gestures.md b/versioned_docs/version-v5/utilities/gestures.mdx similarity index 99% rename from versioned_docs/version-v5/utilities/gestures.md rename to versioned_docs/version-v5/utilities/gestures.mdx index 80c96f088e1..62fbd99c9dd 100644 --- a/versioned_docs/version-v5/utilities/gestures.md +++ b/versioned_docs/version-v5/utilities/gestures.mdx @@ -437,7 +437,7 @@ In the example above, we want to be able to detect double clicks on an element. ## Gesture Animations -See our guide on implementing gesture animations: [Gesture Animations with Ionic Animations](animations.md#gesture-animations) +See our guide on implementing gesture animations: [Gesture Animations with Ionic Animations](animations.mdx#gesture-animations) ## Types diff --git a/versioned_docs/version-v6/api/col.mdx b/versioned_docs/version-v6/api/col.mdx index 5a19f67b49b..ee86eb54846 100644 --- a/versioned_docs/version-v6/api/col.mdx +++ b/versioned_docs/version-v6/api/col.mdx @@ -27,7 +27,7 @@ See the [grid](./grid) documentation 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](/docs/layout/css-utilities#flex-item-properties) that can be applied to a column to customize this behavior. +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](/docs/layout/css-utilities.mdx#flex-item-properties) that can be applied to a column to customize this behavior. ## Properties diff --git a/versioned_docs/version-v6/api/datetime.mdx b/versioned_docs/version-v6/api/datetime.mdx index a4abc8d33a6..4d8830f85df 100644 --- a/versioned_docs/version-v6/api/datetime.mdx +++ b/versioned_docs/version-v6/api/datetime.mdx @@ -315,7 +315,7 @@ A callback is better when the highlighted dates are recurring, such as birthdays ## Theming -Ionic's powerful theming system can be used to easily change your entire app to match a certain theme. In this example, we used the [Color Creator](../theming/colors#new-color-creator) and the [Stepped Color Generator](../theming/themes#stepped-color-generator) to create a rose color palette that we can use for `ion-datetime`. +Ionic's powerful theming system can be used to easily change your entire app to match a certain theme. In this example, we used the [Color Creator](../theming/colors.mdx#new-color-creator) and the [Stepped Color Generator](../theming/themes.mdx#stepped-color-generator) to create a rose color palette that we can use for `ion-datetime`. The benefit of this approach is that every component, not just `ion-datetime`, can automatically take advantage of this theme. diff --git a/versioned_docs/version-v6/api/grid.mdx b/versioned_docs/version-v6/api/grid.mdx index 50917f201a7..8a721b10d4f 100644 --- a/versioned_docs/version-v6/api/grid.mdx +++ b/versioned_docs/version-v6/api/grid.mdx @@ -42,7 +42,7 @@ The grid is a powerful mobile-first flexbox system for building custom layouts. ## Default Breakpoints -The default breakpoints for the grid and the corresponding properties are defined in the table below. Breakpoint values can not be customized at this time. For more information on why they can't be customized, see [Variables in Media Queries](../theming/advanced#variables-in-media-queries). +The default breakpoints for the grid and the corresponding properties are defined in the table below. Breakpoint values can not be customized at this time. For more information on why they can't be customized, see [Variables in Media Queries](../theming/advanced.mdx#variables-in-media-queries). | Name | Value | Width Property | Offset Property | Push Property | Pull Property | Description | | ---- | ------ | -------------- | --------------- | ------------- | ------------- | ------------------------------------ | @@ -148,7 +148,7 @@ import PushPullResponsive from '@site/static/usage/v6/grid/push-pull-responsive/ ### Vertical Alignment -All columns can be vertically aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](/layout/css-utilities#flex-container-properties). +All columns can be vertically aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](/layout/css-utilities.mdx#flex-container-properties). import VerticalAlignment from '@site/static/usage/v6/grid/vertical-alignment/index.md'; @@ -156,7 +156,7 @@ import VerticalAlignment from '@site/static/usage/v6/grid/vertical-alignment/ind ### Horizontal Alignment -All columns can be horizontally aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](/layout/css-utilities.md#flex-container-properties). +All columns can be horizontally aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](/layout/css-utilities.mdx#flex-container-properties). import HorizontalAlignment from '@site/static/usage/v6/grid/horizontal-alignment/index.md'; diff --git a/versioned_docs/version-v6/api/item.mdx b/versioned_docs/version-v6/api/item.mdx index 2cd574deb68..dff28e7c16f 100644 --- a/versioned_docs/version-v6/api/item.mdx +++ b/versioned_docs/version-v6/api/item.mdx @@ -55,7 +55,7 @@ This feature is not enabled by default on clickable items for the `md` mode, but --item-detail-push-show: true; ``` -See the [theming documentation](/docs/theming/css-variables) for more information. */} +See the [theming documentation](/docs/theming/css-variables.mdx) for more information. */} ## Item Lines diff --git a/versioned_docs/version-v6/api/nav.mdx b/versioned_docs/version-v6/api/nav.mdx index e16ec9c0ae9..7df10e693f2 100644 --- a/versioned_docs/version-v6/api/nav.mdx +++ b/versioned_docs/version-v6/api/nav.mdx @@ -26,7 +26,7 @@ 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. For example, you should not push a new component to `ion-nav` and expect the URL to update. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL. :::note -`ion-nav` is not meant to be used for routing. Instead, see the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation), or [`ion-router`](./router) for vanilla JavaScript projects. +`ion-nav` is not meant to be used for routing. Instead, see the routing guides for [Angular](../angular/navigation.mdx), [React](../react/navigation.mdx), and [Vue](../vue/navigation.mdx), or [`ion-router`](./router) for vanilla JavaScript projects. ::: ## Using NavLink diff --git a/versioned_docs/version-v6/api/router.mdx b/versioned_docs/version-v6/api/router.mdx index 32c31f6d4e9..f220d301f65 100644 --- a/versioned_docs/version-v6/api/router.mdx +++ b/versioned_docs/version-v6/api/router.mdx @@ -22,7 +22,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; The router is a component for handling routing inside vanilla and Stencil JavaScript projects. :::note -Note: This component should only be used with vanilla and Stencil JavaScript projects. See the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation) for framework-specific routing solutions. +Note: This component should only be used with vanilla and Stencil JavaScript projects. See the routing guides for [Angular](../angular/navigation.mdx), [React](../react/navigation.mdx), and [Vue](../vue/navigation.mdx) for framework-specific routing solutions. ::: Apps should have a single `ion-router` component in the codebase. diff --git a/versioned_docs/version-v6/api/row.mdx b/versioned_docs/version-v6/api/row.mdx index 4a01eb80f00..774f02c535b 100644 --- a/versioned_docs/version-v6/api/row.mdx +++ b/versioned_docs/version-v6/api/row.mdx @@ -28,7 +28,7 @@ See the [grid](./grid) documentation 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](/docs/layout/css-utilities#flex-container-properties) that can be applied to a row to customize this behavior. +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](/docs/layout/css-utilities.mdx#flex-container-properties) that can be applied to a row to customize this behavior. ## Properties diff --git a/versioned_docs/version-v6/api/tabs.mdx b/versioned_docs/version-v6/api/tabs.mdx index 55a55aafe47..55440dbd8f8 100644 --- a/versioned_docs/version-v6/api/tabs.mdx +++ b/versioned_docs/version-v6/api/tabs.mdx @@ -46,7 +46,7 @@ import Router from '@site/static/usage/v6/tabs/router/index.md'; :::tip Best Practices -Ionic has guides on best practices for routing patterns with tabs. Check out the guides for [Angular](/angular/navigation#working-with-tabs), [React](/react/navigation#working-with-tabs), and [Vue](/vue/navigation#working-with-tabs) for additional information. +Ionic has guides on best practices for routing patterns with tabs. Check out the guides for [Angular](../angular/navigation.mdx#working-with-tabs), [React](../react/navigation.mdx#working-with-tabs), and [Vue](../vue/navigation.mdx#working-with-tabs) for additional information. ::: diff --git a/versioned_docs/version-v6/api/text.mdx b/versioned_docs/version-v6/api/text.mdx index ac2d82988e3..2f9c563bc1e 100644 --- a/versioned_docs/version-v6/api/text.mdx +++ b/versioned_docs/version-v6/api/text.mdx @@ -31,7 +31,7 @@ import Basic from '@site/static/usage/v6/text/basic/index.md'; ## Theming -The text component can be customized by changing any of the default [colors](../../docs/theming/colors) Ionic provides. +The text component can be customized by changing any of the default [colors](../theming/colors.mdx) Ionic provides. ## Properties diff --git a/versioned_docs/version-v6/cli.md b/versioned_docs/version-v6/cli.md index a75302d0937..f2ab8411900 100644 --- a/versioned_docs/version-v6/cli.md +++ b/versioned_docs/version-v6/cli.md @@ -41,7 +41,7 @@ For some commands, such as `ionic serve`, the help documentation is contextual t ## Architecture -The Ionic CLI is built with [TypeScript](/docs/reference/glossary#typescript) and [Node.js](/docs/reference/glossary#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source GitHub repository. +The Ionic CLI is built with [TypeScript](/docs/reference/glossary#typescript) and [Node.js](/docs/reference/glossary.mdx#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source GitHub repository. ## Troubleshooting diff --git a/versioned_docs/version-v6/cli/configuration.mdx b/versioned_docs/version-v6/cli/configuration.mdx index 35f861a9ff0..d9d99985f03 100644 --- a/versioned_docs/version-v6/cli/configuration.mdx +++ b/versioned_docs/version-v6/cli/configuration.mdx @@ -121,7 +121,7 @@ module.exports = function (ctx) { Available in CLI 6.2.0+ -The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.md#monorepo). +The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.mdx#monorepo). :::note These docs give an overview of the multi-app feature of the Ionic CLI, but don't really go into details for each framework. diff --git a/versioned_docs/version-v6/core-concepts/fundamentals.mdx b/versioned_docs/version-v6/core-concepts/fundamentals.mdx index 7a3c7eab4d5..68f4b24c64e 100644 --- a/versioned_docs/version-v6/core-concepts/fundamentals.mdx +++ b/versioned_docs/version-v6/core-concepts/fundamentals.mdx @@ -15,13 +15,13 @@ For those completely new to Ionic app development, it can be helpful to get a hi ## UI Components -Ionic Framework is a library of UI Components, which are reusable elements that serve as the building blocks for an application. Ionic Components are built with [web standards](../reference/glossary.md#web-standards) using HTML, CSS, and JavaScript. Though the components are pre-built, they're designed from the ground up to be highly customizable so apps can make each component their own, allowing each app to have its own look and feel. More specifically, Ionic components can be easily themed to globally change appearance across an entire app. For more information about customizing the look, please see [Theming](../theming/basics.md). +Ionic Framework is a library of UI Components, which are reusable elements that serve as the building blocks for an application. Ionic Components are built with [web standards](../reference/glossary.mdx#web-standards) using HTML, CSS, and JavaScript. Though the components are pre-built, they're designed from the ground up to be highly customizable so apps can make each component their own, allowing each app to have its own look and feel. More specifically, Ionic components can be easily themed to globally change appearance across an entire app. For more information about customizing the look, please see [Theming](../theming/basics.mdx). ## Adaptive Styling Adaptive Styling is a built-in feature of Ionic Framework which allows app developers to use the same code base for multiple platforms. Every Ionic component adapts its look to the platform on which the app is running on. For example, Apple devices, such as the iPhone and iPad, use Apple's own iOS design language. Similarly, Android devices use Google's design language called Material Design. -By making subtle design changes between the platforms, users are provided with a familiar app experience. An Ionic app downloaded from Apple's App Store will get the iOS theme, while an Ionic app downloaded from Android's Play Store will get the Material Design theme. For the apps that are viewed as a Progressive Web App (PWA) from a browser, Ionic will default to using the Material Design theme. Additionally, deciding which platform to use in certain scenarios is entirely configurable. More information about adaptive styling can be found in [Theming](../theming/basics.md). +By making subtle design changes between the platforms, users are provided with a familiar app experience. An Ionic app downloaded from Apple's App Store will get the iOS theme, while an Ionic app downloaded from Android's Play Store will get the Material Design theme. For the apps that are viewed as a Progressive Web App (PWA) from a browser, Ionic will default to using the Material Design theme. Additionally, deciding which platform to use in certain scenarios is entirely configurable. More information about adaptive styling can be found in [Theming](../theming/basics.mdx). ## Navigation @@ -44,4 +44,4 @@ Projects such as CapacitorCSS which allows us to take advantage of the flexibility that CSS properties (variables) provide. This makes it incredibly easy to design an app that looks great while following the web standard. We provide a set of colors so developers can have some great defaults, but we encourage overriding them to create designs that match a brand, company or a desired color palette. Everything from the background color of an application to the text color is fully customizable. More information on app theming can be found in [Theming](../theming/basics.md). +At the core, Ionic Framework is built using CSS which allows us to take advantage of the flexibility that CSS properties (variables) provide. This makes it incredibly easy to design an app that looks great while following the web standard. We provide a set of colors so developers can have some great defaults, but we encourage overriding them to create designs that match a brand, company or a desired color palette. Everything from the background color of an application to the text color is fully customizable. More information on app theming can be found in [Theming](../theming/basics.mdx). diff --git a/versioned_docs/version-v6/core-concepts/webview.mdx b/versioned_docs/version-v6/core-concepts/webview.mdx index a314d09f566..a93673097b5 100644 --- a/versioned_docs/version-v6/core-concepts/webview.mdx +++ b/versioned_docs/version-v6/core-concepts/webview.mdx @@ -12,13 +12,13 @@ title: Web View Web Views power web apps on native devices. -The Web View is automatically provided for apps integrated with [Capacitor](../reference/glossary.md#capacitor). +The Web View is automatically provided for apps integrated with [Capacitor](../reference/glossary.mdx#capacitor). -For [Cordova](../reference/glossary.md#cordova), Ionic maintains a Web View plugin. The plugin is provided by default when using the Ionic CLI. +For [Cordova](../reference/glossary.mdx#cordova), Ionic maintains a Web View plugin. The plugin is provided by default when using the Ionic CLI. ## What is a Web View? -Ionic apps are built using [web technologies](../reference/glossary.md#web-standards) and are rendered using Web Views, which are a full screen and full-powered web browser. +Ionic apps are built using [web technologies](../reference/glossary.mdx#web-standards) and are rendered using Web Views, which are a full screen and full-powered web browser. Modern Web Views offer many built-in HTML5 APIs for hardware functionality such as cameras, sensors, GPS, speakers, and Bluetooth, but sometimes it may also be necessary to access platform-specific hardware APIs. In Ionic apps, hardware APIs can be accessed through a bridge layer, typically by using native plugins which expose JavaScript APIs. @@ -28,7 +28,7 @@ The Ionic Web View plugin is specialized for modern JavaScript apps. For both iO ### CORS -Web Views enforce [CORS](../reference/glossary.md#cors), so it's important that external services properly handle cross-origin requests. See the [CORS FAQs](../troubleshooting/cors.md) for information on dealing with CORS in Ionic apps. +Web Views enforce [CORS](../reference/glossary.mdx#cors), so it's important that external services properly handle cross-origin requests. See the [CORS FAQs](../troubleshooting/cors.mdx) for information on dealing with CORS in Ionic apps. ### File Protocol diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/theming.mdx b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/theming.mdx index 6170b2d673a..3839bb9d451 100644 --- a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/theming.mdx +++ b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/theming.mdx @@ -27,7 +27,7 @@ By changing these variables here and there, you can easily update the entire the } ``` -The easiest and most powerful way to create custom color palettes for your app’s UI is Ionic's [Color Generator tool](../../../theming/color-generator.md). As you change a color’s hex values, the embedded demo app automatically reflects the new colors. When you've finished making changes, simply copy and paste the generated code directly into your Ionic project. +The easiest and most powerful way to create custom color palettes for your app’s UI is Ionic's [Color Generator tool](../../../theming/color-generator.mdx). As you change a color’s hex values, the embedded demo app automatically reflects the new colors. When you've finished making changes, simply copy and paste the generated code directly into your Ionic project. But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to: diff --git a/versioned_docs/version-v6/developer-resources/tools.mdx b/versioned_docs/version-v6/developer-resources/tools.mdx index 0cd5ac7d7f3..aa1a7301ba9 100644 --- a/versioned_docs/version-v6/developer-resources/tools.mdx +++ b/versioned_docs/version-v6/developer-resources/tools.mdx @@ -12,7 +12,7 @@ Quickly get started with a new Ionic app entirely in the browser! Check out the features that make working with TypeScript amazing. -### [Glossary](../reference/glossary.md) +### [Glossary](../reference/glossary.mdx) A list of common terms you'll see while developing in Ionic. diff --git a/versioned_docs/version-v6/developing/android.mdx b/versioned_docs/version-v6/developing/android.mdx index 17c2056c757..5ec284c82d3 100644 --- a/versioned_docs/version-v6/developing/android.mdx +++ b/versioned_docs/version-v6/developing/android.mdx @@ -11,11 +11,11 @@ sidebar_label: Developing for Android /> -This guide covers how to run and debug Ionic apps on Android emulators and devices using [Capacitor](../reference/glossary.md#capacitor) or [Cordova](../reference/glossary.md#cordova). Android apps can be developed on Windows, macOS, and Linux. +This guide covers how to run and debug Ionic apps on Android emulators and devices using [Capacitor](../reference/glossary.mdx#capacitor) or [Cordova](../reference/glossary.mdx#cordova). Android apps can be developed on Windows, macOS, and Linux. ## Android Studio -[Android Studio](https://developer.android.com/studio/) is the IDE for creating native Android apps. It includes the [Android SDK](../reference/glossary.md#android-sdk), which will need to be configured for use in the command line. +[Android Studio](https://developer.android.com/studio/) is the IDE for creating native Android apps. It includes the [Android SDK](../reference/glossary.mdx#android-sdk), which will need to be configured for use in the command line. Android Studio is also used to [create Android virtual devices](android.mdx#creating-an-android-virtual-device), which are required for the Android emulator. Ionic apps can also be [launched to a device](android.mdx#set-up-an-android-device). @@ -133,7 +133,7 @@ Before apps can be deployed to Android simulators and devices, the native projec $ ionic cordova prepare android ``` -2. **Set the [Package ID](../reference/glossary.md#package-id).** +2. **Set the [Package ID](../reference/glossary.mdx#package-id).** For Capacitor, open the `capacitor.config.json` file and modify the `appId` property. @@ -167,7 +167,7 @@ When running on a device make sure the device and your development machine are c ## Running with Cordova -The Ionic CLI can build, copy, and deploy Ionic apps to Android simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.md#livereload) functionality. +The Ionic CLI can build, copy, and deploy Ionic apps to Android simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.mdx#livereload) functionality. Run the following to start a long-running CLI process that boots up a live-reload server: diff --git a/versioned_docs/version-v6/developing/config.mdx b/versioned_docs/version-v6/developing/config.mdx index 0d4dacdf251..2956c5c5074 100644 --- a/versioned_docs/version-v6/developing/config.mdx +++ b/versioned_docs/version-v6/developing/config.mdx @@ -105,42 +105,42 @@ class AppComponent { Below are the config options that Ionic uses. -| Config | Type | Description | -| --------------------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `actionSheetEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation". | -| `actionSheetLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation". | -| `alertEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-alert`, overriding the default "animation". | -| `alertLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-alert`, overriding the default "animation". | -| `animated` | `boolean` | If `true`, Ionic will enable all animations and transitions across the app. | -| `backButtonDefaultHref` | `string` | Overrides the default value for the `defaultHref` property in all `` components. | -| `backButtonIcon` | `string` | Overrides the default icon in all `` components. | -| `backButtonText` | `string` | Overrides the default text in all `` components. | -| `innerHTMLTemplatesEnabled` | `boolean` | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `false`, all `innerHTML` usage will be disabled in Ionic, and custom HTML will not be usable in the relevant components. `innerHTML` usage is enabled by default. | -| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. | -| `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | -| `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". | -| `loadingLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-loading`, overriding the default "animation". | -| `loadingSpinner` | `SpinnerTypes` | Overrides the default spinner for all `ion-loading` overlays. | -| `menuIcon` | `string` | Overrides the default icon in all `` components. | -| `menuType` | `string` | Overrides the default menu type for all `` components. | -| `modalEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-modal`, overriding the default "animation". | -| `modalLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-modal`, overriding the default "animation". | -| `mode` | `Mode` | The mode determines which platform styles to use for the whole application. | -| `navAnimation` | `AnimationBuilder` | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. | -| `pickerEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-picker`, overriding the default "animation". | -| `pickerLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-picker`, overriding the default "animation". | -| `platform` | [`PlatformConfig`](/docs/angular/platform#customizing-platform-detection-methods) | Overrides the default platform detection methods. | -| `popoverEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-popover`, overriding the default "animation". | -| `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". | -| `refreshingIcon` | `string` | Overrides the default icon in all `` components. | -| `refreshingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | -| `rippleEffect` | `boolean` | If `true`, Material Design ripple effects will be enabled across the app. | -| `sanitizerEnabled` | `boolean` | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML. | -| `spinner` | `SpinnerTypes` | Overrides the default spinner in all `` components. | -| `statusTap` | `boolean` | If `true`, clicking or tapping the status bar will cause the content to scroll to the top. | -| `swipeBackEnabled` | `boolean` | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application. | -| `tabButtonLayout` | `TabButtonLayout` | Overrides the default "layout" of all `ion-bar-button` across the whole application. | -| `toastDuration` | `number` | Overrides the default `duration` for all `ion-toast` components. | -| `toastEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-toast`, overriding the default "animation". | -| `toastLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-toast`, overriding the default "animation". | -| `toggleOnOffLabels` | `boolean` | Overrides the default `enableOnOffLabels` in all `ion-toggle` components. | +| Config | Type | Description | +| --------------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `actionSheetEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation". | +| `actionSheetLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation". | +| `alertEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-alert`, overriding the default "animation". | +| `alertLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-alert`, overriding the default "animation". | +| `animated` | `boolean` | If `true`, Ionic will enable all animations and transitions across the app. | +| `backButtonDefaultHref` | `string` | Overrides the default value for the `defaultHref` property in all `` components. | +| `backButtonIcon` | `string` | Overrides the default icon in all `` components. | +| `backButtonText` | `string` | Overrides the default text in all `` components. | +| `innerHTMLTemplatesEnabled` | `boolean` | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `false`, all `innerHTML` usage will be disabled in Ionic, and custom HTML will not be usable in the relevant components. `innerHTML` usage is enabled by default. | +| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. | +| `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | +| `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". | +| `loadingLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-loading`, overriding the default "animation". | +| `loadingSpinner` | `SpinnerTypes` | Overrides the default spinner for all `ion-loading` overlays. | +| `menuIcon` | `string` | Overrides the default icon in all `` components. | +| `menuType` | `string` | Overrides the default menu type for all `` components. | +| `modalEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-modal`, overriding the default "animation". | +| `modalLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-modal`, overriding the default "animation". | +| `mode` | `Mode` | The mode determines which platform styles to use for the whole application. | +| `navAnimation` | `AnimationBuilder` | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. | +| `pickerEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-picker`, overriding the default "animation". | +| `pickerLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-picker`, overriding the default "animation". | +| `platform` | [`PlatformConfig`](/docs/angular/platform.mdx#customizing-platform-detection-methods) | Overrides the default platform detection methods. | +| `popoverEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-popover`, overriding the default "animation". | +| `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". | +| `refreshingIcon` | `string` | Overrides the default icon in all `` components. | +| `refreshingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | +| `rippleEffect` | `boolean` | If `true`, Material Design ripple effects will be enabled across the app. | +| `sanitizerEnabled` | `boolean` | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML. | +| `spinner` | `SpinnerTypes` | Overrides the default spinner in all `` components. | +| `statusTap` | `boolean` | If `true`, clicking or tapping the status bar will cause the content to scroll to the top. | +| `swipeBackEnabled` | `boolean` | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application. | +| `tabButtonLayout` | `TabButtonLayout` | Overrides the default "layout" of all `ion-bar-button` across the whole application. | +| `toastDuration` | `number` | Overrides the default `duration` for all `ion-toast` components. | +| `toastEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-toast`, overriding the default "animation". | +| `toastLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-toast`, overriding the default "animation". | +| `toggleOnOffLabels` | `boolean` | Overrides the default `enableOnOffLabels` in all `ion-toggle` components. | diff --git a/versioned_docs/version-v6/developing/ios.mdx b/versioned_docs/version-v6/developing/ios.mdx index 16c88bf8aff..0ff652b2db4 100644 --- a/versioned_docs/version-v6/developing/ios.mdx +++ b/versioned_docs/version-v6/developing/ios.mdx @@ -12,14 +12,14 @@ skipIntros: true /> -This guide covers how to run and debug Ionic apps on iOS simulators and devices using [Capacitor](../reference/glossary.md#capacitor) or [Cordova](../reference/glossary.md#cordova). iOS apps can only be developed on macOS with Xcode installed. +This guide covers how to run and debug Ionic apps on iOS simulators and devices using [Capacitor](../reference/glossary.mdx#capacitor) or [Cordova](../reference/glossary.mdx#cordova). iOS apps can only be developed on macOS with Xcode installed. There are two workflows for running Ionic apps on iOS: - [Running with Xcode](#running-with-xcode) - [Running with the Ionic CLI](#running-with-the-ionic-cli) -The Xcode approach is generally more stable, but the Ionic CLI approach offers [live-reload](../reference/glossary.md#livereload) functionality. +The Xcode approach is generally more stable, but the Ionic CLI approach offers [live-reload](../reference/glossary.mdx#livereload) functionality. ## Xcode Setup @@ -53,7 +53,7 @@ Additional setup is required for Cordova to support programmatic builds. This se ### ios-sim & ios-deploy -The [`ios-sim`](https://github.com/ios-control/ios-sim) and [`ios-deploy`](https://github.com/ios-control/ios-deploy) are utilities that deploy apps to the iOS simulator and iOS devices during development. They can be installed globally with [npm](../reference/glossary.md#npm). +The [`ios-sim`](https://github.com/ios-control/ios-sim) and [`ios-deploy`](https://github.com/ios-control/ios-deploy) are utilities that deploy apps to the iOS simulator and iOS devices during development. They can be installed globally with [npm](../reference/glossary.mdx#npm). ```shell $ npm install -g ios-sim @@ -78,7 +78,7 @@ Before apps can be deployed to iOS simulators and devices, the native project mu $ ionic cordova prepare ios ``` -1. **Set the [Package ID](/reference/glossary.md#package-id).** +1. **Set the [Package ID](/reference/glossary.mdx#package-id).** For Capacitor, open the `capacitor.config.json` file and modify the `appId` property. @@ -129,7 +129,7 @@ In this workflow, Xcode can automatically fix common compilation and signing iss ## Running with the Ionic CLI -The Ionic CLI can build, copy, and deploy Ionic apps to iOS simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.md#livereload) functionality. +The Ionic CLI can build, copy, and deploy Ionic apps to iOS simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.mdx#livereload) functionality. With live-reload, changes made to the app's source files trigger a rebuild of web assets and the changes are reflected on the simulator or device without having to deploy again. diff --git a/versioned_docs/version-v6/index.md b/versioned_docs/version-v6/index.md index a86645ccfed..13ff4b889a9 100644 --- a/versioned_docs/version-v6/index.md +++ b/versioned_docs/version-v6/index.md @@ -24,7 +24,7 @@ import DocsCards from '@components/global/DocsCards'; Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.mdx), [React](react.mdx), and [Vue](vue/overview.mdx). -Get started building by [installing Ionic](intro/cli.md) or following our [First App Tutorial](intro/next.md#build-your-first-app) to learn the main concepts. +Get started building by [installing Ionic](intro/cli.mdx) or following our [First App Tutorial](intro/next.mdx#build-your-first-app) to learn the main concepts. @@ -58,11 +58,11 @@ Get started building by [installing Ionic](intro/cli.md) or following our [First ## Overview -Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.mdx), [React](react.mdx), or [Vue](vue/overview.mdx). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.md). If you’d like to learn more about Ionic before diving in, we created a video to walk you through the basics. +Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.mdx), [React](react.mdx), or [Vue](vue/overview.mdx). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.mdx). If you’d like to learn more about Ionic before diving in, we created a video to walk you through the basics. ### One codebase, running everywhere -Ionic is the only mobile app stack that enables web developers to build apps for all major app stores and the mobile web from a single codebase. And with [Adaptive Styling](theming/platform-styles.md), Ionic apps look and feel at home on every device. +Ionic is the only mobile app stack that enables web developers to build apps for all major app stores and the mobile web from a single codebase. And with [Adaptive Styling](theming/platform-styles.mdx), Ionic apps look and feel at home on every device. ### A focus on performance @@ -84,7 +84,7 @@ Build and deploy apps that work across multiple platforms, such as native iOS, A ### Web Standards-based -Ionic is built on top of reliable, [standardized web technologies](reference/glossary.md#web-standards): HTML, CSS, and JavaScript, using modern Web APIs such as Custom Elements and Shadow DOM. Because of this, Ionic components have a stable API, and aren't at the whim of a single platform vendor. +Ionic is built on top of reliable, [standardized web technologies](reference/glossary.mdx#web-standards): HTML, CSS, and JavaScript, using modern Web APIs such as Custom Elements and Shadow DOM. Because of this, Ionic components have a stable API, and aren't at the whim of a single platform vendor. ### Beautiful Design diff --git a/versioned_docs/version-v6/intro/cdn.md b/versioned_docs/version-v6/intro/cdn.mdx similarity index 94% rename from versioned_docs/version-v6/intro/cdn.md rename to versioned_docs/version-v6/intro/cdn.mdx index a90c4a6b250..1f9696aa558 100644 --- a/versioned_docs/version-v6/intro/cdn.md +++ b/versioned_docs/version-v6/intro/cdn.mdx @@ -25,7 +25,7 @@ It's recommended to use [jsdelivr](https://www.jsdelivr.com/) to access the Fram ``` -With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic [Global Stylesheets](../layout/global-stylesheets). +With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic [Global Stylesheets](../layout/global-stylesheets.mdx). :::note This does not install Angular or any other frameworks. This allows use of the Ionic Framework core components without a framework. @@ -33,13 +33,13 @@ This does not install Angular or any other frameworks. This allows use of the Io ## Ionic + Angular -When using Ionic Framework in an Angular project, install the latest `@ionic/angular` package from [npm](../reference/glossary.md#npm). This comes with all of the Ionic Framework components and Angular specific services and features. +When using Ionic Framework in an Angular project, install the latest `@ionic/angular` package from [npm](../reference/glossary.mdx#npm). This comes with all of the Ionic Framework components and Angular specific services and features. ```shell npm install @ionic/angular@latest --save ``` -Each time there is a new Ionic Framework release, this [version](../reference/versioning.md) will need to be updated to get the latest features and fixes. The version can be [updated using npm](../developing/tips.md#updating-dependencies), as well. +Each time there is a new Ionic Framework release, this [version](../reference/versioning.mdx) will need to be updated to get the latest features and fixes. The version can be [updated using npm](../developing/tips.md#updating-dependencies), as well. For adding Ionic to an already existing Angular project, use the Angular CLI's `ng add` feature. diff --git a/versioned_docs/version-v6/intro/cli.md b/versioned_docs/version-v6/intro/cli.mdx similarity index 83% rename from versioned_docs/version-v6/intro/cli.md rename to versioned_docs/version-v6/intro/cli.mdx index 0ddf23169d3..d2782c40f27 100644 --- a/versioned_docs/version-v6/intro/cli.md +++ b/versioned_docs/version-v6/intro/cli.mdx @@ -13,13 +13,13 @@ import AppWizard from '@components/page/intro/AppWizard'; /> -Ionic apps are created and developed primarily through the Ionic [command-line](../reference/glossary.md#cli) utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way. It is also the main tool through which to run the app and connect it to other services, such as Appflow. +Ionic apps are created and developed primarily through the Ionic [command-line](../reference/glossary.mdx#cli) utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way. It is also the main tool through which to run the app and connect it to other services, such as Appflow. ## Install the Ionic CLI -Before proceeding, make sure your computer has [Node.js](../reference/glossary.md#node) installed. See [these instructions](environment.md) to set up an environment for Ionic. +Before proceeding, make sure your computer has [Node.js](../reference/glossary.mdx#node) installed. See [these instructions](environment.mdx) to set up an environment for Ionic. Install the Ionic CLI with npm: diff --git a/docs/intro/environment.md b/versioned_docs/version-v6/intro/environment.mdx similarity index 88% rename from docs/intro/environment.md rename to versioned_docs/version-v6/intro/environment.mdx index 476dda2acf1..ce34f960a7c 100644 --- a/docs/intro/environment.md +++ b/versioned_docs/version-v6/intro/environment.mdx @@ -29,9 +29,9 @@ Git Bash (from git-scm.com) do ## Node & npm -Almost all tooling for modern JavaScript projects is based in [Node.js](../reference/glossary.md#node). The [download page](https://nodejs.org/en/download/) has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure best compatibility. +Almost all tooling for modern JavaScript projects is based in [Node.js](../reference/glossary.mdx#node). The [download page](https://nodejs.org/en/download/) has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure best compatibility. -Node is bundled with [npm](../reference/glossary.md#npm), the package manager for JavaScript. +Node is bundled with [npm](../reference/glossary.mdx#npm), the package manager for JavaScript. To verify the installation, open a new terminal window and run: @@ -46,7 +46,7 @@ Permission errors are common on macOS when installing global packages with `npm` ## Git -Although not required, the version control system [Git](../reference/glossary.md#git) is highly recommended. +Although not required, the version control system [Git](../reference/glossary.mdx#git) is highly recommended. Git is often accompanied by a Git Host, such as [GitHub](https://github.com/), in which case additional setup is required. Follow the tutorial from the Git Host's documentation to set up Git: diff --git a/versioned_docs/version-v6/intro/first-app.md b/versioned_docs/version-v6/intro/first-app.mdx similarity index 100% rename from versioned_docs/version-v6/intro/first-app.md rename to versioned_docs/version-v6/intro/first-app.mdx diff --git a/versioned_docs/version-v6/intro/next.md b/versioned_docs/version-v6/intro/next.mdx similarity index 100% rename from versioned_docs/version-v6/intro/next.md rename to versioned_docs/version-v6/intro/next.mdx diff --git a/versioned_docs/version-v6/intro/upgrading-to-ionic-6.md b/versioned_docs/version-v6/intro/upgrading-to-ionic-6.mdx similarity index 99% rename from versioned_docs/version-v6/intro/upgrading-to-ionic-6.md rename to versioned_docs/version-v6/intro/upgrading-to-ionic-6.mdx index 011970e1d64..9d547486027 100644 --- a/versioned_docs/version-v6/intro/upgrading-to-ionic-6.md +++ b/versioned_docs/version-v6/intro/upgrading-to-ionic-6.mdx @@ -404,7 +404,7 @@ Ensure `null` is not passed in as a value to the `placeholder` property. We reco ### Browser Support -The list of browsers that Ionic supports has changed. Review the [Browser Support Guide](../reference/browser-support) to ensure you are deploying apps to supported browsers. +The list of browsers that Ionic supports has changed. Review the [Browser Support Guide](../reference/browser-support.mdx) to ensure you are deploying apps to supported browsers. If you have a `browserslist` or `.browserslistrc` file, update it with the following content: diff --git a/versioned_docs/version-v6/intro/vscode-extension.md b/versioned_docs/version-v6/intro/vscode-extension.mdx similarity index 100% rename from versioned_docs/version-v6/intro/vscode-extension.md rename to versioned_docs/version-v6/intro/vscode-extension.mdx diff --git a/versioned_docs/version-v6/layout/css-utilities.md b/versioned_docs/version-v6/layout/css-utilities.mdx similarity index 98% rename from versioned_docs/version-v6/layout/css-utilities.md rename to versioned_docs/version-v6/layout/css-utilities.mdx index f743f94a139..678cd6f799b 100644 --- a/versioned_docs/version-v6/layout/css-utilities.md +++ b/versioned_docs/version-v6/layout/css-utilities.mdx @@ -13,7 +13,7 @@ title: CSS Utilities Ionic Framework provides a set of CSS utility classes that can be used on any element in order to modify the text, element placement or adjust the padding and margin. :::note -If your app was not started using an available Ionic Framework starter, the stylesheets listed in the [optional section of the global stylesheets](global-stylesheets.md#optional) will need to be included in order for these styles to work. +If your app was not started using an available Ionic Framework starter, the stylesheets listed in the [optional section of the global stylesheets](global-stylesheets.mdx#optional) will need to be included in order for these styles to work. ::: ## Text Modification @@ -213,7 +213,7 @@ There are also additional classes to modify the visibility based on the screen s The padding class sets the padding area of an element. The padding area is the space between the content of the element and its border. -The default amount of `padding` to be applied is `16px` and is set by the `--ion-padding` variable. See the [CSS Variables](../theming/css-variables.md) section for more information on how to change these values. +The default amount of `padding` to be applied is `16px` and is set by the `--ion-padding` variable. See the [CSS Variables](../theming/css-variables.mdx) section for more information on how to change these values. ```html @@ -263,7 +263,7 @@ The default amount of `padding` to be applied is `16px` and is set by the `--ion The margin area extends the border area with an empty area used to separate the element from its neighbors. -The default amount of `margin` to be applied is `16px` and is set by the `--ion-margin` variable. See the [CSS Variables](../theming/css-variables.md) section for more information on how to change these values. +The default amount of `margin` to be applied is `16px` and is set by the `--ion-margin` variable. See the [CSS Variables](../theming/css-variables.mdx) section for more information on how to change these values. ```html diff --git a/versioned_docs/version-v6/layout/global-stylesheets.md b/versioned_docs/version-v6/layout/global-stylesheets.mdx similarity index 81% rename from versioned_docs/version-v6/layout/global-stylesheets.md rename to versioned_docs/version-v6/layout/global-stylesheets.mdx index 14c3a0f7bf2..6235408e6b3 100644 --- a/versioned_docs/version-v6/layout/global-stylesheets.md +++ b/versioned_docs/version-v6/layout/global-stylesheets.mdx @@ -44,28 +44,28 @@ The following set of CSS files are optional and can safely be commented out or r #### padding.css -Adds utility classes to modify the padding or margin on any element, see [CSS Utilities](css-utilities.md#content-space) for usage information. +Adds utility classes to modify the padding or margin on any element, see [CSS Utilities](css-utilities.mdx#content-space) for usage information. #### float-elements.css -Adds utility classes to float an element based on the breakpoint and side, see [CSS Utilities](css-utilities.md#element-placement) for usage information. +Adds utility classes to float an element based on the breakpoint and side, see [CSS Utilities](css-utilities.mdx#element-placement) for usage information. #### text-alignment.css -Adds utility classes to align the text of an element or adjust the white space based on the breakpoint, see [CSS Utilities](css-utilities.md#text-alignment) for usage information. +Adds utility classes to align the text of an element or adjust the white space based on the breakpoint, see [CSS Utilities](css-utilities.mdx#text-alignment) for usage information. #### text-transformation.css -Adds utility classes to transform the text of an element to `uppercase`, `lowercase` or `capitalize` based on the breakpoint, see [CSS Utilities](css-utilities.md#text-transformation) for usage information. +Adds utility classes to transform the text of an element to `uppercase`, `lowercase` or `capitalize` based on the breakpoint, see [CSS Utilities](css-utilities.mdx#text-transformation) for usage information. #### flex-utils.css -Adds utility classes to align flex containers and items, see [CSS Utilities](css-utilities.md#flex-properties) for usage information. +Adds utility classes to align flex containers and items, see [CSS Utilities](css-utilities.mdx#flex-properties) for usage information. #### display.css -Adds utility classes to hide any element based on the breakpoint, see [CSS Utilities](css-utilities.md#element-display) for usage information. +Adds utility classes to hide any element based on the breakpoint, see [CSS Utilities](css-utilities.mdx#element-display) for usage information. ## Usage -Refer to [Ionic Packages](../intro/cdn.md) for how to include the global stylesheets based on the framework and [CSS Utilities](css-utilities.md) for how to use the optional utilities. +Refer to [Ionic Packages](../intro/cdn.mdx) for how to include the global stylesheets based on the framework and [CSS Utilities](css-utilities.mdx) for how to use the optional utilities. diff --git a/versioned_docs/version-v6/layout/structure.md b/versioned_docs/version-v6/layout/structure.mdx similarity index 100% rename from versioned_docs/version-v6/layout/structure.md rename to versioned_docs/version-v6/layout/structure.mdx diff --git a/versioned_docs/version-v6/reference/browser-support.md b/versioned_docs/version-v6/reference/browser-support.mdx similarity index 100% rename from versioned_docs/version-v6/reference/browser-support.md rename to versioned_docs/version-v6/reference/browser-support.mdx diff --git a/versioned_docs/version-v6/reference/glossary.md b/versioned_docs/version-v6/reference/glossary.mdx similarity index 99% rename from versioned_docs/version-v6/reference/glossary.md rename to versioned_docs/version-v6/reference/glossary.mdx index e61088621c0..02df343abf4 100644 --- a/versioned_docs/version-v6/reference/glossary.md +++ b/versioned_docs/version-v6/reference/glossary.mdx @@ -78,7 +78,7 @@ title: Glossary

- +{/* cspell:disable */}
@@ -97,7 +97,7 @@ title: Glossary

- +{/* cspell:enable */}
diff --git a/versioned_docs/version-v6/reference/migration.md b/versioned_docs/version-v6/reference/migration.mdx similarity index 100% rename from versioned_docs/version-v6/reference/migration.md rename to versioned_docs/version-v6/reference/migration.mdx diff --git a/versioned_docs/version-v6/reference/release-notes.md b/versioned_docs/version-v6/reference/release-notes.mdx similarity index 100% rename from versioned_docs/version-v6/reference/release-notes.md rename to versioned_docs/version-v6/reference/release-notes.mdx diff --git a/versioned_docs/version-v6/reference/support.md b/versioned_docs/version-v6/reference/support.mdx similarity index 99% rename from versioned_docs/version-v6/reference/support.md rename to versioned_docs/version-v6/reference/support.mdx index ea86dd944c8..9f36b32d513 100644 --- a/versioned_docs/version-v6/reference/support.md +++ b/versioned_docs/version-v6/reference/support.mdx @@ -16,7 +16,7 @@ The Ionic Framework has been 100% open source (MIT) since the very beginning, an ## Framework Maintenance and Support Status -Given the reality of time and resource constraints as well as the desire to keep innovating in the frontend development space, over time it becomes necessary for the Ionic team to shift focus to newer versions of the Framework. However, Ionic will do everything it can to make the transition to newer versions as smooth as possible. The Ionic team recommends updating to the newest version of the Ionic Framework for the latest features, improvements and stability updates. For more details, consult [the Migration page](migration.md). +Given the reality of time and resource constraints as well as the desire to keep innovating in the frontend development space, over time it becomes necessary for the Ionic team to shift focus to newer versions of the Framework. However, Ionic will do everything it can to make the transition to newer versions as smooth as possible. The Ionic team recommends updating to the newest version of the Ionic Framework for the latest features, improvements and stability updates. For more details, consult [the Migration page](migration.mdx). The current status of each Ionic Framework version is: diff --git a/versioned_docs/version-v6/reference/versioning.md b/versioned_docs/version-v6/reference/versioning.mdx similarity index 98% rename from versioned_docs/version-v6/reference/versioning.md rename to versioned_docs/version-v6/reference/versioning.mdx index c7e746da92b..b7f89e2879b 100644 --- a/versioned_docs/version-v6/reference/versioning.md +++ b/versioned_docs/version-v6/reference/versioning.mdx @@ -1,6 +1,6 @@ # Versioning - +{/* TOC goes here */} Ionic Framework follows the Semantic Versioning (SemVer) convention: major.minor.patch. Incompatible API changes increment the major version, adding backwards-compatible functionality increments the minor version, and backwards-compatible bug fixes increment the patch version. diff --git a/versioned_docs/version-v6/techniques/security.md b/versioned_docs/version-v6/techniques/security.mdx similarity index 100% rename from versioned_docs/version-v6/techniques/security.md rename to versioned_docs/version-v6/techniques/security.mdx diff --git a/versioned_docs/version-v6/test/page1.md b/versioned_docs/version-v6/test/page1.md deleted file mode 100644 index d965196cf5d..00000000000 --- a/versioned_docs/version-v6/test/page1.md +++ /dev/null @@ -1,3 +0,0 @@ -# Testing Page 1 - -This is Testing page 1, Get to Testing Page 2 [here](page2.md). diff --git a/versioned_docs/version-v6/test/page1.mdx b/versioned_docs/version-v6/test/page1.mdx new file mode 100644 index 00000000000..cd5b72410d0 --- /dev/null +++ b/versioned_docs/version-v6/test/page1.mdx @@ -0,0 +1,3 @@ +# Testing Page 1 + +This is Testing page 1, Get to Testing Page 2 [here](page2.mdx). diff --git a/versioned_docs/version-v6/test/page2.md b/versioned_docs/version-v6/test/page2.md deleted file mode 100644 index 2d2d61adacf..00000000000 --- a/versioned_docs/version-v6/test/page2.md +++ /dev/null @@ -1,3 +0,0 @@ -# Testing Page 2 - -This is Testing page 2, Get to Testing Page 1 [here](page1.md). diff --git a/versioned_docs/version-v6/test/page2.mdx b/versioned_docs/version-v6/test/page2.mdx new file mode 100644 index 00000000000..5ebdef8dca0 --- /dev/null +++ b/versioned_docs/version-v6/test/page2.mdx @@ -0,0 +1,3 @@ +# Testing Page 2 + +This is Testing page 2, Get to Testing Page 1 [here](page1.mdx). diff --git a/versioned_docs/version-v6/theming/advanced.md b/versioned_docs/version-v6/theming/advanced.mdx similarity index 96% rename from versioned_docs/version-v6/theming/advanced.md rename to versioned_docs/version-v6/theming/advanced.mdx index 632402e98b0..d6775a1d3e3 100644 --- a/versioned_docs/version-v6/theming/advanced.md +++ b/versioned_docs/version-v6/theming/advanced.mdx @@ -62,8 +62,8 @@ While the application and stepped variables in the themes section are useful for | `--ion-safe-area-right` | Adjust the safe area inset right of the app | | `--ion-safe-area-bottom` | Adjust the safe area inset bottom of the app | | `--ion-safe-area-left` | Adjust the safe area inset left of the app | -| `--ion-margin` | Adjust the margin of the [Margin attributes](../layout/css-utilities.md#element-margin) | -| `--ion-padding` | Adjust the padding of the [Padding attributes](../layout/css-utilities.md#element-padding) | +| `--ion-margin` | Adjust the margin of the [Margin attributes](../layout/css-utilities.mdx#element-margin) | +| `--ion-padding` | Adjust the padding of the [Padding attributes](../layout/css-utilities.mdx#element-padding) | ### Grid Variables @@ -105,7 +105,7 @@ There is not yet full CSS properties (variables). CSS variables add dynamic values to an otherwise static language. This is something that has traditionally required a CSS preprocessor like Sass. The look of an application can easily be changed by changing the value of any of the [CSS Variables](css-variables.md) Ionic Framework provides. +The Ionic Framework components are themed using CSS properties (variables). CSS variables add dynamic values to an otherwise static language. This is something that has traditionally required a CSS preprocessor like Sass. The look of an application can easily be changed by changing the value of any of the [CSS Variables](css-variables.mdx) Ionic Framework provides. ## CSS Shadow Parts -CSS Shadow Parts were added to make it easier to fully customize Ionic Framework Shadow components. In the past, components that use Shadow DOM were unable to have elements inside of their shadow tree styled directly. With the addition of Shadow parts, there is no longer a need for CSS variables for every property on an inner element of a Shadow component. For more information on customizing Ionic Framework components using parts, see the [CSS Shadow Parts](css-shadow-parts.md) guide. +CSS Shadow Parts were added to make it easier to fully customize Ionic Framework Shadow components. In the past, components that use Shadow DOM were unable to have elements inside of their shadow tree styled directly. With the addition of Shadow parts, there is no longer a need for CSS variables for every property on an inner element of a Shadow component. For more information on customizing Ionic Framework components using parts, see the [CSS Shadow Parts](css-shadow-parts.mdx) guide. ## Branding -Ionic provides application colors that can be used to theme an application to match a brand or color scheme. The default theme uses a light background, but everything from the background color to the text color is fully customizable. For more information on branding, see [Themes](themes.md). +Ionic provides application colors that can be used to theme an application to match a brand or color scheme. The default theme uses a light background, but everything from the background color to the text color is fully customizable. For more information on branding, see [Themes](themes.mdx). diff --git a/versioned_docs/version-v6/theming/color-generator.md b/versioned_docs/version-v6/theming/color-generator.mdx similarity index 100% rename from versioned_docs/version-v6/theming/color-generator.md rename to versioned_docs/version-v6/theming/color-generator.mdx diff --git a/docs/theming/colors.md b/versioned_docs/version-v6/theming/colors.mdx similarity index 88% rename from docs/theming/colors.md rename to versioned_docs/version-v6/theming/colors.mdx index 666389851a0..9692c33fd00 100644 --- a/docs/theming/colors.md +++ b/versioned_docs/version-v6/theming/colors.mdx @@ -33,7 +33,7 @@ A color can be applied to an Ionic component in order to change the default colo ## Layered Colors -Each color consists of the following properties: a `base`, `contrast`, `shade`, and `tint`. The `base` and `contrast` colors also require a `rgb` property which is the same color, just in rgb format. See [The Alpha Problem](advanced.md#the-alpha-problem) for an explanation of why the `rgb` property is also needed. Select from the dropdown below to see all of the default colors Ionic provides and their variations. +Each color consists of the following properties: a `base`, `contrast`, `shade`, and `tint`. The `base` and `contrast` colors also require a `rgb` property which is the same color, just in rgb format. See [The Alpha Problem](advanced.mdx#the-alpha-problem) for an explanation of why the `rgb` property is also needed. Select from the dropdown below to see all of the default colors Ionic provides and their variations. @@ -55,10 +55,10 @@ To change the default values of a color, all of the listed variations for that c When `secondary` is applied to a button, not only is the base color #006600 used, but the contrast color #ffffff is used for the text, along with shade #005a00 and tint #1a751a colors for the different states of the button. :::note -Not sure how to get the variation colors from the base color? Try out our [Color Generator](color-generator.md) that calculates all of the variations and provides code to copy/paste into an app! +Not sure how to get the variation colors from the base color? Try out our [Color Generator](color-generator.mdx) that calculates all of the variations and provides code to copy/paste into an app! ::: -See the [CSS Variables documentation](css-variables.md) for more information on CSS variables. +See the [CSS Variables documentation](css-variables.mdx) for more information on CSS variables. ## Adding Colors @@ -105,7 +105,7 @@ div { } ``` -See the [CSS Variables documentation](css-variables.md) for more information on setting and using CSS variables. +See the [CSS Variables documentation](css-variables.mdx) for more information on setting and using CSS variables. ## New Color Creator diff --git a/versioned_docs/version-v6/theming/css-shadow-parts.md b/versioned_docs/version-v6/theming/css-shadow-parts.mdx similarity index 95% rename from versioned_docs/version-v6/theming/css-shadow-parts.md rename to versioned_docs/version-v6/theming/css-shadow-parts.mdx index c17d1fdbc1d..74ce9fe2fa4 100644 --- a/versioned_docs/version-v6/theming/css-shadow-parts.md +++ b/versioned_docs/version-v6/theming/css-shadow-parts.mdx @@ -107,7 +107,7 @@ All exposed parts for an Ionic Framework component can be found under the CSS Sh In order to have parts a component must meet the following criteria: -- It is a [Shadow DOM](../reference/glossary.md#shadow) component. If it is a [Scoped](../reference/glossary.md#scoped) or Light DOM component, the child elements can be targeted directly. If a component is Scoped or Shadow, it will be listed by its name on its [component documentation page](../components.md). +- It is a [Shadow DOM](../reference/glossary.mdx#shadow) component. If it is a [Scoped](../reference/glossary.mdx#scoped) or Light DOM component, the child elements can be targeted directly. If a component is Scoped or Shadow, it will be listed by its name on its [component documentation page](../components.md). - It contains children elements. For example, `ion-card-header` is a Shadow component, but all styles are applied to the host element. Since it has no child elements, there’s no need for parts. - The children elements are not structural. In certain components, including `ion-title`, the child element is a structural element used to position the inner elements. We do not recommend customizing structural elements as this can have unexpected results. @@ -119,11 +119,11 @@ We welcome recommendations for additional parts. Please create a browser support meets the requirements before implementing parts in an app. If browser support for older versions is required, we recommend continuing to use [CSS Variables](../theming/css-variables.md) for styling. +CSS Shadow Parts are supported in the recent versions of all of the major browsers. However, some of the older versions do not support shadow parts. Verify the browser support meets the requirements before implementing parts in an app. If browser support for older versions is required, we recommend continuing to use [CSS Variables](../theming/css-variables.mdx) for styling. ### Vendor Prefixed Pseudo-Elements - +{/* prettier-ignore */} Vendor prefixed pseudo-elements are not supported at this time. An example of this would be any of the `::-webkit-scrollbar` pseudo-elements: ```css diff --git a/versioned_docs/version-v6/theming/css-variables.md b/versioned_docs/version-v6/theming/css-variables.mdx similarity index 97% rename from versioned_docs/version-v6/theming/css-variables.md rename to versioned_docs/version-v6/theming/css-variables.mdx index 66482788734..cf293009b51 100644 --- a/versioned_docs/version-v6/theming/css-variables.md +++ b/versioned_docs/version-v6/theming/css-variables.mdx @@ -95,4 +95,4 @@ Ionic provides variables that exist at the component level, such as `--backgroun ### Global Variables -There are several global variables that Ionic provides in order to make theming an entire application easier. For more information, see [Colors](colors.md), [Themes](themes.md) and [Advanced Theming](advanced.md). +There are several global variables that Ionic provides in order to make theming an entire application easier. For more information, see [Colors](colors.mdx), [Themes](themes.mdx) and [Advanced Theming](advanced.mdx). diff --git a/versioned_docs/version-v6/theming/dark-mode.md b/versioned_docs/version-v6/theming/dark-mode.mdx similarity index 97% rename from versioned_docs/version-v6/theming/dark-mode.md rename to versioned_docs/version-v6/theming/dark-mode.mdx index 707c4f92bb9..847bef0aa26 100644 --- a/versioned_docs/version-v6/theming/dark-mode.md +++ b/versioned_docs/version-v6/theming/dark-mode.mdx @@ -84,7 +84,7 @@ function toggleDarkTheme(shouldAdd) { Tip: make sure to view the Codepen below in a [supported browser](https://caniuse.com/#feat=prefers-color-scheme) and then try changing the system preferences on your device between light & dark mode. Here's [how to enable dark mode on Windows 10](https://blogs.windows.com/windowsexperience/2016/08/08/windows-10-tip-personalize-your-pc-by-enabling-the-dark-theme/) and [how to enable it on a Mac](https://support.apple.com/en-us/HT208976). ::: - +{/* Codepen https://codepen.io/ionic/pen/jONzJpG */} @@ -117,7 +117,7 @@ function checkToggle(shouldCheck) { } ``` - +{/* Codepen https://codepen.io/ionic/pen/zYOpQLj */} @@ -148,21 +148,21 @@ For more information regarding `color-scheme` please see https://web.dev/color-s ::: :::note -For developers looking to customize the theme color under the status bar in Safari on iOS 15 or the toolbar in Safari on macOS, see [`theme-color` Meta](./advanced.md#theme-color-meta). +For developers looking to customize the theme color under the status bar in Safari on iOS 15 or the toolbar in Safari on macOS, see [`theme-color` Meta](./advanced.mdx#theme-color-meta). ::: ## Ionic Dark Theme Ionic has a recommended theme for variables to use in order to get a dark mode based on the device running the app. It can be broken down into the following parts: -1. Changing the default [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement the dark background in the `body.dark` selector. +1. Changing the default [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement the dark background in the `body.dark` selector. 1. Setting variables for the dark theme on `ios` devices. 1. Setting variables for the dark theme on `md` devices. The following code can be copied and pasted into an app to get Ionic's dark theme. We add the `dark` class to the document body using JavaScript as mentioned in the [combining with JavaScript](#combining-with-javascript) section. The dark mode will not be enabled until the `dark` class is added to the document body. :::note -For more information on the variables that are being changed, including other variables that can be added to further customize, see [Themes](themes.md). +For more information on the variables that are being changed, including other variables that can be added to further customize, see [Themes](themes.mdx). ::: ```css diff --git a/docs/theming/platform-styles.md b/versioned_docs/version-v6/theming/platform-styles.mdx similarity index 95% rename from docs/theming/platform-styles.md rename to versioned_docs/version-v6/theming/platform-styles.mdx index 77d0a5665fc..8fc612833fa 100644 --- a/docs/theming/platform-styles.md +++ b/versioned_docs/version-v6/theming/platform-styles.mdx @@ -48,4 +48,4 @@ There are also many global CSS variables that can be used to override the styles } ``` -There are many global variables that can be overridden by mode, including [Ionic's color variables](colors.md), [theme variables](themes.md) and [global component variables](advanced.md). +There are many global variables that can be overridden by mode, including [Ionic's color variables](colors.mdx), [theme variables](themes.mdx) and [global component variables](advanced.mdx). diff --git a/versioned_docs/version-v6/theming/themes.md b/versioned_docs/version-v6/theming/themes.mdx similarity index 97% rename from versioned_docs/version-v6/theming/themes.md rename to versioned_docs/version-v6/theming/themes.mdx index 79408c5fa96..9ef41c9c685 100644 --- a/versioned_docs/version-v6/theming/themes.md +++ b/versioned_docs/version-v6/theming/themes.mdx @@ -19,7 +19,7 @@ Ionic provides several global variables that are used throughout components to c The application colors are used in multiple places in Ionic. These are useful for easily creating dark themes or themes that match a brand. -It is important to note that the background and text color variables also require a rgb variable to be set in rgb format. See [The Alpha Problem](advanced.md#the-alpha-problem) for an explanation of why the `rgb` property is also needed. +It is important to note that the background and text color variables also require a rgb variable to be set in rgb format. See [The Alpha Problem](advanced.mdx#the-alpha-problem) for an explanation of why the `rgb` property is also needed. | Name | Description | | ------------------------------------------ | ---------------------------------------------------- | diff --git a/versioned_docs/version-v6/troubleshooting/build.md b/versioned_docs/version-v6/troubleshooting/build.mdx similarity index 100% rename from versioned_docs/version-v6/troubleshooting/build.md rename to versioned_docs/version-v6/troubleshooting/build.mdx diff --git a/versioned_docs/version-v6/troubleshooting/cors.md b/versioned_docs/version-v6/troubleshooting/cors.mdx similarity index 100% rename from versioned_docs/version-v6/troubleshooting/cors.md rename to versioned_docs/version-v6/troubleshooting/cors.mdx diff --git a/versioned_docs/version-v6/troubleshooting/debugging.md b/versioned_docs/version-v6/troubleshooting/debugging.mdx similarity index 100% rename from versioned_docs/version-v6/troubleshooting/debugging.md rename to versioned_docs/version-v6/troubleshooting/debugging.mdx diff --git a/versioned_docs/version-v6/troubleshooting/native.md b/versioned_docs/version-v6/troubleshooting/native.mdx similarity index 96% rename from versioned_docs/version-v6/troubleshooting/native.md rename to versioned_docs/version-v6/troubleshooting/native.mdx index 2e38a5a977e..a20617fc1ac 100644 --- a/versioned_docs/version-v6/troubleshooting/native.md +++ b/versioned_docs/version-v6/troubleshooting/native.mdx @@ -18,13 +18,13 @@ Code Signing Error: Failed to create provisioning profile. The app ID "com.csfor Running an app on an iOS device requires a provisioning profile. If a provisioning profile has not been created yet follow these directions: -1. Set the [Package ID](../reference/glossary.md#package-id). +1. Set the [Package ID](../reference/glossary.mdx#package-id). For Capacitor, open the `capacitor.config.json` file and modify the `appId` property. For Cordova, open the `config.xml` file and modify the `id` attribute of the root element, ``. See [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) for more information. - +{/* prettier-ignore */} 2. Open the project in Xcode. For Capacitor, run the following to open the app in Xcode: @@ -35,12 +35,12 @@ Running an app on an iOS device requires a provisioning profile. If a provisioni For Cordova, open Xcode. Use **File** » **Open** and locate the app. Open the app's `platforms/ios` directory. - +{/* prettier-ignore */} 3. In Project navigator, select the project root to open the project editor. Under the **Identity** section, verify that the Package ID that was set matches the Bundle Identifier. ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png) - +{/* prettier-ignore */} 4. In the same project editor, under the Signing section, ensure Automatically manage signing is enabled. Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing. diff --git a/versioned_docs/version-v6/troubleshooting/runtime.md b/versioned_docs/version-v6/troubleshooting/runtime.mdx similarity index 100% rename from versioned_docs/version-v6/troubleshooting/runtime.md rename to versioned_docs/version-v6/troubleshooting/runtime.mdx diff --git a/versioned_docs/version-v6/utilities/animations.md b/versioned_docs/version-v6/utilities/animations.mdx similarity index 99% rename from versioned_docs/version-v6/utilities/animations.md rename to versioned_docs/version-v6/utilities/animations.mdx index 8edaf9179db..0fd410bf22f 100644 --- a/versioned_docs/version-v6/utilities/animations.md +++ b/versioned_docs/version-v6/utilities/animations.mdx @@ -517,7 +517,7 @@ const parent = createAnimation() This example shows 3 child animations controlled by a single parent animation. Animations `squareA` and `squareB` inherit the parent animation's duration of 2000ms, but animation `squareC` has a duration of 5000ms since it was explicitly set. - +{/* cspell:disable-next-line */} @@ -636,7 +636,7 @@ In this example, an inline opacity of 0.2 is set on the `.square` element prior See [Methods](#methods) for a complete list of hooks. - +{/* cspell:disable-next-line */} @@ -854,7 +854,7 @@ await squareC.play(); ## Gesture Animations -Ionic Animations gives developers the ability to create powerful gesture-based animations by integrating seamlessly with [Ionic Gestures](gestures.md). +Ionic Animations gives developers the ability to create powerful gesture-based animations by integrating seamlessly with [Ionic Gestures](gestures.mdx). ### Usage @@ -1512,7 +1512,7 @@ export default defineComponent({ ```` - +{/* cspell:disable-next-line */} diff --git a/versioned_docs/version-v6/utilities/gestures.md b/versioned_docs/version-v6/utilities/gestures.mdx similarity index 99% rename from versioned_docs/version-v6/utilities/gestures.md rename to versioned_docs/version-v6/utilities/gestures.mdx index ab65cfb8f7b..af39daadadc 100644 --- a/versioned_docs/version-v6/utilities/gestures.md +++ b/versioned_docs/version-v6/utilities/gestures.mdx @@ -446,7 +446,7 @@ In the example above, we want to be able to detect double clicks on an element. ## Gesture Animations -See our guide on implementing gesture animations: [Gesture Animations with Ionic Animations](animations.md#gesture-animations) +See our guide on implementing gesture animations: [Gesture Animations with Ionic Animations](animations.mdx#gesture-animations) ## Types diff --git a/versioned_docs/version-v6/vue/navigation.mdx b/versioned_docs/version-v6/vue/navigation.mdx index d264a062d0e..339eaef08b2 100644 --- a/versioned_docs/version-v6/vue/navigation.mdx +++ b/versioned_docs/version-v6/vue/navigation.mdx @@ -140,7 +140,7 @@ The `router-link` attribute can be set on any Ionic Vue component, and the route The `router-direction` attribute accepts values of `forward`, `back`, or `none` and is used to control the direction of the page transition. -The `router-animation` attribute accepts an `AnimationBuilder` function and is used to provide a custom page transition that is only used when clicking the component it is provided on. The `AnimationBuilder` type is a function that returns an Ionic Animation instance. See the [Animations documentation](../utilities/animations) for more information on using animations in Ionic Vue. +The `router-animation` attribute accepts an `AnimationBuilder` function and is used to provide a custom page transition that is only used when clicking the component it is provided on. The `AnimationBuilder` type is a function that returns an Ionic Animation instance. See the [Animations documentation](../utilities/animations.mdx) for more information on using animations in Ionic Vue. ```html Click Me @@ -192,7 +192,7 @@ The example above has the app navigate to `/page2` with a custom animation that `useIonRouter` uses the Vue `inject()` function and should only be used inside of your `setup()` function. ::: -See the [useIonRouter documentation](./utility-functions#router) for more details as well as type information. +See the [useIonRouter documentation](./utility-functions.mdx#router) for more details as well as type information. ### Navigating using `router.go` @@ -586,7 +586,7 @@ Components presented via `IonModal` or `IonPopover` do not typically need an `Io ### useIonRouter -▸ **useIonRouter**(): [`UseIonRouterResult`](utility-functions#useionrouterresult) +▸ **useIonRouter**(): [`UseIonRouterResult`](utility-functions.mdx#useionrouterresult) Returns the Ionic router instance, containing API methods for navigating, customizing page transitions and routing context for native features. This function can be used in combination with the [`useRouter`](https://router.vuejs.org/api/index.html#userouter) function from Vue. diff --git a/versioned_docs/version-v6/vue/utility-functions.mdx b/versioned_docs/version-v6/vue/utility-functions.mdx index d5461a255a9..295ba5f545f 100644 --- a/versioned_docs/version-v6/vue/utility-functions.mdx +++ b/versioned_docs/version-v6/vue/utility-functions.mdx @@ -85,7 +85,7 @@ useIonRouter(): UseIonRouterResult; - The `replace` method is the equivalent of calling `ionRouter.navigate(location, 'root', 'replace', animation)`. -See the [Vue Navigation Documentation](./navigation#navigating-using-useionrouter) for more usage examples. +See the [Vue Navigation Documentation](./navigation.mdx#navigating-using-useionrouter) for more usage examples. ## Hardware Back Button @@ -181,4 +181,4 @@ export default defineComponent({ Pages in your app need to be using the `IonPage` component in order for lifecycle methods and hooks to fire properly. ::: -See the [Vue Lifecycle Documentation](./lifecycle) for more information and usage examples. +See the [Vue Lifecycle Documentation](./lifecycle.mdx) for more information and usage examples. diff --git a/versioned_docs/version-v7/updating/4-0.md b/versioned_docs/version-v7/updating/4-0.md index 57c6e32969f..880d16f62fd 100644 --- a/versioned_docs/version-v7/updating/4-0.md +++ b/versioned_docs/version-v7/updating/4-0.md @@ -192,7 +192,7 @@ In V4, navigation received the most changes. Now, instead of using Ionic's own ` To provide the platform-specific animations that users are used to, we have created `ion-router-outlet` for Angular Apps. This behaves in a similar manner to Angular's `router-outlet` but provides a stack-based navigation (tabs) and animations. -For a detailed explanation in navigation works in a V4 project, check out the [Angular navigation guide](../angular/navigation.md). +For a detailed explanation in navigation works in a V4 project, check out the [Angular navigation guide](../angular/navigation.mdx). ### Lazy Loading @@ -242,7 +242,7 @@ export class HomePageModule {} export class AppModule {} ``` -For a detailed explanation of lazy loading in V4 project, check out the [Angular navigation guide](../angular/navigation.md#lazy-loading-routes). +For a detailed explanation of lazy loading in V4 project, check out the [Angular navigation guide](../angular/navigation.mdx#lazy-loading-routes). ### Markup Changes From 3c5f9ec3105f386df4ee1b67cbf29d73f328e675 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 24 Apr 2024 08:21:28 -0700 Subject: [PATCH 4/4] docs(mdx): convert md to mdx (#3609) --- .editorconfig | 2 +- CONTRIBUTING.md | 8 ++-- _templates/README.md | 4 +- docs/angular/your-first-app.mdx | 2 +- .../version-v7/api.md => docs/api.mdx | 2 +- docs/api/picker-column-option.md | 2 +- docs/api/picker-column.md | 2 +- docs/api/picker-legacy.md | 2 +- docs/{cli.md => cli.mdx} | 12 +++--- docs/{components.md => components.mdx} | 4 +- docs/core-concepts/cross-platform.mdx | 2 +- docs/developing/tips.mdx | 2 +- docs/{index.md => index.mdx} | 4 +- docs/intro/cli.mdx | 6 +-- docs/intro/environment.mdx | 2 +- docs/{native-faq.md => native-faq.mdx} | 0 docs/{native-setup.md => native-setup.mdx} | 0 docs/{native.md => native.mdx} | 0 docs/{react.md => react.mdx} | 0 docs/react/your-first-app.mdx | 2 +- docs/reference/browser-support.mdx | 2 +- docs/theming/advanced.mdx | 4 +- docs/theming/css-shadow-parts.mdx | 4 +- docs/theming/dark-mode.mdx | 10 ++--- docs/theming/high-contrast-mode.md | 16 ++++---- docs/theming/platform-styles.mdx | 4 +- docs/troubleshooting/debugging.mdx | 2 +- docs/troubleshooting/native.mdx | 35 ++++++++++------- docs/updating/4-0.mdx | 4 +- docs/vue/overview.mdx | 2 +- docs/vue/your-first-app.mdx | 2 +- package.json | 2 +- .../version-v5/angular/your-first-app.mdx | 4 +- versioned_docs/version-v5/{api.md => api.mdx} | 0 versioned_docs/version-v5/api/content.mdx | 2 +- versioned_docs/version-v5/api/item.mdx | 6 +-- versioned_docs/version-v5/{cli.md => cli.mdx} | 2 +- .../{components.md => components.mdx} | 4 +- .../core-concepts/cross-platform.mdx | 6 +-- .../version-v5/core-concepts/fundamentals.mdx | 2 +- .../version-v5/core-concepts/webview.mdx | 2 +- versioned_docs/version-v5/developing/tips.mdx | 2 +- .../version-v5/{index.md => index.mdx} | 2 +- versioned_docs/version-v5/intro/cli.mdx | 6 +-- .../version-v5/intro/environment.mdx | 2 +- ...tive-community.md => native-community.mdx} | 4 +- .../{native-faq.md => native-faq.mdx} | 6 +-- .../version-v5/{native.md => native.mdx} | 4 +- .../version-v5/native/abbyy-rtr.mdx | 2 +- .../version-v5/native/action-sheet.mdx | 2 +- versioned_docs/version-v5/native/adjust.mdx | 2 +- versioned_docs/version-v5/native/admob.mdx | 2 +- versioned_docs/version-v5/native/aes-256.mdx | 2 +- .../version-v5/native/all-in-one-sdk.mdx | 2 +- .../version-v5/native/analytics-firebase.mdx | 2 +- .../version-v5/native/android-exoplayer.mdx | 2 +- .../version-v5/native/android-full-screen.mdx | 2 +- .../version-v5/native/android-notch.mdx | 2 +- .../version-v5/native/android-permissions.mdx | 2 +- versioned_docs/version-v5/native/anyline.mdx | 2 +- .../version-v5/native/app-availability.mdx | 2 +- .../native/app-center-analytics.mdx | 2 +- .../version-v5/native/app-center-crashes.mdx | 2 +- .../version-v5/native/app-center-push.mdx | 2 +- .../version-v5/native/app-preferences.mdx | 2 +- versioned_docs/version-v5/native/app-rate.mdx | 2 +- .../version-v5/native/app-version.mdx | 2 +- .../version-v5/native/apple-wallet.mdx | 2 +- .../version-v5/native/appsflyer.mdx | 2 +- .../version-v5/native/background-fetch.mdx | 2 +- .../native/background-geolocation.mdx | 2 +- .../version-v5/native/background-mode.mdx | 2 +- .../version-v5/native/background-upload.mdx | 2 +- versioned_docs/version-v5/native/badge.mdx | 2 +- .../version-v5/native/barcode-scanner.mdx | 2 +- .../version-v5/native/battery-status.mdx | 2 +- versioned_docs/version-v5/native/biocatch.mdx | 2 +- .../version-v5/native/biometric-wrapper.mdx | 2 +- versioned_docs/version-v5/native/ble.mdx | 2 +- versioned_docs/version-v5/native/blinkid.mdx | 2 +- .../version-v5/native/bluetooth-le.mdx | 2 +- .../version-v5/native/bluetooth-serial.mdx | 2 +- .../version-v5/native/branch-io.mdx | 2 +- .../version-v5/native/broadcaster.mdx | 2 +- .../version-v5/native/build-info.mdx | 2 +- versioned_docs/version-v5/native/calendar.mdx | 2 +- .../version-v5/native/call-directory.mdx | 2 +- .../version-v5/native/call-number.mdx | 2 +- .../version-v5/native/camera-preview.mdx | 2 +- versioned_docs/version-v5/native/camera.mdx | 2 +- versioned_docs/version-v5/native/chooser.mdx | 2 +- .../version-v5/native/clevertap.mdx | 2 +- .../version-v5/native/clipboard.mdx | 2 +- .../version-v5/native/cloud-settings.mdx | 2 +- .../version-v5/native/code-push.mdx | 2 +- .../version-v5/native/custom-uisdk.mdx | 2 +- .../version-v5/native/deeplinks.mdx | 2 +- .../version-v5/native/device-accounts.mdx | 2 +- .../version-v5/native/device-motion.mdx | 2 +- .../version-v5/native/device-orientation.mdx | 2 +- versioned_docs/version-v5/native/device.mdx | 2 +- .../version-v5/native/dfu-update.mdx | 2 +- .../version-v5/native/diagnostic.mdx | 2 +- versioned_docs/version-v5/native/dialogs.mdx | 2 +- versioned_docs/version-v5/native/dns.mdx | 2 +- .../version-v5/native/document-picker.mdx | 2 +- .../version-v5/native/document-scanner.mdx | 2 +- .../version-v5/native/document-viewer.mdx | 2 +- .../version-v5/native/email-composer.mdx | 2 +- versioned_docs/version-v5/native/fabric.mdx | 2 +- versioned_docs/version-v5/native/facebook.mdx | 2 +- versioned_docs/version-v5/native/fcm.mdx | 2 +- .../version-v5/native/file-opener.mdx | 2 +- .../version-v5/native/file-path.mdx | 2 +- .../version-v5/native/file-transfer.mdx | 2 +- .../version-v5/native/firebase-analytics.mdx | 2 +- .../native/firebase-authentication.mdx | 2 +- .../version-v5/native/firebase-config.mdx | 2 +- .../version-v5/native/firebase-crash.mdx | 2 +- .../native/firebase-crashlytics.mdx | 2 +- .../native/firebase-dynamic-links.mdx | 2 +- .../version-v5/native/firebase-messaging.mdx | 2 +- .../version-v5/native/firebase-vision.mdx | 2 +- .../version-v5/native/firebase-x.mdx | 2 +- versioned_docs/version-v5/native/firebase.mdx | 2 +- .../version-v5/native/flashlight.mdx | 2 +- .../version-v5/native/foreground-service.mdx | 2 +- versioned_docs/version-v5/native/ftp.mdx | 2 +- .../version-v5/native/gao-de-location.mdx | 2 +- .../version-v5/native/ge-tui-sdk-plugin.mdx | 2 +- .../version-v5/native/geolocation.mdx | 2 +- .../version-v5/native/globalization.mdx | 2 +- .../version-v5/native/google-analytics.mdx | 2 +- .../version-v5/native/google-nearby.mdx | 2 +- .../version-v5/native/google-plus.mdx | 2 +- .../version-v5/native/health-kit.mdx | 2 +- versioned_docs/version-v5/native/health.mdx | 2 +- versioned_docs/version-v5/native/http.mdx | 2 +- .../version-v5/native/iamport-cordova.mdx | 2 +- versioned_docs/version-v5/native/ibeacon.mdx | 2 +- .../version-v5/native/image-picker.mdx | 2 +- versioned_docs/version-v5/native/imap.mdx | 2 +- .../version-v5/native/in-app-browser.mdx | 2 +- .../version-v5/native/in-app-purchase-2.mdx | 2 +- .../version-v5/native/in-app-review.mdx | 2 +- versioned_docs/version-v5/native/insomnia.mdx | 2 +- .../version-v5/native/instagram.mdx | 2 +- versioned_docs/version-v5/native/intercom.mdx | 2 +- .../version-v5/native/ionic-webview.mdx | 2 +- .../ios-aswebauthenticationsession-api.mdx | 2 +- versioned_docs/version-v5/native/is-debug.mdx | 2 +- versioned_docs/version-v5/native/keyboard.mdx | 2 +- versioned_docs/version-v5/native/keychain.mdx | 2 +- .../version-v5/native/kommunicate.mdx | 2 +- .../version-v5/native/launch-navigator.mdx | 2 +- .../version-v5/native/launch-review.mdx | 2 +- .../version-v5/native/line-login.mdx | 2 +- .../version-v5/native/local-notifications.mdx | 2 +- .../version-v5/native/location-accuracy.mdx | 2 +- .../native/lottie-splash-screen.mdx | 2 +- .../version-v5/native/media-capture.mdx | 2 +- versioned_docs/version-v5/native/media.mdx | 2 +- versioned_docs/version-v5/native/metrix.mdx | 2 +- versioned_docs/version-v5/native/mixpanel.mdx | 2 +- .../version-v5/native/mlkit-translate.mdx | 2 +- .../version-v5/native/mobile-messaging.mdx | 2 +- .../native/multiple-document-picker.mdx | 2 +- .../version-v5/native/music-controls.mdx | 2 +- .../version-v5/native/native-audio.mdx | 2 +- .../version-v5/native/native-geocoder.mdx | 2 +- .../version-v5/native/native-keyboard.mdx | 2 +- .../native/native-page-transitions.mdx | 2 +- .../version-v5/native/native-storage.mdx | 2 +- .../version-v5/native/network-interface.mdx | 2 +- versioned_docs/version-v5/native/network.mdx | 2 +- versioned_docs/version-v5/native/nfc.mdx | 2 +- versioned_docs/version-v5/native/ocr.mdx | 2 +- .../version-v5/native/onesignal.mdx | 2 +- .../native/open-native-settings.mdx | 2 +- versioned_docs/version-v5/native/openalpr.mdx | 2 +- .../version-v5/native/pdf-generator.mdx | 2 +- .../version-v5/native/photo-library.mdx | 2 +- .../version-v5/native/photo-viewer.mdx | 2 +- versioned_docs/version-v5/native/printer.mdx | 2 +- .../version-v5/native/pspdfkit-cordova.mdx | 2 +- .../version-v5/native/purchases.mdx | 2 +- versioned_docs/version-v5/native/push.mdx | 2 +- .../version-v5/native/pushape-push.mdx | 2 +- .../native/safari-view-controller.mdx | 2 +- .../version-v5/native/screen-orientation.mdx | 2 +- .../version-v5/native/service-discovery.mdx | 2 +- versioned_docs/version-v5/native/shake.mdx | 2 +- .../version-v5/native/sign-in-with-apple.mdx | 2 +- .../version-v5/native/smartlook.mdx | 2 +- .../version-v5/native/sms-retriever.mdx | 2 +- versioned_docs/version-v5/native/sms.mdx | 2 +- .../version-v5/native/social-sharing.mdx | 2 +- .../version-v5/native/speech-recognition.mdx | 2 +- .../version-v5/native/spinner-dialog.mdx | 2 +- .../version-v5/native/splash-screen.mdx | 2 +- .../version-v5/native/spotify-auth.mdx | 2 +- .../version-v5/native/sqlite-db-copy.mdx | 2 +- .../version-v5/native/sqlite-porter.mdx | 2 +- versioned_docs/version-v5/native/sqlite.mdx | 2 +- .../version-v5/native/star-prnt.mdx | 2 +- .../version-v5/native/status-bar.mdx | 2 +- .../version-v5/native/streaming-media.mdx | 2 +- versioned_docs/version-v5/native/stripe.mdx | 2 +- versioned_docs/version-v5/native/sum-up.mdx | 2 +- .../version-v5/native/taptic-engine.mdx | 2 +- .../native/tealium-adidentifier.mdx | 2 +- .../native/tealium-installreferrer.mdx | 2 +- versioned_docs/version-v5/native/tealium.mdx | 2 +- .../version-v5/native/theme-detection.mdx | 2 +- .../version-v5/native/three-dee-touch.mdx | 2 +- versioned_docs/version-v5/native/toast.mdx | 2 +- versioned_docs/version-v5/native/touch-id.mdx | 2 +- .../version-v5/native/unvired-cordova-sdk.mdx | 2 +- versioned_docs/version-v5/native/uptime.mdx | 2 +- .../version-v5/native/urbanairship.mdx | 2 +- .../native/usabilla-cordova-sdk.mdx | 2 +- versioned_docs/version-v5/native/vibes.mdx | 2 +- .../version-v5/native/vibration.mdx | 2 +- .../version-v5/native/video-editor.mdx | 2 +- .../version-v5/native/video-player.mdx | 2 +- .../version-v5/native/web-intent.mdx | 2 +- .../version-v5/native/web-server.mdx | 2 +- .../version-v5/native/web-socket-server.mdx | 2 +- .../version-v5/native/webengage.mdx | 2 +- versioned_docs/version-v5/native/wechat.mdx | 2 +- .../version-v5/native/wheel-selector.mdx | 2 +- .../version-v5/native/wifi-wizard-2.mdx | 2 +- .../version-v5/native/wonderpush.mdx | 2 +- .../native/youtube-video-player.mdx | 2 +- versioned_docs/version-v5/native/zbar.mdx | 2 +- versioned_docs/version-v5/native/zeroconf.mdx | 2 +- versioned_docs/version-v5/native/zoom.mdx | 2 +- .../version-v5/{react.md => react.mdx} | 0 .../version-v5/react/your-first-app.mdx | 2 +- .../version-v5/reference/browser-support.mdx | 4 +- .../version-v5/reference/support.mdx | 2 +- .../version-v5/theming/advanced.mdx | 16 ++++---- .../version-v5/theming/css-shadow-parts.mdx | 2 +- .../version-v5/theming/dark-mode.mdx | 2 +- .../version-v5/troubleshooting/debugging.mdx | 2 +- .../version-v5/troubleshooting/native.mdx | 39 +++++++++++-------- versioned_docs/version-v5/vue/overview.mdx | 2 +- .../version-v5/vue/your-first-app.mdx | 2 +- .../version-v6/angular/your-first-app.mdx | 2 +- .../version-v6/api.mdx | 0 .../version-v6/api/datetime-button.mdx | 4 +- versioned_docs/version-v6/api/item.mdx | 4 +- versioned_docs/version-v6/{cli.md => cli.mdx} | 2 +- .../{components.md => components.mdx} | 4 +- .../core-concepts/cross-platform.mdx | 2 +- versioned_docs/version-v6/developing/tips.mdx | 2 +- .../version-v6/{index.md => index.mdx} | 2 +- versioned_docs/version-v6/intro/cli.mdx | 6 +-- .../version-v6/intro/environment.mdx | 2 +- .../{native-faq.md => native-faq.mdx} | 0 .../{native-setup.md => native-setup.mdx} | 0 .../version-v6/{native.md => native.mdx} | 0 .../version-v6/{react.md => react.mdx} | 0 .../version-v6/react/navigation.mdx | 4 +- .../version-v6/react/your-first-app.mdx | 2 +- .../version-v6/reference/browser-support.mdx | 4 +- .../version-v6/reference/support.mdx | 2 +- .../version-v6/theming/advanced.mdx | 16 ++++---- .../version-v6/theming/css-shadow-parts.mdx | 2 +- .../version-v6/theming/dark-mode.mdx | 2 +- .../version-v6/theming/platform-styles.mdx | 4 +- .../version-v6/troubleshooting/debugging.mdx | 2 +- .../version-v6/troubleshooting/native.mdx | 38 ++++++++++-------- versioned_docs/version-v6/vue/overview.mdx | 2 +- .../version-v6/vue/your-first-app.mdx | 2 +- .../{version-v6/api.md => version-v7/api.mdx} | 0 versioned_docs/version-v7/{cli.md => cli.mdx} | 2 +- .../{components.md => components.mdx} | 2 +- .../version-v7/{index.md => index.mdx} | 2 +- .../{native-faq.md => native-faq.mdx} | 0 .../{native-setup.md => native-setup.mdx} | 0 .../version-v7/{native.md => native.mdx} | 0 .../version-v7/{react.md => react.mdx} | 0 283 files changed, 392 insertions(+), 374 deletions(-) rename versioned_docs/version-v7/api.md => docs/api.mdx (62%) rename docs/{cli.md => cli.mdx} (66%) rename docs/{components.md => components.mdx} (98%) rename docs/{index.md => index.mdx} (95%) rename docs/{native-faq.md => native-faq.mdx} (100%) rename docs/{native-setup.md => native-setup.mdx} (100%) rename docs/{native.md => native.mdx} (100%) rename docs/{react.md => react.mdx} (100%) rename versioned_docs/version-v5/{api.md => api.mdx} (100%) rename versioned_docs/version-v5/{cli.md => cli.mdx} (98%) rename versioned_docs/version-v5/{components.md => components.mdx} (98%) rename versioned_docs/version-v5/{index.md => index.mdx} (99%) rename versioned_docs/version-v5/{native-community.md => native-community.mdx} (97%) rename versioned_docs/version-v5/{native-faq.md => native-faq.mdx} (96%) rename versioned_docs/version-v5/{native.md => native.mdx} (96%) rename versioned_docs/version-v5/{react.md => react.mdx} (100%) rename docs/api.md => versioned_docs/version-v6/api.mdx (100%) rename versioned_docs/version-v6/{cli.md => cli.mdx} (98%) rename versioned_docs/version-v6/{components.md => components.mdx} (98%) rename versioned_docs/version-v6/{index.md => index.mdx} (99%) rename versioned_docs/version-v6/{native-faq.md => native-faq.mdx} (100%) rename versioned_docs/version-v6/{native-setup.md => native-setup.mdx} (100%) rename versioned_docs/version-v6/{native.md => native.mdx} (100%) rename versioned_docs/version-v6/{react.md => react.mdx} (100%) rename versioned_docs/{version-v6/api.md => version-v7/api.mdx} (100%) rename versioned_docs/version-v7/{cli.md => cli.mdx} (98%) rename versioned_docs/version-v7/{components.md => components.mdx} (98%) rename versioned_docs/version-v7/{index.md => index.mdx} (99%) rename versioned_docs/version-v7/{native-faq.md => native-faq.mdx} (100%) rename versioned_docs/version-v7/{native-setup.md => native-setup.mdx} (100%) rename versioned_docs/version-v7/{native.md => native.mdx} (100%) rename versioned_docs/version-v7/{react.md => react.mdx} (100%) diff --git a/.editorconfig b/.editorconfig index 82da0b16e75..0981b55d9ad 100644 --- a/.editorconfig +++ b/.editorconfig @@ -10,6 +10,6 @@ end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true -[*.md] +[{*.md,*.mdx}] insert_final_newline = false trim_trailing_whitespace = false \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index cf3eb243153..ed18ea9546d 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -118,10 +118,10 @@ Ionic's documentation is built using [Docusaurus](https://docusaurus.io/). The c The content of the Ionic docs is written as [Markdown](https://commonmark.org/) in `docs/`. Each Markdown file corresponds to a route unless explicitly changed in the frontmatter. ``` -/docs/ => src/pages/index.md -/docs/intro/cli => src/pages/intro/cli.md -/docs/theming/advanced => src/pages/theming/advanced.md -/docs/theming => src/pages/theming.md +/docs/ => src/pages/index.mdx +/docs/intro/cli => src/pages/intro/cli.mdx +/docs/theming/advanced => src/pages/theming/advanced.mdx +/docs/theming => src/pages/theming.mdx ``` You can make copy edits to the site by [editing the Markdown files directly on GitHub](https://help.github.com/articles/editing-files-in-another-user-s-repository/). In your pull request, please explain what was missing from or inaccurate about the content. diff --git a/_templates/README.md b/_templates/README.md index 4089d4cca59..77790a47b4d 100644 --- a/_templates/README.md +++ b/_templates/README.md @@ -21,12 +21,12 @@ If you need a component for multiple versions of Ionic Framework, you (currently ## Usage -Once you've generated your playground, you need to add it to the main markdown file in the docs (e.g. [docs/api/button.md](../docs/api/button.mdx)) by doing something similar to the following example: +Once you've generated your playground, you need to add it to the main markdown file in the docs (e.g. [docs/api/button.mdx](../docs/api/button.mdx)) by doing something similar to the following example: ``` ## Feature -import Feature from '@site/static/usage/v8/button/feature/index.md'; +import Feature from '@site/static/usage/v8/button/feature/index.mdx'; ``` diff --git a/docs/angular/your-first-app.mdx b/docs/angular/your-first-app.mdx index 449d03c10e1..915976f4c48 100644 --- a/docs/angular/your-first-app.mdx +++ b/docs/angular/your-first-app.mdx @@ -66,7 +66,7 @@ npm install -g @ionic/cli native-run cordova-res :::note The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur. -Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information. +Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information. ::: ## Create an App diff --git a/versioned_docs/version-v7/api.md b/docs/api.mdx similarity index 62% rename from versioned_docs/version-v7/api.md rename to docs/api.mdx index 45e4c1d8d19..79303157760 100644 --- a/versioned_docs/version-v7/api.md +++ b/docs/api.mdx @@ -12,6 +12,6 @@ import APIList from '@components/page/api/APIList'; /> -Each Ionic [component](/docs/components) consists of one or more [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements). Each custom element, in turn, may expose properties, methods, events, and CSS custom properties. +Each Ionic [component](components.mdx) consists of one or more [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements). Each custom element, in turn, may expose properties, methods, events, and CSS custom properties. diff --git a/docs/api/picker-column-option.md b/docs/api/picker-column-option.md index caf78e4f0c3..75941c04581 100644 --- a/docs/api/picker-column-option.md +++ b/docs/api/picker-column-option.md @@ -17,7 +17,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -An individual column option in a picker. Visit the [`ion-picker`](./picker.md) documentation for more details. +An individual column option in a picker. Visit the [`ion-picker`](./picker.mdx) documentation for more details. ## Properties diff --git a/docs/api/picker-column.md b/docs/api/picker-column.md index 5872043e5e0..0ef5b991fd6 100644 --- a/docs/api/picker-column.md +++ b/docs/api/picker-column.md @@ -17,7 +17,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -An individual column within a picker. Visit the [`ion-picker`](./picker.md) documentation for more details. +An individual column within a picker. Visit the [`ion-picker`](./picker.mdx) documentation for more details. ## Properties diff --git a/docs/api/picker-legacy.md b/docs/api/picker-legacy.md index 8d3e45c48c5..dfee19c249c 100644 --- a/docs/api/picker-legacy.md +++ b/docs/api/picker-legacy.md @@ -19,7 +19,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; :::warning Deprecation Notice -`ion-picker-legacy` is deprecated and will be removed in the next major release. Migrate to [`ion-picker`](./picker.md) as soon as possible. +`ion-picker-legacy` is deprecated and will be removed in the next major release. Migrate to [`ion-picker`](./picker.mdx) as soon as possible. ::: diff --git a/docs/cli.md b/docs/cli.mdx similarity index 66% rename from docs/cli.md rename to docs/cli.mdx index efdc21ff611..435b94b53c1 100644 --- a/docs/cli.md +++ b/docs/cli.mdx @@ -11,7 +11,7 @@ sidebar_label: Overview /> -The Ionic command-line interface ([CLI](/docs/reference/glossary.mdx#cli)) is the go-to tool for developing Ionic apps. +The Ionic command-line interface ([CLI](reference/glossary.mdx#cli)) is the go-to tool for developing Ionic apps. ## Installation @@ -37,18 +37,18 @@ Be sure to run `ionic --help` in your project directory. For some commands, such as `ionic serve`, the help documentation is contextual to the type of your project, e.g. React vs Angular. ::: - +{/* TODO: image? */} ## Architecture -The Ionic CLI is built with [TypeScript](/docs/reference/glossary.mdx#typescript) and [Node.js](/docs/reference/glossary.mdx#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source GitHub repository. +The Ionic CLI is built with [TypeScript](reference/glossary.mdx#typescript) and [Node.js](reference/glossary.mdx#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source GitHub repository. ## Troubleshooting To troubleshoot issues with the Ionic CLI, the following may be useful: - Make sure the latest version of the Ionic CLI is installed. Get the installed version by running `ionic --version`. -- Make sure the latest Node LTS is installed. See [Node & npm](/docs/intro/environment.mdx#node-npm) environment setup. +- Make sure the latest Node LTS is installed. See [Node & npm](intro/environment.mdx#node-&-npm) environment setup. - The `--verbose` flag prints debugging messages, which may narrow down the issue. -- Connection issues may be due to improperly configured proxy settings. See [Using a Proxy](/docs/cli/using-a-proxy) to configure request proxying. -- The global Ionic CLI configuration directory is `~/.ionic` on all platforms. It can safely be deleted and the Ionic CLI will repopulate it, but all configuration (including user sessions) will be lost. Configure this directory with [CLI environment variables](/docs/cli/configuration#environment-variables). +- Connection issues may be due to improperly configured proxy settings. See [Using a Proxy](cli/using-a-proxy.mdx) to configure request proxying. +- The global Ionic CLI configuration directory is `~/.ionic` on all platforms. It can safely be deleted and the Ionic CLI will repopulate it, but all configuration (including user sessions) will be lost. Configure this directory with [CLI environment variables](cli/configuration.mdx#environment-variables). diff --git a/docs/components.md b/docs/components.mdx similarity index 98% rename from docs/components.md rename to docs/components.mdx index d951640a809..fe5b84dca50 100644 --- a/docs/components.md +++ b/docs/components.mdx @@ -19,7 +19,7 @@ import DocsCards from '@components/global/DocsCards'; `} -Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you’re familiar with the basics, refer to the [API Index](api.md) for a complete list of each component and sub-component. +Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you’re familiar with the basics, refer to the [API Index](api.mdx) for a complete list of each component and sub-component. @@ -41,7 +41,7 @@ Ionic apps are made of high-level building blocks called Components, which allow - + {/* prettier-ignore */}

Cards are a great way to display an important piece of content, and can contain images, buttons, text, and more.

 diff --git a/docs/core-concepts/cross-platform.mdx b/docs/core-concepts/cross-platform.mdx index 63b3acfe57c..c15c70df51e 100644 --- a/docs/core-concepts/cross-platform.mdx +++ b/docs/core-concepts/cross-platform.mdx @@ -12,7 +12,7 @@ In a native application, it's common to make API calls to communicate with the d ### Ionic Native -[Ionic Native](../native.md) has its own internal logic to detect if it is inside of a native environment. Instead of throwing a runtime error, it will print a warning if it is not a native environment and there are no Cordova plugins available. The app won’t break and it will continue to work, although without the native functionality. +[Ionic Native](../native.mdx) has its own internal logic to detect if it is inside of a native environment. Instead of throwing a runtime error, it will print a warning if it is not a native environment and there are no Cordova plugins available. The app won’t break and it will continue to work, although without the native functionality. ### Platform Detection diff --git a/docs/developing/tips.mdx b/docs/developing/tips.mdx index 2adf19ea58d..8368bb7275f 100644 --- a/docs/developing/tips.mdx +++ b/docs/developing/tips.mdx @@ -132,7 +132,7 @@ The iOS simulator enables testing and debugging of an app before it reaches an a Before it can be used, [Xcode](https://developer.apple.com/xcode/download/), Apple's IDE, must be installed. -The [Ionic CLI](../cli.md) can then be used to run the app in the current directory on the simulator: +The [Ionic CLI](../cli.mdx) can then be used to run the app in the current directory on the simulator: ```shell ionic cordova emulate ios -lc diff --git a/docs/index.md b/docs/index.mdx similarity index 95% rename from docs/index.md rename to docs/index.mdx index d1f25abe254..2e58636a4b6 100644 --- a/docs/index.md +++ b/docs/index.mdx @@ -121,7 +121,7 @@ Support for other frameworks will be considered in future releases. ## Ionic CLI -The official [Ionic CLI](cli.md), or Command Line Interface, is a tool that quickly scaffolds Ionic apps and provides a number of helpful commands to Ionic developers. In addition to installing and updating Ionic, the CLI comes with a built-in development server, build and debugging tools, and much more. If you are an [Appflow](#appflow) member, the CLI can be used to perform cloud builds and deployments, and administer your account. +The official [Ionic CLI](cli.mdx), or Command Line Interface, is a tool that quickly scaffolds Ionic apps and provides a number of helpful commands to Ionic developers. In addition to installing and updating Ionic, the CLI comes with a built-in development server, build and debugging tools, and much more. If you are an [Appflow](#appflow) member, the CLI can be used to perform cloud builds and deployments, and administer your account. ## Appflow @@ -139,7 +139,7 @@ Ionic is actively developed and maintained full-time by a core team, and its eco There are millions of Ionic developers in over 200 countries worldwide. Here are some ways to join: - +{/* prettier-ignore */} - Forum: A great place for asking questions and sharing ideas. - Twitter: Where we post updates and share content from the Ionic community. - GitHub: For reporting bugs or requesting new features, create an issue here. PRs welcome! diff --git a/docs/intro/cli.mdx b/docs/intro/cli.mdx index d2782c40f27..4c4ce8b6d33 100644 --- a/docs/intro/cli.mdx +++ b/docs/intro/cli.mdx @@ -37,7 +37,7 @@ $ npm install -g @ionic/cli :::note The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur. -Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information. +Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information. ::: ## Start an App @@ -50,7 +50,7 @@ ionic start ![start app thumbnails](/img/installation/start-app-thumbnails.png) -To learn more about starting Ionic apps, see the [Starting Guide](../developing/starting.md). +To learn more about starting Ionic apps, see the [Starting Guide](../developing/starting.mdx). ## Run the App @@ -61,4 +61,4 @@ $ cd myApp $ ionic serve ``` -There are a number of other ways to run an app, it's recommended to start with this workflow. To develop and test apps on devices and emulators, see the [Running an App Guide](../developing/previewing.md). +There are a number of other ways to run an app, it's recommended to start with this workflow. To develop and test apps on devices and emulators, see the [Running an App Guide](../developing/previewing.mdx). diff --git a/docs/intro/environment.mdx b/docs/intro/environment.mdx index ce34f960a7c..d1f118bc5a7 100644 --- a/docs/intro/environment.mdx +++ b/docs/intro/environment.mdx @@ -41,7 +41,7 @@ $ npm --version ``` :::note -Permission errors are common on macOS when installing global packages with `npm`. If you get an `EACCES` error, see [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors). +Permission errors are common on macOS when installing global packages with `npm`. If you get an `EACCES` error, see [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors). ::: ## Git diff --git a/docs/native-faq.md b/docs/native-faq.mdx similarity index 100% rename from docs/native-faq.md rename to docs/native-faq.mdx diff --git a/docs/native-setup.md b/docs/native-setup.mdx similarity index 100% rename from docs/native-setup.md rename to docs/native-setup.mdx diff --git a/docs/native.md b/docs/native.mdx similarity index 100% rename from docs/native.md rename to docs/native.mdx diff --git a/docs/react.md b/docs/react.mdx similarity index 100% rename from docs/react.md rename to docs/react.mdx diff --git a/docs/react/your-first-app.mdx b/docs/react/your-first-app.mdx index d4428b1a5e2..dcf5fd416f4 100644 --- a/docs/react/your-first-app.mdx +++ b/docs/react/your-first-app.mdx @@ -62,7 +62,7 @@ npm install -g @ionic/cli native-run cordova-res :::note The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur. -Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information. +Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information. ::: ## Create an App diff --git a/docs/reference/browser-support.mdx b/docs/reference/browser-support.mdx index bd4d7a07a88..5cd032c1e60 100644 --- a/docs/reference/browser-support.mdx +++ b/docs/reference/browser-support.mdx @@ -14,7 +14,7 @@ Ionic's earliest goal was to make it easy to develop mobile apps using web techn ## Mobile Platforms -In pursuit of [adaptive styling](../core-concepts/fundamentals.md#adaptive-styling), Ionic fully supports and is well tested on the mobile platforms listed below: +In pursuit of [adaptive styling](../core-concepts/fundamentals.mdx#adaptive-styling), Ionic fully supports and is well tested on the mobile platforms listed below: | Framework | Android | iOS | | :-------: | :--------------------: | :---: | diff --git a/docs/theming/advanced.mdx b/docs/theming/advanced.mdx index 78a560dee4d..7e55355a22a 100644 --- a/docs/theming/advanced.mdx +++ b/docs/theming/advanced.mdx @@ -62,8 +62,8 @@ While the application and stepped variables in the themes section are useful for | `--ion-safe-area-right` | Adjust the safe area inset right of the app | | `--ion-safe-area-bottom` | Adjust the safe area inset bottom of the app | | `--ion-safe-area-left` | Adjust the safe area inset left of the app | -| `--ion-margin` | Adjust the margin of the [Margin attributes](../layout/css-utilities.md#element-margin) | -| `--ion-padding` | Adjust the padding of the [Padding attributes](../layout/css-utilities.md#element-padding) | +| `--ion-margin` | Adjust the margin of the [Margin attributes](../layout/css-utilities.mdx#element-margin) | +| `--ion-padding` | Adjust the padding of the [Padding attributes](../layout/css-utilities.mdx#element-padding) | | `--ion-placeholder-opacity` | Adjust the opacity of the placeholders used in the input, textarea, searchbar, and select components | ### Grid Variables diff --git a/docs/theming/css-shadow-parts.mdx b/docs/theming/css-shadow-parts.mdx index fd8b57fbb4f..58704557ef8 100644 --- a/docs/theming/css-shadow-parts.mdx +++ b/docs/theming/css-shadow-parts.mdx @@ -103,11 +103,11 @@ There are some known limitations with [vendor prefixed pseudo-elements](#vendor- ## Ionic Framework Parts -All exposed parts for an Ionic Framework component can be found under the CSS Shadow Parts heading on its API page. To view all components and their API pages, see the [Component documentation](../components.md). +All exposed parts for an Ionic Framework component can be found under the CSS Shadow Parts heading on its API page. To view all components and their API pages, see the [Component documentation](../components.mdx). In order to have parts a component must meet the following criteria: -- It is a [Shadow DOM](../reference/glossary.mdx#shadow) component. If it is a [Scoped](../reference/glossary.mdx#scoped) or Light DOM component, the child elements can be targeted directly. If a component is Scoped or Shadow, it will be listed by its name on its [component documentation page](../components.md). +- It is a [Shadow DOM](../reference/glossary.mdx#shadow) component. If it is a [Scoped](../reference/glossary.mdx#scoped) or Light DOM component, the child elements can be targeted directly. If a component is Scoped or Shadow, it will be listed by its name on its [component documentation page](../components.mdx). - It contains children elements. For example, `ion-card-header` is a Shadow component, but all styles are applied to the host element. Since it has no child elements, there’s no need for parts. - The children elements are not structural. In certain components, including `ion-title`, the child element is a structural element used to position the inner elements. We do not recommend customizing structural elements as this can have unexpected results. diff --git a/docs/theming/dark-mode.mdx b/docs/theming/dark-mode.mdx index 01a3f5de8ab..4c891901e3c 100644 --- a/docs/theming/dark-mode.mdx +++ b/docs/theming/dark-mode.mdx @@ -197,7 +197,7 @@ color-scheme: light dark; For more information regarding `color-scheme` please see https://web.dev/color-scheme/. :::note -`color-scheme` does not apply to the keyboard. For details on how dark mode works with the keyboard, see [Keyboard Documentation](../developing/keyboard.md#dark-mode). +`color-scheme` does not apply to the keyboard. For details on how dark mode works with the keyboard, see [Keyboard Documentation](../developing/keyboard.mdx#dark-mode). ::: :::note @@ -208,7 +208,7 @@ For developers looking to customize the theme color under the status bar in Safa Ionic has a recommended dark palette that can be enabled in three different ways: [always](#always), based on [system](#system) settings, or by using a [CSS class](#css-class). Each of these methods involves importing the dark palette file with the corresponding name. -The contents of each file are included below for reference. These variables are set by importing the relevant dark palette file and do not need to be copied into an app. For more information on the variables being changed, including additional variables for further customization, refer to the [Themes](themes.md) section. +The contents of each file are included below for reference. These variables are set by importing the relevant dark palette file and do not need to be copied into an app. For more information on the variables being changed, including additional variables for further customization, refer to the [Themes](themes.mdx) section. @@ -216,7 +216,7 @@ The contents of each file are included below for reference. These variables are The **always** dark palette behaves in the following ways: -1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a dark palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher. +1. Sets the [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement a dark palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher. 2. Setting variables for the dark palette on `ios` devices using the `:root.ios` selector. 3. Setting variables for the dark palette on `md` devices using the `:root.md` selector. @@ -234,7 +234,7 @@ The contents of Ionic's dark palette can be [viewed on GitHub](https://github.co The **system** dark palette behaves in the following ways: -1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a dark palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher. +1. Sets the [Ionic colors](colors.mdx) for all [modes](platform-styles.md#ionic-modes) to complement a dark palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher. 2. Setting variables for the dark palette on `ios` devices using the `:root.ios` selector. 3. Setting variables for the dark palette on `md` devices using the `:root.md` selector. 4. Only applies these variables when the [CSS media query for `prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) is `dark`. @@ -253,7 +253,7 @@ The contents of Ionic's dark palette can be [viewed on GitHub](https://github.co The **class** dark palette behaves in the following ways: -1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a dark palette in the `.ion-palette-dark` selector. The `.ion-palette-dark` class must be added to the `html` element in an app. +1. Sets the [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement a dark palette in the `.ion-palette-dark` selector. The `.ion-palette-dark` class must be added to the `html` element in an app. 2. Setting variables for the dark palette on `ios` devices using the `.ion-palette-dark.ios` selector. 3. Setting variables for the dark palette on `md` devices using the `.ion-palette-dark.md` selector. diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index 9896eac1180..846e287743b 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -17,7 +17,7 @@ Ionic offers palettes with increased contrast for users with low vision. These p ## Overview -The default palette in Ionic provides [Ionic colors](./colors.md) that meet [Level AA color contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) as defined by Web Content Accessibility Guidelines (WCAG) when used with the appropriate contrast color. The [Ionic colors](./colors.md) in the high contrast palette have been updated to meet [Level AAA color contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html) when used with the appropriate contrast color. Notably, improvements have been made to the contrast of UI components, including border, text, and background colors. However, it's important to note that within the high contrast palette, priority is given to text legibility. This means that if adjusting the contrast of a UI component against the page background would significantly compromise the contrast between the component's text and its background, the contrast of the UI component background will remain unchanged. +The default palette in Ionic provides [Ionic colors](./colors.mdx) that meet [Level AA color contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) as defined by Web Content Accessibility Guidelines (WCAG) when used with the appropriate contrast color. The [Ionic colors](./colors.mdx) in the high contrast palette have been updated to meet [Level AAA color contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html) when used with the appropriate contrast color. Notably, improvements have been made to the contrast of UI components, including border, text, and background colors. However, it's important to note that within the high contrast palette, priority is given to text legibility. This means that if adjusting the contrast of a UI component against the page background would significantly compromise the contrast between the component's text and its background, the contrast of the UI component background will remain unchanged. ## Enabling High Contrast Theme @@ -128,7 +128,7 @@ import SystemHighContrastMode from '@site/static/usage/v8/theming/system-high-co :::caution -The high contrast light palette must be imported after [core.css](../layout/global-stylesheets.md#corecss), and the +The high contrast light palette must be imported after [core.css](../layout/global-stylesheets.mdx#corecss), and the high contrast dark palette must be imported after `dark.system.css`. Otherwise, the standard contrast palette will take priority. ::: @@ -173,7 +173,7 @@ import '@ionic/vue/css/palettes/high-contrast-dark.class.css'; -This approach activates the high contrast palette when the `.ion-palette-high-contrast` class is set on the `html` element. This class must be applied by the developer. This can be combined with the [`.ion-palette-dark` class](./dark-mode.md#css-class) to conditionally apply the high contrast dark palette. +This approach activates the high contrast palette when the `.ion-palette-high-contrast` class is set on the `html` element. This class must be applied by the developer. This can be combined with the [`.ion-palette-dark` class](./dark-mode.mdx#css-class) to conditionally apply the high contrast dark palette. The following example combines site settings, system settings, and the toggle to decide when to show high contrast mode. The site's palette takes precedence over system settings. If your system settings differ from the site's palette when the demo loads, it will use the site's palette. @@ -186,7 +186,7 @@ import ClassHighContrastMode from '@site/static/usage/v8/theming/class-high-cont :::caution -The high contrast light palette must be imported after [core.css](../layout/global-stylesheets.md#corecss), +The high contrast light palette must be imported after [core.css](../layout/global-stylesheets.mdx#corecss), and the high contrast dark palette must be imported after `dark.class.css`. Otherwise, the standard contrast palette will take priority. ::: @@ -199,7 +199,7 @@ The `.ion-palette-high-contrast` class **must** be added to the `html` element i Ionic has a recommended high contrast palette that can be enabled in three different ways: [always](#always), based on [system](#system) settings, or by using a [CSS class](#css-class). Each of these methods involves importing the high contrast palette file with the corresponding name. -The theme variables are set by importing the relevant high contrast palette file and do not need to be copied into an app. For more information on the variables being changed, including additional variables for further customization, refer to the [Themes](themes.md) section. +The theme variables are set by importing the relevant high contrast palette file and do not need to be copied into an app. For more information on the variables being changed, including additional variables for further customization, refer to the [Themes](themes.mdx) section. The following provides details on how to customize the high contrast palette depending on how it was applied in an application. @@ -211,7 +211,7 @@ The **always** high contrast palette can be accessed by importing `high-contrast The **always** high contrast palette behaves in the following ways: -1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a high contrast palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher. +1. Sets the [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement a high contrast palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher. 2. Setting variables for the high contrast palette on `ios` devices using the `:root.ios` selector. 3. Setting variables for the high contrast palette on `md` devices using the `:root.md` selector. @@ -223,7 +223,7 @@ The **system** high contrast palette can be accessed by importing `high-contrast The **system** high contrast palette behaves in the following ways: -1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a high contrast palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher. +1. Sets the [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement a high contrast palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher. 2. Setting variables for the high contrast palette on `ios` devices using the `:root.ios` selector. 3. Setting variables for the high contrast palette on `md` devices using the `:root.md` selector. 4. Only applies these variables when the [CSS media query for `prefers-contrast`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) is `more`. @@ -236,7 +236,7 @@ The **class** high contrast palette can be accessed by importing `high-contrast. The **class** high contrast palette behaves in the following ways: -1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a high contrast palette in the `.ion-palette-high-contrast` selector. The `.ion-palette-high-contrast` class must be added to the `html` element in an app. +1. Sets the [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement a high contrast palette in the `.ion-palette-high-contrast` selector. The `.ion-palette-high-contrast` class must be added to the `html` element in an app. 2. Setting variables for the high contrast palette on `ios` devices using the `.ion-palette-high-contrast.ios` selector. 3. Setting variables for the high contrast palette on `md` devices using the `.ion-palette-high-contrast.md` selector. diff --git a/docs/theming/platform-styles.mdx b/docs/theming/platform-styles.mdx index 8fc612833fa..e58a1be4579 100644 --- a/docs/theming/platform-styles.mdx +++ b/docs/theming/platform-styles.mdx @@ -14,7 +14,7 @@ Ionic provides platform specific styles based on the device the application is r ## Ionic Modes -Ionic uses **modes** to customize the look of components. Each **platform** has a default **mode**, but this can be overridden through the global [config](../developing/config.md). The following chart displays the default **mode** that is added to each **platform**: +Ionic uses **modes** to customize the look of components. Each **platform** has a default **mode**, but this can be overridden through the global [config](../developing/config.mdx). The following chart displays the default **mode** that is added to each **platform**: | Platform | Mode | Description | | --------- | ----- | -------------------------------------------------------------------------------------------------------------------------------- | @@ -28,7 +28,7 @@ For example, an app being viewed on an Android platform will use the `md` (Mater ``` -_Note: The **platform** and the **mode** are not the same. The platform can be set to use any mode in the [config](../developing/config.md) of an app._ +_Note: The **platform** and the **mode** are not the same. The platform can be set to use any mode in the [config](../developing/config.mdx) of an app._ ## Overriding Mode Styles diff --git a/docs/troubleshooting/debugging.mdx b/docs/troubleshooting/debugging.mdx index 166df54308e..9089c26eb2e 100644 --- a/docs/troubleshooting/debugging.mdx +++ b/docs/troubleshooting/debugging.mdx @@ -21,7 +21,7 @@ title: Debugging ## Live Reload -Live Reload is useful for debugging native functionality (such as plugins) on device hardware. Rather than deploy a new native binary each time you make a code change, it reloads the browser (or WebView) when changes in the app are detected. [Learn more here](../cli/livereload.md). +Live Reload is useful for debugging native functionality (such as plugins) on device hardware. Rather than deploy a new native binary each time you make a code change, it reloads the browser (or WebView) when changes in the app are detected. [Learn more here](../cli/livereload.mdx). ## iOS and Safari diff --git a/docs/troubleshooting/native.mdx b/docs/troubleshooting/native.mdx index dfb3195c915..d883f5e75bd 100644 --- a/docs/troubleshooting/native.mdx +++ b/docs/troubleshooting/native.mdx @@ -13,37 +13,44 @@ title: Native Errors ## Code Signing errors ```shell -Code Signing Error: Failed to create provisioning profile. The app ID "com.csform.ionic.yellow" cannot be registered to your development team. Change your bundle identifier to a unique string to try again. Code Signing Error: No profiles for 'com.csform.ionic.yellow' were found: Xcode couldn't find any iOS App Development provisioning profiles matching 'com.csform.ionic.yellow'. Code Signing Error: Code signing is required for product type 'Application' in SDK 'iOS 11.1' +Code Signing Error: Failed to create provisioning profile. The app ID "com.csform.ionic.yellow" cannot be registered to your development team. Change your bundle identifier to a unique string to try again. Code Signing Error: No profiles for 'com.csform.ionic.yellow' were found: Xcode could not find any iOS App Development provisioning profiles matching 'com.csform.ionic.yellow'. Code Signing Error: Code signing is required for product type 'Application' in SDK 'iOS 11.1' ``` Running an app on an iOS device requires a provisioning profile. If a provisioning profile has not been created yet follow these directions: -1. Set the [Package ID](../reference/glossary.mdx#package-id). +1. Set the [Package ID](../reference/glossary.mdx#package-id). - For Capacitor, open the `capacitor.config.json` file and modify the `appId` property. + {/* prettier-ignore */} + For Capacitor, open the `capacitor.config.json` file and modify the `appId` property. - For Cordova, open the `config.xml` file and modify the `id` attribute of the root element, ``. See [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) for more information. + {/* prettier-ignore */} + For Cordova, open the `config.xml` file and modify the `id` attribute of the root element, ``. See [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) for more information. {/* prettier-ignore */} -2. Open the project in Xcode. +2. Open the project in Xcode. - For Capacitor, run the following to open the app in Xcode: + {/* prettier-ignore */} + For Capacitor, run the following to open the app in Xcode: - ```shell - $ ionic capacitor open ios - ``` + {/* prettier-ignore */} + ```shell + $ ionic capacitor open ios + ``` - For Cordova, open Xcode. Use **File** » **Open** and locate the app. Open the app's `platforms/ios` directory. + {/* prettier-ignore */} + For Cordova, open Xcode. Use **File** » **Open** and locate the app. Open the app's `platforms/ios` directory. {/* prettier-ignore */} -3. In Project navigator, select the project root to open the project editor. Under the **Identity** section, verify that the Package ID that was set matches the Bundle Identifier. +3. In Project navigator, select the project root to open the project editor. Under the **Identity** section, verify that the Package ID that was set matches the Bundle Identifier. - ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png) + {/* prettier-ignore */} + ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png) {/* prettier-ignore */} -4. In the same project editor, under the Signing section, ensure Automatically manage signing is enabled. Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing. +4. In the same project editor, under the Signing section, ensure Automatically manage signing is enabled. Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing. - ![Xcode Signing Setup](/img/running/ios-xcode-signing-setup.png) + {/* prettier-ignore */} + ![Xcode Signing Setup](/img/running/ios-xcode-signing-setup.png) ## Xcode build error 65 diff --git a/docs/updating/4-0.mdx b/docs/updating/4-0.mdx index 9a2eb07043f..370d0041d09 100644 --- a/docs/updating/4-0.mdx +++ b/docs/updating/4-0.mdx @@ -19,7 +19,7 @@ For a **complete list of breaking changes** from Ionic 3 to Ionic 4, please refe We suggest the following general process when migrating an existing application from Ionic 3 to 4: -1. Generate a new project using the `blank` starter (see [Starting an App](../developing/starting.md)) +1. Generate a new project using the `blank` starter (see [Starting an App](../developing/starting.mdx)) 1. Copy any Angular services from `src/providers` to `src/app/services` - Services should include `{ providedIn: 'root' }` in the `@Injectable()` decorator. For details, please see Angular [provider docs](https://angular.io/guide/providers). 1. Copy the app's other root-level items (pipes, components, etc) keeping in mind that the directory structure changes from `src/components` to `src/app/components`, etc. @@ -278,7 +278,7 @@ Please reference official [Angular upgrade guide](https://angular.io/guide/upgra ### Ionic Changes -Our Ionic 3 to Ionic 4 migration sections above may prove to be a useful reference. Generate a new Ionic 4 project using the blank starter (see [Starting an App](../developing/starting.md)). Spend time getting familiar with Ionic 4 components. Happy building! +Our Ionic 3 to Ionic 4 migration sections above may prove to be a useful reference. Generate a new Ionic 4 project using the blank starter (see [Starting an App](../developing/starting.mdx)). Spend time getting familiar with Ionic 4 components. Happy building! ### Need Assistance? diff --git a/docs/vue/overview.mdx b/docs/vue/overview.mdx index cd18790e79d..77b14df8f81 100644 --- a/docs/vue/overview.mdx +++ b/docs/vue/overview.mdx @@ -28,7 +28,7 @@ Ionic Vue projects ship with the same tooling as regular Vue CLI projects. Meani [Capacitor](https://capacitorjs.com) is the official cross-platform app runtime used to make your `Ionic Vue` web app run natively on iOS, Android, and the web. -While there are no known technical limitations to using `Ionic Vue` with [Cordova](https://cordova.apache.org/) plugins, Capacitor is officially recommended. There are no plans to support a Cordova integration for `Ionic Vue` in the [Ionic CLI tooling](../cli.md) at this time. For more details, please [see here](https://capacitorjs.com/docs/cordova). +While there are no known technical limitations to using `Ionic Vue` with [Cordova](https://cordova.apache.org/) plugins, Capacitor is officially recommended. There are no plans to support a Cordova integration for `Ionic Vue` in the [Ionic CLI tooling](../cli.mdx) at this time. For more details, please [see here](https://capacitorjs.com/docs/cordova). ## From the Community diff --git a/docs/vue/your-first-app.mdx b/docs/vue/your-first-app.mdx index 1a9aaacb0ae..555f87996bb 100644 --- a/docs/vue/your-first-app.mdx +++ b/docs/vue/your-first-app.mdx @@ -62,7 +62,7 @@ npm install -g @ionic/cli@latest native-run :::note The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur. -Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information. +Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information. ::: ## Create an App diff --git a/package.json b/package.json index f2356cf7e74..9b89ddae3a4 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "serve": "docusaurus serve", "playground:new": "hygen playground new", "prestart": "npm run generate-markdown", - "prettier": "prettier \"./**/*.{html,ts,tsx,js,jsx,md}\" --cache", + "prettier": "prettier \"./**/*.{html,ts,tsx,js,jsx,md,mdx}\" --cache", "start": "docusaurus start", "swizzle": "docusaurus swizzle", "spellcheck": "cspell --no-progress \"**/*.md\"" diff --git a/versioned_docs/version-v5/angular/your-first-app.mdx b/versioned_docs/version-v5/angular/your-first-app.mdx index 1ebc93eb9fe..3cf17a75992 100644 --- a/versioned_docs/version-v5/angular/your-first-app.mdx +++ b/versioned_docs/version-v5/angular/your-first-app.mdx @@ -18,7 +18,7 @@ Here’s the finished app running on all 3 platforms: > :::note -Looking for the previous version of this guide that covered Ionic 4 and Cordova? [See here.](../developer-resources/guides/first-app-v4/intro.md) +Looking for the previous version of this guide that covered Ionic 4 and Cordova? [See here.](../developer-resources/guides/first-app-v4/intro.mdx) ::: ## What We'll Build @@ -59,7 +59,7 @@ npm install -g @ionic/cli native-run cordova-res :::note The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur. -Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information. +Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information. ::: ## Create an App diff --git a/versioned_docs/version-v5/api.md b/versioned_docs/version-v5/api.mdx similarity index 100% rename from versioned_docs/version-v5/api.md rename to versioned_docs/version-v5/api.mdx diff --git a/versioned_docs/version-v5/api/content.mdx b/versioned_docs/version-v5/api/content.mdx index 733c38c252c..7231e4be94a 100644 --- a/versioned_docs/version-v5/api/content.mdx +++ b/versioned_docs/version-v5/api/content.mdx @@ -20,7 +20,7 @@ The content component provides an easy to use content area with some useful meth to control the scrollable area. There should only be one content in a single 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). +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.mdx) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties). ## Fixed Content diff --git a/versioned_docs/version-v5/api/item.mdx b/versioned_docs/version-v5/api/item.mdx index 9175a076d4a..c116d1d0202 100644 --- a/versioned_docs/version-v5/api/item.mdx +++ b/versioned_docs/version-v5/api/item.mdx @@ -26,7 +26,7 @@ An item is considered "clickable" if it has an `href` or `button` property set. By default [clickable items](#clickable-items) will display a right arrow icon on `ios` mode. To hide the right arrow icon on clickable elements, set the `detail` property to `false`. To show the right arrow icon on an item that doesn't display it naturally, set the `detail` property to `true`. -{/* TODO add this functionality back as a css variable +{/\* TODO add this functionality back as a css variable This feature is not enabled by default on clickable items for the `md` mode, but it can be enabled by setting the following CSS variable: @@ -34,7 +34,7 @@ This feature is not enabled by default on clickable items for the `md` mode, but --item-detail-push-show: true; ``` -See the [theming documentation](../theming/css-variables.mdx) for more information. */} +See the [theming documentation](../theming/css-variables.mdx) for more information. \*/} ## Item Placement @@ -56,7 +56,7 @@ Items left align text and add an ellipsis when the text is wider than the item. ### Highlight Height -Items containing an input will highlight the bottom border of the input with a different color when focused, valid, or invalid. By default, `md` items have a highlight with a height set to `2px` and `ios` has no highlight (technically the height is set to `0`). The height can be changed using the `--highlight-height` CSS property. To turn off the highlight, set this variable to `0`. For more information on setting CSS properties, see the [theming documentation](../theming/css-variables.md). +Items containing an input will highlight the bottom border of the input with a different color when focused, valid, or invalid. By default, `md` items have a highlight with a height set to `2px` and `ios` has no highlight (technically the height is set to `0`). The height can be changed using the `--highlight-height` CSS property. To turn off the highlight, set this variable to `0`. For more information on setting CSS properties, see the [theming documentation](../theming/css-variables.mdx). ### Highlight Color diff --git a/versioned_docs/version-v5/cli.md b/versioned_docs/version-v5/cli.mdx similarity index 98% rename from versioned_docs/version-v5/cli.md rename to versioned_docs/version-v5/cli.mdx index bd813e68848..373485c50dd 100644 --- a/versioned_docs/version-v5/cli.md +++ b/versioned_docs/version-v5/cli.mdx @@ -32,7 +32,7 @@ Be sure to run `ionic --help` in your project directory. For some commands, such as `ionic serve`, the help documentation is contextual to the type of your project, e.g. React vs Angular. ::: - +{/* TODO: image? */} ## Architecture diff --git a/versioned_docs/version-v5/components.md b/versioned_docs/version-v5/components.mdx similarity index 98% rename from versioned_docs/version-v5/components.md rename to versioned_docs/version-v5/components.mdx index 0c43dd0b021..b7462e0711c 100644 --- a/versioned_docs/version-v5/components.md +++ b/versioned_docs/version-v5/components.mdx @@ -20,7 +20,7 @@ hide_table_of_contents: true import DocsCard from '@components/global/DocsCard'; import DocsCards from '@components/global/DocsCards'; -Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you’re familiar with the basics, refer to the [API Index](api.md) for a complete list of each component and sub-component. +Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you’re familiar with the basics, refer to the [API Index](api.mdx) for a complete list of each component and sub-component. @@ -42,7 +42,7 @@ Ionic apps are made of high-level building blocks called Components, which allow - + {/* prettier-ignore */}

Cards are a great way to display an important piece of content, and can contain images, buttons, text, and more.

 diff --git a/versioned_docs/version-v5/core-concepts/cross-platform.mdx b/versioned_docs/version-v5/core-concepts/cross-platform.mdx index f7e5accced9..634e07688d7 100644 --- a/versioned_docs/version-v5/core-concepts/cross-platform.mdx +++ b/versioned_docs/version-v5/core-concepts/cross-platform.mdx @@ -12,7 +12,7 @@ In a native application, it's common to make API calls to communicate with the d ### Ionic Native -[Ionic Native](../native.md) has its own internal logic to detect if it is inside of a native environment. Instead of throwing a runtime error, it will print a warning if it is not a native environment and there are no Cordova plugins available. The app won’t break and it will continue to work, although without the native functionality. +[Ionic Native](../native.mdx) has its own internal logic to detect if it is inside of a native environment. Instead of throwing a runtime error, it will print a warning if it is not a native environment and there are no Cordova plugins available. The app won’t break and it will continue to work, although without the native functionality. ### Platform Detection @@ -67,7 +67,7 @@ This will render 5 items with a width of 100% each. This may look great on a mob -To improve this experience, we can wrap the items in a [Grid](../layout/grid.md) component. The view can be easily rewritten into something more usable on larger screens: +To improve this experience, we can wrap the items in a [Grid](../layout/grid.mdx) component. The view can be easily rewritten into something more usable on larger screens: ```html @@ -149,7 +149,7 @@ There’s a lot going on in the example above. These are the key points: - The `size` attribute can have a breakpoint added to it, `size-{breakpoint}`. This value sets the size for the specified breakpoint and above. -For more information on customizing with grid, see the [Grid](../layout/grid.md) documentation. +For more information on customizing with grid, see the [Grid](../layout/grid.mdx) documentation. ## Storage diff --git a/versioned_docs/version-v5/core-concepts/fundamentals.mdx b/versioned_docs/version-v5/core-concepts/fundamentals.mdx index ae74b3ce424..cfe2e6358f9 100644 --- a/versioned_docs/version-v5/core-concepts/fundamentals.mdx +++ b/versioned_docs/version-v5/core-concepts/fundamentals.mdx @@ -37,4 +37,4 @@ Projects such as CapacitorCSS which allows us to take advantage of the flexibility that CSS properties (variables) provide. This makes it incredibly easy to design an app that looks great while following the web standard. We provide a set of colors so developers can have some great defaults, but we encourage overriding them to create designs that match a brand, company or a desired color palette. Everything from the background color of an application to the text color is fully customizable. More information on app theming can be found in [Theming](../theming/basics.md). +At the core, Ionic Framework is built using CSS which allows us to take advantage of the flexibility that CSS properties (variables) provide. This makes it incredibly easy to design an app that looks great while following the web standard. We provide a set of colors so developers can have some great defaults, but we encourage overriding them to create designs that match a brand, company or a desired color palette. Everything from the background color of an application to the text color is fully customizable. More information on app theming can be found in [Theming](../theming/basics.mdx). diff --git a/versioned_docs/version-v5/core-concepts/webview.mdx b/versioned_docs/version-v5/core-concepts/webview.mdx index 5e44273563a..88d6a96d153 100644 --- a/versioned_docs/version-v5/core-concepts/webview.mdx +++ b/versioned_docs/version-v5/core-concepts/webview.mdx @@ -32,7 +32,7 @@ import { Capacitor } from '@capacitor/core'; Capacitor.convertFileSrc(filePath); ``` -For Cordova apps, the [Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview) provides a utility function for converting File URIs: `window.Ionic.WebView.convertFileSrc()`. There is also a corresponding Ionic Native plugin: [`@awesome-cordova-plugins/ionic-webview`](../native/ionic-webview.md). +For Cordova apps, the [Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview) provides a utility function for converting File URIs: `window.Ionic.WebView.convertFileSrc()`. There is also a corresponding Ionic Native plugin: [`@awesome-cordova-plugins/ionic-webview`](../native/ionic-webview.mdx). ### Implementations diff --git a/versioned_docs/version-v5/developing/tips.mdx b/versioned_docs/version-v5/developing/tips.mdx index f5155db1faf..10d7fe717ed 100644 --- a/versioned_docs/version-v5/developing/tips.mdx +++ b/versioned_docs/version-v5/developing/tips.mdx @@ -122,7 +122,7 @@ The iOS simulator enables testing and debugging of an app before it reaches an a Before it can be used, [Xcode](https://developer.apple.com/xcode/download/), Apple's IDE, must be installed. -The [Ionic CLI](../cli.md) can then be used to run the app in the current directory on the simulator: +The [Ionic CLI](../cli.mdx) can then be used to run the app in the current directory on the simulator: ```shell ionic cordova emulate ios -lc diff --git a/versioned_docs/version-v5/index.md b/versioned_docs/version-v5/index.mdx similarity index 99% rename from versioned_docs/version-v5/index.md rename to versioned_docs/version-v5/index.mdx index 451291d3bd8..607bf8ce35f 100644 --- a/versioned_docs/version-v5/index.md +++ b/versioned_docs/version-v5/index.mdx @@ -130,7 +130,7 @@ Ionic Framework is actively developed and maintained full-time by a core team, a There are millions of Ionic developers in o ver 200 countries worldwide. Here are some ways to join: - +{/* prettier-ignore */} - Forum: A great place for asking questions and sharing ideas. - Twitter: Where we post updates and share content from the Ionic community. - GitHub: For reporting bugs or requesting new features, create an issue here. PRs welcome! diff --git a/versioned_docs/version-v5/intro/cli.mdx b/versioned_docs/version-v5/intro/cli.mdx index d2229af39dd..64878d316bc 100644 --- a/versioned_docs/version-v5/intro/cli.mdx +++ b/versioned_docs/version-v5/intro/cli.mdx @@ -30,7 +30,7 @@ $ npm install -g @ionic/cli :::note The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur. -Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information. +Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information. ::: ## Start an App @@ -43,7 +43,7 @@ ionic start myApp tabs ![start app thumbnails](/img/installation/start-app-thumbnails.png) -To learn more about starting Ionic apps, see the [Starting Guide](../developing/starting.md). +To learn more about starting Ionic apps, see the [Starting Guide](../developing/starting.mdx). ## Run the App @@ -54,4 +54,4 @@ $ cd myApp $ ionic serve ``` -There are a number of other ways to run an app, it's recommended to start with this workflow. To develop and test apps on devices and emulators, see the [Running an App Guide](../developing/previewing.md). +There are a number of other ways to run an app, it's recommended to start with this workflow. To develop and test apps on devices and emulators, see the [Running an App Guide](../developing/previewing.mdx). diff --git a/versioned_docs/version-v5/intro/environment.mdx b/versioned_docs/version-v5/intro/environment.mdx index edee6038ff5..9da996cfc61 100644 --- a/versioned_docs/version-v5/intro/environment.mdx +++ b/versioned_docs/version-v5/intro/environment.mdx @@ -31,7 +31,7 @@ $ npm --version ``` :::note -Permission errors are common on macOS when installing global packages with `npm`. If you get an `EACCES` error, see [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors). +Permission errors are common on macOS when installing global packages with `npm`. If you get an `EACCES` error, see [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors). ::: ## Git diff --git a/versioned_docs/version-v5/native-community.md b/versioned_docs/version-v5/native-community.mdx similarity index 97% rename from versioned_docs/version-v5/native-community.md rename to versioned_docs/version-v5/native-community.mdx index cd8773d8bba..f3e6fcb1783 100644 --- a/versioned_docs/version-v5/native-community.md +++ b/versioned_docs/version-v5/native-community.mdx @@ -34,7 +34,7 @@ In addition to Cordova, Ionic Native also works with [Capacitor](https://capacit All plugins have two components - the native code (Cordova) and the TypeScript code (Ionic Native). Cordova plugins are also wrapped in a `Promise` or `Observable` in order to provide a common plugin interface and modernized development approach. -Using the [Camera plugin](native/camera.md) as an example, first install it: +Using the [Camera plugin](native/camera.mdx) as an example, first install it: ````mdx-code-block ```` -Next, begin using the plugin, following the various framework usage options below. For FAQ, see [here](native-faq.md). +Next, begin using the plugin, following the various framework usage options below. For FAQ, see [here](native-faq.mdx). ## Angular diff --git a/versioned_docs/version-v5/native-faq.md b/versioned_docs/version-v5/native-faq.mdx similarity index 96% rename from versioned_docs/version-v5/native-faq.md rename to versioned_docs/version-v5/native-faq.mdx index 80cb5b1ae89..2c57b3ca399 100644 --- a/versioned_docs/version-v5/native-faq.md +++ b/versioned_docs/version-v5/native-faq.mdx @@ -7,7 +7,7 @@ slug: /native/faq ## Cordova Management Tips -**1) Use the [Ionic CLI](cli.md) to add/update/delete plugins.** +**1) Use the [Ionic CLI](cli.mdx) to add/update/delete plugins.** Instead of directly editing `config.xml` and `package.json`. Use `ionic` in front of Cordova commands for a better experience and additional functionality (`ionic cordova build ios` instead of `cordova build ios`). @@ -32,8 +32,8 @@ Useful when adding new developers to a project. `ionic cordova prepare` restores **5) Troubleshoot Cordova issues with Ionic CLI commands** -- `ionic doctor list`: Detects [common issues](cli/commands/doctor-list.md) and suggests steps to fix them -- `ionic repair`: Remove, then [regenerate](cli/commands/repair.md) all dependencies +- `ionic doctor list`: Detects [common issues](cli/commands/doctor-list.mdx) and suggests steps to fix them +- `ionic repair`: Remove, then [regenerate](cli/commands/repair.mdx) all dependencies ## Understanding Version Numbers diff --git a/versioned_docs/version-v5/native.md b/versioned_docs/version-v5/native.mdx similarity index 96% rename from versioned_docs/version-v5/native.md rename to versioned_docs/version-v5/native.mdx index 7d2c5e52b89..4a6e958660c 100644 --- a/versioned_docs/version-v5/native.md +++ b/versioned_docs/version-v5/native.mdx @@ -33,11 +33,11 @@ Build native-powered app experiences with a collection of open source and premiu - + {/* prettier-ignore */}

A modern, open source native runtime built and maintained by the Ionic team and the Capacitor community. Our recommended native solution.

 - + {/* prettier-ignore */}

A collection of free Cordova plugins, built and maintained by the community, with TypeScript wrappers and a consistent API and naming convention.

 diff --git a/versioned_docs/version-v5/native/abbyy-rtr.mdx b/versioned_docs/version-v5/native/abbyy-rtr.mdx index 0aef215889b..59a485bade8 100644 --- a/versioned_docs/version-v5/native/abbyy-rtr.mdx +++ b/versioned_docs/version-v5/native/abbyy-rtr.mdx @@ -71,7 +71,7 @@ ABBYY Real-Time Recognition SDK (RTR SDK) in apps. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/action-sheet.mdx b/versioned_docs/version-v5/native/action-sheet.mdx index cbc5d6a85e5..cd89b007bce 100644 --- a/versioned_docs/version-v5/native/action-sheet.mdx +++ b/versioned_docs/version-v5/native/action-sheet.mdx @@ -75,7 +75,7 @@ Requires Cordova plugin: `cordova-plugin-actionsheet`. For more info, please see ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/adjust.mdx b/versioned_docs/version-v5/native/adjust.mdx index 34932afb300..14a0fa9749a 100644 --- a/versioned_docs/version-v5/native/adjust.mdx +++ b/versioned_docs/version-v5/native/adjust.mdx @@ -70,7 +70,7 @@ Requires Cordova plugin: `com.adjust.sdk`. For more info, please see the [Adjust ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/admob.mdx b/versioned_docs/version-v5/native/admob.mdx index c3baec8fa0b..4419db3546d 100644 --- a/versioned_docs/version-v5/native/admob.mdx +++ b/versioned_docs/version-v5/native/admob.mdx @@ -77,7 +77,7 @@ Monetize your apps and games with AdMob ads, using latest Google AdMob SDK. With ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/aes-256.mdx b/versioned_docs/version-v5/native/aes-256.mdx index 74f2598bd00..64e058088e9 100644 --- a/versioned_docs/version-v5/native/aes-256.mdx +++ b/versioned_docs/version-v5/native/aes-256.mdx @@ -72,7 +72,7 @@ The encryption and decryption are performed on the device native layer so that t ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/all-in-one-sdk.mdx b/versioned_docs/version-v5/native/all-in-one-sdk.mdx index 4b84c03b674..b560aa06443 100644 --- a/versioned_docs/version-v5/native/all-in-one-sdk.mdx +++ b/versioned_docs/version-v5/native/all-in-one-sdk.mdx @@ -73,7 +73,7 @@ For more information about Paytm All-in-One SDK, please visit https://developer. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/analytics-firebase.mdx b/versioned_docs/version-v5/native/analytics-firebase.mdx index 843d78cceb1..cf15c5961ba 100644 --- a/versioned_docs/version-v5/native/analytics-firebase.mdx +++ b/versioned_docs/version-v5/native/analytics-firebase.mdx @@ -70,7 +70,7 @@ Google Analytics Firebase plugin for Ionic Native apps. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/android-exoplayer.mdx b/versioned_docs/version-v5/native/android-exoplayer.mdx index c41eda47fce..2f29203aaf8 100644 --- a/versioned_docs/version-v5/native/android-exoplayer.mdx +++ b/versioned_docs/version-v5/native/android-exoplayer.mdx @@ -71,7 +71,7 @@ https://github.com/google/ExoPlayer ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/android-full-screen.mdx b/versioned_docs/version-v5/native/android-full-screen.mdx index beeb4114bfc..7fde5b6bcce 100644 --- a/versioned_docs/version-v5/native/android-full-screen.mdx +++ b/versioned_docs/version-v5/native/android-full-screen.mdx @@ -71,7 +71,7 @@ In Android 4.4+, however, you can now enter true full screen, fully interactive ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/android-notch.mdx b/versioned_docs/version-v5/native/android-notch.mdx index c2b9d80df5d..58bbf1b3974 100644 --- a/versioned_docs/version-v5/native/android-notch.mdx +++ b/versioned_docs/version-v5/native/android-notch.mdx @@ -71,7 +71,7 @@ This plugin works on all android versions, but we can only detect notches starti ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/android-permissions.mdx b/versioned_docs/version-v5/native/android-permissions.mdx index cc6cd9a49d0..08722e94d76 100644 --- a/versioned_docs/version-v5/native/android-permissions.mdx +++ b/versioned_docs/version-v5/native/android-permissions.mdx @@ -73,7 +73,7 @@ You can find all permissions here: https://developer.android.com/reference/andro ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/anyline.mdx b/versioned_docs/version-v5/native/anyline.mdx index bc9ec166ba3..7e184054ab9 100644 --- a/versioned_docs/version-v5/native/anyline.mdx +++ b/versioned_docs/version-v5/native/anyline.mdx @@ -68,7 +68,7 @@ Anyline provides an easy-to-use SDK for applications to enable Optical Character ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/app-availability.mdx b/versioned_docs/version-v5/native/app-availability.mdx index cdd3e6cc5b6..01677bb152c 100644 --- a/versioned_docs/version-v5/native/app-availability.mdx +++ b/versioned_docs/version-v5/native/app-availability.mdx @@ -72,7 +72,7 @@ Requires Cordova plugin: cordova-plugin-appavailability. For more info, please s ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/app-center-analytics.mdx b/versioned_docs/version-v5/native/app-center-analytics.mdx index c5751de0cd7..fc552296b94 100644 --- a/versioned_docs/version-v5/native/app-center-analytics.mdx +++ b/versioned_docs/version-v5/native/app-center-analytics.mdx @@ -75,7 +75,7 @@ For more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/analyti ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/app-center-crashes.mdx b/versioned_docs/version-v5/native/app-center-crashes.mdx index 8aca0878212..371a85ae76d 100644 --- a/versioned_docs/version-v5/native/app-center-crashes.mdx +++ b/versioned_docs/version-v5/native/app-center-crashes.mdx @@ -75,7 +75,7 @@ For more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/crashes ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/app-center-push.mdx b/versioned_docs/version-v5/native/app-center-push.mdx index 6c13119c665..4c2810d55b5 100644 --- a/versioned_docs/version-v5/native/app-center-push.mdx +++ b/versioned_docs/version-v5/native/app-center-push.mdx @@ -70,7 +70,7 @@ For more info, please see https://docs.microsoft.com/en-us/appcenter/sdk/push/co ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/app-preferences.mdx b/versioned_docs/version-v5/native/app-preferences.mdx index 2f9b36f18a9..bcee871da9c 100644 --- a/versioned_docs/version-v5/native/app-preferences.mdx +++ b/versioned_docs/version-v5/native/app-preferences.mdx @@ -75,7 +75,7 @@ This plugin allows you to read and write app preferences ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/app-rate.mdx b/versioned_docs/version-v5/native/app-rate.mdx index a48f696c168..51c388b1e4d 100644 --- a/versioned_docs/version-v5/native/app-rate.mdx +++ b/versioned_docs/version-v5/native/app-rate.mdx @@ -72,7 +72,7 @@ Requires Cordova plugin: cordova-plugin-apprate. For more info, please see the [ ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/app-version.mdx b/versioned_docs/version-v5/native/app-version.mdx index 2a218f41f02..07cf49c379b 100644 --- a/versioned_docs/version-v5/native/app-version.mdx +++ b/versioned_docs/version-v5/native/app-version.mdx @@ -75,7 +75,7 @@ Requires Cordova plugin: `cordova-plugin-app-version`. For more info, please see ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/apple-wallet.mdx b/versioned_docs/version-v5/native/apple-wallet.mdx index eacca30f4e2..7ca3166b8e2 100644 --- a/versioned_docs/version-v5/native/apple-wallet.mdx +++ b/versioned_docs/version-v5/native/apple-wallet.mdx @@ -68,7 +68,7 @@ A Cordova plugin that enables users from Add Payment Cards to their Apple Wallet ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/appsflyer.mdx b/versioned_docs/version-v5/native/appsflyer.mdx index 5f72f054a88..1b6aa71b728 100644 --- a/versioned_docs/version-v5/native/appsflyer.mdx +++ b/versioned_docs/version-v5/native/appsflyer.mdx @@ -70,7 +70,7 @@ Appsflyer Cordova SDK support for Attribution ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/background-fetch.mdx b/versioned_docs/version-v5/native/background-fetch.mdx index 0003192291d..8eae8fd0a17 100644 --- a/versioned_docs/version-v5/native/background-fetch.mdx +++ b/versioned_docs/version-v5/native/background-fetch.mdx @@ -71,7 +71,7 @@ For more detail, please see https://github.com/transistorsoft/cordova-plugin-bac ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/background-geolocation.mdx b/versioned_docs/version-v5/native/background-geolocation.mdx index e2e68558b85..7790cf6ede2 100644 --- a/versioned_docs/version-v5/native/background-geolocation.mdx +++ b/versioned_docs/version-v5/native/background-geolocation.mdx @@ -73,7 +73,7 @@ more detail, please see https://github.com/mauron85/cordova-plugin-background-ge ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/background-mode.mdx b/versioned_docs/version-v5/native/background-mode.mdx index ad0458a0460..75924561ace 100644 --- a/versioned_docs/version-v5/native/background-mode.mdx +++ b/versioned_docs/version-v5/native/background-mode.mdx @@ -76,7 +76,7 @@ Requires Cordova plugin: cordova-plugin-background-mode. For more info about plu ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/background-upload.mdx b/versioned_docs/version-v5/native/background-upload.mdx index 396b8c62271..1fcbff578b0 100644 --- a/versioned_docs/version-v5/native/background-upload.mdx +++ b/versioned_docs/version-v5/native/background-upload.mdx @@ -70,7 +70,7 @@ This plugin does something ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/badge.mdx b/versioned_docs/version-v5/native/badge.mdx index d2cfc105b13..cde7479ccaa 100644 --- a/versioned_docs/version-v5/native/badge.mdx +++ b/versioned_docs/version-v5/native/badge.mdx @@ -74,7 +74,7 @@ Android Note: Badges have historically only been a feature implemented by third ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/barcode-scanner.mdx b/versioned_docs/version-v5/native/barcode-scanner.mdx index fcd96c75e32..c13f0966a58 100644 --- a/versioned_docs/version-v5/native/barcode-scanner.mdx +++ b/versioned_docs/version-v5/native/barcode-scanner.mdx @@ -77,7 +77,7 @@ Requires Cordova plugin: `phonegap-plugin-barcodescanner`. For more info, please ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/battery-status.mdx b/versioned_docs/version-v5/native/battery-status.mdx index a141bf03f84..a843d6f2b19 100644 --- a/versioned_docs/version-v5/native/battery-status.mdx +++ b/versioned_docs/version-v5/native/battery-status.mdx @@ -72,7 +72,7 @@ Requires Cordova plugin: cordova-plugin-batterystatus. For more info, please see ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/biocatch.mdx b/versioned_docs/version-v5/native/biocatch.mdx index 98813df1bf8..bebcdbc59f2 100644 --- a/versioned_docs/version-v5/native/biocatch.mdx +++ b/versioned_docs/version-v5/native/biocatch.mdx @@ -68,7 +68,7 @@ BioCatch SDK Cordova support ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/biometric-wrapper.mdx b/versioned_docs/version-v5/native/biometric-wrapper.mdx index d8561965fd1..6f2bc2a06dd 100644 --- a/versioned_docs/version-v5/native/biometric-wrapper.mdx +++ b/versioned_docs/version-v5/native/biometric-wrapper.mdx @@ -66,7 +66,7 @@ May be used in Banking domain ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/ble.mdx b/versioned_docs/version-v5/native/ble.mdx index 91dba27963f..bd142788714 100644 --- a/versioned_docs/version-v5/native/ble.mdx +++ b/versioned_docs/version-v5/native/ble.mdx @@ -80,7 +80,7 @@ Simultaneous connections to multiple peripherals are supported. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/blinkid.mdx b/versioned_docs/version-v5/native/blinkid.mdx index 7435676b923..7aaacb50be3 100644 --- a/versioned_docs/version-v5/native/blinkid.mdx +++ b/versioned_docs/version-v5/native/blinkid.mdx @@ -69,7 +69,7 @@ blinkid-phonegap repository for available recognizers and other settings ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/bluetooth-le.mdx b/versioned_docs/version-v5/native/bluetooth-le.mdx index d5571ea55b3..ca7990414d7 100644 --- a/versioned_docs/version-v5/native/bluetooth-le.mdx +++ b/versioned_docs/version-v5/native/bluetooth-le.mdx @@ -72,7 +72,7 @@ It supports peripheral **and** central modes and covers most of the API methods ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/bluetooth-serial.mdx b/versioned_docs/version-v5/native/bluetooth-serial.mdx index 67dec208e3c..87633f65596 100644 --- a/versioned_docs/version-v5/native/bluetooth-serial.mdx +++ b/versioned_docs/version-v5/native/bluetooth-serial.mdx @@ -71,7 +71,7 @@ This plugin enables serial communication over Bluetooth. It was written for comm ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/branch-io.mdx b/versioned_docs/version-v5/native/branch-io.mdx index 4581e78ac9a..f81686efbb3 100644 --- a/versioned_docs/version-v5/native/branch-io.mdx +++ b/versioned_docs/version-v5/native/branch-io.mdx @@ -68,7 +68,7 @@ Branch.io is an attribution service for deeplinking and invitation links ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/broadcaster.mdx b/versioned_docs/version-v5/native/broadcaster.mdx index a689afcf90c..a71a0885e2b 100644 --- a/versioned_docs/version-v5/native/broadcaster.mdx +++ b/versioned_docs/version-v5/native/broadcaster.mdx @@ -71,7 +71,7 @@ This plugin adds exchanging events between native code and your app. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/build-info.mdx b/versioned_docs/version-v5/native/build-info.mdx index fcefd3eadc4..9648072bbba 100644 --- a/versioned_docs/version-v5/native/build-info.mdx +++ b/versioned_docs/version-v5/native/build-info.mdx @@ -73,7 +73,7 @@ This plugin provides build information. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/calendar.mdx b/versioned_docs/version-v5/native/calendar.mdx index edf994e1843..1620a2edb72 100644 --- a/versioned_docs/version-v5/native/calendar.mdx +++ b/versioned_docs/version-v5/native/calendar.mdx @@ -72,7 +72,7 @@ Requires Cordova plugin: `cordova-plugin-calendar`. For more info, please see th ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/call-directory.mdx b/versioned_docs/version-v5/native/call-directory.mdx index 6117296e998..935311444ae 100644 --- a/versioned_docs/version-v5/native/call-directory.mdx +++ b/versioned_docs/version-v5/native/call-directory.mdx @@ -70,7 +70,7 @@ to process the changes in the call directory extension. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/call-number.mdx b/versioned_docs/version-v5/native/call-number.mdx index d3df8b38a33..036b059d5a1 100644 --- a/versioned_docs/version-v5/native/call-number.mdx +++ b/versioned_docs/version-v5/native/call-number.mdx @@ -69,7 +69,7 @@ Call a number directly from your Cordova/Ionic application. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/camera-preview.mdx b/versioned_docs/version-v5/native/camera-preview.mdx index 2816a745374..98095d89924 100644 --- a/versioned_docs/version-v5/native/camera-preview.mdx +++ b/versioned_docs/version-v5/native/camera-preview.mdx @@ -72,7 +72,7 @@ Requires Cordova plugin: `https://github.com/cordova-plugin-camera-preview/cordo ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/camera.mdx b/versioned_docs/version-v5/native/camera.mdx index 1e4b5c102fa..40b754ca428 100644 --- a/versioned_docs/version-v5/native/camera.mdx +++ b/versioned_docs/version-v5/native/camera.mdx @@ -84,7 +84,7 @@ inside of the `` section ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/chooser.mdx b/versioned_docs/version-v5/native/chooser.mdx index a6b776648cc..3b1303624b9 100644 --- a/versioned_docs/version-v5/native/chooser.mdx +++ b/versioned_docs/version-v5/native/chooser.mdx @@ -81,7 +81,7 @@ The following must be added to config.xml to prevent crashing when selecting lar ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/clevertap.mdx b/versioned_docs/version-v5/native/clevertap.mdx index 5f68362ae66..691a57b6314 100644 --- a/versioned_docs/version-v5/native/clevertap.mdx +++ b/versioned_docs/version-v5/native/clevertap.mdx @@ -68,7 +68,7 @@ Cordova Plugin that wraps CleverTap SDK for Android and iOS ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/clipboard.mdx b/versioned_docs/version-v5/native/clipboard.mdx index ab7aac84453..25c61bd89bb 100644 --- a/versioned_docs/version-v5/native/clipboard.mdx +++ b/versioned_docs/version-v5/native/clipboard.mdx @@ -69,7 +69,7 @@ Clipboard management plugin for Cordova that supports iOS, Android, and Windows ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/cloud-settings.mdx b/versioned_docs/version-v5/native/cloud-settings.mdx index e95186273c4..f1bfcfb22dd 100644 --- a/versioned_docs/version-v5/native/cloud-settings.mdx +++ b/versioned_docs/version-v5/native/cloud-settings.mdx @@ -70,7 +70,7 @@ Stores app settings in cloud storage so if the user re-installs the app or insta ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/code-push.mdx b/versioned_docs/version-v5/native/code-push.mdx index 328f2e736f8..ee5b1ec807b 100644 --- a/versioned_docs/version-v5/native/code-push.mdx +++ b/versioned_docs/version-v5/native/code-push.mdx @@ -71,7 +71,7 @@ For more info, please see https://github.com/Dellos7/example-cordova-code-push-p ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/custom-uisdk.mdx b/versioned_docs/version-v5/native/custom-uisdk.mdx index 2c9b8e6ca1c..52e5000eba3 100644 --- a/versioned_docs/version-v5/native/custom-uisdk.mdx +++ b/versioned_docs/version-v5/native/custom-uisdk.mdx @@ -69,7 +69,7 @@ This plugin is used to access Paytm's native CustomUISDK framework's apis. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/deeplinks.mdx b/versioned_docs/version-v5/native/deeplinks.mdx index ab3d65732eb..2905874a2c8 100644 --- a/versioned_docs/version-v5/native/deeplinks.mdx +++ b/versioned_docs/version-v5/native/deeplinks.mdx @@ -73,7 +73,7 @@ You must add `universal-links` to your `config.xml` and set up Apple App Site As ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/device-accounts.mdx b/versioned_docs/version-v5/native/device-accounts.mdx index 68a35118d15..6037eebb3f0 100644 --- a/versioned_docs/version-v5/native/device-accounts.mdx +++ b/versioned_docs/version-v5/native/device-accounts.mdx @@ -69,7 +69,7 @@ Gets the Google accounts associated with the Android device ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/device-motion.mdx b/versioned_docs/version-v5/native/device-motion.mdx index ae1f7ef5056..53ccc074355 100644 --- a/versioned_docs/version-v5/native/device-motion.mdx +++ b/versioned_docs/version-v5/native/device-motion.mdx @@ -77,7 +77,7 @@ Requires Cordova plugin: `cordova-plugin-device-motion`. For more info, please s ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/device-orientation.mdx b/versioned_docs/version-v5/native/device-orientation.mdx index 434a5d57d3a..0dea15b58bf 100644 --- a/versioned_docs/version-v5/native/device-orientation.mdx +++ b/versioned_docs/version-v5/native/device-orientation.mdx @@ -78,7 +78,7 @@ Requires Cordova plugin: `cordova-plugin-device-orientation`. For more info, ple ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/device.mdx b/versioned_docs/version-v5/native/device.mdx index 48c802df1df..994b754b91b 100644 --- a/versioned_docs/version-v5/native/device.mdx +++ b/versioned_docs/version-v5/native/device.mdx @@ -71,7 +71,7 @@ Access information about the underlying device and platform. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/dfu-update.mdx b/versioned_docs/version-v5/native/dfu-update.mdx index 03eea864fc5..0727df446e6 100644 --- a/versioned_docs/version-v5/native/dfu-update.mdx +++ b/versioned_docs/version-v5/native/dfu-update.mdx @@ -70,7 +70,7 @@ This plugin is a Wrapper to use Nordic Semiconductor's Device Firmware Update (D ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/diagnostic.mdx b/versioned_docs/version-v5/native/diagnostic.mdx index f7fd5051e26..b392821b7c0 100644 --- a/versioned_docs/version-v5/native/diagnostic.mdx +++ b/versioned_docs/version-v5/native/diagnostic.mdx @@ -71,7 +71,7 @@ Checks whether device hardware features are enabled or available to the app, e.g ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/dialogs.mdx b/versioned_docs/version-v5/native/dialogs.mdx index c77a0788459..f4d86acb43d 100644 --- a/versioned_docs/version-v5/native/dialogs.mdx +++ b/versioned_docs/version-v5/native/dialogs.mdx @@ -73,7 +73,7 @@ Requires Cordova plugin: `cordova-plugin-dialogs`. For more info, please see the ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/dns.mdx b/versioned_docs/version-v5/native/dns.mdx index be6f522bc16..3624c12f4a7 100644 --- a/versioned_docs/version-v5/native/dns.mdx +++ b/versioned_docs/version-v5/native/dns.mdx @@ -67,7 +67,7 @@ A plugin for Apache Cordova that enables applications to manually resolve hostna ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/document-picker.mdx b/versioned_docs/version-v5/native/document-picker.mdx index 780439ae892..8c36556bcdc 100644 --- a/versioned_docs/version-v5/native/document-picker.mdx +++ b/versioned_docs/version-v5/native/document-picker.mdx @@ -70,7 +70,7 @@ Allows the user to upload files from iCloud ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/document-scanner.mdx b/versioned_docs/version-v5/native/document-scanner.mdx index 5c28400b5e7..f13be88cd62 100644 --- a/versioned_docs/version-v5/native/document-scanner.mdx +++ b/versioned_docs/version-v5/native/document-scanner.mdx @@ -70,7 +70,7 @@ This plugin processes images of documents, compensating for perspective. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/document-viewer.mdx b/versioned_docs/version-v5/native/document-viewer.mdx index b6aa17fdf9f..71e36dcf6bf 100644 --- a/versioned_docs/version-v5/native/document-viewer.mdx +++ b/versioned_docs/version-v5/native/document-viewer.mdx @@ -73,7 +73,7 @@ This plugin offers a slim API to view PDF files which are either stored in the a ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/email-composer.mdx b/versioned_docs/version-v5/native/email-composer.mdx index 4f5f57ab7c3..66ab12a7a71 100644 --- a/versioned_docs/version-v5/native/email-composer.mdx +++ b/versioned_docs/version-v5/native/email-composer.mdx @@ -74,7 +74,7 @@ Requires Cordova plugin: cordova-plugin-email-composer. For more info, please se ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/fabric.mdx b/versioned_docs/version-v5/native/fabric.mdx index 5139a67c59a..3f94ce8857b 100644 --- a/versioned_docs/version-v5/native/fabric.mdx +++ b/versioned_docs/version-v5/native/fabric.mdx @@ -70,7 +70,7 @@ https://docs.fabric.io/crashlytics/index.html ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/facebook.mdx b/versioned_docs/version-v5/native/facebook.mdx index 1ffde697cf2..970c4e1e06e 100644 --- a/versioned_docs/version-v5/native/facebook.mdx +++ b/versioned_docs/version-v5/native/facebook.mdx @@ -137,7 +137,7 @@ For tracking events, see `logEvent` and `logPurchase`. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/fcm.mdx b/versioned_docs/version-v5/native/fcm.mdx index 674b683323c..7d2e20290b4 100644 --- a/versioned_docs/version-v5/native/fcm.mdx +++ b/versioned_docs/version-v5/native/fcm.mdx @@ -76,7 +76,7 @@ Not Compatible ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/file-opener.mdx b/versioned_docs/version-v5/native/file-opener.mdx index 25d95e1d7cd..c2b5e1b8063 100644 --- a/versioned_docs/version-v5/native/file-opener.mdx +++ b/versioned_docs/version-v5/native/file-opener.mdx @@ -72,7 +72,7 @@ This plugin will open a file on your device file system with its default applica ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/file-path.mdx b/versioned_docs/version-v5/native/file-path.mdx index 90000d4958a..9081ec9d891 100644 --- a/versioned_docs/version-v5/native/file-path.mdx +++ b/versioned_docs/version-v5/native/file-path.mdx @@ -68,7 +68,7 @@ This plugin allows you to resolve the native filesystem path for Android content ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/file-transfer.mdx b/versioned_docs/version-v5/native/file-transfer.mdx index a812c2ecacd..9c6dd08a64d 100644 --- a/versioned_docs/version-v5/native/file-transfer.mdx +++ b/versioned_docs/version-v5/native/file-transfer.mdx @@ -78,7 +78,7 @@ This plugin allows you to upload and download files. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/firebase-analytics.mdx b/versioned_docs/version-v5/native/firebase-analytics.mdx index 4e5b004704a..7e95e9075d9 100644 --- a/versioned_docs/version-v5/native/firebase-analytics.mdx +++ b/versioned_docs/version-v5/native/firebase-analytics.mdx @@ -92,7 +92,7 @@ And in the same file, you'll have to add `xmlns:tools="http://schemas.android.co ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/firebase-authentication.mdx b/versioned_docs/version-v5/native/firebase-authentication.mdx index 48c12194ea6..2c9036b9189 100644 --- a/versioned_docs/version-v5/native/firebase-authentication.mdx +++ b/versioned_docs/version-v5/native/firebase-authentication.mdx @@ -70,7 +70,7 @@ Cordova plugin for Firebase Authentication ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/firebase-config.mdx b/versioned_docs/version-v5/native/firebase-config.mdx index cc0f39b3488..06436401d84 100644 --- a/versioned_docs/version-v5/native/firebase-config.mdx +++ b/versioned_docs/version-v5/native/firebase-config.mdx @@ -70,7 +70,7 @@ Cordova plugin for Firebase Config ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/firebase-crash.mdx b/versioned_docs/version-v5/native/firebase-crash.mdx index 2caff796238..3fee68ec116 100644 --- a/versioned_docs/version-v5/native/firebase-crash.mdx +++ b/versioned_docs/version-v5/native/firebase-crash.mdx @@ -70,7 +70,7 @@ This plugin brings crash reporting from Google Firebase to your Cordova project! ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/firebase-crashlytics.mdx b/versioned_docs/version-v5/native/firebase-crashlytics.mdx index 2e540c7ffdd..752c887cff4 100644 --- a/versioned_docs/version-v5/native/firebase-crashlytics.mdx +++ b/versioned_docs/version-v5/native/firebase-crashlytics.mdx @@ -70,7 +70,7 @@ A Google Firebase Crashlytics plugin to enable capture of crash reports. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/firebase-dynamic-links.mdx b/versioned_docs/version-v5/native/firebase-dynamic-links.mdx index f7bbfb94be1..6cf00bd9d8c 100644 --- a/versioned_docs/version-v5/native/firebase-dynamic-links.mdx +++ b/versioned_docs/version-v5/native/firebase-dynamic-links.mdx @@ -89,7 +89,7 @@ config.xml: ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/firebase-messaging.mdx b/versioned_docs/version-v5/native/firebase-messaging.mdx index 0907b93e266..ecbaa6af9d7 100644 --- a/versioned_docs/version-v5/native/firebase-messaging.mdx +++ b/versioned_docs/version-v5/native/firebase-messaging.mdx @@ -70,7 +70,7 @@ Cordova plugin for Firebase Messaging ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/firebase-vision.mdx b/versioned_docs/version-v5/native/firebase-vision.mdx index 93a8c6feb7d..f999557cffc 100644 --- a/versioned_docs/version-v5/native/firebase-vision.mdx +++ b/versioned_docs/version-v5/native/firebase-vision.mdx @@ -70,7 +70,7 @@ Cordova plugin for Firebase MLKit Vision ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/firebase-x.mdx b/versioned_docs/version-v5/native/firebase-x.mdx index d1baade7124..74f840597cc 100644 --- a/versioned_docs/version-v5/native/firebase-x.mdx +++ b/versioned_docs/version-v5/native/firebase-x.mdx @@ -70,7 +70,7 @@ It is a maintained fork from unmaintained ionic-navite plugin called Firebase. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/firebase.mdx b/versioned_docs/version-v5/native/firebase.mdx index f7d05991790..29c606171e8 100644 --- a/versioned_docs/version-v5/native/firebase.mdx +++ b/versioned_docs/version-v5/native/firebase.mdx @@ -72,7 +72,7 @@ Not Compatible ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/flashlight.mdx b/versioned_docs/version-v5/native/flashlight.mdx index cc3367c06bb..ad140c01a02 100644 --- a/versioned_docs/version-v5/native/flashlight.mdx +++ b/versioned_docs/version-v5/native/flashlight.mdx @@ -73,7 +73,7 @@ Requires Cordova plugin: `cordova-plugin-flashlight`. For more info, please see ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/foreground-service.mdx b/versioned_docs/version-v5/native/foreground-service.mdx index 54f6a1ae291..0a3f31b607a 100644 --- a/versioned_docs/version-v5/native/foreground-service.mdx +++ b/versioned_docs/version-v5/native/foreground-service.mdx @@ -82,7 +82,7 @@ For android API 28+, the following xml snippet should be inserted into `config.x ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/ftp.mdx b/versioned_docs/version-v5/native/ftp.mdx index 51377876d88..2cf46b2829f 100644 --- a/versioned_docs/version-v5/native/ftp.mdx +++ b/versioned_docs/version-v5/native/ftp.mdx @@ -68,7 +68,7 @@ This cordova plugin is created to use ftp (client) in web/js. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/gao-de-location.mdx b/versioned_docs/version-v5/native/gao-de-location.mdx index b217c601758..b1c9b38fe03 100644 --- a/versioned_docs/version-v5/native/gao-de-location.mdx +++ b/versioned_docs/version-v5/native/gao-de-location.mdx @@ -71,7 +71,7 @@ Gaode location can directly return address informationGaode location can directl ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/ge-tui-sdk-plugin.mdx b/versioned_docs/version-v5/native/ge-tui-sdk-plugin.mdx index 96fe3452207..d0cf8612caf 100644 --- a/versioned_docs/version-v5/native/ge-tui-sdk-plugin.mdx +++ b/versioned_docs/version-v5/native/ge-tui-sdk-plugin.mdx @@ -70,7 +70,7 @@ This plugin does something ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/geolocation.mdx b/versioned_docs/version-v5/native/geolocation.mdx index 808bbaf6d12..7092bf17c65 100644 --- a/versioned_docs/version-v5/native/geolocation.mdx +++ b/versioned_docs/version-v5/native/geolocation.mdx @@ -85,7 +85,7 @@ For iOS you have to add this configuration to your configuration.xml file ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/globalization.mdx b/versioned_docs/version-v5/native/globalization.mdx index 0cd8a837d69..c605d920bef 100644 --- a/versioned_docs/version-v5/native/globalization.mdx +++ b/versioned_docs/version-v5/native/globalization.mdx @@ -73,7 +73,7 @@ This plugin obtains information and performs operations specific to the user's l ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/google-analytics.mdx b/versioned_docs/version-v5/native/google-analytics.mdx index 066b8a48c26..fc660aa14be 100644 --- a/versioned_docs/version-v5/native/google-analytics.mdx +++ b/versioned_docs/version-v5/native/google-analytics.mdx @@ -77,7 +77,7 @@ Prerequisites: ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/google-nearby.mdx b/versioned_docs/version-v5/native/google-nearby.mdx index 51874c65750..baf89f0a142 100644 --- a/versioned_docs/version-v5/native/google-nearby.mdx +++ b/versioned_docs/version-v5/native/google-nearby.mdx @@ -69,7 +69,7 @@ This plugin adds support for the Google Nearby Messages API. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/google-plus.mdx b/versioned_docs/version-v5/native/google-plus.mdx index 6901168a648..e1388571cfe 100644 --- a/versioned_docs/version-v5/native/google-plus.mdx +++ b/versioned_docs/version-v5/native/google-plus.mdx @@ -68,7 +68,7 @@ import CodeBlock from '@theme/CodeBlock'; ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/health-kit.mdx b/versioned_docs/version-v5/native/health-kit.mdx index a09078dd782..d6ac154ae7f 100644 --- a/versioned_docs/version-v5/native/health-kit.mdx +++ b/versioned_docs/version-v5/native/health-kit.mdx @@ -70,7 +70,7 @@ Any data saved shows up in the iOS Health app and is available for other iOS app ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/health.mdx b/versioned_docs/version-v5/native/health.mdx index 9ec2f16902a..a5b278fe3d0 100644 --- a/versioned_docs/version-v5/native/health.mdx +++ b/versioned_docs/version-v5/native/health.mdx @@ -68,7 +68,7 @@ A plugin that abstracts fitness and health repositories like Apple HealthKit or ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/http.mdx b/versioned_docs/version-v5/native/http.mdx index 8265b75fd52..c229610745b 100644 --- a/versioned_docs/version-v5/native/http.mdx +++ b/versioned_docs/version-v5/native/http.mdx @@ -75,7 +75,7 @@ Advantages over Javascript requests: ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/iamport-cordova.mdx b/versioned_docs/version-v5/native/iamport-cordova.mdx index b2ab5d4ed26..81d252fb52f 100644 --- a/versioned_docs/version-v5/native/iamport-cordova.mdx +++ b/versioned_docs/version-v5/native/iamport-cordova.mdx @@ -68,7 +68,7 @@ This plugin does something ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/ibeacon.mdx b/versioned_docs/version-v5/native/ibeacon.mdx index 09d40e65c62..8b45c93fd55 100644 --- a/versioned_docs/version-v5/native/ibeacon.mdx +++ b/versioned_docs/version-v5/native/ibeacon.mdx @@ -70,7 +70,7 @@ The plugin's API closely mimics the one exposed through the [CLLocationManager]( ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/image-picker.mdx b/versioned_docs/version-v5/native/image-picker.mdx index 2b42c1f2f20..2c113374535 100644 --- a/versioned_docs/version-v5/native/image-picker.mdx +++ b/versioned_docs/version-v5/native/image-picker.mdx @@ -73,7 +73,7 @@ For more info, please see the https://github.com/Telerik-Verified-Plugins/ImageP ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/imap.mdx b/versioned_docs/version-v5/native/imap.mdx index 33fc049191e..1d60208f48f 100644 --- a/versioned_docs/version-v5/native/imap.mdx +++ b/versioned_docs/version-v5/native/imap.mdx @@ -70,7 +70,7 @@ Planned improvements and support for iOS. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/in-app-browser.mdx b/versioned_docs/version-v5/native/in-app-browser.mdx index c089d7c8b87..163cba48ed1 100644 --- a/versioned_docs/version-v5/native/in-app-browser.mdx +++ b/versioned_docs/version-v5/native/in-app-browser.mdx @@ -74,7 +74,7 @@ Launches in app Browser ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/in-app-purchase-2.mdx b/versioned_docs/version-v5/native/in-app-purchase-2.mdx index ea0be992e16..e404cf657fe 100644 --- a/versioned_docs/version-v5/native/in-app-purchase-2.mdx +++ b/versioned_docs/version-v5/native/in-app-purchase-2.mdx @@ -94,7 +94,7 @@ Supports: ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/in-app-review.mdx b/versioned_docs/version-v5/native/in-app-review.mdx index 14d1827e8ff..0a36bde8f94 100644 --- a/versioned_docs/version-v5/native/in-app-review.mdx +++ b/versioned_docs/version-v5/native/in-app-review.mdx @@ -71,7 +71,7 @@ This functionality only works on iOS devices ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/insomnia.mdx b/versioned_docs/version-v5/native/insomnia.mdx index d8fd256bcf4..03a27ff3e10 100644 --- a/versioned_docs/version-v5/native/insomnia.mdx +++ b/versioned_docs/version-v5/native/insomnia.mdx @@ -72,7 +72,7 @@ Prevent the screen of the mobile device from falling asleep. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/instagram.mdx b/versioned_docs/version-v5/native/instagram.mdx index 033e079aba6..6878d49f033 100644 --- a/versioned_docs/version-v5/native/instagram.mdx +++ b/versioned_docs/version-v5/native/instagram.mdx @@ -69,7 +69,7 @@ Share a photo with the instagram app ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/intercom.mdx b/versioned_docs/version-v5/native/intercom.mdx index bb9949627c3..1e961c1ad47 100644 --- a/versioned_docs/version-v5/native/intercom.mdx +++ b/versioned_docs/version-v5/native/intercom.mdx @@ -69,7 +69,7 @@ Follow the offical documentation to setup this plugin correctly: https://develop ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/ionic-webview.mdx b/versioned_docs/version-v5/native/ionic-webview.mdx index 9f519d62ebc..900c630cd99 100644 --- a/versioned_docs/version-v5/native/ionic-webview.mdx +++ b/versioned_docs/version-v5/native/ionic-webview.mdx @@ -78,7 +78,7 @@ Not Compatible ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.mdx b/versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.mdx index 0e2946eba89..b8e5f4a973d 100644 --- a/versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.mdx +++ b/versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.mdx @@ -69,7 +69,7 @@ Plugin for iOS 12 ASWebAuthenticationSession API ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/is-debug.mdx b/versioned_docs/version-v5/native/is-debug.mdx index 8e1029377cf..6a2ba332e5d 100644 --- a/versioned_docs/version-v5/native/is-debug.mdx +++ b/versioned_docs/version-v5/native/is-debug.mdx @@ -69,7 +69,7 @@ Debug mode is when the app is built and installed locally via xcode / eclipse / ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/keyboard.mdx b/versioned_docs/version-v5/native/keyboard.mdx index 75ca74637d7..5677e0a3e17 100644 --- a/versioned_docs/version-v5/native/keyboard.mdx +++ b/versioned_docs/version-v5/native/keyboard.mdx @@ -76,7 +76,7 @@ Not Compatible ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/keychain.mdx b/versioned_docs/version-v5/native/keychain.mdx index dfd93eb3ca8..5dae923222b 100644 --- a/versioned_docs/version-v5/native/keychain.mdx +++ b/versioned_docs/version-v5/native/keychain.mdx @@ -73,7 +73,7 @@ See also [Secure Storage](https://ionicframework.com/docs/native/secure-storage/ ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/kommunicate.mdx b/versioned_docs/version-v5/native/kommunicate.mdx index 57f5b2be2b6..c69dd4bbf4e 100644 --- a/versioned_docs/version-v5/native/kommunicate.mdx +++ b/versioned_docs/version-v5/native/kommunicate.mdx @@ -74,7 +74,7 @@ For documentation: TODO: insert link ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/launch-navigator.mdx b/versioned_docs/version-v5/native/launch-navigator.mdx index a384c735a00..11a8447f165 100644 --- a/versioned_docs/version-v5/native/launch-navigator.mdx +++ b/versioned_docs/version-v5/native/launch-navigator.mdx @@ -72,7 +72,7 @@ Requires Cordova plugin: uk.co.workingedge.phonegap.plugin.launchnavigator. For ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/launch-review.mdx b/versioned_docs/version-v5/native/launch-review.mdx index 9877914e443..629b8e77ad9 100644 --- a/versioned_docs/version-v5/native/launch-review.mdx +++ b/versioned_docs/version-v5/native/launch-review.mdx @@ -72,7 +72,7 @@ Assists in leaving user reviews/ratings in the App Stores. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/line-login.mdx b/versioned_docs/version-v5/native/line-login.mdx index 1fe09c04178..7c6cbc2ad13 100644 --- a/versioned_docs/version-v5/native/line-login.mdx +++ b/versioned_docs/version-v5/native/line-login.mdx @@ -70,7 +70,7 @@ The function login, logs out, acquires, verifies, and refreshes the access token ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/local-notifications.mdx b/versioned_docs/version-v5/native/local-notifications.mdx index 01767dd661d..82613baad49 100644 --- a/versioned_docs/version-v5/native/local-notifications.mdx +++ b/versioned_docs/version-v5/native/local-notifications.mdx @@ -73,7 +73,7 @@ This plugin allows you to display local notifications on the device ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/location-accuracy.mdx b/versioned_docs/version-v5/native/location-accuracy.mdx index 8fc8a83c460..3b8ef2adb65 100644 --- a/versioned_docs/version-v5/native/location-accuracy.mdx +++ b/versioned_docs/version-v5/native/location-accuracy.mdx @@ -70,7 +70,7 @@ This Cordova/Phonegap plugin for Android and iOS to request enabling/changing of ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/lottie-splash-screen.mdx b/versioned_docs/version-v5/native/lottie-splash-screen.mdx index 7349ec5ca64..28e6486c18d 100644 --- a/versioned_docs/version-v5/native/lottie-splash-screen.mdx +++ b/versioned_docs/version-v5/native/lottie-splash-screen.mdx @@ -70,7 +70,7 @@ Cordova plugin to show bodymovin/Lottie animations as the splash screen with Air ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/media-capture.mdx b/versioned_docs/version-v5/native/media-capture.mdx index 62085c70145..58bb68cf8fd 100644 --- a/versioned_docs/version-v5/native/media-capture.mdx +++ b/versioned_docs/version-v5/native/media-capture.mdx @@ -74,7 +74,7 @@ Requires Cordova plugin: `cordova-plugin-media-capture`. For more info, please s ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/media.mdx b/versioned_docs/version-v5/native/media.mdx index c6a0f1aa08d..e1e3fafff39 100644 --- a/versioned_docs/version-v5/native/media.mdx +++ b/versioned_docs/version-v5/native/media.mdx @@ -70,7 +70,7 @@ This plugin provides the ability to record and play back audio files on a device ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/metrix.mdx b/versioned_docs/version-v5/native/metrix.mdx index 88665cc8b26..dec157af897 100644 --- a/versioned_docs/version-v5/native/metrix.mdx +++ b/versioned_docs/version-v5/native/metrix.mdx @@ -69,7 +69,7 @@ Requires Cordova plugin: `ir.metrix.sdk`. For more info, please see the [Metrix ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/mixpanel.mdx b/versioned_docs/version-v5/native/mixpanel.mdx index 258969fd1bc..93d41ce1b10 100644 --- a/versioned_docs/version-v5/native/mixpanel.mdx +++ b/versioned_docs/version-v5/native/mixpanel.mdx @@ -69,7 +69,7 @@ Cordova Plugin that wraps Mixpanel SDK for Android and iOS ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/mlkit-translate.mdx b/versioned_docs/version-v5/native/mlkit-translate.mdx index ad87e8d07b1..8f8a62ea0cd 100644 --- a/versioned_docs/version-v5/native/mlkit-translate.mdx +++ b/versioned_docs/version-v5/native/mlkit-translate.mdx @@ -70,7 +70,7 @@ Plugin that implements MLKit Translation and Language Identification features. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/mobile-messaging.mdx b/versioned_docs/version-v5/native/mobile-messaging.mdx index 47ad73602c8..4770742e430 100644 --- a/versioned_docs/version-v5/native/mobile-messaging.mdx +++ b/versioned_docs/version-v5/native/mobile-messaging.mdx @@ -74,7 +74,7 @@ For more info see [Cordova plugin docs](https://github.com/infobip/mobile-messag ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/multiple-document-picker.mdx b/versioned_docs/version-v5/native/multiple-document-picker.mdx index b0b6a9f4d7c..0d87d31f6da 100644 --- a/versioned_docs/version-v5/native/multiple-document-picker.mdx +++ b/versioned_docs/version-v5/native/multiple-document-picker.mdx @@ -70,7 +70,7 @@ This plugin allows users to pick multiple documents/images at once ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/music-controls.mdx b/versioned_docs/version-v5/native/music-controls.mdx index 1c6c6bdd29f..b52e611dd6b 100644 --- a/versioned_docs/version-v5/native/music-controls.mdx +++ b/versioned_docs/version-v5/native/music-controls.mdx @@ -77,7 +77,7 @@ Not Compatible ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/native-audio.mdx b/versioned_docs/version-v5/native/native-audio.mdx index fd6ad275f70..d25ab236421 100644 --- a/versioned_docs/version-v5/native/native-audio.mdx +++ b/versioned_docs/version-v5/native/native-audio.mdx @@ -71,7 +71,7 @@ Native Audio Playback ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/native-geocoder.mdx b/versioned_docs/version-v5/native/native-geocoder.mdx index 90439573449..f82b7713bc5 100644 --- a/versioned_docs/version-v5/native/native-geocoder.mdx +++ b/versioned_docs/version-v5/native/native-geocoder.mdx @@ -70,7 +70,7 @@ Cordova plugin for native forward and reverse geocoding ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/native-keyboard.mdx b/versioned_docs/version-v5/native/native-keyboard.mdx index afa74683b6a..dbb5e9e3b97 100644 --- a/versioned_docs/version-v5/native/native-keyboard.mdx +++ b/versioned_docs/version-v5/native/native-keyboard.mdx @@ -70,7 +70,7 @@ A cross platform WhatsApp / Messenger / Slack -style keyboard even. For your Cor ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/native-page-transitions.mdx b/versioned_docs/version-v5/native/native-page-transitions.mdx index 6bc09cdb8ac..ac3e88da7f4 100644 --- a/versioned_docs/version-v5/native/native-page-transitions.mdx +++ b/versioned_docs/version-v5/native/native-page-transitions.mdx @@ -71,7 +71,7 @@ The Native Page Transitions plugin uses native hardware acceleration to animate ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/native-storage.mdx b/versioned_docs/version-v5/native/native-storage.mdx index e5d940242b6..13990682a64 100644 --- a/versioned_docs/version-v5/native/native-storage.mdx +++ b/versioned_docs/version-v5/native/native-storage.mdx @@ -75,7 +75,7 @@ Native storage of variables in Android and iOS ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/network-interface.mdx b/versioned_docs/version-v5/native/network-interface.mdx index 940338b2ab7..1c37cb06d39 100644 --- a/versioned_docs/version-v5/native/network-interface.mdx +++ b/versioned_docs/version-v5/native/network-interface.mdx @@ -74,7 +74,7 @@ Network interface information plugin for Cordova/PhoneGap that supports Android, ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/network.mdx b/versioned_docs/version-v5/native/network.mdx index c25a0813951..d65aa2b0d3f 100644 --- a/versioned_docs/version-v5/native/network.mdx +++ b/versioned_docs/version-v5/native/network.mdx @@ -75,7 +75,7 @@ Requires Cordova plugin: cordova-plugin-network-information. For more info, plea ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/nfc.mdx b/versioned_docs/version-v5/native/nfc.mdx index 799489b6452..cea0e81a90b 100644 --- a/versioned_docs/version-v5/native/nfc.mdx +++ b/versioned_docs/version-v5/native/nfc.mdx @@ -78,7 +78,7 @@ This plugin uses NDEF (NFC Data Exchange Format) for maximum compatibilty betwee ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/ocr.mdx b/versioned_docs/version-v5/native/ocr.mdx index f648df386dd..6f980341035 100644 --- a/versioned_docs/version-v5/native/ocr.mdx +++ b/versioned_docs/version-v5/native/ocr.mdx @@ -71,7 +71,7 @@ For more info, please see the following Github issue [Google Mobile Vision relyi ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/onesignal.mdx b/versioned_docs/version-v5/native/onesignal.mdx index bd9e6586f67..51910f6c789 100644 --- a/versioned_docs/version-v5/native/onesignal.mdx +++ b/versioned_docs/version-v5/native/onesignal.mdx @@ -141,7 +141,7 @@ module.exports = function(context) { ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/open-native-settings.mdx b/versioned_docs/version-v5/native/open-native-settings.mdx index 82db03f4c8e..832f8919252 100644 --- a/versioned_docs/version-v5/native/open-native-settings.mdx +++ b/versioned_docs/version-v5/native/open-native-settings.mdx @@ -70,7 +70,7 @@ Plugin to open native screens of iOS/android settings ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/openalpr.mdx b/versioned_docs/version-v5/native/openalpr.mdx index 6ad4fb2025f..2564a30d15f 100644 --- a/versioned_docs/version-v5/native/openalpr.mdx +++ b/versioned_docs/version-v5/native/openalpr.mdx @@ -68,7 +68,7 @@ This Cordova plugin adds support for the OpenALPR (Automatic License Plate Recog ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/pdf-generator.mdx b/versioned_docs/version-v5/native/pdf-generator.mdx index 107ed720bb8..12604e10409 100644 --- a/versioned_docs/version-v5/native/pdf-generator.mdx +++ b/versioned_docs/version-v5/native/pdf-generator.mdx @@ -69,7 +69,7 @@ Simple plugin to generate (offline) pdf. The plugin transforms HTML to PDF and a ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/photo-library.mdx b/versioned_docs/version-v5/native/photo-library.mdx index b9a37450967..8a85ef97a65 100644 --- a/versioned_docs/version-v5/native/photo-library.mdx +++ b/versioned_docs/version-v5/native/photo-library.mdx @@ -73,7 +73,7 @@ cdvphotolibrary urls should be trusted by Angular. See plugin homepage to learn ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/photo-viewer.mdx b/versioned_docs/version-v5/native/photo-viewer.mdx index 413c354e904..d68361ba6de 100644 --- a/versioned_docs/version-v5/native/photo-viewer.mdx +++ b/versioned_docs/version-v5/native/photo-viewer.mdx @@ -70,7 +70,7 @@ This plugin can display your image in full screen with the ability to pan, zoom, ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/printer.mdx b/versioned_docs/version-v5/native/printer.mdx index 8a256bc2939..d3ac964842f 100644 --- a/versioned_docs/version-v5/native/printer.mdx +++ b/versioned_docs/version-v5/native/printer.mdx @@ -69,7 +69,7 @@ Prints documents or HTML rendered content ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/pspdfkit-cordova.mdx b/versioned_docs/version-v5/native/pspdfkit-cordova.mdx index bd3c4882691..c1ac5f052c7 100644 --- a/versioned_docs/version-v5/native/pspdfkit-cordova.mdx +++ b/versioned_docs/version-v5/native/pspdfkit-cordova.mdx @@ -69,7 +69,7 @@ The official plugin to use PSPDFKit with Cordova and Ionic. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/purchases.mdx b/versioned_docs/version-v5/native/purchases.mdx index e7288c19a1c..01af5df5959 100644 --- a/versioned_docs/version-v5/native/purchases.mdx +++ b/versioned_docs/version-v5/native/purchases.mdx @@ -88,7 +88,7 @@ For more detailed information, you can view our complete documentation at [docs. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/push.mdx b/versioned_docs/version-v5/native/push.mdx index de211458bcc..7f41642bf7c 100644 --- a/versioned_docs/version-v5/native/push.mdx +++ b/versioned_docs/version-v5/native/push.mdx @@ -76,7 +76,7 @@ For TypeScript users, see the [Push plugin docs about using TypeScript for custo ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/pushape-push.mdx b/versioned_docs/version-v5/native/pushape-push.mdx index c395223022e..59d5f94c65e 100644 --- a/versioned_docs/version-v5/native/pushape-push.mdx +++ b/versioned_docs/version-v5/native/pushape-push.mdx @@ -77,7 +77,7 @@ For TypeScript users, see the [Pushape plugin docs about using TypeScript for cu ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/safari-view-controller.mdx b/versioned_docs/version-v5/native/safari-view-controller.mdx index 06f56ce773a..97cd91c8aba 100644 --- a/versioned_docs/version-v5/native/safari-view-controller.mdx +++ b/versioned_docs/version-v5/native/safari-view-controller.mdx @@ -72,7 +72,7 @@ Requires Cordova plugin: `cordova-plugin-safariviewcontroller`. For more info, p ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/screen-orientation.mdx b/versioned_docs/version-v5/native/screen-orientation.mdx index 52d5a8edb88..3fb0c37a78e 100644 --- a/versioned_docs/version-v5/native/screen-orientation.mdx +++ b/versioned_docs/version-v5/native/screen-orientation.mdx @@ -73,7 +73,7 @@ Requires Cordova plugin: `cordova-plugin-screen-orientation`. For more info, ple ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/service-discovery.mdx b/versioned_docs/version-v5/native/service-discovery.mdx index 7918888ab78..938a1f0cf8f 100644 --- a/versioned_docs/version-v5/native/service-discovery.mdx +++ b/versioned_docs/version-v5/native/service-discovery.mdx @@ -70,7 +70,7 @@ Simple plugin to get any SSDP / UPnP / DLNA service on a local network ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/shake.mdx b/versioned_docs/version-v5/native/shake.mdx index f671de5d8fc..707912d3f44 100644 --- a/versioned_docs/version-v5/native/shake.mdx +++ b/versioned_docs/version-v5/native/shake.mdx @@ -67,7 +67,7 @@ Handles shake gesture ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/sign-in-with-apple.mdx b/versioned_docs/version-v5/native/sign-in-with-apple.mdx index aa9f1d12d0f..d60e48c333d 100644 --- a/versioned_docs/version-v5/native/sign-in-with-apple.mdx +++ b/versioned_docs/version-v5/native/sign-in-with-apple.mdx @@ -74,7 +74,7 @@ _Source:_ https://developer.apple.com/sign-in-with-apple/ ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/smartlook.mdx b/versioned_docs/version-v5/native/smartlook.mdx index a1abfa0206e..72cc0854e72 100644 --- a/versioned_docs/version-v5/native/smartlook.mdx +++ b/versioned_docs/version-v5/native/smartlook.mdx @@ -71,7 +71,7 @@ Full documentation can be found here: https://smartlook.github.io/docs/sdk/ionic ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/sms-retriever.mdx b/versioned_docs/version-v5/native/sms-retriever.mdx index 5e587ac7330..550dc0bba41 100644 --- a/versioned_docs/version-v5/native/sms-retriever.mdx +++ b/versioned_docs/version-v5/native/sms-retriever.mdx @@ -70,7 +70,7 @@ This plugin retrives the SMS which arrive without requiring READ permissions. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/sms.mdx b/versioned_docs/version-v5/native/sms.mdx index 3f7c413a721..533a924488e 100644 --- a/versioned_docs/version-v5/native/sms.mdx +++ b/versioned_docs/version-v5/native/sms.mdx @@ -70,7 +70,7 @@ Requires Cordova plugin: cordova-sms-plugin. For more info, please see the [SMS ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/social-sharing.mdx b/versioned_docs/version-v5/native/social-sharing.mdx index 68eb9fd500d..7ab1215b196 100644 --- a/versioned_docs/version-v5/native/social-sharing.mdx +++ b/versioned_docs/version-v5/native/social-sharing.mdx @@ -77,7 +77,7 @@ For Browser usage check out the Web Share API docs: https://github.com/EddyVerbr ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/speech-recognition.mdx b/versioned_docs/version-v5/native/speech-recognition.mdx index e7f3b735890..028443c33d5 100644 --- a/versioned_docs/version-v5/native/speech-recognition.mdx +++ b/versioned_docs/version-v5/native/speech-recognition.mdx @@ -70,7 +70,7 @@ This plugin does speech recognition using cloud services ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/spinner-dialog.mdx b/versioned_docs/version-v5/native/spinner-dialog.mdx index 78456f1dcbb..c190ed6f9ad 100644 --- a/versioned_docs/version-v5/native/spinner-dialog.mdx +++ b/versioned_docs/version-v5/native/spinner-dialog.mdx @@ -74,7 +74,7 @@ Requires Cordova plugin: `cordova-plugin-native-spinner`. For more info, please ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/splash-screen.mdx b/versioned_docs/version-v5/native/splash-screen.mdx index ed5fbb83119..051bafa3b22 100644 --- a/versioned_docs/version-v5/native/splash-screen.mdx +++ b/versioned_docs/version-v5/native/splash-screen.mdx @@ -78,7 +78,7 @@ Not Compatible ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/spotify-auth.mdx b/versioned_docs/version-v5/native/spotify-auth.mdx index 832138055b5..c33e982d9c9 100644 --- a/versioned_docs/version-v5/native/spotify-auth.mdx +++ b/versioned_docs/version-v5/native/spotify-auth.mdx @@ -71,7 +71,7 @@ Cordova plugin for authenticating with Spotify ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/sqlite-db-copy.mdx b/versioned_docs/version-v5/native/sqlite-db-copy.mdx index 195d00f76de..12e8b559509 100644 --- a/versioned_docs/version-v5/native/sqlite-db-copy.mdx +++ b/versioned_docs/version-v5/native/sqlite-db-copy.mdx @@ -70,7 +70,7 @@ This plugin does something ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/sqlite-porter.mdx b/versioned_docs/version-v5/native/sqlite-porter.mdx index b46dcf3cc69..49c41b42b8f 100644 --- a/versioned_docs/version-v5/native/sqlite-porter.mdx +++ b/versioned_docs/version-v5/native/sqlite-porter.mdx @@ -76,7 +76,7 @@ This Cordova/Phonegap plugin can be used to import/export to/from a SQLite datab ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/sqlite.mdx b/versioned_docs/version-v5/native/sqlite.mdx index e28752ad5b5..79a0b14f0b3 100644 --- a/versioned_docs/version-v5/native/sqlite.mdx +++ b/versioned_docs/version-v5/native/sqlite.mdx @@ -73,7 +73,7 @@ Access SQLite databases on the device. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/star-prnt.mdx b/versioned_docs/version-v5/native/star-prnt.mdx index b6f89e3e8a7..cd1197aa538 100644 --- a/versioned_docs/version-v5/native/star-prnt.mdx +++ b/versioned_docs/version-v5/native/star-prnt.mdx @@ -69,7 +69,7 @@ import CodeBlock from '@theme/CodeBlock'; ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/status-bar.mdx b/versioned_docs/version-v5/native/status-bar.mdx index 585f957caf0..c3f955e51a8 100644 --- a/versioned_docs/version-v5/native/status-bar.mdx +++ b/versioned_docs/version-v5/native/status-bar.mdx @@ -78,7 +78,7 @@ Not Compatible ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/streaming-media.mdx b/versioned_docs/version-v5/native/streaming-media.mdx index e3d28e2feed..090580cf018 100644 --- a/versioned_docs/version-v5/native/streaming-media.mdx +++ b/versioned_docs/version-v5/native/streaming-media.mdx @@ -71,7 +71,7 @@ This plugin allows you to stream audio and video in a fullscreen, native player ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/stripe.mdx b/versioned_docs/version-v5/native/stripe.mdx index abaf9ee7e09..e4f2fcec226 100644 --- a/versioned_docs/version-v5/native/stripe.mdx +++ b/versioned_docs/version-v5/native/stripe.mdx @@ -69,7 +69,7 @@ A plugin that allows you to use Stripe's Native SDKs for Android and iOS. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/sum-up.mdx b/versioned_docs/version-v5/native/sum-up.mdx index e318ef84c6b..3298dbfc293 100644 --- a/versioned_docs/version-v5/native/sum-up.mdx +++ b/versioned_docs/version-v5/native/sum-up.mdx @@ -68,7 +68,7 @@ Plugin to communicate with a SumUp payment terminal ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/taptic-engine.mdx b/versioned_docs/version-v5/native/taptic-engine.mdx index ee86ecd23d2..dcdfcda74b8 100644 --- a/versioned_docs/version-v5/native/taptic-engine.mdx +++ b/versioned_docs/version-v5/native/taptic-engine.mdx @@ -69,7 +69,7 @@ An Ionic plugin to use Taptic Engine API on iPhone 7, 7 Plus or newer. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/tealium-adidentifier.mdx b/versioned_docs/version-v5/native/tealium-adidentifier.mdx index d08610c1d8a..b5f9a737a16 100644 --- a/versioned_docs/version-v5/native/tealium-adidentifier.mdx +++ b/versioned_docs/version-v5/native/tealium-adidentifier.mdx @@ -71,7 +71,7 @@ Makes the IDFA and Google Ad Identifier available in the Tealium data layer. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/tealium-installreferrer.mdx b/versioned_docs/version-v5/native/tealium-installreferrer.mdx index d9be83679d8..0c07e2fae3d 100644 --- a/versioned_docs/version-v5/native/tealium-installreferrer.mdx +++ b/versioned_docs/version-v5/native/tealium-installreferrer.mdx @@ -70,7 +70,7 @@ Implements a Broadcast Receiver for the INSTALL_REFERRER intent. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/tealium.mdx b/versioned_docs/version-v5/native/tealium.mdx index afb02e4ff6a..321f89f18b6 100644 --- a/versioned_docs/version-v5/native/tealium.mdx +++ b/versioned_docs/version-v5/native/tealium.mdx @@ -70,7 +70,7 @@ For full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/theme-detection.mdx b/versioned_docs/version-v5/native/theme-detection.mdx index 4c80836bda0..365c3de4fa1 100644 --- a/versioned_docs/version-v5/native/theme-detection.mdx +++ b/versioned_docs/version-v5/native/theme-detection.mdx @@ -70,7 +70,7 @@ Cordova plugin to detect whether dark mode is enabled or not ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/three-dee-touch.mdx b/versioned_docs/version-v5/native/three-dee-touch.mdx index f34303700e6..b547fefd8a4 100644 --- a/versioned_docs/version-v5/native/three-dee-touch.mdx +++ b/versioned_docs/version-v5/native/three-dee-touch.mdx @@ -71,7 +71,7 @@ Requires Cordova plugin: `cordova-plugin-3dtouch`. For more info, please see the ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/toast.mdx b/versioned_docs/version-v5/native/toast.mdx index 881f22db2cf..c98bd4c92ad 100644 --- a/versioned_docs/version-v5/native/toast.mdx +++ b/versioned_docs/version-v5/native/toast.mdx @@ -73,7 +73,7 @@ Requires Cordova plugin: `cordova-plugin-x-toast`. For more info, please see the ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/touch-id.mdx b/versioned_docs/version-v5/native/touch-id.mdx index ebce241e46a..ba97f8389b2 100644 --- a/versioned_docs/version-v5/native/touch-id.mdx +++ b/versioned_docs/version-v5/native/touch-id.mdx @@ -69,7 +69,7 @@ Requires Cordova plugin: `cordova-plugin-touch-id`. For more info, please see th ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/unvired-cordova-sdk.mdx b/versioned_docs/version-v5/native/unvired-cordova-sdk.mdx index 56a5b875386..2f4ff636ad5 100644 --- a/versioned_docs/version-v5/native/unvired-cordova-sdk.mdx +++ b/versioned_docs/version-v5/native/unvired-cordova-sdk.mdx @@ -81,7 +81,7 @@ pod repo update ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/uptime.mdx b/versioned_docs/version-v5/native/uptime.mdx index ff6c196af25..e144a6bfef4 100644 --- a/versioned_docs/version-v5/native/uptime.mdx +++ b/versioned_docs/version-v5/native/uptime.mdx @@ -68,7 +68,7 @@ This plugin provides the time spent in milliseconds since boot (uptime). ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/urbanairship.mdx b/versioned_docs/version-v5/native/urbanairship.mdx index eecb56d4232..719af7f3fe5 100644 --- a/versioned_docs/version-v5/native/urbanairship.mdx +++ b/versioned_docs/version-v5/native/urbanairship.mdx @@ -69,7 +69,7 @@ This plugin does something ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/usabilla-cordova-sdk.mdx b/versioned_docs/version-v5/native/usabilla-cordova-sdk.mdx index 4a56bb350f8..bd5e6d5d9a9 100644 --- a/versioned_docs/version-v5/native/usabilla-cordova-sdk.mdx +++ b/versioned_docs/version-v5/native/usabilla-cordova-sdk.mdx @@ -73,7 +73,7 @@ For more info see [Cordova plugin docs](https://github.com/usabilla/usabilla-u4a ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/vibes.mdx b/versioned_docs/version-v5/native/vibes.mdx index 90ad45231a7..4add667eb77 100644 --- a/versioned_docs/version-v5/native/vibes.mdx +++ b/versioned_docs/version-v5/native/vibes.mdx @@ -68,7 +68,7 @@ This plugin enables integration with the Vibes Push SDK to your Cordova project ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/vibration.mdx b/versioned_docs/version-v5/native/vibration.mdx index f863c053693..b224be0c558 100644 --- a/versioned_docs/version-v5/native/vibration.mdx +++ b/versioned_docs/version-v5/native/vibration.mdx @@ -70,7 +70,7 @@ Vibrates the device ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/video-editor.mdx b/versioned_docs/version-v5/native/video-editor.mdx index ddfe47114e5..6a633d35793 100644 --- a/versioned_docs/version-v5/native/video-editor.mdx +++ b/versioned_docs/version-v5/native/video-editor.mdx @@ -72,7 +72,7 @@ Edit videos using native device APIs ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/video-player.mdx b/versioned_docs/version-v5/native/video-player.mdx index a3be580e38b..88094ad1ae3 100644 --- a/versioned_docs/version-v5/native/video-player.mdx +++ b/versioned_docs/version-v5/native/video-player.mdx @@ -71,7 +71,7 @@ Requires Cordova plugin: `com.moust.cordova.videoplayer`. For more info, please ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/web-intent.mdx b/versioned_docs/version-v5/native/web-intent.mdx index 4eb61d3d90f..1c289e7a5fc 100644 --- a/versioned_docs/version-v5/native/web-intent.mdx +++ b/versioned_docs/version-v5/native/web-intent.mdx @@ -69,7 +69,7 @@ This Plugin provides a general purpose shim layer for the Android intent mechani ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/web-server.mdx b/versioned_docs/version-v5/native/web-server.mdx index 4d1f1b9533b..f50bcfe1f12 100644 --- a/versioned_docs/version-v5/native/web-server.mdx +++ b/versioned_docs/version-v5/native/web-server.mdx @@ -69,7 +69,7 @@ This plugin allows you to start a local dynamic content web server for android a ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/web-socket-server.mdx b/versioned_docs/version-v5/native/web-socket-server.mdx index 4f818669a5f..36b89366142 100644 --- a/versioned_docs/version-v5/native/web-socket-server.mdx +++ b/versioned_docs/version-v5/native/web-socket-server.mdx @@ -70,7 +70,7 @@ This plugin allows you to run a single, lightweight, barebone WebSocket Server. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/webengage.mdx b/versioned_docs/version-v5/native/webengage.mdx index 3b0fe5af85f..33dc89a8f4f 100644 --- a/versioned_docs/version-v5/native/webengage.mdx +++ b/versioned_docs/version-v5/native/webengage.mdx @@ -69,7 +69,7 @@ Ionic-Native wrapper that wraps Webengage Cordova plugin for Android and iOS ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/wechat.mdx b/versioned_docs/version-v5/native/wechat.mdx index 4a16a0ff5ec..a93a77f3c69 100644 --- a/versioned_docs/version-v5/native/wechat.mdx +++ b/versioned_docs/version-v5/native/wechat.mdx @@ -68,7 +68,7 @@ A cordova plugin, a JS version of Wechat SDK ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/wheel-selector.mdx b/versioned_docs/version-v5/native/wheel-selector.mdx index a9e125f147f..a2311f0eac0 100644 --- a/versioned_docs/version-v5/native/wheel-selector.mdx +++ b/versioned_docs/version-v5/native/wheel-selector.mdx @@ -70,7 +70,7 @@ Native wheel selector for Cordova (Android/iOS). ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/wifi-wizard-2.mdx b/versioned_docs/version-v5/native/wifi-wizard-2.mdx index 575bc03482f..b098f1e9ec9 100644 --- a/versioned_docs/version-v5/native/wifi-wizard-2.mdx +++ b/versioned_docs/version-v5/native/wifi-wizard-2.mdx @@ -72,7 +72,7 @@ This project is a fork of the WifiWizard plugin with fixes and updates, as well ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/wonderpush.mdx b/versioned_docs/version-v5/native/wonderpush.mdx index e0df24ba1a3..b8cb982759e 100644 --- a/versioned_docs/version-v5/native/wonderpush.mdx +++ b/versioned_docs/version-v5/native/wonderpush.mdx @@ -78,7 +78,7 @@ to retain your users and grow your audience while remaining fully GDPR compliant ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/youtube-video-player.mdx b/versioned_docs/version-v5/native/youtube-video-player.mdx index 7f4fdda4731..07aa545645e 100644 --- a/versioned_docs/version-v5/native/youtube-video-player.mdx +++ b/versioned_docs/version-v5/native/youtube-video-player.mdx @@ -70,7 +70,7 @@ Plays YouTube videos in Native YouTube App ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/zbar.mdx b/versioned_docs/version-v5/native/zbar.mdx index 345e75b2038..f3a41a17f68 100644 --- a/versioned_docs/version-v5/native/zbar.mdx +++ b/versioned_docs/version-v5/native/zbar.mdx @@ -70,7 +70,7 @@ Requires Cordova plugin: `cordova-plugin-cszbar`. For more info, please see the ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/zeroconf.mdx b/versioned_docs/version-v5/native/zeroconf.mdx index d81faca0dbe..9156f59e91d 100644 --- a/versioned_docs/version-v5/native/zeroconf.mdx +++ b/versioned_docs/version-v5/native/zeroconf.mdx @@ -68,7 +68,7 @@ This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services. ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/native/zoom.mdx b/versioned_docs/version-v5/native/zoom.mdx index bb41d3c0e31..f1b8b7b83a6 100644 --- a/versioned_docs/version-v5/native/zoom.mdx +++ b/versioned_docs/version-v5/native/zoom.mdx @@ -68,7 +68,7 @@ A Cordova plugin to use Zoom Video Conferencing services on Cordova applications ### React -[Learn more about using Ionic Native components in React](../native-community.md#react) +[Learn more about using Ionic Native components in React](../native-community.mdx#react) ### Angular diff --git a/versioned_docs/version-v5/react.md b/versioned_docs/version-v5/react.mdx similarity index 100% rename from versioned_docs/version-v5/react.md rename to versioned_docs/version-v5/react.mdx diff --git a/versioned_docs/version-v5/react/your-first-app.mdx b/versioned_docs/version-v5/react/your-first-app.mdx index b6528ff1145..a95086d4870 100644 --- a/versioned_docs/version-v5/react/your-first-app.mdx +++ b/versioned_docs/version-v5/react/your-first-app.mdx @@ -57,7 +57,7 @@ npm install -g @ionic/cli native-run cordova-res :::note The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur. -Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information. +Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information. ::: ## Create an App diff --git a/versioned_docs/version-v5/reference/browser-support.mdx b/versioned_docs/version-v5/reference/browser-support.mdx index c4894f28f7a..88f1d5e1f0f 100644 --- a/versioned_docs/version-v5/reference/browser-support.mdx +++ b/versioned_docs/version-v5/reference/browser-support.mdx @@ -4,7 +4,7 @@ Ionic's earliest goal was to make it easy to develop mobile apps using web techn ## Mobile Browsers -In pursuit of [adaptive styling](../core-concepts/fundamentals.md#adaptive-styling), Ionic fully supports and is well tested on the mobile platforms listed below: +In pursuit of [adaptive styling](../core-concepts/fundamentals.mdx#adaptive-styling), Ionic fully supports and is well tested on the mobile platforms listed below: | Framework | Android | iOS | | :-------: | :-----: | :---: | @@ -17,7 +17,7 @@ Check the [latest Android stats](https://developer.android.com/about/dashboards/ ## Desktop Browsers -Because Ionic is based on web technologies, it works just as well on desktop browsers as it does on mobile devices. For more information on desktop layouts, see [Cross Platform](../core-concepts/cross-platform.md#desktop). +Because Ionic is based on web technologies, it works just as well on desktop browsers as it does on mobile devices. For more information on desktop layouts, see [Cross Platform](../core-concepts/cross-platform.mdx#desktop). | Browser | Ionic v5 | Ionic V4 | | :---------: | :------: | :------: | diff --git a/versioned_docs/version-v5/reference/support.mdx b/versioned_docs/version-v5/reference/support.mdx index 6e83f33d96f..321e705718b 100644 --- a/versioned_docs/version-v5/reference/support.mdx +++ b/versioned_docs/version-v5/reference/support.mdx @@ -76,4 +76,4 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo | V3 | Not currently supported | @awesome-cordova-plugins 4.X | - Wrappers (and their associated plugins) are community maintained. -- \*Cordova plugin support with Ionic Native and `@ionic/react` can be achieved using the [vanilla JavaScript implementation](../native.md#vanilla-javascript) +- \*Cordova plugin support with Ionic Native and `@ionic/react` can be achieved using the [vanilla JavaScript implementation](../native.mdx#vanilla-javascript) diff --git a/versioned_docs/version-v5/theming/advanced.mdx b/versioned_docs/version-v5/theming/advanced.mdx index 16c9460666b..f0ba44e493b 100644 --- a/versioned_docs/version-v5/theming/advanced.mdx +++ b/versioned_docs/version-v5/theming/advanced.mdx @@ -15,14 +15,14 @@ While the application and stepped variables in the themes section are useful for ### Application Variables -| Name | Description | -| ------------------------- | ------------------------------------------------------------------------------------------ | -| `--ion-font-family` | Font family of the app | -| `--ion-statusbar-padding` | Statusbar padding top of the app | -| `--ion-safe-area-top` | Adjust the safe area inset top of the app | -| `--ion-safe-area-right` | Adjust the safe area inset right of the app | -| `--ion-safe-area-bottom` | Adjust the safe area inset bottom of the app | -| `--ion-safe-area-left` | Adjust the safe area inset left of the app | +| Name | Description | +| ------------------------- | ------------------------------------------------------------------------------------------- | +| `--ion-font-family` | Font family of the app | +| `--ion-statusbar-padding` | Statusbar padding top of the app | +| `--ion-safe-area-top` | Adjust the safe area inset top of the app | +| `--ion-safe-area-right` | Adjust the safe area inset right of the app | +| `--ion-safe-area-bottom` | Adjust the safe area inset bottom of the app | +| `--ion-safe-area-left` | Adjust the safe area inset left of the app | | `--ion-margin` | Adjust the margin of the [Margin attributes](../layout/css-utilities.mdx#element-margin) | | `--ion-padding` | Adjust the padding of the [Padding attributes](../layout/css-utilities.mdx#element-padding) | diff --git a/versioned_docs/version-v5/theming/css-shadow-parts.mdx b/versioned_docs/version-v5/theming/css-shadow-parts.mdx index fe2c075c8cb..69f6419a44b 100644 --- a/versioned_docs/version-v5/theming/css-shadow-parts.mdx +++ b/versioned_docs/version-v5/theming/css-shadow-parts.mdx @@ -93,7 +93,7 @@ There are some known limitations with [vendor prefixed pseudo-elements](#vendor- ## Ionic Framework Parts -All exposed parts for an Ionic Framework component can be found under the CSS Shadow Parts heading on its API page. To view all components and their API pages, see the [Component documentation](../components.md). +All exposed parts for an Ionic Framework component can be found under the CSS Shadow Parts heading on its API page. To view all components and their API pages, see the [Component documentation](../components.mdx). In order to have parts a component must meet the following criteria: diff --git a/versioned_docs/version-v5/theming/dark-mode.mdx b/versioned_docs/version-v5/theming/dark-mode.mdx index 6351385d714..363c1ab25c3 100644 --- a/versioned_docs/version-v5/theming/dark-mode.mdx +++ b/versioned_docs/version-v5/theming/dark-mode.mdx @@ -138,7 +138,7 @@ color-scheme: light dark; For more information regarding `color-scheme` please see https://web.dev/color-scheme/. :::note -`color-scheme` does not apply to the keyboard. For details on how dark mode works with the keyboard, see [Keyboard Documentation](../developing/keyboard.md#dark-mode). +`color-scheme` does not apply to the keyboard. For details on how dark mode works with the keyboard, see [Keyboard Documentation](../developing/keyboard.mdx#dark-mode). ::: ## Ionic Dark Theme diff --git a/versioned_docs/version-v5/troubleshooting/debugging.mdx b/versioned_docs/version-v5/troubleshooting/debugging.mdx index 59991f3f326..51a1ce73a19 100644 --- a/versioned_docs/version-v5/troubleshooting/debugging.mdx +++ b/versioned_docs/version-v5/troubleshooting/debugging.mdx @@ -11,7 +11,7 @@ ## Live Reload -Live Reload is useful for debugging native functionality (such as plugins) on device hardware. Rather than deploy a new native binary each time you make a code change, it reloads the browser (or WebView) when changes in the app are detected. [Learn more here](../cli/livereload.md). +Live Reload is useful for debugging native functionality (such as plugins) on device hardware. Rather than deploy a new native binary each time you make a code change, it reloads the browser (or WebView) when changes in the app are detected. [Learn more here](../cli/livereload.mdx). ## iOS and Safari diff --git a/versioned_docs/version-v5/troubleshooting/native.mdx b/versioned_docs/version-v5/troubleshooting/native.mdx index badfea21a5f..b81c1744f22 100644 --- a/versioned_docs/version-v5/troubleshooting/native.mdx +++ b/versioned_docs/version-v5/troubleshooting/native.mdx @@ -3,39 +3,44 @@ ## Code Signing errors ```shell -Code Signing Error: Failed to create provisioning profile. The app ID "com.csform.ionic.yellow" cannot be registered to your development team. Change your bundle identifier to a unique string to try again. Code Signing Error: No profiles for 'com.csform.ionic.yellow' were found: Xcode couldn't find any iOS App Development provisioning profiles matching 'com.csform.ionic.yellow'. Code Signing Error: Code signing is required for product type 'Application' in SDK 'iOS 11.1' +Code Signing Error: Failed to create provisioning profile. The app ID "com.csform.ionic.yellow" cannot be registered to your development team. Change your bundle identifier to a unique string to try again. Code Signing Error: No profiles for 'com.csform.ionic.yellow' were found: Xcode could not find any iOS App Development provisioning profiles matching 'com.csform.ionic.yellow'. Code Signing Error: Code signing is required for product type 'Application' in SDK 'iOS 11.1' ``` Running an app on an iOS device requires a provisioning profile. If a provisioning profile has not been created yet follow these directions: -1. Set the [Package ID](../reference/glossary.mdx#package-id). +1. Set the [Package ID](../reference/glossary.mdx#package-id). - For Capacitor, open the `capacitor.config.json` file and modify the `appId` property. + {/* prettier-ignore */} + For Capacitor, open the `capacitor.config.json` file and modify the `appId` property. - For Cordova, open the `config.xml` file and modify the `id` attribute of the root element, ``. See [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) for more information. + {/* prettier-ignore */} + For Cordova, open the `config.xml` file and modify the `id` attribute of the root element, ``. See [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) for more information. {/* prettier-ignore */} -2. Open the project in Xcode. +2. Open the project in Xcode. - For Capacitor, run the following to open the app in Xcode: + {/* prettier-ignore */} + For Capacitor, run the following to open the app in Xcode: - ```shell - $ ionic capacitor open ios - ``` + {/* prettier-ignore */} + ```shell + $ ionic capacitor open ios + ``` - For Cordova, open Xcode. Use **File** » **Open** and locate the app. Open the app's `platforms/ios` directory. + {/* prettier-ignore */} + For Cordova, open Xcode. Use **File** » **Open** and locate the app. Open the app's `platforms/ios` directory. {/* prettier-ignore */} -3. In Project navigator, select the project root to open the project editor. Under the **Identity** section, - verify that the Package ID that was set matches the Bundle Identifier. +3. In Project navigator, select the project root to open the project editor. Under the **Identity** section, verify that the Package ID that was set matches the Bundle Identifier. - ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png) + {/* prettier-ignore */} + ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png) {/* prettier-ignore */} -4. In the same project editor, under the Signing section, ensure Automatically manage signing is - enabled. Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing. +4. In the same project editor, under the Signing section, ensure Automatically manage signing is enabled. Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing. - ![Xcode Signing Setup](/img/running/ios-xcode-signing-setup.png) + {/* prettier-ignore */} + ![Xcode Signing Setup](/img/running/ios-xcode-signing-setup.png) ## Xcode build error 65 @@ -43,7 +48,7 @@ Running an app on an iOS device requires a provisioning profile. If a provisioni Error: Error code 65 for command: xcodebuild with args: -xcconfig,/Users/ionitron/projects/my-project/platforms/ios/cordova/build-debug.xcconfig,-workspace,SC project.xcworkspace,-scheme,SC project,-configuration,Debug,-sdk,iphonesimulator,-destination,platform=iOS Simulator,name=iPhone X,build,CONFIGURATION_BUILD_DIR=/Users/ionitron/projects/my-project/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/Users/ionitron/projects/my-project/platforms/ios/build/sharedpch ``` -This error is an error code from Xcode that can be caused by provisioning issues or outdated cordova dependencies. To fix this error first make sure a provisioning profile has been generated using the above instructions and then try to [run the app from Xcode](../developing/ios.md#running-with-xcode). +This error is an error code from Xcode that can be caused by provisioning issues or outdated cordova dependencies. To fix this error first make sure a provisioning profile has been generated using the above instructions and then try to [run the app from Xcode](../developing/ios.mdx#running-with-xcode). If this does not fix the error then run the following commands: diff --git a/versioned_docs/version-v5/vue/overview.mdx b/versioned_docs/version-v5/vue/overview.mdx index 2bc291bf12a..6f241ed93b9 100644 --- a/versioned_docs/version-v5/vue/overview.mdx +++ b/versioned_docs/version-v5/vue/overview.mdx @@ -21,7 +21,7 @@ Ionic Vue projects ship with the same tooling as regular Vue CLI projects. Meani [Capacitor](https://capacitorjs.com) is the official cross-platform app runtime used to make your `Ionic Vue` web app run natively on iOS, Android, and the web. -While there are no known technical limitations to using `Ionic Vue` with [Cordova](https://cordova.apache.org/) plugins, Capacitor is officially recommended. There are no plans to support a Cordova integration for `Ionic Vue` in the [Ionic CLI tooling](../cli.md) at this time. For more details, please [see here](https://capacitorjs.com/docs/cordova). +While there are no known technical limitations to using `Ionic Vue` with [Cordova](https://cordova.apache.org/) plugins, Capacitor is officially recommended. There are no plans to support a Cordova integration for `Ionic Vue` in the [Ionic CLI tooling](../cli.mdx) at this time. For more details, please [see here](https://capacitorjs.com/docs/cordova). ## From the Community diff --git a/versioned_docs/version-v5/vue/your-first-app.mdx b/versioned_docs/version-v5/vue/your-first-app.mdx index 527b66a2b49..10e48d7559e 100644 --- a/versioned_docs/version-v5/vue/your-first-app.mdx +++ b/versioned_docs/version-v5/vue/your-first-app.mdx @@ -55,7 +55,7 @@ npm install -g @ionic/cli@latest native-run cordova-res :::note The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur. -Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information. +Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information. ::: ## Create an App diff --git a/versioned_docs/version-v6/angular/your-first-app.mdx b/versioned_docs/version-v6/angular/your-first-app.mdx index 03a3f94fb52..ac4887b526d 100644 --- a/versioned_docs/version-v6/angular/your-first-app.mdx +++ b/versioned_docs/version-v6/angular/your-first-app.mdx @@ -66,7 +66,7 @@ npm install -g @ionic/cli native-run cordova-res :::note The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur. -Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information. +Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information. ::: ## Create an App diff --git a/docs/api.md b/versioned_docs/version-v6/api.mdx similarity index 100% rename from docs/api.md rename to versioned_docs/version-v6/api.mdx diff --git a/versioned_docs/version-v6/api/datetime-button.mdx b/versioned_docs/version-v6/api/datetime-button.mdx index 940d9c21624..7d60587a913 100644 --- a/versioned_docs/version-v6/api/datetime-button.mdx +++ b/versioned_docs/version-v6/api/datetime-button.mdx @@ -43,7 +43,7 @@ The localized text on `ion-datetime-button` is determined by the `locale` proper `ion-datetime-button` must be associated with a mounted `ion-datetime` instance. As a result, [Inline Modals](./modal#inline-modals-recommended) and [Inline Popovers](./popover#inline-popovers) with the `keepContentsMounted` property set to `true` must be used. -{/* ## Customization +{/\* ## Customization TODO @@ -53,7 +53,7 @@ TODO ### Theming -TODO */} +TODO \*/} ## Properties diff --git a/versioned_docs/version-v6/api/item.mdx b/versioned_docs/version-v6/api/item.mdx index dff28e7c16f..311cc9797a3 100644 --- a/versioned_docs/version-v6/api/item.mdx +++ b/versioned_docs/version-v6/api/item.mdx @@ -47,7 +47,7 @@ import DetailArrows from '@site/static/usage/v6/item/detail-arrows/index.md'; -{/* TODO add this functionality back as a css variable +{/\* TODO add this functionality back as a css variable This feature is not enabled by default on clickable items for the `md` mode, but it can be enabled by setting the following CSS variable: @@ -55,7 +55,7 @@ This feature is not enabled by default on clickable items for the `md` mode, but --item-detail-push-show: true; ``` -See the [theming documentation](/docs/theming/css-variables.mdx) for more information. */} +See the [theming documentation](/docs/theming/css-variables.mdx) for more information. \*/} ## Item Lines diff --git a/versioned_docs/version-v6/cli.md b/versioned_docs/version-v6/cli.mdx similarity index 98% rename from versioned_docs/version-v6/cli.md rename to versioned_docs/version-v6/cli.mdx index f2ab8411900..6df6d79b237 100644 --- a/versioned_docs/version-v6/cli.md +++ b/versioned_docs/version-v6/cli.mdx @@ -37,7 +37,7 @@ Be sure to run `ionic --help` in your project directory. For some commands, such as `ionic serve`, the help documentation is contextual to the type of your project, e.g. React vs Angular. ::: - +{/* TODO: image? */} ## Architecture diff --git a/versioned_docs/version-v6/components.md b/versioned_docs/version-v6/components.mdx similarity index 98% rename from versioned_docs/version-v6/components.md rename to versioned_docs/version-v6/components.mdx index b461ac5c028..8a863cc6ef4 100644 --- a/versioned_docs/version-v6/components.md +++ b/versioned_docs/version-v6/components.mdx @@ -19,7 +19,7 @@ import DocsCards from '@components/global/DocsCards'; `} -Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you’re familiar with the basics, refer to the [API Index](api.md) for a complete list of each component and sub-component. +Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you’re familiar with the basics, refer to the [API Index](api.mdx) for a complete list of each component and sub-component. @@ -41,7 +41,7 @@ Ionic apps are made of high-level building blocks called Components, which allow - + {/* prettier-ignore */}

Cards are a great way to display an important piece of content, and can contain images, buttons, text, and more.

 diff --git a/versioned_docs/version-v6/core-concepts/cross-platform.mdx b/versioned_docs/version-v6/core-concepts/cross-platform.mdx index 8ecfa6b3053..20908327092 100644 --- a/versioned_docs/version-v6/core-concepts/cross-platform.mdx +++ b/versioned_docs/version-v6/core-concepts/cross-platform.mdx @@ -12,7 +12,7 @@ In a native application, it's common to make API calls to communicate with the d ### Ionic Native -[Ionic Native](../native.md) has its own internal logic to detect if it is inside of a native environment. Instead of throwing a runtime error, it will print a warning if it is not a native environment and there are no Cordova plugins available. The app won’t break and it will continue to work, although without the native functionality. +[Ionic Native](../native.mdx) has its own internal logic to detect if it is inside of a native environment. Instead of throwing a runtime error, it will print a warning if it is not a native environment and there are no Cordova plugins available. The app won’t break and it will continue to work, although without the native functionality. ### Platform Detection diff --git a/versioned_docs/version-v6/developing/tips.mdx b/versioned_docs/version-v6/developing/tips.mdx index 2adf19ea58d..8368bb7275f 100644 --- a/versioned_docs/version-v6/developing/tips.mdx +++ b/versioned_docs/version-v6/developing/tips.mdx @@ -132,7 +132,7 @@ The iOS simulator enables testing and debugging of an app before it reaches an a Before it can be used, [Xcode](https://developer.apple.com/xcode/download/), Apple's IDE, must be installed. -The [Ionic CLI](../cli.md) can then be used to run the app in the current directory on the simulator: +The [Ionic CLI](../cli.mdx) can then be used to run the app in the current directory on the simulator: ```shell ionic cordova emulate ios -lc diff --git a/versioned_docs/version-v6/index.md b/versioned_docs/version-v6/index.mdx similarity index 99% rename from versioned_docs/version-v6/index.md rename to versioned_docs/version-v6/index.mdx index 13ff4b889a9..ae3b35ad9ed 100644 --- a/versioned_docs/version-v6/index.md +++ b/versioned_docs/version-v6/index.mdx @@ -139,7 +139,7 @@ Ionic is actively developed and maintained full-time by a core team, and its eco There are millions of Ionic developers in over 200 countries worldwide. Here are some ways to join: - +{/* prettier-ignore */} - Forum: A great place for asking questions and sharing ideas. - Twitter: Where we post updates and share content from the Ionic community. - GitHub: For reporting bugs or requesting new features, create an issue here. PRs welcome! diff --git a/versioned_docs/version-v6/intro/cli.mdx b/versioned_docs/version-v6/intro/cli.mdx index d2782c40f27..4c4ce8b6d33 100644 --- a/versioned_docs/version-v6/intro/cli.mdx +++ b/versioned_docs/version-v6/intro/cli.mdx @@ -37,7 +37,7 @@ $ npm install -g @ionic/cli :::note The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur. -Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information. +Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information. ::: ## Start an App @@ -50,7 +50,7 @@ ionic start ![start app thumbnails](/img/installation/start-app-thumbnails.png) -To learn more about starting Ionic apps, see the [Starting Guide](../developing/starting.md). +To learn more about starting Ionic apps, see the [Starting Guide](../developing/starting.mdx). ## Run the App @@ -61,4 +61,4 @@ $ cd myApp $ ionic serve ``` -There are a number of other ways to run an app, it's recommended to start with this workflow. To develop and test apps on devices and emulators, see the [Running an App Guide](../developing/previewing.md). +There are a number of other ways to run an app, it's recommended to start with this workflow. To develop and test apps on devices and emulators, see the [Running an App Guide](../developing/previewing.mdx). diff --git a/versioned_docs/version-v6/intro/environment.mdx b/versioned_docs/version-v6/intro/environment.mdx index ce34f960a7c..d1f118bc5a7 100644 --- a/versioned_docs/version-v6/intro/environment.mdx +++ b/versioned_docs/version-v6/intro/environment.mdx @@ -41,7 +41,7 @@ $ npm --version ``` :::note -Permission errors are common on macOS when installing global packages with `npm`. If you get an `EACCES` error, see [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors). +Permission errors are common on macOS when installing global packages with `npm`. If you get an `EACCES` error, see [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors). ::: ## Git diff --git a/versioned_docs/version-v6/native-faq.md b/versioned_docs/version-v6/native-faq.mdx similarity index 100% rename from versioned_docs/version-v6/native-faq.md rename to versioned_docs/version-v6/native-faq.mdx diff --git a/versioned_docs/version-v6/native-setup.md b/versioned_docs/version-v6/native-setup.mdx similarity index 100% rename from versioned_docs/version-v6/native-setup.md rename to versioned_docs/version-v6/native-setup.mdx diff --git a/versioned_docs/version-v6/native.md b/versioned_docs/version-v6/native.mdx similarity index 100% rename from versioned_docs/version-v6/native.md rename to versioned_docs/version-v6/native.mdx diff --git a/versioned_docs/version-v6/react.md b/versioned_docs/version-v6/react.mdx similarity index 100% rename from versioned_docs/version-v6/react.md rename to versioned_docs/version-v6/react.mdx diff --git a/versioned_docs/version-v6/react/navigation.mdx b/versioned_docs/version-v6/react/navigation.mdx index 7542cb07e15..857af5934a8 100644 --- a/versioned_docs/version-v6/react/navigation.mdx +++ b/versioned_docs/version-v6/react/navigation.mdx @@ -588,8 +588,8 @@ For more info on routing in React using React Router, check out their docs at [h ## From the Community - +{/* cspell:disable */} [Ionic 4 and React: Navigation](https://alligator.io/ionic/ionic-4-react-navigation) - Paul Halliday - +{/* cspell:enable */} diff --git a/versioned_docs/version-v6/react/your-first-app.mdx b/versioned_docs/version-v6/react/your-first-app.mdx index 21e575e0908..b1329fb8956 100644 --- a/versioned_docs/version-v6/react/your-first-app.mdx +++ b/versioned_docs/version-v6/react/your-first-app.mdx @@ -62,7 +62,7 @@ npm install -g @ionic/cli native-run cordova-res :::note The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur. -Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information. +Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information. ::: ## Create an App diff --git a/versioned_docs/version-v6/reference/browser-support.mdx b/versioned_docs/version-v6/reference/browser-support.mdx index 4d669d939e1..6fc727cbdee 100644 --- a/versioned_docs/version-v6/reference/browser-support.mdx +++ b/versioned_docs/version-v6/reference/browser-support.mdx @@ -14,7 +14,7 @@ Ionic's earliest goal was to make it easy to develop mobile apps using web techn ## Mobile Browsers -In pursuit of [adaptive styling](../core-concepts/fundamentals.md#adaptive-styling), Ionic fully supports and is well tested on the mobile platforms listed below: +In pursuit of [adaptive styling](../core-concepts/fundamentals.mdx#adaptive-styling), Ionic fully supports and is well tested on the mobile platforms listed below: | Framework | Android | iOS | | :-------: | :--------------------: | :---: | @@ -40,7 +40,7 @@ Angular's support policy for iOS is the two most recent major versions. At the t ## Desktop Browsers -Because Ionic is based on web technologies, it works just as well on desktop browsers as it does on mobile devices. For more information on desktop layouts, see [Cross Platform](../core-concepts/cross-platform.md#desktop). +Because Ionic is based on web technologies, it works just as well on desktop browsers as it does on mobile devices. For more information on desktop layouts, see [Cross Platform](../core-concepts/cross-platform.mdx#desktop). | Browser | Ionic v6 | Ionic v5 | Ionic v4 | | :---------: | :------: | :------: | :------: | diff --git a/versioned_docs/version-v6/reference/support.mdx b/versioned_docs/version-v6/reference/support.mdx index 9f36b32d513..634937d33eb 100644 --- a/versioned_docs/version-v6/reference/support.mdx +++ b/versioned_docs/version-v6/reference/support.mdx @@ -102,4 +102,4 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo | V3 | Not currently supported | @awesome-cordova-plugins 4.X | - Wrappers (and their associated plugins) are community maintained. -- \*Cordova plugin support with Ionic Native and `@ionic/react` can be achieved using the [vanilla JavaScript implementation](../native.md#vanilla-javascript) +- \*Cordova plugin support with Ionic Native and `@ionic/react` can be achieved using the [vanilla JavaScript implementation](../native.mdx#vanilla-javascript) diff --git a/versioned_docs/version-v6/theming/advanced.mdx b/versioned_docs/version-v6/theming/advanced.mdx index d6775a1d3e3..95993856a2b 100644 --- a/versioned_docs/version-v6/theming/advanced.mdx +++ b/versioned_docs/version-v6/theming/advanced.mdx @@ -54,14 +54,14 @@ While the application and stepped variables in the themes section are useful for ### Application Variables -| Name | Description | -| ------------------------- | ------------------------------------------------------------------------------------------ | -| `--ion-font-family` | Font family of the app | -| `--ion-statusbar-padding` | Statusbar padding top of the app | -| `--ion-safe-area-top` | Adjust the safe area inset top of the app | -| `--ion-safe-area-right` | Adjust the safe area inset right of the app | -| `--ion-safe-area-bottom` | Adjust the safe area inset bottom of the app | -| `--ion-safe-area-left` | Adjust the safe area inset left of the app | +| Name | Description | +| ------------------------- | ------------------------------------------------------------------------------------------- | +| `--ion-font-family` | Font family of the app | +| `--ion-statusbar-padding` | Statusbar padding top of the app | +| `--ion-safe-area-top` | Adjust the safe area inset top of the app | +| `--ion-safe-area-right` | Adjust the safe area inset right of the app | +| `--ion-safe-area-bottom` | Adjust the safe area inset bottom of the app | +| `--ion-safe-area-left` | Adjust the safe area inset left of the app | | `--ion-margin` | Adjust the margin of the [Margin attributes](../layout/css-utilities.mdx#element-margin) | | `--ion-padding` | Adjust the padding of the [Padding attributes](../layout/css-utilities.mdx#element-padding) | diff --git a/versioned_docs/version-v6/theming/css-shadow-parts.mdx b/versioned_docs/version-v6/theming/css-shadow-parts.mdx index 74ce9fe2fa4..dbc8c13af5c 100644 --- a/versioned_docs/version-v6/theming/css-shadow-parts.mdx +++ b/versioned_docs/version-v6/theming/css-shadow-parts.mdx @@ -103,7 +103,7 @@ There are some known limitations with [vendor prefixed pseudo-elements](#vendor- ## Ionic Framework Parts -All exposed parts for an Ionic Framework component can be found under the CSS Shadow Parts heading on its API page. To view all components and their API pages, see the [Component documentation](../components.md). +All exposed parts for an Ionic Framework component can be found under the CSS Shadow Parts heading on its API page. To view all components and their API pages, see the [Component documentation](../components.mdx). In order to have parts a component must meet the following criteria: diff --git a/versioned_docs/version-v6/theming/dark-mode.mdx b/versioned_docs/version-v6/theming/dark-mode.mdx index 847bef0aa26..06d641ab02a 100644 --- a/versioned_docs/version-v6/theming/dark-mode.mdx +++ b/versioned_docs/version-v6/theming/dark-mode.mdx @@ -144,7 +144,7 @@ color-scheme: light dark; For more information regarding `color-scheme` please see https://web.dev/color-scheme/. :::note -`color-scheme` does not apply to the keyboard. For details on how dark mode works with the keyboard, see [Keyboard Documentation](../developing/keyboard.md#dark-mode). +`color-scheme` does not apply to the keyboard. For details on how dark mode works with the keyboard, see [Keyboard Documentation](../developing/keyboard.mdx#dark-mode). ::: :::note diff --git a/versioned_docs/version-v6/theming/platform-styles.mdx b/versioned_docs/version-v6/theming/platform-styles.mdx index 8fc612833fa..e58a1be4579 100644 --- a/versioned_docs/version-v6/theming/platform-styles.mdx +++ b/versioned_docs/version-v6/theming/platform-styles.mdx @@ -14,7 +14,7 @@ Ionic provides platform specific styles based on the device the application is r ## Ionic Modes -Ionic uses **modes** to customize the look of components. Each **platform** has a default **mode**, but this can be overridden through the global [config](../developing/config.md). The following chart displays the default **mode** that is added to each **platform**: +Ionic uses **modes** to customize the look of components. Each **platform** has a default **mode**, but this can be overridden through the global [config](../developing/config.mdx). The following chart displays the default **mode** that is added to each **platform**: | Platform | Mode | Description | | --------- | ----- | -------------------------------------------------------------------------------------------------------------------------------- | @@ -28,7 +28,7 @@ For example, an app being viewed on an Android platform will use the `md` (Mater ``` -_Note: The **platform** and the **mode** are not the same. The platform can be set to use any mode in the [config](../developing/config.md) of an app._ +_Note: The **platform** and the **mode** are not the same. The platform can be set to use any mode in the [config](../developing/config.mdx) of an app._ ## Overriding Mode Styles diff --git a/versioned_docs/version-v6/troubleshooting/debugging.mdx b/versioned_docs/version-v6/troubleshooting/debugging.mdx index 166df54308e..9089c26eb2e 100644 --- a/versioned_docs/version-v6/troubleshooting/debugging.mdx +++ b/versioned_docs/version-v6/troubleshooting/debugging.mdx @@ -21,7 +21,7 @@ title: Debugging ## Live Reload -Live Reload is useful for debugging native functionality (such as plugins) on device hardware. Rather than deploy a new native binary each time you make a code change, it reloads the browser (or WebView) when changes in the app are detected. [Learn more here](../cli/livereload.md). +Live Reload is useful for debugging native functionality (such as plugins) on device hardware. Rather than deploy a new native binary each time you make a code change, it reloads the browser (or WebView) when changes in the app are detected. [Learn more here](../cli/livereload.mdx). ## iOS and Safari diff --git a/versioned_docs/version-v6/troubleshooting/native.mdx b/versioned_docs/version-v6/troubleshooting/native.mdx index a20617fc1ac..fc4344be792 100644 --- a/versioned_docs/version-v6/troubleshooting/native.mdx +++ b/versioned_docs/version-v6/troubleshooting/native.mdx @@ -13,38 +13,44 @@ title: Native Errors ## Code Signing errors ```shell -Code Signing Error: Failed to create provisioning profile. The app ID "com.csform.ionic.yellow" cannot be registered to your development team. Change your bundle identifier to a unique string to try again. Code Signing Error: No profiles for 'com.csform.ionic.yellow' were found: Xcode couldn't find any iOS App Development provisioning profiles matching 'com.csform.ionic.yellow'. Code Signing Error: Code signing is required for product type 'Application' in SDK 'iOS 11.1' +Code Signing Error: Failed to create provisioning profile. The app ID "com.csform.ionic.yellow" cannot be registered to your development team. Change your bundle identifier to a unique string to try again. Code Signing Error: No profiles for 'com.csform.ionic.yellow' were found: Xcode could not find any iOS App Development provisioning profiles matching 'com.csform.ionic.yellow'. Code Signing Error: Code signing is required for product type 'Application' in SDK 'iOS 11.1' ``` Running an app on an iOS device requires a provisioning profile. If a provisioning profile has not been created yet follow these directions: -1. Set the [Package ID](../reference/glossary.mdx#package-id). +1. Set the [Package ID](../reference/glossary.mdx#package-id). - For Capacitor, open the `capacitor.config.json` file and modify the `appId` property. + {/* prettier-ignore */} + For Capacitor, open the `capacitor.config.json` file and modify the `appId` property. - For Cordova, open the `config.xml` file and modify the `id` attribute of the root element, ``. See [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) for more information. + {/* prettier-ignore */} + For Cordova, open the `config.xml` file and modify the `id` attribute of the root element, ``. See [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) for more information. {/* prettier-ignore */} -2. Open the project in Xcode. +2. Open the project in Xcode. - For Capacitor, run the following to open the app in Xcode: + {/* prettier-ignore */} + For Capacitor, run the following to open the app in Xcode: - ```shell - $ ionic capacitor open ios - ``` + {/* prettier-ignore */} + ```shell + $ ionic capacitor open ios + ``` - For Cordova, open Xcode. Use **File** » **Open** and locate the app. Open the app's `platforms/ios` directory. + {/* prettier-ignore */} + For Cordova, open Xcode. Use **File** » **Open** and locate the app. Open the app's `platforms/ios` directory. {/* prettier-ignore */} -3. In Project navigator, select the project root to open the project editor. Under the **Identity** section, verify that the Package ID that was set matches the Bundle Identifier. +3. In Project navigator, select the project root to open the project editor. Under the **Identity** section, verify that the Package ID that was set matches the Bundle Identifier. - ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png) + {/* prettier-ignore */} + ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png) {/* prettier-ignore */} -4. In the same project editor, under the Signing section, ensure Automatically manage signing is enabled. - Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing. +4. In the same project editor, under the Signing section, ensure Automatically manage signing is enabled. Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing. - ![Xcode Signing Setup](/img/running/ios-xcode-signing-setup.png) + {/* prettier-ignore */} + ![Xcode Signing Setup](/img/running/ios-xcode-signing-setup.png) ## Xcode build error 65 @@ -52,7 +58,7 @@ Running an app on an iOS device requires a provisioning profile. If a provisioni Error: Error code 65 for command: xcodebuild with args: -xcconfig,/Users/ionitron/projects/my-project/platforms/ios/cordova/build-debug.xcconfig,-workspace,SC project.xcworkspace,-scheme,SC project,-configuration,Debug,-sdk,iphonesimulator,-destination,platform=iOS Simulator,name=iPhone X,build,CONFIGURATION_BUILD_DIR=/Users/ionitron/projects/my-project/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/Users/ionitron/projects/my-project/platforms/ios/build/sharedpch ``` -This error is an error code from Xcode that can be caused by provisioning issues or outdated cordova dependencies. To fix this error first make sure a provisioning profile has been generated using the above instructions and then try to [run the app from Xcode](../developing/ios.md#running-with-xcode). +This error is an error code from Xcode that can be caused by provisioning issues or outdated cordova dependencies. To fix this error first make sure a provisioning profile has been generated using the above instructions and then try to [run the app from Xcode](../developing/ios.mdx#running-with-xcode). If this does not fix the error then run the following commands: diff --git a/versioned_docs/version-v6/vue/overview.mdx b/versioned_docs/version-v6/vue/overview.mdx index cd18790e79d..77b14df8f81 100644 --- a/versioned_docs/version-v6/vue/overview.mdx +++ b/versioned_docs/version-v6/vue/overview.mdx @@ -28,7 +28,7 @@ Ionic Vue projects ship with the same tooling as regular Vue CLI projects. Meani [Capacitor](https://capacitorjs.com) is the official cross-platform app runtime used to make your `Ionic Vue` web app run natively on iOS, Android, and the web. -While there are no known technical limitations to using `Ionic Vue` with [Cordova](https://cordova.apache.org/) plugins, Capacitor is officially recommended. There are no plans to support a Cordova integration for `Ionic Vue` in the [Ionic CLI tooling](../cli.md) at this time. For more details, please [see here](https://capacitorjs.com/docs/cordova). +While there are no known technical limitations to using `Ionic Vue` with [Cordova](https://cordova.apache.org/) plugins, Capacitor is officially recommended. There are no plans to support a Cordova integration for `Ionic Vue` in the [Ionic CLI tooling](../cli.mdx) at this time. For more details, please [see here](https://capacitorjs.com/docs/cordova). ## From the Community diff --git a/versioned_docs/version-v6/vue/your-first-app.mdx b/versioned_docs/version-v6/vue/your-first-app.mdx index df78db1f7d0..2149ad89bb6 100644 --- a/versioned_docs/version-v6/vue/your-first-app.mdx +++ b/versioned_docs/version-v6/vue/your-first-app.mdx @@ -62,7 +62,7 @@ npm install -g @ionic/cli@latest native-run cordova-res :::note The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur. -Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information. +Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information. ::: ## Create an App diff --git a/versioned_docs/version-v6/api.md b/versioned_docs/version-v7/api.mdx similarity index 100% rename from versioned_docs/version-v6/api.md rename to versioned_docs/version-v7/api.mdx diff --git a/versioned_docs/version-v7/cli.md b/versioned_docs/version-v7/cli.mdx similarity index 98% rename from versioned_docs/version-v7/cli.md rename to versioned_docs/version-v7/cli.mdx index a75302d0937..c772a776de8 100644 --- a/versioned_docs/version-v7/cli.md +++ b/versioned_docs/version-v7/cli.mdx @@ -37,7 +37,7 @@ Be sure to run `ionic --help` in your project directory. For some commands, such as `ionic serve`, the help documentation is contextual to the type of your project, e.g. React vs Angular. ::: - +{/* TODO: image? */} ## Architecture diff --git a/versioned_docs/version-v7/components.md b/versioned_docs/version-v7/components.mdx similarity index 98% rename from versioned_docs/version-v7/components.md rename to versioned_docs/version-v7/components.mdx index 732b59a43b2..aa29df22e34 100644 --- a/versioned_docs/version-v7/components.md +++ b/versioned_docs/version-v7/components.mdx @@ -19,7 +19,7 @@ import DocsCards from '@components/global/DocsCards'; `} -Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you’re familiar with the basics, refer to the [API Index](api.md) for a complete list of each component and sub-component. +Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you’re familiar with the basics, refer to the [API Index](api.mdx) for a complete list of each component and sub-component. diff --git a/versioned_docs/version-v7/index.md b/versioned_docs/version-v7/index.mdx similarity index 99% rename from versioned_docs/version-v7/index.md rename to versioned_docs/version-v7/index.mdx index 86bcb90b6e4..d033d165572 100644 --- a/versioned_docs/version-v7/index.md +++ b/versioned_docs/version-v7/index.mdx @@ -139,7 +139,7 @@ Ionic is actively developed and maintained full-time by a core team, and its eco There are millions of Ionic developers in over 200 countries worldwide. Here are some ways to join: - +{/* prettier-ignore */} - Forum: A great place for asking questions and sharing ideas. - Twitter: Where we post updates and share content from the Ionic community. - GitHub: For reporting bugs or requesting new features, create an issue here. PRs welcome! diff --git a/versioned_docs/version-v7/native-faq.md b/versioned_docs/version-v7/native-faq.mdx similarity index 100% rename from versioned_docs/version-v7/native-faq.md rename to versioned_docs/version-v7/native-faq.mdx diff --git a/versioned_docs/version-v7/native-setup.md b/versioned_docs/version-v7/native-setup.mdx similarity index 100% rename from versioned_docs/version-v7/native-setup.md rename to versioned_docs/version-v7/native-setup.mdx diff --git a/versioned_docs/version-v7/native.md b/versioned_docs/version-v7/native.mdx similarity index 100% rename from versioned_docs/version-v7/native.md rename to versioned_docs/version-v7/native.mdx diff --git a/versioned_docs/version-v7/react.md b/versioned_docs/version-v7/react.mdx similarity index 100% rename from versioned_docs/version-v7/react.md rename to versioned_docs/version-v7/react.mdx