diff --git a/.prettierignore b/.prettierignore index 956f8ee3d6..aeedd95d45 100644 --- a/.prettierignore +++ b/.prettierignore @@ -17,12 +17,6 @@ versioned_docs/version-v*/api docs/native versioned_docs/version-v*/native docs/cli/commands -# Each definition in these files is one line of prose inside a JSX
. -# Prettier's mdx parser reflows those children and moves link text onto its own -# line, which MDX then wraps in a paragraph, rendering invalid HTML such as -#

Android SDK

. Formatting these files reintroduces that markup. -docs/reference/glossary.md -versioned_docs/version-v*/reference/glossary.md # Archived versions versioned_docs/version-v5 diff --git a/docs/angular/pwa.md b/docs/angular/pwa.md index 47666c7030..370fc31962 100644 --- a/docs/angular/pwa.md +++ b/docs/angular/pwa.md @@ -13,7 +13,7 @@ sidebar_label: Progressive Web Apps ## Making your Angular app a PWA -The two main requirements of a PWA are a Service Worker and a Web Manifest. While it's possible to add both of these to an app manually, the Angular team has an `@angular/pwa` package that can be used to automate this. +The two main requirements of a PWA are a [Service Worker](https://developers.google.com/web/fundamentals/primers/service-workers/) and a [Web Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/). While it's possible to add both of these to an app manually, the Angular team has an `@angular/pwa` package that can be used to automate this. The `@angular/pwa` package will automatically add a service worker and an app manifest to the app. To add this package to the app, run: diff --git a/docs/angular/slides.md b/docs/angular/slides.md index efb46441f4..4754cd2f6b 100644 --- a/docs/angular/slides.md +++ b/docs/angular/slides.md @@ -17,7 +17,7 @@ import TabItem from '@theme/TabItem'; `ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below. ::: -We recommend Swiper.js if you need a modern touch slider component. Swiper 9 introduced Swiper Element as a replacement for its Angular component, so this guide will go over how to get Swiper Element set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to Swiper Element. +We recommend [Swiper.js](http://swiperjs.com/) if you need a modern touch slider component. Swiper 9 introduced [Swiper Element](https://swiperjs.com/element) as a replacement for its Angular component, so this guide will go over how to get Swiper Element set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to Swiper Element. ## Getting Started @@ -71,7 +71,7 @@ From there, we just have to replace `ion-slides` elements with `swiper-container By default, make sure you import the `register` function from `swiper/element/bundle`. This uses the bundled version of Swiper, which automatically includes all modules and stylesheets needed to run Swiper's various features. -If you would like to use the Core version instead, which does not include additional modules automatically, refer to Swiper's core version and modules documentation. The rest of this migration guide will assume you are using the bundled version. +If you would like to use the Core version instead, which does not include additional modules automatically, refer to [Swiper's core version and modules documentation](https://swiperjs.com/element#core-version-and-modules). The rest of this migration guide will assume you are using the bundled version. ## Swiping with Style @@ -93,7 +93,7 @@ If you were using the CSS custom properties found on `ion-slides`, below is a li | `--scroll-bar-background` | `--swiper-scrollbar-bg-color` | | `--scroll-bar-background-active` | `--swiper-scrollbar-drag-bg-color` | -For additional custom CSS, because Swiper Element uses Shadow DOM encapsulation, styles will need to be injected into the Shadow DOM scope. Refer to Swiper's guide on injecting styles for instructions. +For additional custom CSS, because Swiper Element uses Shadow DOM encapsulation, styles will need to be injected into the Shadow DOM scope. Refer to [Swiper's guide on injecting styles](https://swiperjs.com/element#injecting-styles) for instructions. ### Additional `ion-slides` Styles @@ -227,7 +227,7 @@ Below is a full list of property changes when going from `ion-slides` to Swiper | pager | Use the `pagination` property instead. | :::note -All properties available in Swiper Element can be found in the Swiper API parameters documentation. +All properties available in Swiper Element can be found in the [Swiper API parameters documentation](https://swiperjs.com/swiper-api#parameters). ::: ## Events @@ -276,7 +276,7 @@ Below is a full list of event name changes when going from `ion-slides` to Swipe | `ionSlidesDidLoad` | `swiperinit` | :::note -All events available in Swiper Element can be found in the Swiper API events documentation and should be lowercased and prefixed with the word `swiper`. +All events available in Swiper Element can be found in the [Swiper API events documentation](https://swiperjs.com/swiper-api#events) and should be lowercased and prefixed with the word `swiper`. ::: ## Methods @@ -328,7 +328,7 @@ Below is a full list of method changes when going from `ion-slides` to Swiper El | `stopAutoplay()` | Use the `autoplay` property instead. | :::note -All methods and properties available on the Swiper instance can be found in the Swiper API methods and properties documentation. +All methods and properties available on the Swiper instance can be found in the [Swiper API methods and properties documentation](https://swiperjs.com/swiper-api#methods-and-properties). ::: ## Effects @@ -340,12 +340,12 @@ Effects such as Cube or Fade can be used in Swiper Element with no additional im ``` :::note -For more information on effects in Swiper, please refer to the Swiper API fade effect documentation. +For more information on effects in Swiper, please refer to the [Swiper API fade effect documentation](https://swiperjs.com/swiper-api#fade-effect). ::: ## Wrap Up -Now that you have Swiper installed, there is a whole set of new Swiper features for you to enjoy. We recommend starting with the Swiper Element documentation and then referencing the Swiper API docs. +Now that you have Swiper installed, there is a whole set of new Swiper features for you to enjoy. We recommend starting with the [Swiper Element documentation](https://swiperjs.com/element) and then referencing [the Swiper API docs](https://swiperjs.com/swiper-api). ## FAQ @@ -359,8 +359,8 @@ If you are running into issues with the migration, please create a post on the [ ### Where do I file bug reports? -Before opening an issue, please consider creating a post on the Swiper Discussion Board or the Ionic Forum to check if your issue can be resolved by the community. +Before opening an issue, please consider creating a post on the [Swiper Discussion Board](https://github.com/nolimits4web/swiper/discussions) or the [Ionic Forum](https://forum.ionicframework.com) to check if your issue can be resolved by the community. -If you are running into problems with the Swiper library, new bugs should be filed on the Swiper issue tracker. +If you are running into problems with the Swiper library, new bugs should be filed on the [Swiper issue tracker](https://github.com/nolimits4web/swiper/issues). -If you are running into problems with the `IonicSlides` module, new bugs should be filed on the Ionic Framework issue tracker. +If you are running into problems with the `IonicSlides` module, new bugs should be filed on the [Ionic Framework issue tracker](https://github.com/ionic-team/ionic-framework/issues). diff --git a/docs/angular/testing.md b/docs/angular/testing.md index e11d91d4b0..7fd3668a46 100644 --- a/docs/angular/testing.md +++ b/docs/angular/testing.md @@ -10,7 +10,7 @@ title: Testing /> -When an `@ionic/angular` application is generated using the Ionic CLI, it is automatically set up for unit testing and end-to-end testing of the application. This is the same setup that is used by the Angular CLI. Refer to the Angular Testing Guide for detailed information on testing Angular applications. +When an `@ionic/angular` application is generated using the Ionic CLI, it is automatically set up for unit testing and end-to-end testing of the application. This is the same setup that is used by the Angular CLI. Refer to the [Angular Testing Guide](https://angular.io/guide/testing) for detailed information on testing Angular applications. ## Testing Principles @@ -76,7 +76,7 @@ The outer `describe` call states that the `Calculation` service is being tested, ### Pages and Components -Pages are just Angular components. Thus, pages and components are both tested using Angular's Component Testing guidelines. +Pages are just Angular components. Thus, pages and components are both tested using [Angular's Component Testing](https://angular.io/guide/testing#component-test-basics) guidelines. Since pages and components contain both TypeScript code and HTML template markup it is possible to perform both component class testing and component DOM testing. When a page is created, the template test that is generated looks like this: @@ -208,7 +208,7 @@ describe('PayrolService', () => { #### Testing HTTP Data Services -Most services that perform HTTP operations will use Angular's HttpClient service in order to perform those operations. For such tests, it is suggested to use Angular's `HttpClientTestingModule`. For detailed documentation of this module, please refer to Angular's Angular's Testing HTTP requests guide. +Most services that perform HTTP operations will use Angular's HttpClient service in order to perform those operations. For such tests, it is suggested to use Angular's `HttpClientTestingModule`. For detailed documentation of this module, please refer to Angular's [Angular's Testing HTTP requests](https://angular.io/guide/http#testing-http-requests) guide. This basic setup for such a test looks like this: diff --git a/docs/api/icon.md b/docs/api/icon.md index 7965382bae..b50ab5f197 100644 --- a/docs/api/icon.md +++ b/docs/api/icon.md @@ -10,9 +10,9 @@ title: 'ion-icon' /> -Icon is a universal container for displaying icons. While Ionicons is included by default with all Ionic Framework applications, the component can display Ionicons, custom SVGs, font-based icon libraries, and other icon systems. It provides consistent styling and sizing regardless of where an icon comes from. +Icon is a universal container for displaying icons. While [Ionicons](https://ionic.io/ionicons) is included by default with all Ionic Framework applications, the component can display Ionicons, custom SVGs, font-based icon libraries, and other icon systems. It provides consistent styling and sizing regardless of where an icon comes from. -For Ionicons documentation, refer to ionic.io/ionicons. +For Ionicons documentation, refer to [ionic.io/ionicons](https://ionic.io/ionicons). ## Basic Usage diff --git a/docs/api/item.md b/docs/api/item.md index baee6ca83c..069679a1bf 100644 --- a/docs/api/item.md +++ b/docs/api/item.md @@ -112,7 +112,7 @@ import Metadata from '@site/static/usage/v9/item/content-types/metadata/index.md Actions are interactive elements that do something when you activate them. An item can have multiple actions displayed on a line. However, developers should ensure that each action's tap target is large enough to be usable. -Developers should avoid creating nested interactives which can break the user experience with screen readers. For example, developers should avoid adding a button inside the main content of the Item if the `button` property is set to `true`. +Developers should avoid creating [nested interactives](https://dequeuniversity.com/rules/axe/4.4/nested-interactive) which can break the user experience with screen readers. For example, developers should avoid adding a button inside the main content of the Item if the `button` property is set to `true`. Actions can be added by using the Item Sliding component. Actions can also be placed directly inside of the Item without the use of Item Sliding, but this should be limited to no more than 2 actions.} diff --git a/docs/cli.md b/docs/cli.md index c1f34b5260..2f7fa27d87 100644 --- a/docs/cli.md +++ b/docs/cli.md @@ -39,7 +39,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#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source [GitHub repository](https://github.com/ionic-team/ionic-cli). ## Troubleshooting diff --git a/docs/contributing/coc.md b/docs/contributing/coc.md index ef45a1353e..cf7d61e3b1 100644 --- a/docs/contributing/coc.md +++ b/docs/contributing/coc.md @@ -10,4 +10,4 @@ If any member of the community violates this code of conduct, the maintainers of If you are subject to or witness unacceptable behavior, or have any other concerns, please email us at devrel@ionic.io. -Please review Ionic's full code of conduct. +Please review [Ionic's full code of conduct](https://ionic.io/code-of-conduct). diff --git a/docs/core-concepts/cross-platform.md b/docs/core-concepts/cross-platform.md index c5abac8a2e..7b49f3b00a 100644 --- a/docs/core-concepts/cross-platform.md +++ b/docs/core-concepts/cross-platform.md @@ -157,7 +157,7 @@ Most apps at some point will need to store some sort of data locally. Whether it ### Ionic Storage -In this case, Ionic’s Storage library is a perfect candidate for the multi-environment use case. Built on top of the well tested LocalForage library, Ionic’s storage class provides an adaptable storage mechanism that will pick the best storage solution for the current run time. +In this case, [Ionic’s Storage library](https://github.com/ionic-team/ionic-storage) is a perfect candidate for the multi-environment use case. Built on top of the well tested LocalForage library, Ionic’s storage class provides an adaptable storage mechanism that will pick the best storage solution for the current run time. Currently this means it will run through SQLite for native, IndexedDB (if available), WebSql, or Local Storage. By handling all of this, it allows writing to storage using a stable API. diff --git a/docs/core-concepts/fundamentals.md b/docs/core-concepts/fundamentals.md index 4f26b030c2..f8fd446013 100644 --- a/docs/core-concepts/fundamentals.md +++ b/docs/core-concepts/fundamentals.md @@ -19,7 +19,7 @@ Ionic Framework is a library of UI Components, which are reusable elements that ## 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. +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](https://www.apple.com/ios). Similarly, Android devices use Google's design language called [Material Design](https://material.io/guidelines/). 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). @@ -32,19 +32,19 @@ In contrast, mobile apps often utilize parallel, "non-linear" navigation. For ex Ionic apps embrace this mobile navigation approach, supporting parallel navigation histories that can also be nested, all while maintaining the familiar browser-style navigation concepts web developers are familiar with. -For apps that are built with Angular and `@ionic/angular`, we recommend using the Angular Router which comes out of the box for every new Ionic 4 Angular app. +For apps that are built with Angular and `@ionic/angular`, we recommend using the [Angular Router](https://angular.io/guide/router) which comes out of the box for every new Ionic 4 Angular app. ## Native Access 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](https://www.apple.com/ios/app-store/) and [Play Store](https://play.google.com/). 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. -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. +Projects such as [Capacitor](https://capacitorjs.com/) and [Cordova](https://cordova.apache.org/) 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. ## Theming -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.md). +At the core, Ionic Framework is built using [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) which allows us to take advantage of the flexibility that [CSS properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_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). ## Events diff --git a/docs/core-concepts/webview.md b/docs/core-concepts/webview.md index eb85427e96..f535acefe2 100644 --- a/docs/core-concepts/webview.md +++ b/docs/core-concepts/webview.md @@ -14,13 +14,13 @@ Web Views power web apps on native devices. The Web View is automatically provided for apps integrated with [Capacitor](../reference/glossary.md#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.md#cordova), Ionic maintains a [Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview). 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. -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. +Modern Web Views offer many built-in [HTML5 APIs](https://whatwebcando.today) 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. ![Diagram illustrating the architecture of a Web View in Ionic apps, showing the bridge between native app components and web components.](/img/building/webview-architecture.png 'Web View Architecture Diagram') @@ -46,5 +46,5 @@ For Cordova apps, the [Ionic Web View plugin](https://github.com/ionic-team/cord ### Implementations -- **iOS**: WKWebView -- **Android**: WebView for Android +- **iOS**: [WKWebView](https://developer.apple.com/documentation/webkit/wkwebview) +- **Android**: [WebView for Android](https://developer.android.com/reference/android/webkit/WebView) diff --git a/docs/core-concepts/what-are-progressive-web-apps.md b/docs/core-concepts/what-are-progressive-web-apps.md index 29ec43b794..f9643cb087 100644 --- a/docs/core-concepts/what-are-progressive-web-apps.md +++ b/docs/core-concepts/what-are-progressive-web-apps.md @@ -47,11 +47,7 @@ To be considered a Progressive Web App, your app must be: {/* cspell:disable */} - - - Addy Osmani: Progressive web apps - - +[Addy Osmani: Progressive web apps](https://addyosmani.com/blog/getting-started-with-progressive-web-apps/) {/* cspell:enable */} @@ -61,10 +57,10 @@ There is a lot here, but it boils down to a few points for Ionic apps. Apps should be able to work offline. Whether that be displaying a proper "offline" message or caching app data for display purpose. -#### Web App Manifest +#### [Web App Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest) An app manifest file should describe the resources your app will need. This includes your app's displayed name, icons, as well as splash screen. If you link to the manifest file in your index.html, browsers will detect that and load the resources for you. -#### Service Worker +#### [Service Worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) Service worker could be mentioned in Offline Support, but it really deserves its own section. Service worker provides a programmatic way to cache app resources. Be it JavaScript files or JSON data from a HTTP request. The programmatic API allows developers to decide how to handle caching and provides a much more flexible experience than other options. diff --git a/docs/deployment/app-store.md b/docs/deployment/app-store.md index db4ec2c21d..b4c3120479 100644 --- a/docs/deployment/app-store.md +++ b/docs/deployment/app-store.md @@ -114,7 +114,7 @@ If the upload is successful the app should be listed under 'Activities' on [iTun ## Updating an app As an app grows, it will need to be updated with new features and fixes. -An app can be updated by either submitting a new version to Apple, or by using a live update service like Appflow's live update feature. +An app can be updated by either submitting a new version to Apple, or by using a live update service like Appflow's [live update feature](https://ionic.io/docs/appflow/deploy/intro). With Live Updates, app changes can be pushed in realtime directly to users from the Appflow dashboard, without waiting for App Store approvals. diff --git a/docs/deployment/play-store.mdx b/docs/deployment/play-store.mdx index 903826d682..e87d0ce29d 100644 --- a/docs/deployment/play-store.mdx +++ b/docs/deployment/play-store.mdx @@ -147,7 +147,7 @@ When ready, upload the signed release AAB/APK that was generated and publish the ## Updating an app -As an app evolves, it will need to be updated with new features and fixes. An app can be updated by either submitting a new version to the Google Play Store, or by using a live update service like Appflow's Live Update feature. Using Live Updates, changes can be pushed directly to users from the Appflow dashboard, without submitting changes to the Play Store. Learn more about Live Updates. +As an app evolves, it will need to be updated with new features and fixes. An app can be updated by either submitting a new version to the Google Play Store, or by using a live update service like Appflow's Live Update feature. Using Live Updates, changes can be pushed directly to users from the Appflow dashboard, without submitting changes to the Play Store. Learn more about [Live Updates](https://ionic.io/docs/appflow/deploy/intro). diff --git a/docs/deployment/progressive-web-app.md b/docs/deployment/progressive-web-app.md index ccaab935cf..1fa0dbebd4 100644 --- a/docs/deployment/progressive-web-app.md +++ b/docs/deployment/progressive-web-app.md @@ -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](https://ionicframework.com/pwa) or the [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.md) 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/developing/keyboard.md b/docs/developing/keyboard.md index ed454b8c1f..117a951294 100644 --- a/docs/developing/keyboard.md +++ b/docs/developing/keyboard.md @@ -23,7 +23,7 @@ Since `inputmode` is a global attribute, it can be used on Ionic components such Inputs that _require_ a certain data type should use the `type` attribute instead. For example, inputs that require an email should use `type="email"` rather than specifying an `inputmode.` This is because the data that will be entered is always going to be in the form of an email. On the other hand, if the input accepts an email or a username, using `inputmode=”email”` is appropriate because the data being entered is not always going to be an email address. -For a list of accepted values, refer to the inputmode Documentation. +For a list of accepted values, refer to the [inputmode Documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode). ### Usage @@ -41,7 +41,7 @@ The `enterkeyhint` attribute allows developers to specify what type of action la Since `enterkeyhint` is a global attribute, it can be used on Ionic components such as `ion-input` and `ion-textarea` in addition to regular input elements. -For a list of accepted values, refer to the enterkeyhint Standard. +For a list of accepted values, refer to the [enterkeyhint Standard](https://html.spec.whatwg.org/dev/interaction.html#input-modalities:-the-enterkeyhint-attribute). ### Usage @@ -59,7 +59,7 @@ By default the keyboard theme is determined by the OS. For example, if dark mode When running an app in a mobile web browser or as a PWA there is no way to force the keyboard to appear with a certain theme. -When running an app in Capacitor or Cordova, it is possible to force the keyboard to appear with a certain theme. For more information regarding this configuration, refer to the Capacitor Keyboard Documentation. +When running an app in Capacitor or Cordova, it is possible to force the keyboard to appear with a certain theme. For more information regarding this configuration, refer to the [Capacitor Keyboard Documentation](https://capacitorjs.com/docs/apis/keyboard#keyboard-configuration-ios-only-). ## Hiding the Accessory Bar @@ -67,11 +67,11 @@ When running any kind of web based application, iOS will show an accessory bar a When running an app in a mobile web browser or as a PWA there is no way to hide the accessory bar. -When running an app in Capacitor or Cordova, it is possible to hide the accessory bar. For more information regarding this configuration, refer to the Capacitor Keyboard Documentation. +When running an app in Capacitor or Cordova, it is possible to hide the accessory bar. For more information regarding this configuration, refer to the [Capacitor Keyboard Documentation](https://capacitorjs.com/docs/apis/keyboard#keyboard-configuration-ios-only-). ## Keyboard Lifecycle Events -Detecting the presence of an on-screen keyboard is useful for adjusting the positioning of an input that would otherwise be hidden by the keyboard. For Capacitor and Cordova apps, developers typically rely on native keyboard plugins to listen for the keyboard lifecycle events. For apps running in a mobile browser or as a PWA, developers can use the Visual Viewport API where supported. Ionic Framework wraps both of these approaches and emits `ionKeyboardDidShow` and `ionKeyboardDidHide` events on the `window`. The event payload for `ionKeyboardDidShow` contains an approximation of the keyboard height in pixels. +Detecting the presence of an on-screen keyboard is useful for adjusting the positioning of an input that would otherwise be hidden by the keyboard. For Capacitor and Cordova apps, developers typically rely on native keyboard plugins to listen for the keyboard lifecycle events. For apps running in a mobile browser or as a PWA, developers can use the [Visual Viewport API](https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API) where supported. Ionic Framework wraps both of these approaches and emits `ionKeyboardDidShow` and `ionKeyboardDidHide` events on the `window`. The event payload for `ionKeyboardDidShow` contains an approximation of the keyboard height in pixels. ### Usage diff --git a/docs/index.md b/docs/index.md index 6037677705..c3bfcd5ba8 100644 --- a/docs/index.md +++ b/docs/index.md @@ -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/overview.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.md), [React](react/overview.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](https://youtu.be/p3AN3igqiRc) to walk you through the basics. ### One codebase, running everywhere @@ -97,11 +97,11 @@ Ionic is built with simplicity in mind, so that creating apps is enjoyable, easy ## Framework Compatibility -While past releases of Ionic were tightly coupled to Angular, version 4.x of the framework was re-engineered to work as a standalone Web Component library, with integrations for the latest JavaScript frameworks, like Angular. Ionic can be used in most frontend frameworks with success, including React and Vue, though some frameworks need a shim for full Web Component support. +While past releases of Ionic were tightly coupled to Angular, version 4.x of the framework was re-engineered to work as a standalone [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) library, with integrations for the latest JavaScript frameworks, like Angular. Ionic can be used in most frontend frameworks with success, including React and Vue, though some frameworks need a shim for full Web Component support. ### JavaScript -One of the main goals with moving Ionic to Web Components was to remove any hard requirement on a single framework to host the components. This made it possible for the core components to work standalone in a web page with just a script tag. While working with frameworks can be great for larger teams and larger apps, it is now possible to use Ionic as a standalone library in a single page even in a context like WordPress. +One of the main goals with moving Ionic to [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) was to remove any hard requirement on a single framework to host the components. This made it possible for the core components to work standalone in a web page with just a script tag. While working with frameworks can be great for larger teams and larger apps, it is now possible to use Ionic as a standalone library in a single page even in a context like WordPress. ### Angular @@ -125,11 +125,11 @@ The official [Ionic CLI](cli.md), or Command Line Interface, is a tool that quic ## Appflow -To help build, deploy, and manage Ionic apps throughout their lifecycle, we offer a commercial service for production apps called Appflow, which is separate from the open source Framework. +To help build, deploy, and manage Ionic apps throughout their lifecycle, we offer a commercial service for production apps called [Appflow](https://ionic.io/appflow), which is separate from the open source Framework. Appflow helps developers and teams compile native app builds and deploy live code updates to Ionic apps from a centralized dashboard. Optional paid upgrades are available for more advanced capabilities like publishing directly to app stores, workflow automation, single sign-on (SSO) and access to connected services and integrations. -Appflow requires an Ionic Account and comes with a free “Hobby” plan for those interested in playing around with some of its features. +Appflow requires an [Ionic Account](https://dashboard.ionicframework.com/signup) and comes with a free “Hobby” plan for those interested in playing around with some of its features. ## Ecosystem @@ -139,16 +139,13 @@ 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: -{/* Keep the prettier-ignore below. Without it, Prettier reformats these list items and the page stops building. These links stay as HTML because target="_blank" opens them in a new tab, which a markdown link cannot do. */} - -{/* 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! -- Content authoring: Write a technical blog or share your story with the Ionic community. +- [Forum:](https://forum.ionicframework.com/) A great place for asking questions and sharing ideas. +- [Twitter:](https://twitter.com/ionicframework) Where we post updates and share content from the Ionic community. +- [GitHub:](https://github.com/ionic-team/ionic) For reporting bugs or requesting new features, create an issue here. PRs welcome! +- [Content authoring:](https://ionicframework.com/contributors) Write a technical blog or share your story with the Ionic community. ## License -The Ionic UI Toolkit is a free and open source project, released under the permissible MIT license. This means it can be used in personal or commercial projects for free. MIT is the same license used by such popular projects as jQuery and Ruby on Rails. +The Ionic UI Toolkit is a free and open source project, released under the permissible [MIT license](https://opensource.org/licenses/MIT). This means it can be used in personal or commercial projects for free. MIT is the same license used by such popular projects as jQuery and Ruby on Rails. -This documentation content (found in the ionic-docs repo) is licensed under the Apache 2 license. +This documentation content (found in the [ionic-docs](https://github.com/ionic-team/ionic-docs) repo) is licensed under the [Apache 2 license](https://www.apache.org/licenses/LICENSE-2.0). diff --git a/docs/intro/environment.md b/docs/intro/environment.md index 9cf3bda222..ceac19f6b8 100644 --- a/docs/intro/environment.md +++ b/docs/intro/environment.md @@ -22,10 +22,10 @@ Much of Ionic development requires familiarity with the command line. If you're In general, we recommend using the built-in terminals. Many third-party terminals work well with Ionic, but may not be supported. -- For Windows, **Command Prompt** and **PowerShell** are supported. WSL is known to work with Ionic, but may not be supported. +- For Windows, **Command Prompt** and **PowerShell** are supported. [WSL](https://docs.microsoft.com/en-us/windows/wsl/faq) is known to work with Ionic, but may not be supported. - For macOS, the built-in **Terminal** app is supported. -Git Bash (from git-scm.com) does not support TTY interactivity and is **not supported** by Ionic. +Git Bash (from [git-scm.com](https://git-scm.com)) does not support TTY interactivity and is **not supported** by Ionic. ## Node & npm diff --git a/docs/react/pwa.md b/docs/react/pwa.md index 6e4b43db7f..687bb18e3c 100644 --- a/docs/react/pwa.md +++ b/docs/react/pwa.md @@ -13,7 +13,7 @@ sidebar_label: Progressive Web Apps ## Making your React app a PWA with Vite -The two main requirements of a PWA are a Service Worker and a Web Application Manifest. While it's possible to add both of these to an app manually, we recommend using the [Vite PWA Plugin](https://vite-pwa-org.netlify.app/) instead. +The two main requirements of a PWA are a [Service Worker](https://developers.google.com/web/fundamentals/primers/service-workers/) and a [Web Application Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/). While it's possible to add both of these to an app manually, we recommend using the [Vite PWA Plugin](https://vite-pwa-org.netlify.app/) instead. To get started, install the `vite-plugin-pwa` package: @@ -45,7 +45,7 @@ Refer to the [Vite PWA "Deploy" Guide](https://vite-pwa-org.netlify.app/deployme As of Ionic CLI v7, Ionic React starter apps ship with Vite instead of Create React App. Refer to [Making your React app a PWA with Vite](#making-your-react-app-a-pwa-with-vite) for Vite instructions. ::: -The two main requirements of a PWA are a Service Worker and a Web Application Manifest. While it's possible to add both of these to an app manually, a base project from Create React App (CRA) and the Ionic CLI provides this already. +The two main requirements of a PWA are a [Service Worker](https://developers.google.com/web/fundamentals/primers/service-workers/) and a [Web Application Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/). While it's possible to add both of these to an app manually, a base project from Create React App (CRA) and the Ionic CLI provides this already. In the `index.ts` for your app, there is a call to a `serviceWorker.unregister()` function. The base that CRA provides has service workers as an opt-in feature, so it must be enabled. To enable, call `serviceWorker.register()`. diff --git a/docs/react/slides.md b/docs/react/slides.md index 6a3ab427c7..2c6c29f07b 100644 --- a/docs/react/slides.md +++ b/docs/react/slides.md @@ -16,10 +16,10 @@ title: Migrating From IonSlides to Swiper.js ::: -We recommend Swiper.js if you need a modern touch slider component. This guide will go over how to get Swiper for React set up in your Ionic Framework application. It will also go over any migration information you may need to move from `IonSlides` to the official Swiper React integration. +We recommend [Swiper.js](http://swiperjs.com/) if you need a modern touch slider component. This guide will go over how to get Swiper for React set up in your Ionic Framework application. It will also go over any migration information you may need to move from `IonSlides` to the official Swiper React integration. :::note -Swiper's React component is set to be removed in a future release of Swiper, with Swiper Element as the replacement. However, this guide shows how to migrate to the React component because it provides the most stable experience at the time of writing. Notably, React does not have strong support for Web Components yet. +Swiper's React component is set to be removed in a future release of Swiper, with [Swiper Element](https://swiperjs.com/element) as the replacement. However, this guide shows how to migrate to the React component because it provides the most stable experience at the time of writing. Notably, React does not have strong support for Web Components yet. Using Swiper's React component is **not** required to use Swiper.js with Ionic Framework. ::: @@ -257,7 +257,7 @@ export default Home; ``` :::note -Refer to Swiper's React usage documentation for a full list of modules. +Refer to [Swiper's React usage documentation](https://swiperjs.com/react#usage) for a full list of modules. ::: ## The IonicSlides Module @@ -356,7 +356,7 @@ Below is a full list of property changes when going from `IonSlides` to Swiper R | scrollbar | You can continue to use the `scrollbar` property, just be sure to install the Scrollbar module first. | :::note -All properties available in Swiper React can be found in the Swiper React props documentation. +All properties available in Swiper React can be found in the [Swiper React props documentation](https://swiperjs.com/react#swiper-props). ::: ## Events @@ -413,7 +413,7 @@ Below is a full list of event name changes when going from `IonSlides` to Swiper | `onIonSlidesDidLoad` | `onInit` | :::note -All events available in Swiper can be found in the Swiper API events documentation. +All events available in Swiper can be found in the [Swiper API events documentation](https://swiperjs.com/swiper-api#events). ::: ## Methods @@ -545,12 +545,12 @@ export default Home; ``` :::note -For more information on effects in Swiper, please refer to the Swiper React effects documentation. +For more information on effects in Swiper, please refer to the [Swiper React effects documentation](https://swiperjs.com/react#effects). ::: ## Wrap Up -Now that you have Swiper installed, there is a whole set of new Swiper features for you to enjoy. We recommend starting with the Swiper React Introduction and then referencing the Swiper API docs. +Now that you have Swiper installed, there is a whole set of new Swiper features for you to enjoy. We recommend starting with the [Swiper React Introduction](https://swiperjs.com/react) and then referencing [the Swiper API docs](https://swiperjs.com/swiper-api). ## FAQ @@ -564,8 +564,8 @@ If you are running into issues with the migration, please create a post on the [ ### Where do I file bug reports? -Before opening an issue, please consider creating a post on the Swiper Discussion Board or the Ionic Forum to check if your issue can be resolved by the community. +Before opening an issue, please consider creating a post on the [Swiper Discussion Board](https://github.com/nolimits4web/swiper/discussions) or the [Ionic Forum](https://forum.ionicframework.com) to check if your issue can be resolved by the community. -If you are running into problems with the Swiper library, new bugs should be filed on the Swiper issue tracker. +If you are running into problems with the Swiper library, new bugs should be filed on the [Swiper issue tracker](https://github.com/nolimits4web/swiper/issues). -If you are running into problems with the `IonicSlides` module, new bugs should be filed on the Ionic Framework issue tracker. +If you are running into problems with the `IonicSlides` module, new bugs should be filed on the [Ionic Framework issue tracker](https://github.com/ionic-team/ionic-framework/issues). diff --git a/docs/reference/glossary.md b/docs/reference/glossary.md index a9633feee5..6df9ec4309 100644 --- a/docs/reference/glossary.md +++ b/docs/reference/glossary.md @@ -12,386 +12,176 @@ title: Glossary
-
- -

Accessibility

- - Accessibility (a11y) is the practice of enabling as many people as possible to use the content, even if people have limited abilities. This include people with disabilities, those using mobile devices, and those with slow network connections. Content should be developed to be as accessible as technology allows. -
- -
- -

Android SDK

- - The Android SDK is a software development kit built for developers building for Google's Android Platform. It includes tools for building, testing, and debugging Android applications. -
- -
- -

Android Studio

- - Android Studio is the official - Integrated Development Environment (IDE) for Native Android app development. -
- -
- -

Autoprefixer

- - Autoprefixer is a tool that adds - vendor-specific-prefixes to hand-written Sass/CSS code. This ensures that standardized CSS rules - you write will be applied across all supporting browsers. For example, instead of having to know every flexbox - syntax used by various browsers, autoprefixer allows you to just write display: flex; and it'll - automatically plug in the correct CSS. -
- -
- -

Bundling

- - Bundling is the process of taking an app's dependencies (code you've written plus any npm modules installed) and - compiling/transpiling them down to one single file. -
- -
- -

Capacitor

- - Capacitor is an open source cross-platform app runtime - that allows web-based apps to run natively on iOS, Android, Electron, and the web. It's helpful to refer to these - apps "Native Progressive Web Apps" and they represent the next evolution beyond the traditional Hybrid app mentality. - Capacitor was created and is actively developed/supported by Ionic, the company. -
+### Accessibility {/* #a11y */} + +[Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility) (a11y) is the practice of enabling as many people as possible to use the content, even if people have limited abilities. This includes people with disabilities, those using mobile devices, and those with slow network connections. Content should be developed to be as accessible as technology allows. + +### Android SDK {/* #android-sdk */} + +The [Android SDK](http://developer.android.com/sdk/index.html) is a software development kit built for developers building for Google's Android Platform. It includes tools for building, testing, and debugging Android applications. + +### Android Studio {/* #android-studio */} + +[Android Studio](https://developer.android.com/studio/) is the official Integrated Development Environment (IDE) for Native Android app development. + +### Autoprefixer {/* #autoprefixer */} + +[Autoprefixer](https://github.com/postcss/autoprefixer) is a tool that adds vendor-specific-prefixes to hand-written Sass/CSS code. This ensures that standardized CSS rules you write will be applied across all supporting browsers. For example, instead of having to know every flexbox syntax used by various browsers, autoprefixer allows you to just write display: flex; and it'll automatically plug in the correct CSS. + +### Babel {/* #babel */} + +[Babel](https://babeljs.io) is a [transpiler](#transpiler) that converts modern JavaScript into a backwards-compatible version, so that syntax such as [ES2015/ES6](#es2015-es6) runs in browsers that only support [ES5](#es5). It is commonly paired with a build tool so the conversion happens automatically as part of [bundling](#bundling). + +### Bundling {/* #bundling */} + +Bundling is the process of taking an app's dependencies (code you've written plus any npm modules installed) and compiling/transpiling them down to one single file. + +### Capacitor {/* #capacitor */} + +[Capacitor](https://capacitorjs.com/) is an open source cross-platform app runtime that allows web-based apps to run natively on iOS, Android, Electron, and the web. It's helpful to refer to these apps "Native Progressive Web Apps" and they represent the next evolution beyond the traditional Hybrid app mentality. Capacitor was created and is actively developed/supported by Ionic, the company. {/* cspell:disable */} -
- -

CLI

- - A CLI, or Command-Line Interface, is a text-based interface for - interacting with a program. The common command-line app for a Mac user is the Terminal app, and Windows users often - use Command Prompt. The Ionic community often uses this term to refer to - Ionic's CLI. Ionic's CLI can be used for a number of things, such - as creating production builds of an app, running the development server, and accessing - Ionic commercial services. -
+### CLI {/* #cli */} + +A CLI, or Command-Line Interface, is a text-based interface for interacting with a program. The common command-line app for a Mac user is the Terminal app, and Windows users often use Command Prompt. The Ionic community often uses this term to refer to [Ionic's CLI](https://ionicframework.com/docs/cli). Ionic's CLI can be used for a number of things, such as creating production builds of an app, running the development server, and accessing [Ionic commercial services](https://ionic.io/appflow). {/* cspell:enable */} -
- -

CommonJS

- - CommonJS is a group that defines - standard formats for JavaScript APIs. They have defined standards for JavaScript modules and packages. -
- -
- -

Cordova

- - Apache Cordova is an open source mobile application - development framework that transforms standard HTML/CSS/JS into full-fledged native apps. It provides a JavaScript - API for accessing native device functionality, such as the camera or accelerometer. Cordova contains the necessary - build tools for packaging webapps for iOS, Android, and Windows Phone. -
- -
- -

CORS

- - CORS - (Cross-Origin Resource Sharing) is a mechanism for servers to control client access to web assets. See the - CORS FAQs for more information. -
- -
- -

CSS Variables

- - You may be familiar with variables from Sass. - CSS Variables - enable the same functionality but are built into the browser. CSS Variables are available in all evergreen browsers. -
- -
- -

Decorators

- - Decorators are expressions that return a function. They allow you to take an existing function, and extend its - behavior. With TypeScript, you can also decorate classes and parameters. When you decorate a - class, you are wrapping and extending the behavior of its constructor. In other words, the - decorator will add some functionality when the constructor is called, and will then return the original constructor. - When you decorate a parameter, you are wrapping the argument that gets passed in for that - parameter. The decorator will add functionality when an argument is passed to the method, and then return the - original argument. -
- -
- -

ES5

- - ES5 refers to EcmaScript 5th Edition. A simple way to put it is that ES5 is the version of JavaScript which - developers are most familiar with today. -
- -
- -

ES2015/ES6

- - A wide range of new features were introduced in this version of JavaScript, including classes, modules, iterators, - and promises. Evergreen browsers (Chrome, Safari, Firefox and Edge) have full support for ES6, but to use ES6 - features in older browsers, tools such as Babel and TypeScript have - to transpile ES6 code down to ES5. -
- -
- -

ES2016/ES7

- - This version of JavaScript added a number of new features to the language, including Array.includes and - the exponentiation operator. This version of JavaScript is fully supported by all evergreen browsers (Chrome, - Safari, Firefox and Edge) -
- -
- -

ES2017/ES8

- - This version of JavaScript is the latest standard. It is currently in the final stage before becoming the new - official standard. This spec includes Async/Await (already in all evergreen browsers) and shared memory/atomics. -
- -
- -

Genymotion

- - Genymotion is a third-party Android emulator. It is extremely fast, and is useful for quickly testing your app on - Android. Check out our resource section on Genymotion for - more info. -
- -
- -

Git

- - Git is a distributed version control system for managing code. - It allows development teams to contribute code to the same project without causing code conflicts. -
- -
- -

Gulp

- - Gulp is a tool for running tasks which can be used to build your app. - Common build tasks include transpiling ES6 to ES5, turning - Sass into CSS, minifying code, and concatenating files. -
- -
- -

ES Modules

- - ES Modules - brings the concept of modules natively to JavaScript. With modules, classes and variables are no longer in the - global scope and have to be explicitly imported into your project to be used. This makes it much easier to - understand where your code is coming from and increases modularity and compartmentalization of functionality. -
- -
- -

Ionicons

- - Ionicons is an open-source icon set used and created - by Ionic. It includes 1:1 iOS and Material Design icons, as well as commonly used social/application icons. - Ionicons is included by default in Ionic distributions, but they can also be used in any project. -
- -
- -

Karma

- - Karma is a test runner that - will run an app's test inside a real browser. It executes test cases, written in any testing framework, in - a real browser. Karma was originally written for use with Angular 1. -
- -
- -

Module

- - Modules in JavaScript are small, independent, and reusable pieces or code that are isolated from one another and the - Global scope. -
- -
- -

Monorepo

- - A monorepo is a single git repository with multiple projects. Advantages include simpler - organization, shared tooling and dependencies, and better collaboration with teammates. -
- -
- -

Live Reload

- - Live Reload (or live-reload) is a tool that automatically reloads the browser or - Web View when it detects changes in your app. In some cases, it can replace - parts of your app without having to reload the entire window. See the - Live Reload docs for more information. -
- -
- -

Node

- - Node is a runtime environment that allows JavaScript to be - written on the server-side. In addition to being used for web services, node is often used to build developer - tools, such as the Ionic CLI. -
- -
- -

npm

- - npm is the package manager for node. - It allows developers to install, share, and package node modules. Ionic can be installed with npm, along with - a number of its dependencies. -
- -
- -

Observable

- - An observable is an object that emits events (or notifications). An observer is an object that listens for these - events, and does something when an event is received. Together, they create a pattern that can be used for - programming asynchronously. -
- -
- -

Package ID

- - Referred to by Apple as Bundle ID and by Android as Application ID, the - Package ID is used for identifying apps published to the App Store/Play Store. It is a string - formatted in reverse-DNS notation. -
- -
- -

Polyfill

- - A polyfill is a bit of code that - adds functionality to the browser and normalizes browser differences. This is similar to a shim, - but where a shim has it's own API, a polyfill let's the expect API of the browser be used. -
- -
- -

Protractor

- - Protractor is a testing framework written for - and by the Angular team. Protractor can be used with test runners, like Karma, for end-to-end testing. Test runners - allow you to quickly and programmatically verify code quality. -
- -
- -

Sass

- - Sass is a stylesheet language that compiles to CSS and is used by Ionic. Sass is like CSS, but with extra features - such as variables, - mixins, and - loops. -
- -
- -

Scoped Encapsulation

- - A component that uses scoped encapsulation will automatically scope its CSS by appending each of the styles with a - data attribute at run time. Overriding scoped selectors in CSS requires a - higher specificity - selector. Scoped components can also be styled using - CSS Custom Properties. -
- -
- -

Shadow DOM

- - Shadow DOM - is a native browser solution for DOM and style encapsulation of a component. It shields the component from its - surrounding environment. To externally style internal elements of a Shadow DOM component you must use - CSS Custom Properties - or CSS Shadow Parts. -
- -
- -

Shim

- - A shim is a piece of code that normalizes an APIs across browsers. A shim can have it's own API that hides the - browser specific implementation from the end user. -
- -
- -

Transpiler

- - Transpilation is the process of converting code from one language to another language prior to execution. Typically, - a transpiler will convert a high-level language to another high-level language. The most common type of - transpilation in Ionic Framework is converting ES2015/ES6 - (TypeScript) to ES5 (traditional JavaScript). -
- -
- -

TypeScript

- - TypeScript is a superset of JavaScript, - which means it gives you JavaScript, along with a number of extra features such as - type declarations - and interfaces. - Although Ionic is built with TypeScript, using it to build an Ionic app is completely optional. -
- -
- -

Unit Tests

- - Unit Tests and unit testing are a way to test small pieces of code to check if they behave as expected. Unit testing - frameworks include Jasmine, Mocha, QUnit, and many others. -
- -
- -

Webpack

- - Webpack bundles together JavaScript modules and other assets. - It can be used to create single or multiple "chunks" that are only loaded when needed. Webpack can be used to take - many files and dependencies and bundle them into one file, or other types. -
- -
- -

Web Standards

- - The World Wide Web Consortium (W3C) is the standards organization - for the Web. Together, industry leaders and the public work together to develop - web standards, which are a set of protocols, specifications, - and technologies that define the Web Platform. -
- -
- -

Xcode

- - Xcode is an Apple IDE (integrated development - environment) for software development on Apple operating systems (macOS, iOS, watchOS and tvOS), with extensions - available for other languages and platforms. -
+### CommonJS {/* #commonjs */} + +[CommonJS](https://webpack.github.io/docs/commonjs.html) is a group that defines standard formats for JavaScript APIs. They have defined standards for JavaScript modules and packages. + +### Cordova {/* #cordova */} + +[Apache Cordova](https://cordova.apache.org) is an open source mobile application development framework that transforms standard HTML/CSS/JS into full-fledged native apps. It provides a JavaScript API for accessing native device functionality, such as the camera or accelerometer. Cordova contains the necessary build tools for packaging webapps for iOS, Android, and Windows Phone. + +### CORS {/* #cors */} + +[CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) (Cross-Origin Resource Sharing) is a mechanism for servers to control client access to web assets. Refer to the [CORS FAQs](../troubleshooting/cors) for more information. + +### CSS Variables {/* #css-variables */} + +You may be familiar with variables from Sass. [CSS Variables](https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care) enable the same functionality but are built into the browser. CSS Variables are available in all evergreen browsers. + +### Decorators {/* #decorators */} + +Decorators are expressions that return a function. They allow you to take an existing function, and extend its behavior. With TypeScript, you can also decorate classes and parameters. When you decorate a class, you are wrapping and extending the behavior of its constructor. In other words, the decorator will add some functionality when the constructor is called, and will then return the original constructor. When you decorate a parameter, you are wrapping the argument that gets passed in for that parameter. The decorator will add functionality when an argument is passed to the method, and then return the original argument. + +### ES5 {/* #es5 */} + +ES5 refers to EcmaScript 5th Edition. A simple way to put it is that ES5 is the version of JavaScript which developers are most familiar with today. + +### ES2015/ES6 {/* #es2015-es6 */} + +A wide range of new features were introduced in this version of JavaScript, including classes, modules, iterators, and promises. Evergreen browsers (Chrome, Safari, Firefox and Edge) have full support for ES6, but to use ES6 features in older browsers, tools such as [Babel](#babel) and [TypeScript](#typescript) have to [transpile](#transpiler) ES6 code down to ES5. + +### ES2016/ES7 {/* #es2016-es7 */} + +This version of JavaScript added a number of new features to the language, including Array.includes and the exponentiation operator. This version of JavaScript is fully supported by all evergreen browsers (Chrome, Safari, Firefox and Edge) + +### ES2017/ES8 {/* #es2017-es8 */} + +This version of JavaScript is the latest standard. It is currently in the final stage before becoming the new official standard. This spec includes Async/Await (already in all evergreen browsers) and shared memory/atomics. + +### Genymotion {/* #genymotion */} + +Genymotion is a third-party Android emulator. It is extremely fast, and is useful for quickly testing your app on Android. Check out our [resource section](../developing/tips#using-genymotion-android) on Genymotion for more info. + +### Git {/* #git */} + +[Git](https://git-scm.com/) is a distributed version control system for managing code. It allows development teams to contribute code to the same project without causing code conflicts. + +### Gulp {/* #gulp */} + +[Gulp](http://gulpjs.com/) is a tool for running tasks which can be used to build your app. Common build tasks include transpiling [ES6](#es2015-es6) to [ES5](#es5), turning [Sass](#sass) into CSS, minifying code, and concatenating files. + +### ES Modules {/* #es-modules */} + +[ES Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) brings the concept of modules natively to JavaScript. With modules, classes and variables are no longer in the global scope and have to be explicitly imported into your project to be used. This makes it much easier to understand where your code is coming from and increases modularity and compartmentalization of functionality. + +### Ionicons {/* #ionicons */} + +[Ionicons](https://ionic.io/ionicons/) is an open-source icon set used and created by Ionic. It includes 1:1 iOS and Material Design icons, as well as commonly used social/application icons. Ionicons is included by default in Ionic distributions, but they can also be used in any project. + +### Karma {/* #karma */} + +[Karma](https://karma-runner.github.io/latest/index.html) is a test runner that will run an app's test inside a real browser. It executes test cases, written in any testing framework, in a real browser. Karma was originally written for use with Angular 1. + +### Module {/* #module */} + +Modules in JavaScript are small, independent, and reusable pieces or code that are isolated from one another and the Global scope. + +### Monorepo {/* #monorepo */} + +A monorepo is a single git repository with multiple projects. Advantages include simpler organization, shared tooling and dependencies, and better collaboration with teammates. + +### Live Reload {/* #livereload */} + +**Live Reload** (or **live-reload**) is a tool that automatically reloads the browser or [Web View](../core-concepts/webview) when it detects changes in your app. In some cases, it can replace parts of your app without having to reload the entire window. Refer to the [Live Reload docs](../cli/livereload) for more information. + +### Node {/* #node */} + +[Node](https://nodejs.org/) is a runtime environment that allows JavaScript to be written on the server-side. In addition to being used for web services, node is often used to build developer tools, such as the [Ionic CLI](#cli). + +### npm {/* #npm */} + +[npm](https://www.npmjs.com/) is the package manager for [node](#node). It allows developers to install, share, and package node modules. Ionic can be installed with npm, along with a number of its dependencies. + +### Observable {/* #observable */} + +An observable is an object that emits events (or notifications). An observer is an object that listens for these events, and does something when an event is received. Together, they create a pattern that can be used for programming asynchronously. + +### Package ID {/* #package-id */} + +Referred to by Apple as Bundle ID and by Android as Application ID, the Package ID is used for identifying apps published to the App Store/Play Store. It is a string formatted in [reverse-DNS notation](https://en.wikipedia.org/wiki/Reverse_domain_name_notation). + +### Polyfill {/* #polyfill */} + +A [polyfill](https://remysharp.com/2010/10/08/what-is-a-polyfill) is a bit of code that adds functionality to the browser and normalizes browser differences. This is similar to a [shim](#shim), but where a shim has it's own API, a polyfill let's the expect API of the browser be used. + +### Protractor {/* #protractor */} + +[Protractor](https://angular.github.io/protractor/#/) is a testing framework written for and by the Angular team. Protractor can be used with test runners, like Karma, for end-to-end testing. Test runners allow you to quickly and programmatically verify code quality. + +### Sass {/* #sass */} + +Sass is a stylesheet language that compiles to CSS and is used by Ionic. Sass is like CSS, but with extra features such as [variables](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variables_), [mixins](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins), and [loops](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_10). + +### Scoped Encapsulation {/* #scoped */} + +A component that uses scoped encapsulation will automatically scope its CSS by appending each of the styles with a data attribute at run time. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. Scoped components can also be styled using [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables). + +### Shadow DOM {/* #shadow */} + +[Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom) is a native browser solution for DOM and style encapsulation of a component. It shields the component from its surrounding environment. To externally style internal elements of a Shadow DOM component you must use [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) or [CSS Shadow Parts](https://developer.mozilla.org/en-US/docs/Web/CSS/::part). + +### Shim {/* #shim */} + +A shim is a piece of code that normalizes an APIs across browsers. A shim can have it's own API that hides the browser specific implementation from the end user. + +### Transpiler {/* #transpiler */} + +Transpilation is the process of converting code from one language to another language prior to execution. Typically, a transpiler will convert a high-level language to another high-level language. The most common type of transpilation in Ionic Framework is converting [ES2015/ES6](#es2015-es6) ([TypeScript](#typescript)) to [ES5](#es5) (traditional JavaScript). + +### TypeScript {/* #typescript */} + +[TypeScript](http://www.typescriptlang.org) is a superset of JavaScript, which means it gives you JavaScript, along with a number of extra features such as [type declarations](http://www.typescriptlang.org/Handbook#basic-types) and [interfaces](http://www.typescriptlang.org/Handbook#interfaces). Although Ionic is built with TypeScript, using it to build an Ionic app is completely optional. + +### Unit Tests {/* #unit-tests */} + +Unit Tests and unit testing are a way to test small pieces of code to check if they behave as expected. Unit testing frameworks include Jasmine, Mocha, QUnit, and many others. + +### Webpack {/* #webpack */} + +[Webpack](https://webpack.github.io/) bundles together JavaScript modules and other assets. It can be used to create single or multiple "chunks" that are only loaded when needed. Webpack can be used to take many files and dependencies and bundle them into one file, or other types. + +### Web Standards {/* #web-standards */} + +The [World Wide Web Consortium](https://www.w3.org/) (W3C) is the standards organization for the Web. Together, industry leaders and the public work together to develop [web standards](https://www.w3.org/standards/), which are a set of protocols, specifications, and technologies that define the Web Platform. + +### Xcode {/* #xcode */} + +[Xcode](https://developer.apple.com/xcode/) is an Apple IDE (integrated development environment) for software development on Apple operating systems (macOS, iOS, watchOS and tvOS), with extensions available for other languages and platforms.
diff --git a/docs/reference/versioning.md b/docs/reference/versioning.md index c17a0c40c5..51ee30f725 100644 --- a/docs/reference/versioning.md +++ b/docs/reference/versioning.md @@ -1,6 +1,6 @@ # Versioning -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. +Ionic Framework follows the [Semantic Versioning (SemVer)](https://semver.org/) 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. ## Release Schedule @@ -18,5 +18,5 @@ A patch release will be published when bug fixes were included, but the API has ## Changelog -For a list of all notable changes to Ionic please refer to the changelog. This contains an ordered +For a list of all notable changes to Ionic please refer to the [changelog](https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md). This contains an ordered list of all bug fixes and new features under each release. diff --git a/docs/techniques/security.md b/docs/techniques/security.md index 51b6951924..d0f2e105f3 100644 --- a/docs/techniques/security.md +++ b/docs/techniques/security.md @@ -68,7 +68,7 @@ To learn more about the security recommendations for binding to directives such For developers who wish to add complex HTML to components such as `ion-toast`, they will need to eject from the sanitizer that is built into Ionic Framework. Developers can either disable the sanitizer across their entire app or bypass it on a case-by-case basis. :::note -Bypassing sanitization functionality can make your application vulnerable to XSS attacks. Please exercise extreme caution when disabling the sanitizer. +Bypassing sanitization functionality can make your application vulnerable to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Please exercise extreme caution when disabling the sanitizer. ::: ### Disabling the sanitizer via config diff --git a/docs/theming/advanced.md b/docs/theming/advanced.md index 410cfb57bc..421a5db26b 100644 --- a/docs/theming/advanced.md +++ b/docs/theming/advanced.md @@ -19,7 +19,7 @@ CSS-based theming enables apps to customize the colors quickly by loading a CSS The `theme-color` value for a meta tag indicates a color that browsers can use to customize the display of a page or of the surrounding interface. This kind of meta tag can also accept media queries which allow developers to set the theme color for both light and dark modes. -The `content` value for the `theme-color` meta must contain a valid CSS Color and cannot contain CSS Variables. +The `content` value for the `theme-color` meta must contain a valid [CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) and cannot contain CSS Variables. :::note The `theme-color` meta controls the interface theme when running in a web browser or as a PWA and has no effect when an app is deployed using Capacitor or Cordova. If you are looking to customize the area under the status bar, we recommend using the [Capacitor Status Bar Plugin](https://capacitorjs.com/docs/apis/status-bar). @@ -46,7 +46,7 @@ There is a small subset of colors that browsers will not use as they interfere w Browsers will prefer the `theme-color` meta over `theme` in `manifest.json` if both are present. ::: -For more information, refer to the MDN theme-color documentation. +For more information, refer to the [MDN theme-color documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color). ## Global Variables @@ -86,7 +86,7 @@ While the application and stepped variables in the themes section are useful for ### The Alpha Problem -There is not yet full browser support for alpha use of a hex color. The `rgba()` function only accepts a value in `R, G, B, A` (Red, Green, Blue, Alpha) format. The following code shows examples of correct and incorrect values passed to `rgba()`. +There is not yet full [browser support](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Browser_compatibility) for alpha use of a hex color. The [`rgba()`]() function only accepts a value in `R, G, B, A` (Red, Green, Blue, Alpha) format. The following code shows examples of correct and incorrect values passed to `rgba()`. ```css /* These examples use the same color: blueviolet. */ diff --git a/docs/theming/basics.md b/docs/theming/basics.md index d289d75ece..f89c78e402 100644 --- a/docs/theming/basics.md +++ b/docs/theming/basics.md @@ -31,11 +31,11 @@ Ionic has two **modes** that are used to customize the look of components based ## CSS Variables -The Ionic Framework components are themed using CSS custom 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 custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_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. ## 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, refer to 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](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_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, refer to the [CSS Shadow Parts](css-shadow-parts.md) guide. ## Branding diff --git a/docs/theming/colors.md b/docs/theming/colors.md index c040f33940..9574dc5014 100644 --- a/docs/theming/colors.md +++ b/docs/theming/colors.md @@ -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. Refer to [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 explore each 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](https://developer.mozilla.org/en-US/docs/Glossary/RGB). Refer to [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 explore each of the default colors Ionic provides and their variations. diff --git a/docs/theming/css-shadow-parts.md b/docs/theming/css-shadow-parts.md index cc105100e8..adbfb66b9f 100644 --- a/docs/theming/css-shadow-parts.md +++ b/docs/theming/css-shadow-parts.md @@ -10,11 +10,11 @@ title: CSS Shadow Parts /> -CSS Shadow Parts allow developers to style CSS properties on an element inside of a shadow tree. This is extremely useful in customizing Ionic Framework Shadow DOM components. +CSS Shadow Parts allow developers to style CSS properties on an element inside of a shadow tree. This is extremely useful in customizing Ionic Framework [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) components. ## Why Shadow Parts? -Ionic Framework is a distributed set of Web Components. Web Components follow the Shadow DOM specification in order to encapsulate styles and markup. +Ionic Framework is a distributed set of [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components). Web Components follow the [Shadow DOM specification](https://w3c.github.io/webcomponents/spec/shadow/) 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). @@ -67,7 +67,7 @@ With these parts exposed, the element can now be styled directly using [::part]( ### How ::part works -The `::part()` pseudo-element allows developers to select elements inside of a shadow tree that have been exposed via a part attribute. +The [`::part()`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) pseudo-element allows developers to select elements inside of a shadow tree that have been exposed via a part attribute. Since we know that `ion-select` exposes a `placeholder` part for styling the text when there is no value selected, we can customize it in the following way: @@ -80,7 +80,7 @@ ion-select::part(placeholder) { Styling using `::part` allows any CSS property that is accepted by that element to be changed. -In addition to being able to target the part, pseudo-elements can be styled without them being explicitly exposed: +In addition to being able to target the part, [pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) can be styled without them being explicitly exposed: ```css ion-select::part(placeholder)::first-letter { @@ -89,7 +89,7 @@ ion-select::part(placeholder)::first-letter { } ``` -Parts work with most pseudo-classes, as well: +Parts work with most [pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes), as well: ```css ion-item::part(native):hover { @@ -112,18 +112,18 @@ In order to have parts a component must meet the following criteria: - 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. :::note -We welcome recommendations for additional parts. Please create a new GitHub issue with as much information as possible when requesting a part. +We welcome recommendations for additional parts. Please create a [new GitHub issue](https://github.com/ionic-team/ionic-framework/issues/new?assignees=&labels=&template=feature_request.md&title=feat%3A+) with as much information as possible when requesting a part. ::: ## Known Limitations ### Browser Support -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.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](https://caniuse.com/#feat=mdn-css_selectors_part) 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. ### Vendor Prefixed Pseudo-Elements -Pseudo-elements that are vendor prefixed are not supported at this time. An example of this would be any of the `::-webkit-scrollbar` pseudo-elements: +Pseudo-elements that are [vendor prefixed](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) are not supported at this time. An example of this would be any of the `::-webkit-scrollbar` pseudo-elements: ```css /* Does NOT work */ @@ -132,11 +132,11 @@ my-component::part(scroll)::-webkit-scrollbar { } ``` -Refer to this issue on GitHub for more information. +Refer to [this issue on GitHub](https://github.com/w3c/csswg-drafts/issues/4530) for more information. ### Structural Pseudo-Classes -Most pseudo-classes are supported with parts, however, structural pseudo-classes are not. An example of structural pseudo-classes that do not work is below. +Most pseudo-classes are supported with parts, however, [structural pseudo-classes](https://www.w3.org/TR/selectors-4/#structural-pseudos) are not. An example of structural pseudo-classes that do not work is below. ```css /* Does NOT work */ diff --git a/docs/theming/css-variables.md b/docs/theming/css-variables.md index ca7bf1c5ed..1de4515268 100644 --- a/docs/theming/css-variables.md +++ b/docs/theming/css-variables.md @@ -10,7 +10,7 @@ title: CSS Variables /> -Ionic components are built with CSS Variables for easy customization of an application. CSS variables allow a value to be stored in one place, then referenced in multiple other places. They also make it possible to change CSS dynamically at runtime (which previously required a CSS preprocessor). CSS variables make it easier than ever to override Ionic components to match a brand or theme. +Ionic components are built with [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) for easy customization of an application. CSS variables allow a value to be stored in one place, then referenced in multiple other places. They also make it possible to change CSS dynamically at runtime (which previously required a CSS preprocessor). CSS variables make it easier than ever to override Ionic components to match a brand or theme. ## Setting Values diff --git a/docs/theming/dark-mode.md b/docs/theming/dark-mode.md index 03dd1830a0..4b26cffa0f 100644 --- a/docs/theming/dark-mode.md +++ b/docs/theming/dark-mode.md @@ -176,7 +176,7 @@ The `.ion-palette-dark` class **must** be added to the `html` element in order t ## Adjusting System UI Components -When developing a dark palette, you may notice that certain system UI components are not adjusting to dark mode properly. To fix this you will need to specify the `color-scheme`. Refer to the browser compatibility for color-scheme for details on cross browser support. +When developing a dark palette, you may notice that certain system UI components are not adjusting to dark mode properly. To fix this you will need to specify the `color-scheme`. Refer to the [browser compatibility for color-scheme](https://caniuse.com/#feat=mdn-html_elements_meta_name_color-scheme) for details on cross browser support. While you may be mainly using Ionic components instead of only native components, `color-scheme` can also affect aspects of your application such as the scrollbar. In order to use `color-scheme` you will need to add the following HTML to the `head` of your application: diff --git a/docs/theming/themes.md b/docs/theming/themes.md index cb5e5c4602..77c201b36b 100644 --- a/docs/theming/themes.md +++ b/docs/theming/themes.md @@ -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. Refer to [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](https://developer.mozilla.org/en-US/docs/Glossary/RGB). Refer to [The Alpha Problem](advanced.md#the-alpha-problem) for an explanation of why the `rgb` property is also needed. | Name | Description | | ------------------------------------------ | ---------------------------------------------------- | diff --git a/docs/troubleshooting/cors.md b/docs/troubleshooting/cors.md index 0d2844ceea..93b110b7b8 100644 --- a/docs/troubleshooting/cors.md +++ b/docs/troubleshooting/cors.md @@ -18,7 +18,7 @@ In order to know if an external origin supports CORS, the server has to send som An **origin** is the combination of the **protocol**, **domain**, and **port** from which your Ionic app or the external resource is served. For example, apps running in Capacitor have `capacitor://localhost` (iOS) or `http://localhost` (Android) as their origin. -When the origin where your app is served (e.g. `http://localhost:8100` with `ionic serve`) and the origin of the resource being requested (e.g. `https://api.example.com`) don't match, the browser's Same Origin Policy takes effect and CORS is required for the request to be made. +When the origin where your app is served (e.g. `http://localhost:8100` with `ionic serve`) and the origin of the resource being requested (e.g. `https://api.example.com`) don't match, the browser's [Same Origin Policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) takes effect and CORS is required for the request to be made. CORS errors are common in web apps when a cross-origin request is made but the server doesn't return the required headers in the response (is not CORS-enabled): @@ -190,9 +190,9 @@ Port numbers can be higher if you are serving multiple apps at the same time. Allowing any origin with `Access-Control-Allow-Origin: *` is guaranteed to work in all scenarios but may have security implications — like some CSRF attacks — depending on how the server controls access to resources and use sessions and cookies. -For more information on how to enable CORS in different web and app servers, please check enable-cors.org +For more information on how to enable CORS in different web and app servers, please check [enable-cors.org](https://enable-cors.org) -CORS can be easily enabled in Express/Connect apps with the cors middleware: +CORS can be easily enabled in Express/Connect apps with the [cors](https://github.com/expressjs/cors) middleware: ```javascript const express = require('express'); @@ -284,7 +284,7 @@ Send the requests through an HTTP/HTTPS proxy that bypasses them to the external Also, keep in mind that the browser or webview will not receive the original HTTPS certificates but the one being sent from the proxy if it's provided. URLs may need to be rewritten in your code in order to use the proxy. -Check cors-anywhere for a Node.js CORS proxy that can be deployed in your own server. Using free hosted CORS proxies in production is not recommended. +Check [cors-anywhere](https://github.com/Rob--W/cors-anywhere/) for a Node.js CORS proxy that can be deployed in your own server. Using free hosted CORS proxies in production is not recommended. ### C. Disabling CORS or browser web security @@ -296,9 +296,5 @@ If you are developing a PWA or testing in the browser, using the `--disable-web- ##### Sources -- - CORS Errors in Ionic Apps - -- - MDN - +- [CORS Errors in Ionic Apps](https://fdezromero.com/cors-errors-in-ionic-apps) +- [MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) diff --git a/docs/updating/4-0.md b/docs/updating/4-0.md index 659b2d09fd..a457852058 100644 --- a/docs/updating/4-0.md +++ b/docs/updating/4-0.md @@ -138,7 +138,7 @@ See the following `ionic.config.json` as an example: ### RxJS Changes -Between V3 and V4, RxJS was updated to version 6. This changes many of the import paths of operators and core RxJS functions. Please refer to the RxJS Migration Guide for details. +Between V3 and V4, RxJS was updated to version 6. This changes many of the import paths of operators and core RxJS functions. Please refer to the [RxJS Migration Guide](https://github.com/ReactiveX/rxjs/blob/6.x/docs_app/content/guide/v6/migration.md) for details. ### Lifecycle Events @@ -188,7 +188,7 @@ async showAlert() { ### Navigation -In V4, navigation received the most changes. Now, instead of using Ionic's own `NavController`, we integrate with the official Angular Router. This not only provides a consistent routing experience across apps, but is much more dependable. The Angular team has an excellent guide on their docs site that covers the Router in great detail. +In V4, navigation received the most changes. Now, instead of using Ionic's own `NavController`, we integrate with the official Angular Router. This not only provides a consistent routing experience across apps, but is much more dependable. The Angular team has an [excellent guide](http://angular.io/guide/router) on their docs site that covers the Router in great detail. 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. @@ -246,9 +246,9 @@ For a detailed explanation of lazy loading in V4 project, check out the [Angular ### Markup Changes -Since v4 moved to Custom Elements, there's been a significant change to the markup for each component. These changes have all been made to follow the Custom Elements spec, and have been documented in a dedicated file on GitHub. +Since v4 moved to Custom Elements, there's been a significant change to the markup for each component. These changes have all been made to follow the Custom Elements spec, and have been documented in a [dedicated file on GitHub](https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md#breaking-changes). -To help with these markup changes, we've released a TSLint-based Migration Tool, which detects issues and can even fix some of them automatically. +To help with these markup changes, we've released a TSLint-based [Migration Tool](https://github.com/ionic-team/v4-migration-tslint), which detects issues and can even fix some of them automatically. ## Updating from Ionic 1 to 4 diff --git a/docs/vue/pwa.md b/docs/vue/pwa.md index 4a7d7ceb2f..fd84d82061 100644 --- a/docs/vue/pwa.md +++ b/docs/vue/pwa.md @@ -13,7 +13,7 @@ sidebar_label: Progressive Web Apps ## Making your Vue app a PWA with Vite -The two main requirements of a PWA are a Service Worker and a Web Application Manifest. While it's possible to add both of these to an app manually, we recommend using the [Vite PWA Plugin](https://vite-pwa-org.netlify.app/) instead. +The two main requirements of a PWA are a [Service Worker](https://developers.google.com/web/fundamentals/primers/service-workers/) and a [Web Application Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/). While it's possible to add both of these to an app manually, we recommend using the [Vite PWA Plugin](https://vite-pwa-org.netlify.app/) instead. To get started, install the `vite-plugin-pwa` package: @@ -45,7 +45,7 @@ Refer to the [Vite PWA "Deploy" Guide](https://vite-pwa-org.netlify.app/deployme As of Ionic CLI v7, Ionic Vue starter apps ship with Vite instead of Vue CLI. Refer to [Making your Vue app a PWA with Vite](#making-your-vue-app-a-pwa-with-vite) for Vite instructions. ::: -The two main requirements of a PWA are a Service Worker and a Web Application Manifest. While it's possible to add both of these to an app manually, the Vue CLI has some utilities for adding this for you. +The two main requirements of a PWA are a [Service Worker](https://developers.google.com/web/fundamentals/primers/service-workers/) and a [Web Application Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/). While it's possible to add both of these to an app manually, the Vue CLI has some utilities for adding this for you. For existing projects, you can run the `vue add` command to install the PWA plugin for Vue. diff --git a/docs/vue/slides.md b/docs/vue/slides.md index 9b7a8ef20c..edc2a4bb17 100644 --- a/docs/vue/slides.md +++ b/docs/vue/slides.md @@ -14,10 +14,10 @@ title: Migrating From ion-slides to Swiper.js `ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below. ::: -We recommend Swiper.js if you need a modern touch slider component. This guide will go over how to get Swiper for Vue set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to the official Swiper Vue integration. +We recommend [Swiper.js](http://swiperjs.com/) if you need a modern touch slider component. This guide will go over how to get Swiper for Vue set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to the official Swiper Vue integration. :::note -Swiper's Vue component is set to be removed in a future release of Swiper, with Swiper Element as the replacement. However, this guide shows how to migrate to the Vue component because it provides the most stable experience at the time of writing. +Swiper's Vue component is set to be removed in a future release of Swiper, with [Swiper Element](https://swiperjs.com/element) as the replacement. However, this guide shows how to migrate to the Vue component because it provides the most stable experience at the time of writing. Using Swiper's Vue component is **not** required to use Swiper.js with Ionic Framework. ::: @@ -212,7 +212,7 @@ const modules = [Autoplay, Keyboard, Pagination, Scrollbar, Zoom]; ``` :::note -Refer to Swiper's Vue usage documentation for a full list of modules. +Refer to [Swiper's Vue usage documentation](https://swiperjs.com/vue#usage) for a full list of modules. ::: ## The IonicSlides Module @@ -294,7 +294,7 @@ Below is a full list of property changes when going from `ion-slides` to Swiper | scrollbar | You can continue to use the `scrollbar` property, just be sure to install the Scrollbar module first. | :::note -All properties available in Swiper Vue can be found in the Swiper Vue props documentation. +All properties available in Swiper Vue can be found in the [Swiper Vue props documentation](https://swiperjs.com/vue#swiper-props). ::: ## Events @@ -347,7 +347,7 @@ Below is a full list of event name changes when going from `ion-slides` to Swipe | `ionSlidesDidLoad` | `init` | :::note -All events available in Swiper Vue can be found in the Swiper Vue events documentation. +All events available in Swiper Vue can be found in the [Swiper Vue events documentation](https://swiperjs.com/vue#swiper-events). ::: ## Methods @@ -472,12 +472,12 @@ const modules = [EffectFade, IonicSlides]; ``` :::note -For more information on effects in Swiper, please refer to the Swiper Vue effects documentation. +For more information on effects in Swiper, please refer to the [Swiper Vue effects documentation](https://swiperjs.com/vue#effects). ::: ## Wrap Up -Now that you have Swiper installed, there is a whole set of new Swiper features for you to enjoy. We recommend starting with the Swiper Vue Introduction and then referencing the Swiper API docs. +Now that you have Swiper installed, there is a whole set of new Swiper features for you to enjoy. We recommend starting with the [Swiper Vue Introduction](https://swiperjs.com/vue) and then referencing [the Swiper API docs](https://swiperjs.com/swiper-api). ## FAQ @@ -491,8 +491,8 @@ If you are running into issues with the migration, please create a post on the [ ### Where do I file bug reports? -Before opening an issue, please consider creating a post on the Swiper Discussion Board or the Ionic Forum to check if your issue can be resolved by the community. +Before opening an issue, please consider creating a post on the [Swiper Discussion Board](https://github.com/nolimits4web/swiper/discussions) or the [Ionic Forum](https://forum.ionicframework.com) to check if your issue can be resolved by the community. -If you are running into problems with the Swiper library, new bugs should be filed on the Swiper issue tracker. +If you are running into problems with the Swiper library, new bugs should be filed on the [Swiper issue tracker](https://github.com/nolimits4web/swiper/issues). -If you are running into problems with the `IonicSlides` module, new bugs should be filed on the Ionic Framework issue tracker. +If you are running into problems with the `IonicSlides` module, new bugs should be filed on the [Ionic Framework issue tracker](https://github.com/ionic-team/ionic-framework/issues). diff --git a/docs/vue/troubleshooting.md b/docs/vue/troubleshooting.md index 456d0950a8..1383c81dfa 100644 --- a/docs/vue/troubleshooting.md +++ b/docs/vue/troubleshooting.md @@ -12,7 +12,7 @@ title: Troubleshooting This guide covers some of the more common issues you may run into when developing with Ionic Vue. -Have an issue that you think should be covered here? Let us know! +Have an issue that you think should be covered here? [Let us know!](https://github.com/ionic-team/ionic-docs/issues/new?assignees=&labels=content&template=content-issue.md&title=) ## Failed to resolve component @@ -44,7 +44,7 @@ Prefer to register your components globally once? We have you covered. Our [Opti `slot` attributes are deprecated vue/no-deprecated-slot-attribute ``` -The slots that are used in Ionic Vue are Web Component slots, which are different than the slots used in Vue 2. Unfortunately, the APIs for both are very similar, and your linter is likely getting the two confused. +The slots that are used in Ionic Vue are [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots), which are different than the slots used in Vue 2. Unfortunately, the APIs for both are very similar, and your linter is likely getting the two confused. All Ionic Vue starters ship with this rule turned off, but you can do it yourself by adding the following to your `.eslintrc.js` file: @@ -58,7 +58,7 @@ module.exports = { If you are using VSCode and have the Vetur plugin installed, you are likely getting this warning because of Vetur, not ESLint. By default, Vetur loads the default Vue 3 linting rules and ignores any custom ESLint rules. -To resolve this issue, you will need to turn off Vetur's template validation with `vetur.validation.template: false`. Refer to the Vetur Linting Guide for more information. +To resolve this issue, you will need to turn off Vetur's template validation with `vetur.validation.template: false`. Refer to the [Vetur Linting Guide](https://vuejs.github.io/vetur/guide/linting-error.html#linting) for more information. ## Method on component is not a function diff --git a/versioned_docs/version-v7/reference/glossary.md b/versioned_docs/version-v7/reference/glossary.md index 82d1995515..6df9ec4309 100644 --- a/versioned_docs/version-v7/reference/glossary.md +++ b/versioned_docs/version-v7/reference/glossary.md @@ -12,295 +12,176 @@ title: Glossary
-
- -

Accessibility

- - Accessibility (a11y) is the practice of enabling as many people as possible to use the content, even if people have limited abilities. This includes people with disabilities, those using mobile devices, and those with slow network connections. Content should be developed to be as accessible as technology allows. -
- -
- -

Android SDK

- - The Android SDK is a software development kit built for developers building for Google's Android Platform. It includes tools for building, testing, and debugging Android applications. -
- -
- -

Android Studio

- - Android Studio is the official Integrated Development Environment (IDE) for Native Android app development. -
- -
- -

Autoprefixer

- - Autoprefixer is a tool that adds vendor-specific-prefixes to hand-written Sass/CSS code. This ensures that standardized CSS rules you write will be applied across all supporting browsers. For example, instead of having to know every flexbox syntax used by various browsers, autoprefixer allows you to just write display: flex; and it'll automatically plug in the correct CSS. -
- -
- -

Bundling

- - Bundling is the process of taking an app's dependencies (code you've written plus any npm modules installed) and compiling/transpiling them down to one single file. -
- -
- -

Capacitor

- - Capacitor is an open source cross-platform app runtime that allows web-based apps to run natively on iOS, Android, Electron, and the web. It's helpful to refer to these apps "Native Progressive Web Apps" and they represent the next evolution beyond the traditional Hybrid app mentality. Capacitor was created and is actively developed/supported by Ionic, the company. -
+### Accessibility {/* #a11y */} + +[Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility) (a11y) is the practice of enabling as many people as possible to use the content, even if people have limited abilities. This includes people with disabilities, those using mobile devices, and those with slow network connections. Content should be developed to be as accessible as technology allows. + +### Android SDK {/* #android-sdk */} + +The [Android SDK](http://developer.android.com/sdk/index.html) is a software development kit built for developers building for Google's Android Platform. It includes tools for building, testing, and debugging Android applications. + +### Android Studio {/* #android-studio */} + +[Android Studio](https://developer.android.com/studio/) is the official Integrated Development Environment (IDE) for Native Android app development. + +### Autoprefixer {/* #autoprefixer */} + +[Autoprefixer](https://github.com/postcss/autoprefixer) is a tool that adds vendor-specific-prefixes to hand-written Sass/CSS code. This ensures that standardized CSS rules you write will be applied across all supporting browsers. For example, instead of having to know every flexbox syntax used by various browsers, autoprefixer allows you to just write display: flex; and it'll automatically plug in the correct CSS. + +### Babel {/* #babel */} + +[Babel](https://babeljs.io) is a [transpiler](#transpiler) that converts modern JavaScript into a backwards-compatible version, so that syntax such as [ES2015/ES6](#es2015-es6) runs in browsers that only support [ES5](#es5). It is commonly paired with a build tool so the conversion happens automatically as part of [bundling](#bundling). + +### Bundling {/* #bundling */} + +Bundling is the process of taking an app's dependencies (code you've written plus any npm modules installed) and compiling/transpiling them down to one single file. + +### Capacitor {/* #capacitor */} + +[Capacitor](https://capacitorjs.com/) is an open source cross-platform app runtime that allows web-based apps to run natively on iOS, Android, Electron, and the web. It's helpful to refer to these apps "Native Progressive Web Apps" and they represent the next evolution beyond the traditional Hybrid app mentality. Capacitor was created and is actively developed/supported by Ionic, the company. {/* cspell:disable */} -
- -

CLI

- - A CLI, or Command-Line Interface, is a text-based interface for interacting with a program. The common command-line app for a Mac user is the Terminal app, and Windows users often use Command Prompt. The Ionic community often uses this term to refer to Ionic's CLI. Ionic's CLI can be used for a number of things, such as creating production builds of an app, running the development server, and accessing Ionic commercial services. -
+### CLI {/* #cli */} + +A CLI, or Command-Line Interface, is a text-based interface for interacting with a program. The common command-line app for a Mac user is the Terminal app, and Windows users often use Command Prompt. The Ionic community often uses this term to refer to [Ionic's CLI](https://ionicframework.com/docs/cli). Ionic's CLI can be used for a number of things, such as creating production builds of an app, running the development server, and accessing [Ionic commercial services](https://ionic.io/appflow). {/* cspell:enable */} -
- -

CommonJS

- - CommonJS is a group that defines standard formats for JavaScript APIs. They have defined standards for JavaScript modules and packages. -
- -
- -

Cordova

- - Apache Cordova is an open source mobile application development framework that transforms standard HTML/CSS/JS into full-fledged native apps. It provides a JavaScript API for accessing native device functionality, such as the camera or accelerometer. Cordova contains the necessary build tools for packaging webapps for iOS, Android, and Windows Phone. -
- -
- -

CORS

- - CORS (Cross-Origin Resource Sharing) is a mechanism for servers to control client access to web assets. See the CORS FAQs for more information. -
- -
- -

CSS Variables

- - You may be familiar with variables from Sass. CSS Variables enable the same functionality but are built into the browser. CSS Variables are available in all evergreen browsers. -
- -
- -

Decorators

- - Decorators are expressions that return a function. They allow you to take an existing function, and extend its behavior. With TypeScript, you can also decorate classes and parameters. When you decorate a class, you are wrapping and extending the behavior of its constructor. In other words, the decorator will add some functionality when the constructor is called, and will then return the original constructor. When you decorate a parameter, you are wrapping the argument that gets passed in for that parameter. The decorator will add functionality when an argument is passed to the method, and then return the original argument. -
- -
- -

ES5

- - ES5 refers to EcmaScript 5th Edition. A simple way to put it is that ES5 is the version of JavaScript which developers are most familiar with today. -
- -
- -

ES2015/ES6

- - A wide range of new features were introduced in this version of JavaScript, including classes, modules, iterators, and promises. Evergreen browsers (Chrome, Safari, Firefox and Edge) have full support for ES6, but to use ES6 features in older browsers, tools such as Babel and TypeScript have to transpile ES6 code down to ES5. -
- -
- -

ES2016/ES7

- - This version of JavaScript added a number of new features to the language, including Array.includes and the exponentiation operator. This version of JavaScript is fully supported by all evergreen browsers (Chrome, Safari, Firefox and Edge) -
- -
- -

ES2017/ES8

- - This version of JavaScript is the latest standard. It is currently in the final stage before becoming the new official standard. This spec includes Async/Await (already in all evergreen browsers) and shared memory/atomics. -
- -
- -

Genymotion

- - Genymotion is a third-party Android emulator. It is extremely fast, and is useful for quickly testing your app on Android. Check out our resource section on Genymotion for more info. -
- -
- -

Git

- - Git is a distributed version control system for managing code. It allows development teams to contribute code to the same project without causing code conflicts. -
- -
- -

Gulp

- - Gulp is a tool for running tasks which can be used to build your app. Common build tasks include transpiling ES6 to ES5, turning Sass into CSS, minifying code, and concatenating files. -
- -
- -

ES Modules

- - ES Modules brings the concept of modules natively to JavaScript. With modules, classes and variables are no longer in the global scope and have to be explicitly imported into your project to be used. This makes it much easier to understand where your code is coming from and increases modularity and compartmentalization of functionality. -
- -
- -

Ionicons

- - Ionicons is an open-source icon set used and created by Ionic. It includes 1:1 iOS and Material Design icons, as well as commonly used social/application icons. Ionicons is included by default in Ionic distributions, but they can also be used in any project. -
- -
- -

Karma

- - Karma is a test runner that will run an app's test inside a real browser. It executes test cases, written in any testing framework, in a real browser. Karma was originally written for use with Angular 1. -
- -
- -

Module

- - Modules in JavaScript are small, independent, and reusable pieces or code that are isolated from one another and the Global scope. -
- -
- -

Monorepo

- - A monorepo is a single git repository with multiple projects. Advantages include simpler organization, shared tooling and dependencies, and better collaboration with teammates. -
- -
- -

Live Reload

- - Live Reload (or live-reload) is a tool that automatically reloads the browser or Web View when it detects changes in your app. In some cases, it can replace parts of your app without having to reload the entire window. See the Live Reload docs for more information. -
- -
- -

Node

- - Node is a runtime environment that allows JavaScript to be written on the server-side. In addition to being used for web services, node is often used to build developer tools, such as the Ionic CLI. -
- -
- -

npm

- - npm is the package manager for node. It allows developers to install, share, and package node modules. Ionic can be installed with npm, along with a number of its dependencies. -
- -
- -

Observable

- - An observable is an object that emits events (or notifications). An observer is an object that listens for these events, and does something when an event is received. Together, they create a pattern that can be used for programming asynchronously. -
- -
- -

Package ID

- - Referred to by Apple as Bundle ID and by Android as Application ID, the Package ID is used for identifying apps published to the App Store/Play Store. It is a string formatted in reverse-DNS notation. -
- -
- -

Polyfill

- - A polyfill is a bit of code that adds functionality to the browser and normalizes browser differences. This is similar to a shim, but where a shim has it's own API, a polyfill let's the expect API of the browser be used. -
- -
- -

Protractor

- - Protractor is a testing framework written for and by the Angular team. Protractor can be used with test runners, like Karma, for end-to-end testing. Test runners allow you to quickly and programmatically verify code quality. -
- -
- -

Sass

- - Sass is a stylesheet language that compiles to CSS and is used by Ionic. Sass is like CSS, but with extra features such as variables, mixins, and loops. -
- -
- -

Scoped Encapsulation

- - A component that uses scoped encapsulation will automatically scope its CSS by appending each of the styles with a data attribute at run time. Overriding scoped selectors in CSS requires a higher specificity selector. Scoped components can also be styled using CSS Custom Properties. -
- -
- -

Shadow DOM

- - Shadow DOM is a native browser solution for DOM and style encapsulation of a component. It shields the component from its surrounding environment. To externally style internal elements of a Shadow DOM component you must use CSS Custom Properties or CSS Shadow Parts. -
- -
- -

Shim

- - A shim is a piece of code that normalizes an APIs across browsers. A shim can have it's own API that hides the browser specific implementation from the end user. -
- -
- -

Transpiler

- - Transpilation is the process of converting code from one language to another language prior to execution. Typically, a transpiler will convert a high-level language to another high-level language. The most common type of transpilation in Ionic Framework is converting ES2015/ES6 (TypeScript) to ES5 (traditional JavaScript). -
- -
- -

TypeScript

- - TypeScript is a superset of JavaScript, which means it gives you JavaScript, along with a number of extra features such as type declarations and interfaces. Although Ionic is built with TypeScript, using it to build an Ionic app is completely optional. -
- -
- -

Unit Tests

- - Unit Tests and unit testing are a way to test small pieces of code to see if they behave as expected. Unit testing frameworks include Jasmine, Mocha, QUnit, and many others. -
- -
- -

Webpack

- - Webpack bundles together JavaScript modules and other assets. It can be used to create single or multiple "chunks" that are only loaded when needed. Webpack can be used to take many files and dependencies and bundle them into one file, or other types. -
- -
- -

Web Standards

- - The World Wide Web Consortium (W3C) is the standards organization for the Web. Together, industry leaders and the public work together to develop web standards, which are a set of protocols, specifications, and technologies that define the Web Platform. -
- -
- -

Xcode

- - Xcode is an Apple IDE (integrated development environment) for software development on Apple operating systems (macOS, iOS, watchOS and tvOS), with extensions available for other languages and platforms. -
+### CommonJS {/* #commonjs */} + +[CommonJS](https://webpack.github.io/docs/commonjs.html) is a group that defines standard formats for JavaScript APIs. They have defined standards for JavaScript modules and packages. + +### Cordova {/* #cordova */} + +[Apache Cordova](https://cordova.apache.org) is an open source mobile application development framework that transforms standard HTML/CSS/JS into full-fledged native apps. It provides a JavaScript API for accessing native device functionality, such as the camera or accelerometer. Cordova contains the necessary build tools for packaging webapps for iOS, Android, and Windows Phone. + +### CORS {/* #cors */} + +[CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) (Cross-Origin Resource Sharing) is a mechanism for servers to control client access to web assets. Refer to the [CORS FAQs](../troubleshooting/cors) for more information. + +### CSS Variables {/* #css-variables */} + +You may be familiar with variables from Sass. [CSS Variables](https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care) enable the same functionality but are built into the browser. CSS Variables are available in all evergreen browsers. + +### Decorators {/* #decorators */} + +Decorators are expressions that return a function. They allow you to take an existing function, and extend its behavior. With TypeScript, you can also decorate classes and parameters. When you decorate a class, you are wrapping and extending the behavior of its constructor. In other words, the decorator will add some functionality when the constructor is called, and will then return the original constructor. When you decorate a parameter, you are wrapping the argument that gets passed in for that parameter. The decorator will add functionality when an argument is passed to the method, and then return the original argument. + +### ES5 {/* #es5 */} + +ES5 refers to EcmaScript 5th Edition. A simple way to put it is that ES5 is the version of JavaScript which developers are most familiar with today. + +### ES2015/ES6 {/* #es2015-es6 */} + +A wide range of new features were introduced in this version of JavaScript, including classes, modules, iterators, and promises. Evergreen browsers (Chrome, Safari, Firefox and Edge) have full support for ES6, but to use ES6 features in older browsers, tools such as [Babel](#babel) and [TypeScript](#typescript) have to [transpile](#transpiler) ES6 code down to ES5. + +### ES2016/ES7 {/* #es2016-es7 */} + +This version of JavaScript added a number of new features to the language, including Array.includes and the exponentiation operator. This version of JavaScript is fully supported by all evergreen browsers (Chrome, Safari, Firefox and Edge) + +### ES2017/ES8 {/* #es2017-es8 */} + +This version of JavaScript is the latest standard. It is currently in the final stage before becoming the new official standard. This spec includes Async/Await (already in all evergreen browsers) and shared memory/atomics. + +### Genymotion {/* #genymotion */} + +Genymotion is a third-party Android emulator. It is extremely fast, and is useful for quickly testing your app on Android. Check out our [resource section](../developing/tips#using-genymotion-android) on Genymotion for more info. + +### Git {/* #git */} + +[Git](https://git-scm.com/) is a distributed version control system for managing code. It allows development teams to contribute code to the same project without causing code conflicts. + +### Gulp {/* #gulp */} + +[Gulp](http://gulpjs.com/) is a tool for running tasks which can be used to build your app. Common build tasks include transpiling [ES6](#es2015-es6) to [ES5](#es5), turning [Sass](#sass) into CSS, minifying code, and concatenating files. + +### ES Modules {/* #es-modules */} + +[ES Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) brings the concept of modules natively to JavaScript. With modules, classes and variables are no longer in the global scope and have to be explicitly imported into your project to be used. This makes it much easier to understand where your code is coming from and increases modularity and compartmentalization of functionality. + +### Ionicons {/* #ionicons */} + +[Ionicons](https://ionic.io/ionicons/) is an open-source icon set used and created by Ionic. It includes 1:1 iOS and Material Design icons, as well as commonly used social/application icons. Ionicons is included by default in Ionic distributions, but they can also be used in any project. + +### Karma {/* #karma */} + +[Karma](https://karma-runner.github.io/latest/index.html) is a test runner that will run an app's test inside a real browser. It executes test cases, written in any testing framework, in a real browser. Karma was originally written for use with Angular 1. + +### Module {/* #module */} + +Modules in JavaScript are small, independent, and reusable pieces or code that are isolated from one another and the Global scope. + +### Monorepo {/* #monorepo */} + +A monorepo is a single git repository with multiple projects. Advantages include simpler organization, shared tooling and dependencies, and better collaboration with teammates. + +### Live Reload {/* #livereload */} + +**Live Reload** (or **live-reload**) is a tool that automatically reloads the browser or [Web View](../core-concepts/webview) when it detects changes in your app. In some cases, it can replace parts of your app without having to reload the entire window. Refer to the [Live Reload docs](../cli/livereload) for more information. + +### Node {/* #node */} + +[Node](https://nodejs.org/) is a runtime environment that allows JavaScript to be written on the server-side. In addition to being used for web services, node is often used to build developer tools, such as the [Ionic CLI](#cli). + +### npm {/* #npm */} + +[npm](https://www.npmjs.com/) is the package manager for [node](#node). It allows developers to install, share, and package node modules. Ionic can be installed with npm, along with a number of its dependencies. + +### Observable {/* #observable */} + +An observable is an object that emits events (or notifications). An observer is an object that listens for these events, and does something when an event is received. Together, they create a pattern that can be used for programming asynchronously. + +### Package ID {/* #package-id */} + +Referred to by Apple as Bundle ID and by Android as Application ID, the Package ID is used for identifying apps published to the App Store/Play Store. It is a string formatted in [reverse-DNS notation](https://en.wikipedia.org/wiki/Reverse_domain_name_notation). + +### Polyfill {/* #polyfill */} + +A [polyfill](https://remysharp.com/2010/10/08/what-is-a-polyfill) is a bit of code that adds functionality to the browser and normalizes browser differences. This is similar to a [shim](#shim), but where a shim has it's own API, a polyfill let's the expect API of the browser be used. + +### Protractor {/* #protractor */} + +[Protractor](https://angular.github.io/protractor/#/) is a testing framework written for and by the Angular team. Protractor can be used with test runners, like Karma, for end-to-end testing. Test runners allow you to quickly and programmatically verify code quality. + +### Sass {/* #sass */} + +Sass is a stylesheet language that compiles to CSS and is used by Ionic. Sass is like CSS, but with extra features such as [variables](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variables_), [mixins](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins), and [loops](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_10). + +### Scoped Encapsulation {/* #scoped */} + +A component that uses scoped encapsulation will automatically scope its CSS by appending each of the styles with a data attribute at run time. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. Scoped components can also be styled using [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables). + +### Shadow DOM {/* #shadow */} + +[Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom) is a native browser solution for DOM and style encapsulation of a component. It shields the component from its surrounding environment. To externally style internal elements of a Shadow DOM component you must use [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) or [CSS Shadow Parts](https://developer.mozilla.org/en-US/docs/Web/CSS/::part). + +### Shim {/* #shim */} + +A shim is a piece of code that normalizes an APIs across browsers. A shim can have it's own API that hides the browser specific implementation from the end user. + +### Transpiler {/* #transpiler */} + +Transpilation is the process of converting code from one language to another language prior to execution. Typically, a transpiler will convert a high-level language to another high-level language. The most common type of transpilation in Ionic Framework is converting [ES2015/ES6](#es2015-es6) ([TypeScript](#typescript)) to [ES5](#es5) (traditional JavaScript). + +### TypeScript {/* #typescript */} + +[TypeScript](http://www.typescriptlang.org) is a superset of JavaScript, which means it gives you JavaScript, along with a number of extra features such as [type declarations](http://www.typescriptlang.org/Handbook#basic-types) and [interfaces](http://www.typescriptlang.org/Handbook#interfaces). Although Ionic is built with TypeScript, using it to build an Ionic app is completely optional. + +### Unit Tests {/* #unit-tests */} + +Unit Tests and unit testing are a way to test small pieces of code to check if they behave as expected. Unit testing frameworks include Jasmine, Mocha, QUnit, and many others. + +### Webpack {/* #webpack */} + +[Webpack](https://webpack.github.io/) bundles together JavaScript modules and other assets. It can be used to create single or multiple "chunks" that are only loaded when needed. Webpack can be used to take many files and dependencies and bundle them into one file, or other types. + +### Web Standards {/* #web-standards */} + +The [World Wide Web Consortium](https://www.w3.org/) (W3C) is the standards organization for the Web. Together, industry leaders and the public work together to develop [web standards](https://www.w3.org/standards/), which are a set of protocols, specifications, and technologies that define the Web Platform. + +### Xcode {/* #xcode */} + +[Xcode](https://developer.apple.com/xcode/) is an Apple IDE (integrated development environment) for software development on Apple operating systems (macOS, iOS, watchOS and tvOS), with extensions available for other languages and platforms.
diff --git a/versioned_docs/version-v8/angular/pwa.md b/versioned_docs/version-v8/angular/pwa.md index 47666c7030..370fc31962 100644 --- a/versioned_docs/version-v8/angular/pwa.md +++ b/versioned_docs/version-v8/angular/pwa.md @@ -13,7 +13,7 @@ sidebar_label: Progressive Web Apps ## Making your Angular app a PWA -The two main requirements of a PWA are a Service Worker and a Web Manifest. While it's possible to add both of these to an app manually, the Angular team has an `@angular/pwa` package that can be used to automate this. +The two main requirements of a PWA are a [Service Worker](https://developers.google.com/web/fundamentals/primers/service-workers/) and a [Web Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/). While it's possible to add both of these to an app manually, the Angular team has an `@angular/pwa` package that can be used to automate this. The `@angular/pwa` package will automatically add a service worker and an app manifest to the app. To add this package to the app, run: diff --git a/versioned_docs/version-v8/angular/slides.md b/versioned_docs/version-v8/angular/slides.md index 5ce50aa09d..45e10784df 100644 --- a/versioned_docs/version-v8/angular/slides.md +++ b/versioned_docs/version-v8/angular/slides.md @@ -17,7 +17,7 @@ import TabItem from '@theme/TabItem'; `ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below. ::: -We recommend Swiper.js if you need a modern touch slider component. Swiper 9 introduced Swiper Element as a replacement for its Angular component, so this guide will go over how to get Swiper Element set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to Swiper Element. +We recommend [Swiper.js](http://swiperjs.com/) if you need a modern touch slider component. Swiper 9 introduced [Swiper Element](https://swiperjs.com/element) as a replacement for its Angular component, so this guide will go over how to get Swiper Element set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to Swiper Element. ## Getting Started @@ -71,7 +71,7 @@ From there, we just have to replace `ion-slides` elements with `swiper-container By default, make sure you import the `register` function from `swiper/element/bundle`. This uses the bundled version of Swiper, which automatically includes all modules and stylesheets needed to run Swiper's various features. -If you would like to use the Core version instead, which does not include additional modules automatically, refer to Swiper's core version and modules documentation. The rest of this migration guide will assume you are using the bundled version. +If you would like to use the Core version instead, which does not include additional modules automatically, refer to [Swiper's core version and modules documentation](https://swiperjs.com/element#core-version-and-modules). The rest of this migration guide will assume you are using the bundled version. ## Swiping with Style @@ -93,7 +93,7 @@ If you were using the CSS custom properties found on `ion-slides`, below is a li | `--scroll-bar-background` | `--swiper-scrollbar-bg-color` | | `--scroll-bar-background-active` | `--swiper-scrollbar-drag-bg-color` | -For additional custom CSS, because Swiper Element uses Shadow DOM encapsulation, styles will need to be injected into the Shadow DOM scope. Refer to Swiper's guide on injecting styles for instructions. +For additional custom CSS, because Swiper Element uses Shadow DOM encapsulation, styles will need to be injected into the Shadow DOM scope. Refer to [Swiper's guide on injecting styles](https://swiperjs.com/element#injecting-styles) for instructions. ### Additional `ion-slides` Styles @@ -227,7 +227,7 @@ Below is a full list of property changes when going from `ion-slides` to Swiper | pager | Use the `pagination` property instead. | :::note -All properties available in Swiper Element can be found in the Swiper API parameters documentation. +All properties available in Swiper Element can be found in the [Swiper API parameters documentation](https://swiperjs.com/swiper-api#parameters). ::: ## Events @@ -276,7 +276,7 @@ Below is a full list of event name changes when going from `ion-slides` to Swipe | `ionSlidesDidLoad` | `swiperinit` | :::note -All events available in Swiper Element can be found in the Swiper API events documentation and should be lowercased and prefixed with the word `swiper`. +All events available in Swiper Element can be found in the [Swiper API events documentation](https://swiperjs.com/swiper-api#events) and should be lowercased and prefixed with the word `swiper`. ::: ## Methods @@ -328,7 +328,7 @@ Below is a full list of method changes when going from `ion-slides` to Swiper El | `stopAutoplay()` | Use the `autoplay` property instead. | :::note -All methods and properties available on the Swiper instance can be found in the Swiper API methods and properties documentation. +All methods and properties available on the Swiper instance can be found in the [Swiper API methods and properties documentation](https://swiperjs.com/swiper-api#methods-and-properties). ::: ## Effects @@ -340,12 +340,12 @@ Effects such as Cube or Fade can be used in Swiper Element with no additional im ``` :::note -For more information on effects in Swiper, please refer to the Swiper API fade effect documentation. +For more information on effects in Swiper, please refer to the [Swiper API fade effect documentation](https://swiperjs.com/swiper-api#fade-effect). ::: ## Wrap Up -Now that you have Swiper installed, there is a whole set of new Swiper features for you to enjoy. We recommend starting with the Swiper Element documentation and then referencing the Swiper API docs. +Now that you have Swiper installed, there is a whole set of new Swiper features for you to enjoy. We recommend starting with the [Swiper Element documentation](https://swiperjs.com/element) and then referencing [the Swiper API docs](https://swiperjs.com/swiper-api). ## FAQ @@ -359,8 +359,8 @@ If you are running into issues with the migration, please create a post on the [ ### Where do I file bug reports? -Before opening an issue, please consider creating a post on the Swiper Discussion Board or the Ionic Forum to check if your issue can be resolved by the community. +Before opening an issue, please consider creating a post on the [Swiper Discussion Board](https://github.com/nolimits4web/swiper/discussions) or the [Ionic Forum](https://forum.ionicframework.com) to check if your issue can be resolved by the community. -If you are running into problems with the Swiper library, new bugs should be filed on the Swiper issue tracker. +If you are running into problems with the Swiper library, new bugs should be filed on the [Swiper issue tracker](https://github.com/nolimits4web/swiper/issues). -If you are running into problems with the `IonicSlides` module, new bugs should be filed on the Ionic Framework issue tracker. +If you are running into problems with the `IonicSlides` module, new bugs should be filed on the [Ionic Framework issue tracker](https://github.com/ionic-team/ionic-framework/issues). diff --git a/versioned_docs/version-v8/angular/testing.md b/versioned_docs/version-v8/angular/testing.md index e11d91d4b0..7fd3668a46 100644 --- a/versioned_docs/version-v8/angular/testing.md +++ b/versioned_docs/version-v8/angular/testing.md @@ -10,7 +10,7 @@ title: Testing /> -When an `@ionic/angular` application is generated using the Ionic CLI, it is automatically set up for unit testing and end-to-end testing of the application. This is the same setup that is used by the Angular CLI. Refer to the Angular Testing Guide for detailed information on testing Angular applications. +When an `@ionic/angular` application is generated using the Ionic CLI, it is automatically set up for unit testing and end-to-end testing of the application. This is the same setup that is used by the Angular CLI. Refer to the [Angular Testing Guide](https://angular.io/guide/testing) for detailed information on testing Angular applications. ## Testing Principles @@ -76,7 +76,7 @@ The outer `describe` call states that the `Calculation` service is being tested, ### Pages and Components -Pages are just Angular components. Thus, pages and components are both tested using Angular's Component Testing guidelines. +Pages are just Angular components. Thus, pages and components are both tested using [Angular's Component Testing](https://angular.io/guide/testing#component-test-basics) guidelines. Since pages and components contain both TypeScript code and HTML template markup it is possible to perform both component class testing and component DOM testing. When a page is created, the template test that is generated looks like this: @@ -208,7 +208,7 @@ describe('PayrolService', () => { #### Testing HTTP Data Services -Most services that perform HTTP operations will use Angular's HttpClient service in order to perform those operations. For such tests, it is suggested to use Angular's `HttpClientTestingModule`. For detailed documentation of this module, please refer to Angular's Angular's Testing HTTP requests guide. +Most services that perform HTTP operations will use Angular's HttpClient service in order to perform those operations. For such tests, it is suggested to use Angular's `HttpClientTestingModule`. For detailed documentation of this module, please refer to Angular's [Angular's Testing HTTP requests](https://angular.io/guide/http#testing-http-requests) guide. This basic setup for such a test looks like this: diff --git a/versioned_docs/version-v8/api/icon.md b/versioned_docs/version-v8/api/icon.md index 2dd1f5dd54..f7baffc160 100644 --- a/versioned_docs/version-v8/api/icon.md +++ b/versioned_docs/version-v8/api/icon.md @@ -10,9 +10,9 @@ title: 'ion-icon' /> -Icon is a simple component made available through the Ionicons library, which comes pre-packaged by default with all Ionic Framework applications. It can be used to display any icon from the Ionicons set, or a custom SVG. It also has support for styling such as size and color. +Icon is a simple component made available through the [Ionicons](https://ionic.io/ionicons) library, which comes pre-packaged by default with all Ionic Framework applications. It can be used to display any icon from the Ionicons set, or a custom SVG. It also has support for styling such as size and color. -For a list of all available icons, refer to ionic.io/ionicons. For more information including styling and custom SVG usage, refer to the Usage page. +For a list of all available icons, refer to [ionic.io/ionicons](https://ionic.io/ionicons). For more information including styling and custom SVG usage, refer to [the Usage page](https://ionic.io/ionicons/usage). ## Basic Usage diff --git a/versioned_docs/version-v8/api/item.md b/versioned_docs/version-v8/api/item.md index 64d74f83f1..31910de9ff 100644 --- a/versioned_docs/version-v8/api/item.md +++ b/versioned_docs/version-v8/api/item.md @@ -158,7 +158,7 @@ import Metadata from '@site/static/usage/v8/item/content-types/metadata/index.md Actions are interactive elements that do something when you activate them. An item can have multiple actions displayed on a line. However, developers should ensure that each action's tap target is large enough to be usable. -Developers should avoid creating nested interactives which can break the user experience with screen readers. For example, developers should avoid adding a button inside the main content of the Item if the `button` property is set to `true`. +Developers should avoid creating [nested interactives](https://dequeuniversity.com/rules/axe/4.4/nested-interactive) which can break the user experience with screen readers. For example, developers should avoid adding a button inside the main content of the Item if the `button` property is set to `true`. GitHub repository. +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](https://github.com/ionic-team/ionic-cli). ## Troubleshooting diff --git a/versioned_docs/version-v8/contributing/coc.md b/versioned_docs/version-v8/contributing/coc.md index ef45a1353e..cf7d61e3b1 100644 --- a/versioned_docs/version-v8/contributing/coc.md +++ b/versioned_docs/version-v8/contributing/coc.md @@ -10,4 +10,4 @@ If any member of the community violates this code of conduct, the maintainers of If you are subject to or witness unacceptable behavior, or have any other concerns, please email us at devrel@ionic.io. -Please review Ionic's full code of conduct. +Please review [Ionic's full code of conduct](https://ionic.io/code-of-conduct). diff --git a/versioned_docs/version-v8/core-concepts/cross-platform.md b/versioned_docs/version-v8/core-concepts/cross-platform.md index c5abac8a2e..7b49f3b00a 100644 --- a/versioned_docs/version-v8/core-concepts/cross-platform.md +++ b/versioned_docs/version-v8/core-concepts/cross-platform.md @@ -157,7 +157,7 @@ Most apps at some point will need to store some sort of data locally. Whether it ### Ionic Storage -In this case, Ionic’s Storage library is a perfect candidate for the multi-environment use case. Built on top of the well tested LocalForage library, Ionic’s storage class provides an adaptable storage mechanism that will pick the best storage solution for the current run time. +In this case, [Ionic’s Storage library](https://github.com/ionic-team/ionic-storage) is a perfect candidate for the multi-environment use case. Built on top of the well tested LocalForage library, Ionic’s storage class provides an adaptable storage mechanism that will pick the best storage solution for the current run time. Currently this means it will run through SQLite for native, IndexedDB (if available), WebSql, or Local Storage. By handling all of this, it allows writing to storage using a stable API. diff --git a/versioned_docs/version-v8/core-concepts/fundamentals.md b/versioned_docs/version-v8/core-concepts/fundamentals.md index 4f26b030c2..f8fd446013 100644 --- a/versioned_docs/version-v8/core-concepts/fundamentals.md +++ b/versioned_docs/version-v8/core-concepts/fundamentals.md @@ -19,7 +19,7 @@ Ionic Framework is a library of UI Components, which are reusable elements that ## 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. +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](https://www.apple.com/ios). Similarly, Android devices use Google's design language called [Material Design](https://material.io/guidelines/). 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). @@ -32,19 +32,19 @@ In contrast, mobile apps often utilize parallel, "non-linear" navigation. For ex Ionic apps embrace this mobile navigation approach, supporting parallel navigation histories that can also be nested, all while maintaining the familiar browser-style navigation concepts web developers are familiar with. -For apps that are built with Angular and `@ionic/angular`, we recommend using the Angular Router which comes out of the box for every new Ionic 4 Angular app. +For apps that are built with Angular and `@ionic/angular`, we recommend using the [Angular Router](https://angular.io/guide/router) which comes out of the box for every new Ionic 4 Angular app. ## Native Access 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](https://www.apple.com/ios/app-store/) and [Play Store](https://play.google.com/). 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. -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. +Projects such as [Capacitor](https://capacitorjs.com/) and [Cordova](https://cordova.apache.org/) 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. ## Theming -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.md). +At the core, Ionic Framework is built using [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) which allows us to take advantage of the flexibility that [CSS properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_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). ## Events diff --git a/versioned_docs/version-v8/core-concepts/webview.md b/versioned_docs/version-v8/core-concepts/webview.md index eb85427e96..f535acefe2 100644 --- a/versioned_docs/version-v8/core-concepts/webview.md +++ b/versioned_docs/version-v8/core-concepts/webview.md @@ -14,13 +14,13 @@ Web Views power web apps on native devices. The Web View is automatically provided for apps integrated with [Capacitor](../reference/glossary.md#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.md#cordova), Ionic maintains a [Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview). 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. -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. +Modern Web Views offer many built-in [HTML5 APIs](https://whatwebcando.today) 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. ![Diagram illustrating the architecture of a Web View in Ionic apps, showing the bridge between native app components and web components.](/img/building/webview-architecture.png 'Web View Architecture Diagram') @@ -46,5 +46,5 @@ For Cordova apps, the [Ionic Web View plugin](https://github.com/ionic-team/cord ### Implementations -- **iOS**: WKWebView -- **Android**: WebView for Android +- **iOS**: [WKWebView](https://developer.apple.com/documentation/webkit/wkwebview) +- **Android**: [WebView for Android](https://developer.android.com/reference/android/webkit/WebView) diff --git a/versioned_docs/version-v8/core-concepts/what-are-progressive-web-apps.md b/versioned_docs/version-v8/core-concepts/what-are-progressive-web-apps.md index 29ec43b794..f9643cb087 100644 --- a/versioned_docs/version-v8/core-concepts/what-are-progressive-web-apps.md +++ b/versioned_docs/version-v8/core-concepts/what-are-progressive-web-apps.md @@ -47,11 +47,7 @@ To be considered a Progressive Web App, your app must be: {/* cspell:disable */} - - - Addy Osmani: Progressive web apps - - +[Addy Osmani: Progressive web apps](https://addyosmani.com/blog/getting-started-with-progressive-web-apps/) {/* cspell:enable */} @@ -61,10 +57,10 @@ There is a lot here, but it boils down to a few points for Ionic apps. Apps should be able to work offline. Whether that be displaying a proper "offline" message or caching app data for display purpose. -#### Web App Manifest +#### [Web App Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest) An app manifest file should describe the resources your app will need. This includes your app's displayed name, icons, as well as splash screen. If you link to the manifest file in your index.html, browsers will detect that and load the resources for you. -#### Service Worker +#### [Service Worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) Service worker could be mentioned in Offline Support, but it really deserves its own section. Service worker provides a programmatic way to cache app resources. Be it JavaScript files or JSON data from a HTTP request. The programmatic API allows developers to decide how to handle caching and provides a much more flexible experience than other options. diff --git a/versioned_docs/version-v8/deployment/app-store.md b/versioned_docs/version-v8/deployment/app-store.md index db4ec2c21d..b4c3120479 100644 --- a/versioned_docs/version-v8/deployment/app-store.md +++ b/versioned_docs/version-v8/deployment/app-store.md @@ -114,7 +114,7 @@ If the upload is successful the app should be listed under 'Activities' on [iTun ## Updating an app As an app grows, it will need to be updated with new features and fixes. -An app can be updated by either submitting a new version to Apple, or by using a live update service like Appflow's live update feature. +An app can be updated by either submitting a new version to Apple, or by using a live update service like Appflow's [live update feature](https://ionic.io/docs/appflow/deploy/intro). With Live Updates, app changes can be pushed in realtime directly to users from the Appflow dashboard, without waiting for App Store approvals. diff --git a/versioned_docs/version-v8/deployment/play-store.mdx b/versioned_docs/version-v8/deployment/play-store.mdx index 903826d682..e87d0ce29d 100644 --- a/versioned_docs/version-v8/deployment/play-store.mdx +++ b/versioned_docs/version-v8/deployment/play-store.mdx @@ -147,7 +147,7 @@ When ready, upload the signed release AAB/APK that was generated and publish the ## Updating an app -As an app evolves, it will need to be updated with new features and fixes. An app can be updated by either submitting a new version to the Google Play Store, or by using a live update service like Appflow's Live Update feature. Using Live Updates, changes can be pushed directly to users from the Appflow dashboard, without submitting changes to the Play Store. Learn more about Live Updates. +As an app evolves, it will need to be updated with new features and fixes. An app can be updated by either submitting a new version to the Google Play Store, or by using a live update service like Appflow's Live Update feature. Using Live Updates, changes can be pushed directly to users from the Appflow dashboard, without submitting changes to the Play Store. Learn more about [Live Updates](https://ionic.io/docs/appflow/deploy/intro). diff --git a/versioned_docs/version-v8/deployment/progressive-web-app.md b/versioned_docs/version-v8/deployment/progressive-web-app.md index ccaab935cf..1fa0dbebd4 100644 --- a/versioned_docs/version-v8/deployment/progressive-web-app.md +++ b/versioned_docs/version-v8/deployment/progressive-web-app.md @@ -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](https://ionicframework.com/pwa) or the [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.md) 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/versioned_docs/version-v8/developing/keyboard.md b/versioned_docs/version-v8/developing/keyboard.md index 03d1346956..72b0632487 100644 --- a/versioned_docs/version-v8/developing/keyboard.md +++ b/versioned_docs/version-v8/developing/keyboard.md @@ -23,7 +23,7 @@ Since `inputmode` is a global attribute, it can be used on Ionic components such Inputs that _require_ a certain data type should use the `type` attribute instead. For example, inputs that require an email should use `type="email"` rather than specifying an `inputmode.` This is because the data that will be entered is always going to be in the form of an email. On the other hand, if the input accepts an email or a username, using `inputmode=”email”` is appropriate because the data being entered is not always going to be an email address. -For a list of accepted values, refer to the inputmode Documentation. +For a list of accepted values, refer to the [inputmode Documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode). ### Usage @@ -41,7 +41,7 @@ The `enterkeyhint` attribute allows developers to specify what type of action la Since `enterkeyhint` is a global attribute, it can be used on Ionic components such as `ion-input` and `ion-textarea` in addition to regular input elements. -For a list of accepted values, refer to the enterkeyhint Standard. +For a list of accepted values, refer to the [enterkeyhint Standard](https://html.spec.whatwg.org/dev/interaction.html#input-modalities:-the-enterkeyhint-attribute). ### Usage @@ -59,7 +59,7 @@ By default the keyboard theme is determined by the OS. For example, if dark mode When running an app in a mobile web browser or as a PWA there is no way to force the keyboard to appear with a certain theme. -When running an app in Capacitor or Cordova, it is possible to force the keyboard to appear with a certain theme. For more information regarding this configuration, refer to the Capacitor Keyboard Documentation. +When running an app in Capacitor or Cordova, it is possible to force the keyboard to appear with a certain theme. For more information regarding this configuration, refer to the [Capacitor Keyboard Documentation](https://capacitorjs.com/docs/apis/keyboard#keyboard-configuration-ios-only-). ## Hiding the Accessory Bar @@ -67,11 +67,11 @@ When running any kind of web based application, iOS will show an accessory bar a When running an app in a mobile web browser or as a PWA there is no way to hide the accessory bar. -When running an app in Capacitor or Cordova, it is possible to hide the accessory bar. For more information regarding this configuration, refer to the Capacitor Keyboard Documentation. +When running an app in Capacitor or Cordova, it is possible to hide the accessory bar. For more information regarding this configuration, refer to the [Capacitor Keyboard Documentation](https://capacitorjs.com/docs/apis/keyboard#keyboard-configuration-ios-only-). ## Keyboard Lifecycle Events -Detecting the presence of an on-screen keyboard is useful for adjusting the positioning of an input that would otherwise be hidden by the keyboard. For Capacitor and Cordova apps, developers typically rely on native keyboard plugins to listen for the keyboard lifecycle events. For apps running in a mobile browser or as a PWA, developers can use the Visual Viewport API where supported. Ionic Framework wraps both of these approaches and emits `ionKeyboardDidShow` and `ionKeyboardDidHide` events on the `window`. The event payload for `ionKeyboardDidShow` contains an approximation of the keyboard height in pixels. +Detecting the presence of an on-screen keyboard is useful for adjusting the positioning of an input that would otherwise be hidden by the keyboard. For Capacitor and Cordova apps, developers typically rely on native keyboard plugins to listen for the keyboard lifecycle events. For apps running in a mobile browser or as a PWA, developers can use the [Visual Viewport API](https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API) where supported. Ionic Framework wraps both of these approaches and emits `ionKeyboardDidShow` and `ionKeyboardDidHide` events on the `window`. The event payload for `ionKeyboardDidShow` contains an approximation of the keyboard height in pixels. ### Usage diff --git a/versioned_docs/version-v8/index.md b/versioned_docs/version-v8/index.md index 556dc9af14..5c408d5ee3 100644 --- a/versioned_docs/version-v8/index.md +++ b/versioned_docs/version-v8/index.md @@ -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/overview.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.md), [React](react/overview.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](https://youtu.be/p3AN3igqiRc) to walk you through the basics. ### One codebase, running everywhere @@ -97,11 +97,11 @@ Ionic is built with simplicity in mind, so that creating apps is enjoyable, easy ## Framework Compatibility -While past releases of Ionic were tightly coupled to Angular, version 4.x of the framework was re-engineered to work as a standalone Web Component library, with integrations for the latest JavaScript frameworks, like Angular. Ionic can be used in most frontend frameworks with success, including React and Vue, though some frameworks need a shim for full Web Component support. +While past releases of Ionic were tightly coupled to Angular, version 4.x of the framework was re-engineered to work as a standalone [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) library, with integrations for the latest JavaScript frameworks, like Angular. Ionic can be used in most frontend frameworks with success, including React and Vue, though some frameworks need a shim for full Web Component support. ### JavaScript -One of the main goals with moving Ionic to Web Components was to remove any hard requirement on a single framework to host the components. This made it possible for the core components to work standalone in a web page with just a script tag. While working with frameworks can be great for larger teams and larger apps, it is now possible to use Ionic as a standalone library in a single page even in a context like WordPress. +One of the main goals with moving Ionic to [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) was to remove any hard requirement on a single framework to host the components. This made it possible for the core components to work standalone in a web page with just a script tag. While working with frameworks can be great for larger teams and larger apps, it is now possible to use Ionic as a standalone library in a single page even in a context like WordPress. ### Angular @@ -125,11 +125,11 @@ The official [Ionic CLI](cli.md), or Command Line Interface, is a tool that quic ## Appflow -To help build, deploy, and manage Ionic apps throughout their lifecycle, we offer a commercial service for production apps called Appflow, which is separate from the open source Framework. +To help build, deploy, and manage Ionic apps throughout their lifecycle, we offer a commercial service for production apps called [Appflow](https://ionic.io/appflow), which is separate from the open source Framework. Appflow helps developers and teams compile native app builds and deploy live code updates to Ionic apps from a centralized dashboard. Optional paid upgrades are available for more advanced capabilities like publishing directly to app stores, workflow automation, single sign-on (SSO) and access to connected services and integrations. -Appflow requires an Ionic Account and comes with a free “Hobby” plan for those interested in playing around with some of its features. +Appflow requires an [Ionic Account](https://dashboard.ionicframework.com/signup) and comes with a free “Hobby” plan for those interested in playing around with some of its features. ## Ecosystem @@ -142,13 +142,13 @@ There are millions of Ionic developers in over 200 countries worldwide. Here are {/* Keep the prettier-ignore below. Without it, Prettier reformats these list items and the page stops building. These links stay as HTML because target="_blank" opens them in a new tab, which a markdown link cannot do. */} {/* 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! -- Content authoring: Write a technical blog or share your story with the Ionic community. +- [Forum:](https://forum.ionicframework.com/) A great place for asking questions and sharing ideas. +- [Twitter:](https://twitter.com/ionicframework) Where we post updates and share content from the Ionic community. +- [GitHub:](https://github.com/ionic-team/ionic) For reporting bugs or requesting new features, create an issue here. PRs welcome! +- [Content authoring:](https://ionicframework.com/contributors) Write a technical blog or share your story with the Ionic community. ## License -The Ionic UI Toolkit is a free and open source project, released under the permissible MIT license. This means it can be used in personal or commercial projects for free. MIT is the same license used by such popular projects as jQuery and Ruby on Rails. +The Ionic UI Toolkit is a free and open source project, released under the permissible [MIT license](https://opensource.org/licenses/MIT). This means it can be used in personal or commercial projects for free. MIT is the same license used by such popular projects as jQuery and Ruby on Rails. -This documentation content (found in the ionic-docs repo) is licensed under the Apache 2 license. +This documentation content (found in the [ionic-docs](https://github.com/ionic-team/ionic-docs) repo) is licensed under the [Apache 2 license](https://www.apache.org/licenses/LICENSE-2.0). diff --git a/versioned_docs/version-v8/intro/environment.md b/versioned_docs/version-v8/intro/environment.md index 9cf3bda222..ceac19f6b8 100644 --- a/versioned_docs/version-v8/intro/environment.md +++ b/versioned_docs/version-v8/intro/environment.md @@ -22,10 +22,10 @@ Much of Ionic development requires familiarity with the command line. If you're In general, we recommend using the built-in terminals. Many third-party terminals work well with Ionic, but may not be supported. -- For Windows, **Command Prompt** and **PowerShell** are supported. WSL is known to work with Ionic, but may not be supported. +- For Windows, **Command Prompt** and **PowerShell** are supported. [WSL](https://docs.microsoft.com/en-us/windows/wsl/faq) is known to work with Ionic, but may not be supported. - For macOS, the built-in **Terminal** app is supported. -Git Bash (from git-scm.com) does not support TTY interactivity and is **not supported** by Ionic. +Git Bash (from [git-scm.com](https://git-scm.com)) does not support TTY interactivity and is **not supported** by Ionic. ## Node & npm diff --git a/versioned_docs/version-v8/react/pwa.md b/versioned_docs/version-v8/react/pwa.md index 6e4b43db7f..687bb18e3c 100644 --- a/versioned_docs/version-v8/react/pwa.md +++ b/versioned_docs/version-v8/react/pwa.md @@ -13,7 +13,7 @@ sidebar_label: Progressive Web Apps ## Making your React app a PWA with Vite -The two main requirements of a PWA are a Service Worker and a Web Application Manifest. While it's possible to add both of these to an app manually, we recommend using the [Vite PWA Plugin](https://vite-pwa-org.netlify.app/) instead. +The two main requirements of a PWA are a [Service Worker](https://developers.google.com/web/fundamentals/primers/service-workers/) and a [Web Application Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/). While it's possible to add both of these to an app manually, we recommend using the [Vite PWA Plugin](https://vite-pwa-org.netlify.app/) instead. To get started, install the `vite-plugin-pwa` package: @@ -45,7 +45,7 @@ Refer to the [Vite PWA "Deploy" Guide](https://vite-pwa-org.netlify.app/deployme As of Ionic CLI v7, Ionic React starter apps ship with Vite instead of Create React App. Refer to [Making your React app a PWA with Vite](#making-your-react-app-a-pwa-with-vite) for Vite instructions. ::: -The two main requirements of a PWA are a Service Worker and a Web Application Manifest. While it's possible to add both of these to an app manually, a base project from Create React App (CRA) and the Ionic CLI provides this already. +The two main requirements of a PWA are a [Service Worker](https://developers.google.com/web/fundamentals/primers/service-workers/) and a [Web Application Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/). While it's possible to add both of these to an app manually, a base project from Create React App (CRA) and the Ionic CLI provides this already. In the `index.ts` for your app, there is a call to a `serviceWorker.unregister()` function. The base that CRA provides has service workers as an opt-in feature, so it must be enabled. To enable, call `serviceWorker.register()`. diff --git a/versioned_docs/version-v8/react/slides.md b/versioned_docs/version-v8/react/slides.md index 6a3ab427c7..2c6c29f07b 100644 --- a/versioned_docs/version-v8/react/slides.md +++ b/versioned_docs/version-v8/react/slides.md @@ -16,10 +16,10 @@ title: Migrating From IonSlides to Swiper.js ::: -We recommend Swiper.js if you need a modern touch slider component. This guide will go over how to get Swiper for React set up in your Ionic Framework application. It will also go over any migration information you may need to move from `IonSlides` to the official Swiper React integration. +We recommend [Swiper.js](http://swiperjs.com/) if you need a modern touch slider component. This guide will go over how to get Swiper for React set up in your Ionic Framework application. It will also go over any migration information you may need to move from `IonSlides` to the official Swiper React integration. :::note -Swiper's React component is set to be removed in a future release of Swiper, with Swiper Element as the replacement. However, this guide shows how to migrate to the React component because it provides the most stable experience at the time of writing. Notably, React does not have strong support for Web Components yet. +Swiper's React component is set to be removed in a future release of Swiper, with [Swiper Element](https://swiperjs.com/element) as the replacement. However, this guide shows how to migrate to the React component because it provides the most stable experience at the time of writing. Notably, React does not have strong support for Web Components yet. Using Swiper's React component is **not** required to use Swiper.js with Ionic Framework. ::: @@ -257,7 +257,7 @@ export default Home; ``` :::note -Refer to Swiper's React usage documentation for a full list of modules. +Refer to [Swiper's React usage documentation](https://swiperjs.com/react#usage) for a full list of modules. ::: ## The IonicSlides Module @@ -356,7 +356,7 @@ Below is a full list of property changes when going from `IonSlides` to Swiper R | scrollbar | You can continue to use the `scrollbar` property, just be sure to install the Scrollbar module first. | :::note -All properties available in Swiper React can be found in the Swiper React props documentation. +All properties available in Swiper React can be found in the [Swiper React props documentation](https://swiperjs.com/react#swiper-props). ::: ## Events @@ -413,7 +413,7 @@ Below is a full list of event name changes when going from `IonSlides` to Swiper | `onIonSlidesDidLoad` | `onInit` | :::note -All events available in Swiper can be found in the Swiper API events documentation. +All events available in Swiper can be found in the [Swiper API events documentation](https://swiperjs.com/swiper-api#events). ::: ## Methods @@ -545,12 +545,12 @@ export default Home; ``` :::note -For more information on effects in Swiper, please refer to the Swiper React effects documentation. +For more information on effects in Swiper, please refer to the [Swiper React effects documentation](https://swiperjs.com/react#effects). ::: ## Wrap Up -Now that you have Swiper installed, there is a whole set of new Swiper features for you to enjoy. We recommend starting with the Swiper React Introduction and then referencing the Swiper API docs. +Now that you have Swiper installed, there is a whole set of new Swiper features for you to enjoy. We recommend starting with the [Swiper React Introduction](https://swiperjs.com/react) and then referencing [the Swiper API docs](https://swiperjs.com/swiper-api). ## FAQ @@ -564,8 +564,8 @@ If you are running into issues with the migration, please create a post on the [ ### Where do I file bug reports? -Before opening an issue, please consider creating a post on the Swiper Discussion Board or the Ionic Forum to check if your issue can be resolved by the community. +Before opening an issue, please consider creating a post on the [Swiper Discussion Board](https://github.com/nolimits4web/swiper/discussions) or the [Ionic Forum](https://forum.ionicframework.com) to check if your issue can be resolved by the community. -If you are running into problems with the Swiper library, new bugs should be filed on the Swiper issue tracker. +If you are running into problems with the Swiper library, new bugs should be filed on the [Swiper issue tracker](https://github.com/nolimits4web/swiper/issues). -If you are running into problems with the `IonicSlides` module, new bugs should be filed on the Ionic Framework issue tracker. +If you are running into problems with the `IonicSlides` module, new bugs should be filed on the [Ionic Framework issue tracker](https://github.com/ionic-team/ionic-framework/issues). diff --git a/versioned_docs/version-v8/reference/glossary.md b/versioned_docs/version-v8/reference/glossary.md index a9633feee5..6df9ec4309 100644 --- a/versioned_docs/version-v8/reference/glossary.md +++ b/versioned_docs/version-v8/reference/glossary.md @@ -12,386 +12,176 @@ title: Glossary
-
- -

Accessibility

- - Accessibility (a11y) is the practice of enabling as many people as possible to use the content, even if people have limited abilities. This include people with disabilities, those using mobile devices, and those with slow network connections. Content should be developed to be as accessible as technology allows. -
- -
- -

Android SDK

- - The Android SDK is a software development kit built for developers building for Google's Android Platform. It includes tools for building, testing, and debugging Android applications. -
- -
- -

Android Studio

- - Android Studio is the official - Integrated Development Environment (IDE) for Native Android app development. -
- -
- -

Autoprefixer

- - Autoprefixer is a tool that adds - vendor-specific-prefixes to hand-written Sass/CSS code. This ensures that standardized CSS rules - you write will be applied across all supporting browsers. For example, instead of having to know every flexbox - syntax used by various browsers, autoprefixer allows you to just write display: flex; and it'll - automatically plug in the correct CSS. -
- -
- -

Bundling

- - Bundling is the process of taking an app's dependencies (code you've written plus any npm modules installed) and - compiling/transpiling them down to one single file. -
- -
- -

Capacitor

- - Capacitor is an open source cross-platform app runtime - that allows web-based apps to run natively on iOS, Android, Electron, and the web. It's helpful to refer to these - apps "Native Progressive Web Apps" and they represent the next evolution beyond the traditional Hybrid app mentality. - Capacitor was created and is actively developed/supported by Ionic, the company. -
+### Accessibility {/* #a11y */} + +[Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility) (a11y) is the practice of enabling as many people as possible to use the content, even if people have limited abilities. This includes people with disabilities, those using mobile devices, and those with slow network connections. Content should be developed to be as accessible as technology allows. + +### Android SDK {/* #android-sdk */} + +The [Android SDK](http://developer.android.com/sdk/index.html) is a software development kit built for developers building for Google's Android Platform. It includes tools for building, testing, and debugging Android applications. + +### Android Studio {/* #android-studio */} + +[Android Studio](https://developer.android.com/studio/) is the official Integrated Development Environment (IDE) for Native Android app development. + +### Autoprefixer {/* #autoprefixer */} + +[Autoprefixer](https://github.com/postcss/autoprefixer) is a tool that adds vendor-specific-prefixes to hand-written Sass/CSS code. This ensures that standardized CSS rules you write will be applied across all supporting browsers. For example, instead of having to know every flexbox syntax used by various browsers, autoprefixer allows you to just write display: flex; and it'll automatically plug in the correct CSS. + +### Babel {/* #babel */} + +[Babel](https://babeljs.io) is a [transpiler](#transpiler) that converts modern JavaScript into a backwards-compatible version, so that syntax such as [ES2015/ES6](#es2015-es6) runs in browsers that only support [ES5](#es5). It is commonly paired with a build tool so the conversion happens automatically as part of [bundling](#bundling). + +### Bundling {/* #bundling */} + +Bundling is the process of taking an app's dependencies (code you've written plus any npm modules installed) and compiling/transpiling them down to one single file. + +### Capacitor {/* #capacitor */} + +[Capacitor](https://capacitorjs.com/) is an open source cross-platform app runtime that allows web-based apps to run natively on iOS, Android, Electron, and the web. It's helpful to refer to these apps "Native Progressive Web Apps" and they represent the next evolution beyond the traditional Hybrid app mentality. Capacitor was created and is actively developed/supported by Ionic, the company. {/* cspell:disable */} -
- -

CLI

- - A CLI, or Command-Line Interface, is a text-based interface for - interacting with a program. The common command-line app for a Mac user is the Terminal app, and Windows users often - use Command Prompt. The Ionic community often uses this term to refer to - Ionic's CLI. Ionic's CLI can be used for a number of things, such - as creating production builds of an app, running the development server, and accessing - Ionic commercial services. -
+### CLI {/* #cli */} + +A CLI, or Command-Line Interface, is a text-based interface for interacting with a program. The common command-line app for a Mac user is the Terminal app, and Windows users often use Command Prompt. The Ionic community often uses this term to refer to [Ionic's CLI](https://ionicframework.com/docs/cli). Ionic's CLI can be used for a number of things, such as creating production builds of an app, running the development server, and accessing [Ionic commercial services](https://ionic.io/appflow). {/* cspell:enable */} -
- -

CommonJS

- - CommonJS is a group that defines - standard formats for JavaScript APIs. They have defined standards for JavaScript modules and packages. -
- -
- -

Cordova

- - Apache Cordova is an open source mobile application - development framework that transforms standard HTML/CSS/JS into full-fledged native apps. It provides a JavaScript - API for accessing native device functionality, such as the camera or accelerometer. Cordova contains the necessary - build tools for packaging webapps for iOS, Android, and Windows Phone. -
- -
- -

CORS

- - CORS - (Cross-Origin Resource Sharing) is a mechanism for servers to control client access to web assets. See the - CORS FAQs for more information. -
- -
- -

CSS Variables

- - You may be familiar with variables from Sass. - CSS Variables - enable the same functionality but are built into the browser. CSS Variables are available in all evergreen browsers. -
- -
- -

Decorators

- - Decorators are expressions that return a function. They allow you to take an existing function, and extend its - behavior. With TypeScript, you can also decorate classes and parameters. When you decorate a - class, you are wrapping and extending the behavior of its constructor. In other words, the - decorator will add some functionality when the constructor is called, and will then return the original constructor. - When you decorate a parameter, you are wrapping the argument that gets passed in for that - parameter. The decorator will add functionality when an argument is passed to the method, and then return the - original argument. -
- -
- -

ES5

- - ES5 refers to EcmaScript 5th Edition. A simple way to put it is that ES5 is the version of JavaScript which - developers are most familiar with today. -
- -
- -

ES2015/ES6

- - A wide range of new features were introduced in this version of JavaScript, including classes, modules, iterators, - and promises. Evergreen browsers (Chrome, Safari, Firefox and Edge) have full support for ES6, but to use ES6 - features in older browsers, tools such as Babel and TypeScript have - to transpile ES6 code down to ES5. -
- -
- -

ES2016/ES7

- - This version of JavaScript added a number of new features to the language, including Array.includes and - the exponentiation operator. This version of JavaScript is fully supported by all evergreen browsers (Chrome, - Safari, Firefox and Edge) -
- -
- -

ES2017/ES8

- - This version of JavaScript is the latest standard. It is currently in the final stage before becoming the new - official standard. This spec includes Async/Await (already in all evergreen browsers) and shared memory/atomics. -
- -
- -

Genymotion

- - Genymotion is a third-party Android emulator. It is extremely fast, and is useful for quickly testing your app on - Android. Check out our resource section on Genymotion for - more info. -
- -
- -

Git

- - Git is a distributed version control system for managing code. - It allows development teams to contribute code to the same project without causing code conflicts. -
- -
- -

Gulp

- - Gulp is a tool for running tasks which can be used to build your app. - Common build tasks include transpiling ES6 to ES5, turning - Sass into CSS, minifying code, and concatenating files. -
- -
- -

ES Modules

- - ES Modules - brings the concept of modules natively to JavaScript. With modules, classes and variables are no longer in the - global scope and have to be explicitly imported into your project to be used. This makes it much easier to - understand where your code is coming from and increases modularity and compartmentalization of functionality. -
- -
- -

Ionicons

- - Ionicons is an open-source icon set used and created - by Ionic. It includes 1:1 iOS and Material Design icons, as well as commonly used social/application icons. - Ionicons is included by default in Ionic distributions, but they can also be used in any project. -
- -
- -

Karma

- - Karma is a test runner that - will run an app's test inside a real browser. It executes test cases, written in any testing framework, in - a real browser. Karma was originally written for use with Angular 1. -
- -
- -

Module

- - Modules in JavaScript are small, independent, and reusable pieces or code that are isolated from one another and the - Global scope. -
- -
- -

Monorepo

- - A monorepo is a single git repository with multiple projects. Advantages include simpler - organization, shared tooling and dependencies, and better collaboration with teammates. -
- -
- -

Live Reload

- - Live Reload (or live-reload) is a tool that automatically reloads the browser or - Web View when it detects changes in your app. In some cases, it can replace - parts of your app without having to reload the entire window. See the - Live Reload docs for more information. -
- -
- -

Node

- - Node is a runtime environment that allows JavaScript to be - written on the server-side. In addition to being used for web services, node is often used to build developer - tools, such as the Ionic CLI. -
- -
- -

npm

- - npm is the package manager for node. - It allows developers to install, share, and package node modules. Ionic can be installed with npm, along with - a number of its dependencies. -
- -
- -

Observable

- - An observable is an object that emits events (or notifications). An observer is an object that listens for these - events, and does something when an event is received. Together, they create a pattern that can be used for - programming asynchronously. -
- -
- -

Package ID

- - Referred to by Apple as Bundle ID and by Android as Application ID, the - Package ID is used for identifying apps published to the App Store/Play Store. It is a string - formatted in reverse-DNS notation. -
- -
- -

Polyfill

- - A polyfill is a bit of code that - adds functionality to the browser and normalizes browser differences. This is similar to a shim, - but where a shim has it's own API, a polyfill let's the expect API of the browser be used. -
- -
- -

Protractor

- - Protractor is a testing framework written for - and by the Angular team. Protractor can be used with test runners, like Karma, for end-to-end testing. Test runners - allow you to quickly and programmatically verify code quality. -
- -
- -

Sass

- - Sass is a stylesheet language that compiles to CSS and is used by Ionic. Sass is like CSS, but with extra features - such as variables, - mixins, and - loops. -
- -
- -

Scoped Encapsulation

- - A component that uses scoped encapsulation will automatically scope its CSS by appending each of the styles with a - data attribute at run time. Overriding scoped selectors in CSS requires a - higher specificity - selector. Scoped components can also be styled using - CSS Custom Properties. -
- -
- -

Shadow DOM

- - Shadow DOM - is a native browser solution for DOM and style encapsulation of a component. It shields the component from its - surrounding environment. To externally style internal elements of a Shadow DOM component you must use - CSS Custom Properties - or CSS Shadow Parts. -
- -
- -

Shim

- - A shim is a piece of code that normalizes an APIs across browsers. A shim can have it's own API that hides the - browser specific implementation from the end user. -
- -
- -

Transpiler

- - Transpilation is the process of converting code from one language to another language prior to execution. Typically, - a transpiler will convert a high-level language to another high-level language. The most common type of - transpilation in Ionic Framework is converting ES2015/ES6 - (TypeScript) to ES5 (traditional JavaScript). -
- -
- -

TypeScript

- - TypeScript is a superset of JavaScript, - which means it gives you JavaScript, along with a number of extra features such as - type declarations - and interfaces. - Although Ionic is built with TypeScript, using it to build an Ionic app is completely optional. -
- -
- -

Unit Tests

- - Unit Tests and unit testing are a way to test small pieces of code to check if they behave as expected. Unit testing - frameworks include Jasmine, Mocha, QUnit, and many others. -
- -
- -

Webpack

- - Webpack bundles together JavaScript modules and other assets. - It can be used to create single or multiple "chunks" that are only loaded when needed. Webpack can be used to take - many files and dependencies and bundle them into one file, or other types. -
- -
- -

Web Standards

- - The World Wide Web Consortium (W3C) is the standards organization - for the Web. Together, industry leaders and the public work together to develop - web standards, which are a set of protocols, specifications, - and technologies that define the Web Platform. -
- -
- -

Xcode

- - Xcode is an Apple IDE (integrated development - environment) for software development on Apple operating systems (macOS, iOS, watchOS and tvOS), with extensions - available for other languages and platforms. -
+### CommonJS {/* #commonjs */} + +[CommonJS](https://webpack.github.io/docs/commonjs.html) is a group that defines standard formats for JavaScript APIs. They have defined standards for JavaScript modules and packages. + +### Cordova {/* #cordova */} + +[Apache Cordova](https://cordova.apache.org) is an open source mobile application development framework that transforms standard HTML/CSS/JS into full-fledged native apps. It provides a JavaScript API for accessing native device functionality, such as the camera or accelerometer. Cordova contains the necessary build tools for packaging webapps for iOS, Android, and Windows Phone. + +### CORS {/* #cors */} + +[CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) (Cross-Origin Resource Sharing) is a mechanism for servers to control client access to web assets. Refer to the [CORS FAQs](../troubleshooting/cors) for more information. + +### CSS Variables {/* #css-variables */} + +You may be familiar with variables from Sass. [CSS Variables](https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care) enable the same functionality but are built into the browser. CSS Variables are available in all evergreen browsers. + +### Decorators {/* #decorators */} + +Decorators are expressions that return a function. They allow you to take an existing function, and extend its behavior. With TypeScript, you can also decorate classes and parameters. When you decorate a class, you are wrapping and extending the behavior of its constructor. In other words, the decorator will add some functionality when the constructor is called, and will then return the original constructor. When you decorate a parameter, you are wrapping the argument that gets passed in for that parameter. The decorator will add functionality when an argument is passed to the method, and then return the original argument. + +### ES5 {/* #es5 */} + +ES5 refers to EcmaScript 5th Edition. A simple way to put it is that ES5 is the version of JavaScript which developers are most familiar with today. + +### ES2015/ES6 {/* #es2015-es6 */} + +A wide range of new features were introduced in this version of JavaScript, including classes, modules, iterators, and promises. Evergreen browsers (Chrome, Safari, Firefox and Edge) have full support for ES6, but to use ES6 features in older browsers, tools such as [Babel](#babel) and [TypeScript](#typescript) have to [transpile](#transpiler) ES6 code down to ES5. + +### ES2016/ES7 {/* #es2016-es7 */} + +This version of JavaScript added a number of new features to the language, including Array.includes and the exponentiation operator. This version of JavaScript is fully supported by all evergreen browsers (Chrome, Safari, Firefox and Edge) + +### ES2017/ES8 {/* #es2017-es8 */} + +This version of JavaScript is the latest standard. It is currently in the final stage before becoming the new official standard. This spec includes Async/Await (already in all evergreen browsers) and shared memory/atomics. + +### Genymotion {/* #genymotion */} + +Genymotion is a third-party Android emulator. It is extremely fast, and is useful for quickly testing your app on Android. Check out our [resource section](../developing/tips#using-genymotion-android) on Genymotion for more info. + +### Git {/* #git */} + +[Git](https://git-scm.com/) is a distributed version control system for managing code. It allows development teams to contribute code to the same project without causing code conflicts. + +### Gulp {/* #gulp */} + +[Gulp](http://gulpjs.com/) is a tool for running tasks which can be used to build your app. Common build tasks include transpiling [ES6](#es2015-es6) to [ES5](#es5), turning [Sass](#sass) into CSS, minifying code, and concatenating files. + +### ES Modules {/* #es-modules */} + +[ES Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) brings the concept of modules natively to JavaScript. With modules, classes and variables are no longer in the global scope and have to be explicitly imported into your project to be used. This makes it much easier to understand where your code is coming from and increases modularity and compartmentalization of functionality. + +### Ionicons {/* #ionicons */} + +[Ionicons](https://ionic.io/ionicons/) is an open-source icon set used and created by Ionic. It includes 1:1 iOS and Material Design icons, as well as commonly used social/application icons. Ionicons is included by default in Ionic distributions, but they can also be used in any project. + +### Karma {/* #karma */} + +[Karma](https://karma-runner.github.io/latest/index.html) is a test runner that will run an app's test inside a real browser. It executes test cases, written in any testing framework, in a real browser. Karma was originally written for use with Angular 1. + +### Module {/* #module */} + +Modules in JavaScript are small, independent, and reusable pieces or code that are isolated from one another and the Global scope. + +### Monorepo {/* #monorepo */} + +A monorepo is a single git repository with multiple projects. Advantages include simpler organization, shared tooling and dependencies, and better collaboration with teammates. + +### Live Reload {/* #livereload */} + +**Live Reload** (or **live-reload**) is a tool that automatically reloads the browser or [Web View](../core-concepts/webview) when it detects changes in your app. In some cases, it can replace parts of your app without having to reload the entire window. Refer to the [Live Reload docs](../cli/livereload) for more information. + +### Node {/* #node */} + +[Node](https://nodejs.org/) is a runtime environment that allows JavaScript to be written on the server-side. In addition to being used for web services, node is often used to build developer tools, such as the [Ionic CLI](#cli). + +### npm {/* #npm */} + +[npm](https://www.npmjs.com/) is the package manager for [node](#node). It allows developers to install, share, and package node modules. Ionic can be installed with npm, along with a number of its dependencies. + +### Observable {/* #observable */} + +An observable is an object that emits events (or notifications). An observer is an object that listens for these events, and does something when an event is received. Together, they create a pattern that can be used for programming asynchronously. + +### Package ID {/* #package-id */} + +Referred to by Apple as Bundle ID and by Android as Application ID, the Package ID is used for identifying apps published to the App Store/Play Store. It is a string formatted in [reverse-DNS notation](https://en.wikipedia.org/wiki/Reverse_domain_name_notation). + +### Polyfill {/* #polyfill */} + +A [polyfill](https://remysharp.com/2010/10/08/what-is-a-polyfill) is a bit of code that adds functionality to the browser and normalizes browser differences. This is similar to a [shim](#shim), but where a shim has it's own API, a polyfill let's the expect API of the browser be used. + +### Protractor {/* #protractor */} + +[Protractor](https://angular.github.io/protractor/#/) is a testing framework written for and by the Angular team. Protractor can be used with test runners, like Karma, for end-to-end testing. Test runners allow you to quickly and programmatically verify code quality. + +### Sass {/* #sass */} + +Sass is a stylesheet language that compiles to CSS and is used by Ionic. Sass is like CSS, but with extra features such as [variables](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variables_), [mixins](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins), and [loops](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_10). + +### Scoped Encapsulation {/* #scoped */} + +A component that uses scoped encapsulation will automatically scope its CSS by appending each of the styles with a data attribute at run time. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. Scoped components can also be styled using [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables). + +### Shadow DOM {/* #shadow */} + +[Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom) is a native browser solution for DOM and style encapsulation of a component. It shields the component from its surrounding environment. To externally style internal elements of a Shadow DOM component you must use [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) or [CSS Shadow Parts](https://developer.mozilla.org/en-US/docs/Web/CSS/::part). + +### Shim {/* #shim */} + +A shim is a piece of code that normalizes an APIs across browsers. A shim can have it's own API that hides the browser specific implementation from the end user. + +### Transpiler {/* #transpiler */} + +Transpilation is the process of converting code from one language to another language prior to execution. Typically, a transpiler will convert a high-level language to another high-level language. The most common type of transpilation in Ionic Framework is converting [ES2015/ES6](#es2015-es6) ([TypeScript](#typescript)) to [ES5](#es5) (traditional JavaScript). + +### TypeScript {/* #typescript */} + +[TypeScript](http://www.typescriptlang.org) is a superset of JavaScript, which means it gives you JavaScript, along with a number of extra features such as [type declarations](http://www.typescriptlang.org/Handbook#basic-types) and [interfaces](http://www.typescriptlang.org/Handbook#interfaces). Although Ionic is built with TypeScript, using it to build an Ionic app is completely optional. + +### Unit Tests {/* #unit-tests */} + +Unit Tests and unit testing are a way to test small pieces of code to check if they behave as expected. Unit testing frameworks include Jasmine, Mocha, QUnit, and many others. + +### Webpack {/* #webpack */} + +[Webpack](https://webpack.github.io/) bundles together JavaScript modules and other assets. It can be used to create single or multiple "chunks" that are only loaded when needed. Webpack can be used to take many files and dependencies and bundle them into one file, or other types. + +### Web Standards {/* #web-standards */} + +The [World Wide Web Consortium](https://www.w3.org/) (W3C) is the standards organization for the Web. Together, industry leaders and the public work together to develop [web standards](https://www.w3.org/standards/), which are a set of protocols, specifications, and technologies that define the Web Platform. + +### Xcode {/* #xcode */} + +[Xcode](https://developer.apple.com/xcode/) is an Apple IDE (integrated development environment) for software development on Apple operating systems (macOS, iOS, watchOS and tvOS), with extensions available for other languages and platforms.
diff --git a/versioned_docs/version-v8/reference/versioning.md b/versioned_docs/version-v8/reference/versioning.md index c17a0c40c5..51ee30f725 100644 --- a/versioned_docs/version-v8/reference/versioning.md +++ b/versioned_docs/version-v8/reference/versioning.md @@ -1,6 +1,6 @@ # Versioning -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. +Ionic Framework follows the [Semantic Versioning (SemVer)](https://semver.org/) 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. ## Release Schedule @@ -18,5 +18,5 @@ A patch release will be published when bug fixes were included, but the API has ## Changelog -For a list of all notable changes to Ionic please refer to the changelog. This contains an ordered +For a list of all notable changes to Ionic please refer to the [changelog](https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md). This contains an ordered list of all bug fixes and new features under each release. diff --git a/versioned_docs/version-v8/techniques/security.md b/versioned_docs/version-v8/techniques/security.md index a6dd6fb363..cbb19606bf 100644 --- a/versioned_docs/version-v8/techniques/security.md +++ b/versioned_docs/version-v8/techniques/security.md @@ -68,7 +68,7 @@ To learn more about the security recommendations for binding to directives such For developers who wish to add complex HTML to components such as `ion-toast`, they will need to eject from the sanitizer that is built into Ionic Framework. Developers can either disable the sanitizer across their entire app or bypass it on a case-by-case basis. :::note -Bypassing sanitization functionality can make your application vulnerable to XSS attacks. Please exercise extreme caution when disabling the sanitizer. +Bypassing sanitization functionality can make your application vulnerable to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Please exercise extreme caution when disabling the sanitizer. ::: ### Disabling the sanitizer via config diff --git a/versioned_docs/version-v8/theming/advanced.md b/versioned_docs/version-v8/theming/advanced.md index 410cfb57bc..421a5db26b 100644 --- a/versioned_docs/version-v8/theming/advanced.md +++ b/versioned_docs/version-v8/theming/advanced.md @@ -19,7 +19,7 @@ CSS-based theming enables apps to customize the colors quickly by loading a CSS The `theme-color` value for a meta tag indicates a color that browsers can use to customize the display of a page or of the surrounding interface. This kind of meta tag can also accept media queries which allow developers to set the theme color for both light and dark modes. -The `content` value for the `theme-color` meta must contain a valid CSS Color and cannot contain CSS Variables. +The `content` value for the `theme-color` meta must contain a valid [CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) and cannot contain CSS Variables. :::note The `theme-color` meta controls the interface theme when running in a web browser or as a PWA and has no effect when an app is deployed using Capacitor or Cordova. If you are looking to customize the area under the status bar, we recommend using the [Capacitor Status Bar Plugin](https://capacitorjs.com/docs/apis/status-bar). @@ -46,7 +46,7 @@ There is a small subset of colors that browsers will not use as they interfere w Browsers will prefer the `theme-color` meta over `theme` in `manifest.json` if both are present. ::: -For more information, refer to the MDN theme-color documentation. +For more information, refer to the [MDN theme-color documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color). ## Global Variables @@ -86,7 +86,7 @@ While the application and stepped variables in the themes section are useful for ### The Alpha Problem -There is not yet full browser support for alpha use of a hex color. The `rgba()` function only accepts a value in `R, G, B, A` (Red, Green, Blue, Alpha) format. The following code shows examples of correct and incorrect values passed to `rgba()`. +There is not yet full [browser support](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Browser_compatibility) for alpha use of a hex color. The [`rgba()`]() function only accepts a value in `R, G, B, A` (Red, Green, Blue, Alpha) format. The following code shows examples of correct and incorrect values passed to `rgba()`. ```css /* These examples use the same color: blueviolet. */ diff --git a/versioned_docs/version-v8/theming/basics.md b/versioned_docs/version-v8/theming/basics.md index d289d75ece..f89c78e402 100644 --- a/versioned_docs/version-v8/theming/basics.md +++ b/versioned_docs/version-v8/theming/basics.md @@ -31,11 +31,11 @@ Ionic has two **modes** that are used to customize the look of components based ## CSS Variables -The Ionic Framework components are themed using CSS custom 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 custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_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. ## 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, refer to 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](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_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, refer to the [CSS Shadow Parts](css-shadow-parts.md) guide. ## Branding diff --git a/versioned_docs/version-v8/theming/colors.md b/versioned_docs/version-v8/theming/colors.md index c040f33940..9574dc5014 100644 --- a/versioned_docs/version-v8/theming/colors.md +++ b/versioned_docs/version-v8/theming/colors.md @@ -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. Refer to [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 explore each 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](https://developer.mozilla.org/en-US/docs/Glossary/RGB). Refer to [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 explore each of the default colors Ionic provides and their variations. diff --git a/versioned_docs/version-v8/theming/css-shadow-parts.md b/versioned_docs/version-v8/theming/css-shadow-parts.md index cc105100e8..adbfb66b9f 100644 --- a/versioned_docs/version-v8/theming/css-shadow-parts.md +++ b/versioned_docs/version-v8/theming/css-shadow-parts.md @@ -10,11 +10,11 @@ title: CSS Shadow Parts /> -CSS Shadow Parts allow developers to style CSS properties on an element inside of a shadow tree. This is extremely useful in customizing Ionic Framework Shadow DOM components. +CSS Shadow Parts allow developers to style CSS properties on an element inside of a shadow tree. This is extremely useful in customizing Ionic Framework [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) components. ## Why Shadow Parts? -Ionic Framework is a distributed set of Web Components. Web Components follow the Shadow DOM specification in order to encapsulate styles and markup. +Ionic Framework is a distributed set of [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components). Web Components follow the [Shadow DOM specification](https://w3c.github.io/webcomponents/spec/shadow/) 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). @@ -67,7 +67,7 @@ With these parts exposed, the element can now be styled directly using [::part]( ### How ::part works -The `::part()` pseudo-element allows developers to select elements inside of a shadow tree that have been exposed via a part attribute. +The [`::part()`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) pseudo-element allows developers to select elements inside of a shadow tree that have been exposed via a part attribute. Since we know that `ion-select` exposes a `placeholder` part for styling the text when there is no value selected, we can customize it in the following way: @@ -80,7 +80,7 @@ ion-select::part(placeholder) { Styling using `::part` allows any CSS property that is accepted by that element to be changed. -In addition to being able to target the part, pseudo-elements can be styled without them being explicitly exposed: +In addition to being able to target the part, [pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) can be styled without them being explicitly exposed: ```css ion-select::part(placeholder)::first-letter { @@ -89,7 +89,7 @@ ion-select::part(placeholder)::first-letter { } ``` -Parts work with most pseudo-classes, as well: +Parts work with most [pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes), as well: ```css ion-item::part(native):hover { @@ -112,18 +112,18 @@ In order to have parts a component must meet the following criteria: - 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. :::note -We welcome recommendations for additional parts. Please create a new GitHub issue with as much information as possible when requesting a part. +We welcome recommendations for additional parts. Please create a [new GitHub issue](https://github.com/ionic-team/ionic-framework/issues/new?assignees=&labels=&template=feature_request.md&title=feat%3A+) with as much information as possible when requesting a part. ::: ## Known Limitations ### Browser Support -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.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](https://caniuse.com/#feat=mdn-css_selectors_part) 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. ### Vendor Prefixed Pseudo-Elements -Pseudo-elements that are vendor prefixed are not supported at this time. An example of this would be any of the `::-webkit-scrollbar` pseudo-elements: +Pseudo-elements that are [vendor prefixed](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) are not supported at this time. An example of this would be any of the `::-webkit-scrollbar` pseudo-elements: ```css /* Does NOT work */ @@ -132,11 +132,11 @@ my-component::part(scroll)::-webkit-scrollbar { } ``` -Refer to this issue on GitHub for more information. +Refer to [this issue on GitHub](https://github.com/w3c/csswg-drafts/issues/4530) for more information. ### Structural Pseudo-Classes -Most pseudo-classes are supported with parts, however, structural pseudo-classes are not. An example of structural pseudo-classes that do not work is below. +Most pseudo-classes are supported with parts, however, [structural pseudo-classes](https://www.w3.org/TR/selectors-4/#structural-pseudos) are not. An example of structural pseudo-classes that do not work is below. ```css /* Does NOT work */ diff --git a/versioned_docs/version-v8/theming/css-variables.md b/versioned_docs/version-v8/theming/css-variables.md index ca7bf1c5ed..1de4515268 100644 --- a/versioned_docs/version-v8/theming/css-variables.md +++ b/versioned_docs/version-v8/theming/css-variables.md @@ -10,7 +10,7 @@ title: CSS Variables /> -Ionic components are built with CSS Variables for easy customization of an application. CSS variables allow a value to be stored in one place, then referenced in multiple other places. They also make it possible to change CSS dynamically at runtime (which previously required a CSS preprocessor). CSS variables make it easier than ever to override Ionic components to match a brand or theme. +Ionic components are built with [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) for easy customization of an application. CSS variables allow a value to be stored in one place, then referenced in multiple other places. They also make it possible to change CSS dynamically at runtime (which previously required a CSS preprocessor). CSS variables make it easier than ever to override Ionic components to match a brand or theme. ## Setting Values diff --git a/versioned_docs/version-v8/theming/dark-mode.md b/versioned_docs/version-v8/theming/dark-mode.md index 6dc12c96c8..476d6f348a 100644 --- a/versioned_docs/version-v8/theming/dark-mode.md +++ b/versioned_docs/version-v8/theming/dark-mode.md @@ -176,7 +176,7 @@ The `.ion-palette-dark` class **must** be added to the `html` element in order t ## Adjusting System UI Components -When developing a dark palette, you may notice that certain system UI components are not adjusting to dark mode properly. To fix this you will need to specify the `color-scheme`. Refer to the browser compatibility for color-scheme for details on cross browser support. +When developing a dark palette, you may notice that certain system UI components are not adjusting to dark mode properly. To fix this you will need to specify the `color-scheme`. Refer to the [browser compatibility for color-scheme](https://caniuse.com/#feat=mdn-html_elements_meta_name_color-scheme) for details on cross browser support. While you may be mainly using Ionic components instead of only native components, `color-scheme` can also affect aspects of your application such as the scrollbar. In order to use `color-scheme` you will need to add the following HTML to the `head` of your application: diff --git a/versioned_docs/version-v8/theming/themes.md b/versioned_docs/version-v8/theming/themes.md index cb5e5c4602..77c201b36b 100644 --- a/versioned_docs/version-v8/theming/themes.md +++ b/versioned_docs/version-v8/theming/themes.md @@ -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. Refer to [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](https://developer.mozilla.org/en-US/docs/Glossary/RGB). Refer to [The Alpha Problem](advanced.md#the-alpha-problem) for an explanation of why the `rgb` property is also needed. | Name | Description | | ------------------------------------------ | ---------------------------------------------------- | diff --git a/versioned_docs/version-v8/troubleshooting/cors.md b/versioned_docs/version-v8/troubleshooting/cors.md index 0d2844ceea..93b110b7b8 100644 --- a/versioned_docs/version-v8/troubleshooting/cors.md +++ b/versioned_docs/version-v8/troubleshooting/cors.md @@ -18,7 +18,7 @@ In order to know if an external origin supports CORS, the server has to send som An **origin** is the combination of the **protocol**, **domain**, and **port** from which your Ionic app or the external resource is served. For example, apps running in Capacitor have `capacitor://localhost` (iOS) or `http://localhost` (Android) as their origin. -When the origin where your app is served (e.g. `http://localhost:8100` with `ionic serve`) and the origin of the resource being requested (e.g. `https://api.example.com`) don't match, the browser's Same Origin Policy takes effect and CORS is required for the request to be made. +When the origin where your app is served (e.g. `http://localhost:8100` with `ionic serve`) and the origin of the resource being requested (e.g. `https://api.example.com`) don't match, the browser's [Same Origin Policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) takes effect and CORS is required for the request to be made. CORS errors are common in web apps when a cross-origin request is made but the server doesn't return the required headers in the response (is not CORS-enabled): @@ -190,9 +190,9 @@ Port numbers can be higher if you are serving multiple apps at the same time. Allowing any origin with `Access-Control-Allow-Origin: *` is guaranteed to work in all scenarios but may have security implications — like some CSRF attacks — depending on how the server controls access to resources and use sessions and cookies. -For more information on how to enable CORS in different web and app servers, please check enable-cors.org +For more information on how to enable CORS in different web and app servers, please check [enable-cors.org](https://enable-cors.org) -CORS can be easily enabled in Express/Connect apps with the cors middleware: +CORS can be easily enabled in Express/Connect apps with the [cors](https://github.com/expressjs/cors) middleware: ```javascript const express = require('express'); @@ -284,7 +284,7 @@ Send the requests through an HTTP/HTTPS proxy that bypasses them to the external Also, keep in mind that the browser or webview will not receive the original HTTPS certificates but the one being sent from the proxy if it's provided. URLs may need to be rewritten in your code in order to use the proxy. -Check cors-anywhere for a Node.js CORS proxy that can be deployed in your own server. Using free hosted CORS proxies in production is not recommended. +Check [cors-anywhere](https://github.com/Rob--W/cors-anywhere/) for a Node.js CORS proxy that can be deployed in your own server. Using free hosted CORS proxies in production is not recommended. ### C. Disabling CORS or browser web security @@ -296,9 +296,5 @@ If you are developing a PWA or testing in the browser, using the `--disable-web- ##### Sources -- - CORS Errors in Ionic Apps - -- - MDN - +- [CORS Errors in Ionic Apps](https://fdezromero.com/cors-errors-in-ionic-apps) +- [MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) diff --git a/versioned_docs/version-v8/updating/4-0.md b/versioned_docs/version-v8/updating/4-0.md index 659b2d09fd..a457852058 100644 --- a/versioned_docs/version-v8/updating/4-0.md +++ b/versioned_docs/version-v8/updating/4-0.md @@ -138,7 +138,7 @@ See the following `ionic.config.json` as an example: ### RxJS Changes -Between V3 and V4, RxJS was updated to version 6. This changes many of the import paths of operators and core RxJS functions. Please refer to the RxJS Migration Guide for details. +Between V3 and V4, RxJS was updated to version 6. This changes many of the import paths of operators and core RxJS functions. Please refer to the [RxJS Migration Guide](https://github.com/ReactiveX/rxjs/blob/6.x/docs_app/content/guide/v6/migration.md) for details. ### Lifecycle Events @@ -188,7 +188,7 @@ async showAlert() { ### Navigation -In V4, navigation received the most changes. Now, instead of using Ionic's own `NavController`, we integrate with the official Angular Router. This not only provides a consistent routing experience across apps, but is much more dependable. The Angular team has an excellent guide on their docs site that covers the Router in great detail. +In V4, navigation received the most changes. Now, instead of using Ionic's own `NavController`, we integrate with the official Angular Router. This not only provides a consistent routing experience across apps, but is much more dependable. The Angular team has an [excellent guide](http://angular.io/guide/router) on their docs site that covers the Router in great detail. 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. @@ -246,9 +246,9 @@ For a detailed explanation of lazy loading in V4 project, check out the [Angular ### Markup Changes -Since v4 moved to Custom Elements, there's been a significant change to the markup for each component. These changes have all been made to follow the Custom Elements spec, and have been documented in a dedicated file on GitHub. +Since v4 moved to Custom Elements, there's been a significant change to the markup for each component. These changes have all been made to follow the Custom Elements spec, and have been documented in a [dedicated file on GitHub](https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md#breaking-changes). -To help with these markup changes, we've released a TSLint-based Migration Tool, which detects issues and can even fix some of them automatically. +To help with these markup changes, we've released a TSLint-based [Migration Tool](https://github.com/ionic-team/v4-migration-tslint), which detects issues and can even fix some of them automatically. ## Updating from Ionic 1 to 4 diff --git a/versioned_docs/version-v8/vue/pwa.md b/versioned_docs/version-v8/vue/pwa.md index 4a7d7ceb2f..fd84d82061 100644 --- a/versioned_docs/version-v8/vue/pwa.md +++ b/versioned_docs/version-v8/vue/pwa.md @@ -13,7 +13,7 @@ sidebar_label: Progressive Web Apps ## Making your Vue app a PWA with Vite -The two main requirements of a PWA are a Service Worker and a Web Application Manifest. While it's possible to add both of these to an app manually, we recommend using the [Vite PWA Plugin](https://vite-pwa-org.netlify.app/) instead. +The two main requirements of a PWA are a [Service Worker](https://developers.google.com/web/fundamentals/primers/service-workers/) and a [Web Application Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/). While it's possible to add both of these to an app manually, we recommend using the [Vite PWA Plugin](https://vite-pwa-org.netlify.app/) instead. To get started, install the `vite-plugin-pwa` package: @@ -45,7 +45,7 @@ Refer to the [Vite PWA "Deploy" Guide](https://vite-pwa-org.netlify.app/deployme As of Ionic CLI v7, Ionic Vue starter apps ship with Vite instead of Vue CLI. Refer to [Making your Vue app a PWA with Vite](#making-your-vue-app-a-pwa-with-vite) for Vite instructions. ::: -The two main requirements of a PWA are a Service Worker and a Web Application Manifest. While it's possible to add both of these to an app manually, the Vue CLI has some utilities for adding this for you. +The two main requirements of a PWA are a [Service Worker](https://developers.google.com/web/fundamentals/primers/service-workers/) and a [Web Application Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/). While it's possible to add both of these to an app manually, the Vue CLI has some utilities for adding this for you. For existing projects, you can run the `vue add` command to install the PWA plugin for Vue. diff --git a/versioned_docs/version-v8/vue/slides.md b/versioned_docs/version-v8/vue/slides.md index 9b7a8ef20c..edc2a4bb17 100644 --- a/versioned_docs/version-v8/vue/slides.md +++ b/versioned_docs/version-v8/vue/slides.md @@ -14,10 +14,10 @@ title: Migrating From ion-slides to Swiper.js `ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below. ::: -We recommend Swiper.js if you need a modern touch slider component. This guide will go over how to get Swiper for Vue set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to the official Swiper Vue integration. +We recommend [Swiper.js](http://swiperjs.com/) if you need a modern touch slider component. This guide will go over how to get Swiper for Vue set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to the official Swiper Vue integration. :::note -Swiper's Vue component is set to be removed in a future release of Swiper, with Swiper Element as the replacement. However, this guide shows how to migrate to the Vue component because it provides the most stable experience at the time of writing. +Swiper's Vue component is set to be removed in a future release of Swiper, with [Swiper Element](https://swiperjs.com/element) as the replacement. However, this guide shows how to migrate to the Vue component because it provides the most stable experience at the time of writing. Using Swiper's Vue component is **not** required to use Swiper.js with Ionic Framework. ::: @@ -212,7 +212,7 @@ const modules = [Autoplay, Keyboard, Pagination, Scrollbar, Zoom]; ``` :::note -Refer to Swiper's Vue usage documentation for a full list of modules. +Refer to [Swiper's Vue usage documentation](https://swiperjs.com/vue#usage) for a full list of modules. ::: ## The IonicSlides Module @@ -294,7 +294,7 @@ Below is a full list of property changes when going from `ion-slides` to Swiper | scrollbar | You can continue to use the `scrollbar` property, just be sure to install the Scrollbar module first. | :::note -All properties available in Swiper Vue can be found in the Swiper Vue props documentation. +All properties available in Swiper Vue can be found in the [Swiper Vue props documentation](https://swiperjs.com/vue#swiper-props). ::: ## Events @@ -347,7 +347,7 @@ Below is a full list of event name changes when going from `ion-slides` to Swipe | `ionSlidesDidLoad` | `init` | :::note -All events available in Swiper Vue can be found in the Swiper Vue events documentation. +All events available in Swiper Vue can be found in the [Swiper Vue events documentation](https://swiperjs.com/vue#swiper-events). ::: ## Methods @@ -472,12 +472,12 @@ const modules = [EffectFade, IonicSlides]; ``` :::note -For more information on effects in Swiper, please refer to the Swiper Vue effects documentation. +For more information on effects in Swiper, please refer to the [Swiper Vue effects documentation](https://swiperjs.com/vue#effects). ::: ## Wrap Up -Now that you have Swiper installed, there is a whole set of new Swiper features for you to enjoy. We recommend starting with the Swiper Vue Introduction and then referencing the Swiper API docs. +Now that you have Swiper installed, there is a whole set of new Swiper features for you to enjoy. We recommend starting with the [Swiper Vue Introduction](https://swiperjs.com/vue) and then referencing [the Swiper API docs](https://swiperjs.com/swiper-api). ## FAQ @@ -491,8 +491,8 @@ If you are running into issues with the migration, please create a post on the [ ### Where do I file bug reports? -Before opening an issue, please consider creating a post on the Swiper Discussion Board or the Ionic Forum to check if your issue can be resolved by the community. +Before opening an issue, please consider creating a post on the [Swiper Discussion Board](https://github.com/nolimits4web/swiper/discussions) or the [Ionic Forum](https://forum.ionicframework.com) to check if your issue can be resolved by the community. -If you are running into problems with the Swiper library, new bugs should be filed on the Swiper issue tracker. +If you are running into problems with the Swiper library, new bugs should be filed on the [Swiper issue tracker](https://github.com/nolimits4web/swiper/issues). -If you are running into problems with the `IonicSlides` module, new bugs should be filed on the Ionic Framework issue tracker. +If you are running into problems with the `IonicSlides` module, new bugs should be filed on the [Ionic Framework issue tracker](https://github.com/ionic-team/ionic-framework/issues). diff --git a/versioned_docs/version-v8/vue/troubleshooting.md b/versioned_docs/version-v8/vue/troubleshooting.md index 456d0950a8..1383c81dfa 100644 --- a/versioned_docs/version-v8/vue/troubleshooting.md +++ b/versioned_docs/version-v8/vue/troubleshooting.md @@ -12,7 +12,7 @@ title: Troubleshooting This guide covers some of the more common issues you may run into when developing with Ionic Vue. -Have an issue that you think should be covered here? Let us know! +Have an issue that you think should be covered here? [Let us know!](https://github.com/ionic-team/ionic-docs/issues/new?assignees=&labels=content&template=content-issue.md&title=) ## Failed to resolve component @@ -44,7 +44,7 @@ Prefer to register your components globally once? We have you covered. Our [Opti `slot` attributes are deprecated vue/no-deprecated-slot-attribute ``` -The slots that are used in Ionic Vue are Web Component slots, which are different than the slots used in Vue 2. Unfortunately, the APIs for both are very similar, and your linter is likely getting the two confused. +The slots that are used in Ionic Vue are [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots), which are different than the slots used in Vue 2. Unfortunately, the APIs for both are very similar, and your linter is likely getting the two confused. All Ionic Vue starters ship with this rule turned off, but you can do it yourself by adding the following to your `.eslintrc.js` file: @@ -58,7 +58,7 @@ module.exports = { If you are using VSCode and have the Vetur plugin installed, you are likely getting this warning because of Vetur, not ESLint. By default, Vetur loads the default Vue 3 linting rules and ignores any custom ESLint rules. -To resolve this issue, you will need to turn off Vetur's template validation with `vetur.validation.template: false`. Refer to the Vetur Linting Guide for more information. +To resolve this issue, you will need to turn off Vetur's template validation with `vetur.validation.template: false`. Refer to the [Vetur Linting Guide](https://vuejs.github.io/vetur/guide/linting-error.html#linting) for more information. ## Method on component is not a function