{"id":3944,"date":"2021-12-13T15:13:16","date_gmt":"2021-12-13T15:13:16","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3944"},"modified":"2021-12-13T15:39:59","modified_gmt":"2021-12-13T15:39:59","slug":"announcing-ionic-6","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/announcing-ionic-6","title":{"rendered":"Announcing Ionic 6"},"content":{"rendered":"<p>Today I am excited to announce the release of Ionic 6! This release adds improved desktop support, overhauled components, iOS and Android design changes, and so much more!<\/p>\n<p>Let&#8217;s take a look at what you can expect with Ionic 6.<\/p>\n<p><!--more--><\/p>\n<h2><strong>Easy Upgrade \u26f5\ufe0f<\/strong><\/h2>\n<p>While this release of Ionic does bring breaking changes, we strived to keep these changes to a minimum. Ionic 6 has fewer breaking changes than both the previous Ionic 4 and Ionic 5 releases!<\/p>\n<p>Developers can visit the <a href=\"https:\/\/ionicframework.com\/docs\/intro\/upgrading-to-ionic-6\">Ionic 6 Migration Guide<\/a> to get step-by-step upgrade instructions.<\/p>\n<h2><strong>Faster, More Reliable Release Cadence \ud83d\ude84<\/strong><\/h2>\n<p>With the release of Ionic 6, we are adjusting our release schedule to better coincide with iOS and Android software releases. Developers can expect to see yearly major releases of Ionic moving forward.<\/p>\n<h2><strong>Design Changes \ud83c\udfa8<\/strong><\/h2>\n<h3><strong>iOS<\/strong><\/h3>\n<p>Some of the notable design changes to the iOS mode include a new refresher style and updated toolbar and modal styles for dark mode. We have also added a new <code>collapse<\/code> option to both <code>ion-header<\/code> and <code>ion-footer<\/code>. This allows developers to hide the header and footer backgrounds until users begin to scroll:<\/p>\n<pre><code class=\"language-html\">&lt;ion-header translucent=&quot;true&quot; collapse=&quot;fade&quot;&gt;\n  &lt;ion-toolbar&gt;\n    &lt;ion-title&gt;Title&lt;\/ion-title&gt;\n  &lt;\/ion-toolbar&gt;\n&lt;\/ion-header&gt;\n\n&lt;ion-content fullscreen=&quot;true&quot;&gt;\n  ...\n&lt;\/ion-content&gt;\n\n&lt;ion-footer translucent=&quot;true&quot; collapse=&quot;fade&quot;&gt;\n  &lt;ion-toolbar&gt;\n    &lt;ion-title&gt;Footer&lt;\/ion-title&gt;\n  &lt;\/ion-toolbar&gt;\n&lt;\/ion-footer&gt;\n<\/code><\/pre>\n<div class=\"split\">\n<figure><figcaption>New Header &#038; Footer Styles<\/figcaption><video controls autoplay muted loop><source \nsrc=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/12\/fade-header-footer.mov\"\n        type=\"video\/mp4\"\n      \/><\/video><br \/>\n  <\/figure>\n<figure><figcaption>Improved iOS Toolbar Theme<\/figcaption><video controls autoplay muted loop><source \nsrc=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/12\/theme-toolbar.mov\"\n      \/><\/video><br \/>\n  <\/figure>\n<\/div>\n<div class=\"split\">\n<figure><figcaption>Improved iOS Modal Theme<\/figcaption><video controls autoplay muted loop><source \nsrc=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/12\/theme-modal.mov\"\n        type=\"video\/mp4\"\n      \/><\/video><br \/>\n  <\/figure>\n<figure><figcaption>Improved iOS Pull To Refresh<\/figcaption><video controls autoplay muted loop><source \nsrc=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/12\/theme-ptr.mov\"\n      \/><\/video><br \/>\n  <\/figure>\n<\/div>\n<h3><strong>Android<\/strong><\/h3>\n<p>We have revamped the input styles in Material Design mode to support new <code>filled<\/code> and <code>outline<\/code> variants. We have also added error and helper text slots in addition to a character counter.<\/p>\n<p>Additionally, <code>ion-select<\/code> has been updated to use the latest Material Design styles with the popover interface.<\/p>\n<p>The Ionic team is keeping an eye on <a href=\"https:\/\/material.io\/blog\/announcing-material-you\">Material You<\/a> and waiting for more guidance to be released by Google.<\/p>\n<div class=\"device-demo\">\n            <figure>\n                <figcaption>Material Design Input Updates<\/figcaption>\n                <video src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/12\/md-input.mp4\" controls autoplay muted loop><\/video>\n            <\/figure>\n        <\/div>\n<h2><strong>Components \u2699\ufe0f<\/strong><\/h2>\n<h3><strong>Bottom Sheet<\/strong><\/h3>\n<p>We are very excited to ship the new bottom sheet feature in Ionic 6. As part of <code>ion-modal<\/code>, developers can create dynamic sheets that snap to breakpoints and overlay interactive content.<\/p>\n<div class=\"device-demo\">\n            <figure>\n                <figcaption>Bottom Sheet Component<\/figcaption>\n                <video src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/12\/bottomsheet.mov\" controls autoplay muted loop><\/video>\n            <\/figure>\n        <\/div>\n<h3><strong>Datetime<\/strong><\/h3>\n<p>One of the most significant component changes in Ionic 6 is with the <code>ion-datetime<\/code> component. We have revamped datetime to use the latest calendar picker styles on iOS and Android. Datetime also has improved functionality on desktop devices with full keyboard and screen reader integration for selecting dates. <code>ion-datetime<\/code> now looks at the language and region settings on a device so that it is presented in a format that each user is familiar with.<\/p>\n<div class=\"device-demo\">\n            <figure>\n                <figcaption>Revamped Datetime<\/figcaption>\n                <video src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/12\/datetime.mov\" controls autoplay muted loop><\/video>\n            <\/figure>\n        <\/div>\n<h3>Select<\/h3>\n<p>In addition to the new Material Design styles added to <code>ion-select<\/code>, we have also improved our desktop support by adding keyboard interactions for selecting options. By using the <code>popover<\/code> interface with <code>ion-select<\/code>, developers can create rich desktop select experiences with ease.<\/p>\n<div class=\"device-demo\">\n            <figure>\n                <figcaption>Improved Select<\/figcaption>\n                <video src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/12\/select.mp4\" controls autoplay muted loop><\/video>\n            <\/figure>\n        <\/div>\n<h3><strong>Modal<\/strong><\/h3>\n<p><code>ion-modal<\/code> has been revamped and can now be used declaratively inside application templates. This means developers can write <code>&lt;ion-modal&gt;<\/code> in their template and pass in a component to show. We have also added new <code>isOpen<\/code> and <code>trigger<\/code> properties. These properties allow developers to present and dismiss modals with less code.<\/p>\n<p>For React and Vue developers, this change means that getting a reference to <code>ion-modal<\/code> will return the actual modal component rather than a placeholder element.<\/p>\n<pre><code class=\"language-html\">&lt;ion-button id=&quot;modal-button&quot;&gt;Open Modal&lt;\/ion-modal&gt;\n&lt;ion-modal trigger=&quot;modal-button&quot;&gt;\n  &lt;my-custom-component&gt;&lt;\/my-custom-component&gt;\n&lt;\/ion-modal&gt;\n\n...\n\n&lt;ion-modal is-open=&quot;true&quot;&gt;\n  &lt;my-custom-component&gt;&lt;\/my-custom-component&gt;\n&lt;\/ion-modal&gt;\n<\/code><\/pre>\n<div class=\"device-demo\">\n            <figure>\n                <figcaption>Inline Modals<\/figcaption>\n                <video src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/12\/modal.mov\" controls autoplay muted loop><\/video>\n            <\/figure>\n        <\/div>\n<h3><strong>Popover<\/strong><\/h3>\n<p><code>ion-popover<\/code> can also be used declaratively inside application templates, and it receives the same <code>isOpen<\/code> and <code>trigger<\/code> properties that <code>ion-modal<\/code> receives.<\/p>\n<p>We have also improved the sizing and positioning options for the popover through the <code>side<\/code>, <code>alignment<\/code>, and <code>size<\/code> properties. These new features give developers control over how popovers are presented in their apps.<\/p>\n<p>But wait, there&#8217;s more! Nested popover functionality has been added to Ionic. This is a powerful feature for building multi-layer dropdown menus in desktop applications. Nested popovers work with the new declarative syntax and integrate seamlessly with the <code>trigger<\/code> property.<\/p>\n<div class=\"device-demo\">\n            <figure>\n                <figcaption>Popovers<\/figcaption>\n                <video src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/12\/popover.mov\" controls autoplay muted loop><\/video>\n            <\/figure>\n        <\/div>\n<h3><strong>Item<\/strong><\/h3>\n<p>As part of the Material Design updates, we have added new styles on <code>ion-item<\/code> to better match the specification. Additionally, we have added new helper and error slots for better form validation.<\/p>\n<pre><code class=\"language-html\">&lt;ion-item&gt;\n  &lt;ion-label&gt;Email&lt;\/ion-label&gt;\n  &lt;ion-input type=&quot;email&quot;&gt;&lt;\/ion-input&gt;\n  &lt;ion-note slot=&quot;helper&quot;&gt;Please enter your email.&lt;\/ion-note&gt;\n  &lt;ion-note slot=&quot;error&quot;&gt;You must enter a valid email.&lt;\/ion-note&gt;\n&lt;\/ion-item&gt;\n<\/code><\/pre>\n<h3><strong>Accordion<\/strong><\/h3>\n<p>The first new component coming in Ionic 6 is <code>ion-accordion<\/code>. Accordions make it possible to organize large amounts of content in an easy-to-understand way. This component comes packed with functionality such as smooth animations, keyboard support, and reduced motion accessibility.<\/p>\n<pre><code class=\"language-html\">&lt;ion-accordion-group&gt;\n  &lt;ion-accordion value=&quot;colors&quot;&gt;\n    &lt;ion-item slot=&quot;header&quot;&gt;\n      &lt;ion-label&gt;Colors&lt;\/ion-label&gt;\n    &lt;\/ion-item&gt;\n\n    &lt;ion-list slot=&quot;content&quot;&gt;\n      &lt;ion-item&gt;\n        &lt;ion-label&gt;Red&lt;\/ion-label&gt;\n      &lt;\/ion-item&gt;\n      &lt;ion-item&gt;\n        &lt;ion-label&gt;Green&lt;\/ion-label&gt;\n      &lt;\/ion-item&gt;\n      &lt;ion-item&gt;\n        &lt;ion-label&gt;Blue&lt;\/ion-label&gt;\n      &lt;\/ion-item&gt;\n    &lt;\/ion-list&gt;\n  &lt;\/ion-accordion&gt;\n  &lt;ion-accordion value=&quot;shapes&quot;&gt;\n    &lt;ion-item slot=&quot;header&quot;&gt;\n      &lt;ion-label&gt;Shapes&lt;\/ion-label&gt;\n    &lt;\/ion-item&gt;\n\n    &lt;ion-list slot=&quot;content&quot;&gt;\n      &lt;ion-item&gt;\n        &lt;ion-label&gt;Circle&lt;\/ion-label&gt;\n      &lt;\/ion-item&gt;\n      &lt;ion-item&gt;\n        &lt;ion-label&gt;Triangle&lt;\/ion-label&gt;\n      &lt;\/ion-item&gt;\n      &lt;ion-item&gt;\n        &lt;ion-label&gt;Square&lt;\/ion-label&gt;\n      &lt;\/ion-item&gt;\n    &lt;\/ion-list&gt;\n  &lt;\/ion-accordion&gt;\n  &lt;ion-accordion value=&quot;numbers&quot;&gt;\n    &lt;ion-item slot=&quot;header&quot;&gt;\n      &lt;ion-label&gt;Numbers&lt;\/ion-label&gt;\n    &lt;\/ion-item&gt;\n\n    &lt;ion-list slot=&quot;content&quot;&gt;\n      &lt;ion-item&gt;\n        &lt;ion-label&gt;1&lt;\/ion-label&gt;\n      &lt;\/ion-item&gt;\n      &lt;ion-item&gt;\n        &lt;ion-label&gt;2&lt;\/ion-label&gt;\n      &lt;\/ion-item&gt;\n      &lt;ion-item&gt;\n        &lt;ion-label&gt;3&lt;\/ion-label&gt;\n      &lt;\/ion-item&gt;\n    &lt;\/ion-list&gt;\n  &lt;\/ion-accordion&gt;\n&lt;\/ion-accordion-group&gt;\n<\/code><\/pre>\n<div class=\"device-demo\">\n            <figure>\n                <figcaption>New Accordion Component<\/figcaption>\n                <video src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/12\/accordion.mov\" controls autoplay muted loop><\/video>\n            <\/figure>\n        <\/div>\n<h3><strong>Breadcrumbs<\/strong><\/h3>\n<p>The second new component is <code>ion-breadcrumbs<\/code>. Breadcrumbs provide context to users regarding where they are in your application and how they got there. This component can be themed and collapsed too!<\/p>\n<pre><code class=\"language-html\">&lt;ion-breadcrumbs&gt;\n  &lt;ion-breadcrumb href=&quot;#&quot;&gt;\n    Home\n  &lt;\/ion-breadcrumb&gt;\n  &lt;ion-breadcrumb href=&quot;#electronics&quot;&gt;\n    Electronics\n  &lt;\/ion-breadcrumb&gt;\n  &lt;ion-breadcrumb href=&quot;#photography&quot;&gt;\n    Photography\n  &lt;\/ion-breadcrumb&gt;\n  &lt;ion-breadcrumb href=&quot;#cameras&quot;&gt;\n    Cameras\n  &lt;\/ion-breadcrumb&gt;\n  &lt;ion-breadcrumb href=&quot;#film&quot;&gt;\n    Film\n  &lt;\/ion-breadcrumb&gt;\n  &lt;ion-breadcrumb&gt;\n    35 mm\n  &lt;\/ion-breadcrumb&gt;\n&lt;\/ion-breadcrumbs&gt;\n<\/code><\/pre>\n<div class=\"device-demo\">\n            <figure>\n                <figcaption>New Breadcrumb Component<\/figcaption>\n                <video src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/12\/breadcrumb.mov\" controls autoplay muted loop><\/video>\n            <\/figure>\n        <\/div>\n<h2><strong>Performance and Tooling \ud83d\udee0<\/strong><\/h2>\n<p>Ionic is built as a set of lightning-fast components that use modern Web APIs. This means your apps can be just as fast as native applications. We use the best parts of <a href=\"https:\/\/stenciljs.com\/\">Stencil<\/a> to bring performance and bundling improvements to your Ionic apps.<\/p>\n<h3><strong>Custom Elements<\/strong><\/h3>\n<p>In Ionic 6 we are shipping a new build of Ionic that we call the Custom Elements build. This build does not rely on <a href=\"https:\/\/stenciljs.com\/\">Stencil<\/a>\u2018s lazy loading and helps bundlers include only the components used in your application. This can reduce the overall size of your application. While the exact savings will vary from app to app, we are confident that most apps will see bundle size reductions with this change.<\/p>\n<p>The Custom Elements build is available in Ionic React and Ionic Vue and will be rolled out in Ionic Angular in a future release.<\/p>\n<h3><strong>Vite, Rollup, and ESBuild &#8212; oh my!<\/strong><\/h3>\n<p>As an added bonus, Ionic 6 is usable with tooling such as <a href=\"https:\/\/vitejs.dev\/\">Vite<\/a>, <a href=\"https:\/\/www.rollupjs.org\/\">Rollup<\/a>, and <a href=\"https:\/\/esbuild.github.io\/\">ESBuild<\/a>, giving developers even more options for building apps.<\/p>\n<h2><strong>Vue Routing \ud83d\uddfa<\/strong><\/h2>\n<p>Vue developers have a new way of navigating in Ionic Vue using the <code>useIonRouter<\/code> injectable. This new feature lets developers use the Vue Router while retaining control over the page transitions.<\/p>\n<pre><code class=\"language-js\">import { useIonRouter } from &#039;@ionic\/vue&#039;;\n\n...\n\nconst router = useIonRouter();\nrouter.navigate(\n  `\/page`,\n \u00a0&#039;forward&#039;,\n \u00a0&#039;replace&#039;,\n \u00a0customAnimation\n);\n<\/code><\/pre>\n<p>See the <a href=\"https:\/\/ionicframework.com\/docs\/vue\/utility-functions#router\">Ionic Vue Router Documentation<\/a> for more information.<\/p>\n<h2><strong>Platform Detection Customization \ud83e\uddf6<\/strong><\/h2>\n<p>We have added new platform detection customization options in Ionic 6. These options help developers account for devices that do not always neatly fall into the platform buckets that Ionic has pre-configured. Using this feature, developers can customize how platforms in Ionic are set to account for other devices.<\/p>\n<pre><code class=\"language-js\">import { IonicConfig } from &#039;@ionic\/core&#039;;\n\nconst config: IonicConfig = {\n \u00a0platform: {\n \u00a0 \u00a0\/** The default `desktop` function returns false for devices with a touchscreen.\n \u00a0 \u00a0 * This is not always wanted, so this function tests the User Agent instead.\n \u00a0 \u00a0 **\/\n \u00a0 \u00a0&#039;desktop&#039;: (win) =&gt; {\n \u00a0 \u00a0 \u00a0const isMobile = \/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini\/i.test(win.navigator.userAgent);\n \u00a0 \u00a0 \u00a0return !isMobile;\n \u00a0  }\n  }\n}\n<\/code><\/pre>\n<p><a href=\"https:\/\/ionicframework.com\/docs\/angular\/platform\">Angular users can access documentation here for more information<\/a>.<br \/>\n<a href=\"https:\/\/ionicframework.com\/docs\/react\/platform\">React users can access documentation here for more information<\/a>.<br \/>\n<a href=\"https:\/\/ionicframework.com\/docs\/vue\/platform\">Vue users can access documentation here for more information<\/a>.<\/p>\n<h2><strong>TypeScript Improvements \ud83d\udcac<\/strong><\/h2>\n<p>In Ionic 5, calling methods on the target of a <code>CustomEvent<\/code> would yield TypeScript errors unless developers typecast the target. This was common when calling <code>event.target.complete()<\/code> on an <code>IonInfiniteScroll<\/code> component. In Ionic 6, we are introducing TypeScript interfaces that have this target correctly typed out of the box:<\/p>\n<p><strong>Before<\/strong><\/p>\n<pre><code class=\"language-ts\">const onInfinite = (ev: CustomEvent) =&gt; {\n \u00a0...\n \u00a0ev.target.complete(); \/\/ TypeScript error\n}\n<\/code><\/pre>\n<p><strong>After<\/strong><\/p>\n<pre><code class=\"language-ts\">const onInfinite = (ev: InfiniteScrollCustomEvent) =&gt; {\n \u00a0...\n \u00a0ev.target.complete();\n}\n<\/code><\/pre>\n<p>These custom event interfaces can be found in the documentation for each Ionic component that emits an event. For example, the interface for <code>IonInfiniteScroll<\/code> can be found on the <a href=\"https:\/\/ionicframework.com\/docs\/api\/infinite-scroll#interfaces\">Infinite Scroll Documentation<\/a>.<\/p>\n<h2><strong>Getting Started \ud83e\udd20<\/strong><\/h2>\n<p>Developers with existing Ionic 5 apps looking to get started with Ionic 6 should check the <a href=\"https:\/\/ionicframework.com\/docs\/intro\/upgrading-to-ionic-6\">Ionic 6 Migration Guide<\/a>.<\/p>\n<p>Looking to start with a brand new Ionic 6 app? <a href=\"https:\/\/ionicframework.com\/start#basics\">Try our app creation wizard!<\/a><\/p>\n<p>While Ionic 6 is ready for everyone to start using, you may encounter some speed bumps along the way. We would greatly appreciate it if you would <a href=\"https:\/\/github.com\/ionic-team\/ionic-framework\/issues\/new\/choose\">report them on our GitHub repo<\/a>.<\/p>\n<h2><strong>What&#8217;s Next? \ud83d\udc40<\/strong><\/h2>\n<p>2022 is going to be an incredible year for Ionic. Our focus moving forward is on modernizing Ionic and ensuring that it is easy to use. One big feature we are working on is a component playground for the Ionic documentation website. This playground will let developers see examples of what components look like right on the page. They will also be able to interact with components and change their properties without having to start up an Ionic application on their own.<\/p>\n<p>Beyond that, we are looking to enhance the features we shipped in Ionic 6 to make them even better! If you have ideas for ways we can improve our revamped components, <a href=\"https:\/\/github.com\/ionic-team\/ionic-framework\/issues\/new\/choose\">let us know on our GitHub repo<\/a>.<\/p>\n<p>Stay tuned!<\/p>\n<h2><strong>Thank You \ud83d\udc99<\/strong><\/h2>\n<p>We want to extend a sincere thank you to the entire Ionic community. Ionic 6 would not have been possible without the great community feedback, testing, and code contributions. We look forward to continuing to engage with the community to identify ways we can make Ionic even better.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today I am excited to announce the release of Ionic 6! This release adds improved desktop support, overhauled components, iOS and Android design changes, and so much more! Let&#8217;s take a look at what you can expect with Ionic 6.<\/p>\n","protected":false},"author":72,"featured_media":3966,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"0","publish_post_category":"23","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"538439","discourse_permalink":"https:\/\/forum.ionicframework.com\/t\/announcing-ionic-6\/218334","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[120,122],"tags":[3],"class_list":["post-3944","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-announcements","category-product","tag-ionic"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Announcing Ionic 6 - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/announcing-ionic-6\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Announcing Ionic 6\" \/>\n<meta property=\"og:description\" content=\"Today I am excited to announce the release of Ionic 6! This release adds improved desktop support, overhauled components, iOS and Android design changes, and so much more! Let&#8217;s take a look at what you can expect with Ionic 6.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/announcing-ionic-6\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-13T15:13:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-13T15:39:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/12\/ionic-6-feature-image-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Liam DeBeasi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@LiamDeBeasi\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Liam DeBeasi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-6#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-6\"},\"author\":{\"name\":\"Liam DeBeasi\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/d314e583cf08e7a28c51e8ffc3d621fa\"},\"headline\":\"Announcing Ionic 6\",\"datePublished\":\"2021-12-13T15:13:16+00:00\",\"dateModified\":\"2021-12-13T15:39:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-6\"},\"wordCount\":1377,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-6#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/12\/ionic-6-feature-image-1.png\",\"keywords\":[\"Ionic\"],\"articleSection\":[\"Announcements\",\"Product\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-ionic-6#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-6\",\"url\":\"https:\/\/ionic.io\/blog\/announcing-ionic-6\",\"name\":\"Announcing Ionic 6 - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-6#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-6#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/12\/ionic-6-feature-image-1.png\",\"datePublished\":\"2021-12-13T15:13:16+00:00\",\"dateModified\":\"2021-12-13T15:39:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-6#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-ionic-6\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-6#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/12\/ionic-6-feature-image-1.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/12\/ionic-6-feature-image-1.png\",\"width\":1600,\"height\":880,\"caption\":\"Ionic 6\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-6#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Announcing Ionic 6\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/d314e583cf08e7a28c51e8ffc3d621fa\",\"name\":\"Liam DeBeasi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ZNK4lRAJ_400x400-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ZNK4lRAJ_400x400-150x150.jpg\",\"caption\":\"Liam DeBeasi\"},\"sameAs\":[\"https:\/\/x.com\/LiamDeBeasi\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/liam\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Announcing Ionic 6 - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/announcing-ionic-6","og_locale":"en_US","og_type":"article","og_title":"Announcing Ionic 6","og_description":"Today I am excited to announce the release of Ionic 6! This release adds improved desktop support, overhauled components, iOS and Android design changes, and so much more! Let&#8217;s take a look at what you can expect with Ionic 6.","og_url":"https:\/\/ionic.io\/blog\/announcing-ionic-6","og_site_name":"Ionic Blog","article_published_time":"2021-12-13T15:13:16+00:00","article_modified_time":"2021-12-13T15:39:59+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/12\/ionic-6-feature-image-1.png","type":"image\/png"}],"author":"Liam DeBeasi","twitter_card":"summary_large_image","twitter_creator":"@LiamDeBeasi","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Liam DeBeasi","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-6#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-6"},"author":{"name":"Liam DeBeasi","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/d314e583cf08e7a28c51e8ffc3d621fa"},"headline":"Announcing Ionic 6","datePublished":"2021-12-13T15:13:16+00:00","dateModified":"2021-12-13T15:39:59+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-6"},"wordCount":1377,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-6#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/12\/ionic-6-feature-image-1.png","keywords":["Ionic"],"articleSection":["Announcements","Product"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/announcing-ionic-6#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-6","url":"https:\/\/ionic.io\/blog\/announcing-ionic-6","name":"Announcing Ionic 6 - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-6#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-6#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/12\/ionic-6-feature-image-1.png","datePublished":"2021-12-13T15:13:16+00:00","dateModified":"2021-12-13T15:39:59+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-6#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/announcing-ionic-6"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-6#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/12\/ionic-6-feature-image-1.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/12\/ionic-6-feature-image-1.png","width":1600,"height":880,"caption":"Ionic 6"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-6#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Announcing Ionic 6"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/d314e583cf08e7a28c51e8ffc3d621fa","name":"Liam DeBeasi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ZNK4lRAJ_400x400-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ZNK4lRAJ_400x400-150x150.jpg","caption":"Liam DeBeasi"},"sameAs":["https:\/\/x.com\/LiamDeBeasi"],"url":"https:\/\/ionic.io\/blog\/author\/liam"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/12\/ionic-6-feature-image-1.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3944","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/72"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=3944"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3944\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/3966"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=3944"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=3944"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=3944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}