{"id":6655,"date":"2026-03-06T16:24:43","date_gmt":"2026-03-06T21:24:43","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=6655"},"modified":"2026-03-09T10:19:36","modified_gmt":"2026-03-09T14:19:36","slug":"announcing-ionic-framework-8-8","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8","title":{"rendered":"Announcing Ionic Framework 8.8"},"content":{"rendered":"\n<p>We&#8217;re excited to announce the release of <strong>Ionic Framework 8.8<\/strong>! This update makes customizing components easier and more flexible by adding new CSS classes, exposing internal elements through CSS Shadow Parts, and introducing new events for the Modal and Refresher components.<\/p>\n\n\n\n<p>Many of the features in this release <strong>support community-driven projects<\/strong> adapting Ionic Framework to implement both the latest iOS design system (Liquid Glass) and a Material Design 3 theme, giving developers the tools to create modern, fully branded design systems.<\/p>\n\n\n\n<p>Take a look at the new features that make customizing Ionic Framework <strong>simpler and more flexible<\/strong>. \u2935<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-new-drag-events-for-sheet-amp-card-modals\"><strong><strong>\ud83e\udef3<\/strong><\/strong> New Drag Events for Sheet &amp; Card Modals<\/h2>\n\n\n\n<p id=\"h-todo\">Modals now expose new drag events that let you hook into the complete drag lifecycle. With detailed movement data available, you can respond to position, velocity, progress, and breakpoint changes in real time, enabling richer, more interactive experiences.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-new-events\">New Events<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>ionDragStart<\/code>&nbsp;\u2014 fires at the start of the drag gesture without any details<\/li>\n\n\n\n<li><code>ionDragMove<\/code> \u2014 fires continuously while the modal is being dragged with <code>currentY<\/code>, <code>deltaY<\/code>, <code>velocityY<\/code>, <code>progress<\/code>, and, for sheet modals, <code>snapBreakpoint<\/code><\/li>\n\n\n\n<li><code>ionDragEnd<\/code>&nbsp;\u2014 fires at the end of the drag gesture with <code>currentY<\/code>, <code>deltaY<\/code>, <code>velocityY<\/code>, <code>progress<\/code>, and, for sheet modals, <code>snapBreakpoint<\/code><\/li>\n<\/ul>\n\n\n\n<p>These events make it possible to coordinate surrounding UI with the gesture. As the modal moves, you can reveal or conceal headers, footers, tab bars, or other interface elements, adjust layout and styling based on progress, and react instantly as the modal shifts position or approaches a breakpoint.<\/p>\n\n\n\n<figure class=\"wp-block-video device-demo\"><video height=\"2796\" style=\"aspect-ratio: 1290 \/ 2796;\" width=\"1290\" autoplay controls loop muted src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2026\/03\/feat-8.8-modal.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p>For more information, refer to the <a href=\"https:\/\/ionicframework.com\/docs\/api\/modal#event-handling\" target=\"_blank\" rel=\"noreferrer noopener\">Modal documentation<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-enhanced-dual-knob-support-in-range\"><strong><strong><strong>\ud83c\udfa2<\/strong><\/strong><\/strong> <strong>Enhanced Dual Knob Support in Range<\/strong><\/h2>\n\n\n\n<p>Range now includes significant improvements to dual knob behavior, bringing more predictable interactions and powerful new styling capabilities.<\/p>\n\n\n\n<p>We fixed an issue where knob identities (<code>A<\/code> and <code>B<\/code>) would unintentionally swap when crossing over each other. Knobs now retain their static identity, ensuring consistent behavior and styling.<\/p>\n\n\n\n<p>Beyond behavior improvements, Range now exposes additional host classes and Shadow Parts when <code>dualKnobs<\/code> is enabled, giving you complete control over styling and interaction states.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-new-host-classes\">New Host Classes<\/h3>\n\n\n\n<p>When <code>dualKnobs<\/code> is enabled, the following classes will be applied to the host element:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>range-dual-knobs<\/code> \u2014 always applied<\/li>\n\n\n\n<li><code>range-pressed-a<\/code> \u2014 applied when the knob with identity A is pressed<\/li>\n\n\n\n<li><code>range-pressed-b<\/code> \u2014 applied when the knob with identity B is pressed<\/li>\n\n\n\n<li><code>range-pressed-lower<\/code> \u2014 applied when the knob with position lower is pressed<\/li>\n\n\n\n<li><code>range-pressed-upper<\/code> \u2014 applied when the knob with position upper is pressed<\/li>\n<\/ul>\n\n\n\n<p>These classes allow you to style the component based on the existence of the <code>dualKnobs<\/code> property and which knob is currently being interacted with.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-new-shadow-parts\">New Shadow Parts<\/h3>\n\n\n\n<p>Dual knob ranges now support two styling models:<\/p>\n\n\n\n<p><strong>Static Identity (A \/ B)<br><\/strong>These parts always refer to the same physical knob, even if the knobs cross.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>knob-handle-a<\/code>, <code>knob-handle-b<\/code> \u2014 applied to the handle of the knob with identity A or B, respectively<\/li>\n\n\n\n<li><code>knob-a<\/code>, <code>knob-b<\/code> \u2014 applied to the knob itself with identity A or B<\/li>\n\n\n\n<li><code>pin-a<\/code>, <code>pin-<\/code>b \u2014 applied to the pin of the knob with identity A or B<\/li>\n<\/ul>\n\n\n\n<p><strong>Dynamic Position (Lower \/ Upper)<br><\/strong>These parts reflect the knob&#8217;s current value position. If the knobs cross, these parts swap automatically.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>knob-handle-lower<\/code>, <code>knob-handle-upper<\/code> \u2014 applied to the knob handle in the lower or upper position, respectively<\/li>\n\n\n\n<li><code>knob-lower<\/code>, <code>knob-upper<\/code> \u2014 applied to the knob itself in the lower or upper position<\/li>\n\n\n\n<li><code>pin-lower<\/code>, <code>pin-upper<\/code> \u2014 applied to the pin of the knob in the lower or upper position<\/li>\n<\/ul>\n\n\n\n<p>This makes it possible to style knobs either by consistent identity or by their relative position within the range.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-new-state-parts\">New State Parts<\/h3>\n\n\n\n<p>To support advanced interaction styling, Range now applies state parts to the active knob&#8217;s handle, knob, and pin:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>activated<\/code> \u2014 applied when the knob is active<\/li>\n\n\n\n<li><code>focused<\/code> \u2014 applied when the knob is focused<\/li>\n\n\n\n<li><code>hover<\/code> \u2014 applied when the knob is hovered<\/li>\n\n\n\n<li><code>pressed<\/code> \u2014 applied when the knob is being pressed<\/li>\n<\/ul>\n\n\n\n<p>Only one set of these state parts is applied at a time when <code>dualKnobs<\/code> is enabled, ensuring only the knob that has that state will be styled.<\/p>\n\n\n\n<p id=\"h-improved-styling-of-range\">These updates make dual knob ranges more reliable, more accessible, and significantly more customizable. Build advanced filtering controls, price selectors, or ranges fully branded to match your design system.<\/p>\n\n\n\n<figure class=\"wp-block-video device-demo\"><video height=\"2796\" style=\"aspect-ratio: 1290 \/ 2796;\" width=\"1290\" autoplay controls loop muted src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2026\/03\/feat-8.8-range.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p>For more information, refer to the <a href=\"https:\/\/ionicframework.com\/docs\/api\/range#css-shadow-parts\" target=\"_blank\" rel=\"noreferrer noopener\">Range documentation<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-new-pull-events-for-refresher\"><strong>\ud83d\udd04<\/strong> New Pull Events for Refresher<\/h2>\n\n\n\n<p id=\"h-new-pull-events-for-refresher\">Refresher now emits two new events that give more visibility into the pull gesture lifecycle, letting you respond to user interactions in real time. You can detect exactly when a user starts pulling, and when the refresher has fully returned to its inactive state, including whether the pull completed successfully or was canceled.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-new-events-0\">New Events<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>ionPullStart<\/code>&nbsp;\u2014 fires when the user begins pulling down, without any details<\/li>\n\n\n\n<li><code>ionPullEnd<\/code> \u2014 fires after the refresher returns to its inactive state, with a <code>reason<\/code> property (<code>&#039;complete&#039;<\/code> or <code>&#039;cancel&#039;<\/code>) indicating how the pull gesture ended<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-video device-demo\"><video height=\"2796\" style=\"aspect-ratio: 1290 \/ 2796;\" width=\"1290\" autoplay controls loop muted src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2026\/03\/feat-8.8-refresher.mp4\" playsinline><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-deprecated-event\">Deprecated Event<\/h3>\n\n\n\n<p><code>ionStart<\/code> has been deprecated in favor of <code>ionPullStart<\/code> to improve consistency across event names. Going forward, event names follow a structure of <strong>action<\/strong> + <strong>timing<\/strong> (such as <code>Start<\/code>, <code>Move<\/code>, or <code>End<\/code>) to make their purpose more explicit and to allow for better scalability as new events are added.<\/p>\n\n\n\n<p>The event payload is unchanged, so migrating only requires updating the event name.<\/p>\n\n\n\n<p><strong>Example Migration:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">\/\/ Before\nrefresher.addEventListener(&#039;ionStart&#039;, () =&gt; {\n  console.log(&#039;Pull Start&#039;);\n});\n\n\/\/ After\nrefresher.addEventListener(&#039;ionPullStart&#039;, () =&gt; {\n  console.log(&#039;Pull Start&#039;);\n});<\/code><\/pre>\n\n\n\n<p>For more information, refer to the <a href=\"https:\/\/ionicframework.com\/docs\/api\/refresher#event-handling\" target=\"_blank\" rel=\"noreferrer noopener\">Refresher documentation<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-new-css-shadow-parts-and-classes\">\ud83c\udfa8 New CSS Shadow Parts and Classes<\/h2>\n\n\n\n<p>We&#8217;ve introduced several new CSS Shadow Parts and classes to provide granular control over component internals previously inaccessible via global CSS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-content\">Content<\/h3>\n\n\n\n<p>The <code>.content-fullscreen<\/code> class is now added to <code>ion-content<\/code> when the <code>fullscreen<\/code> property is set to <code>true<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-datetime\">Datetime<\/h3>\n\n\n\n<p>The following Shadow Parts give developers control over the headers and calendar elements in the Datetime component:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>calendar-days-of-week<\/code> \u2014 container for the day-of-the-week header (both weekdays and weekends) when using a grid style layout<\/li>\n\n\n\n<li><code>calendar-header<\/code> \u2014 container for the month\/year picker, navigation buttons, and days of the week in a grid layout<\/li>\n\n\n\n<li><code>datetime-header<\/code> \u2014 contains the content for the title slot and the selected date<\/li>\n\n\n\n<li><code>datetime-selected-date<\/code> \u2014 contains the selected date<\/li>\n\n\n\n<li><code>datetime-title<\/code> \u2014 contains the <code>title<\/code> slot content<\/li>\n\n\n\n<li><code>navigation-button<\/code> \u2014 buttons used to navigate to the next or previous month in grid layout<\/li>\n\n\n\n<li><code>previous-button<\/code> \u2014 button used to navigate to the previous month in grid layout<\/li>\n\n\n\n<li><code>next-button<\/code> \u2014 button used to navigate to the next month in grid layout<\/li>\n\n\n\n<li><code>wheel<\/code> \u2014 wheel container when using a wheel style layout or in the month\/year picker in grid layout<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-item-amp-list-components\">Item &amp; List Components<\/h3>\n\n\n\n<p>To provide greater flexibility in customizing the appearance and structure of list elements, the following Shadow Parts have been added for Item, Item Divider, Item Option, and List Header components:<\/p>\n\n\n\n<p><strong>Item<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>inner<\/code> \u2014 arranges the item content<\/li>\n\n\n\n<li><code>container<\/code> \u2014 contains the default slot<\/li>\n<\/ul>\n\n\n\n<p id=\"h-item-divider\"><strong>Item Divider<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>inner<\/code> \u2014 arranges the divider content<\/li>\n\n\n\n<li><code>container<\/code> \u2014 contains the default slot<\/li>\n<\/ul>\n\n\n\n<p id=\"h-item-option\"><strong>Item Option<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>inner<\/code> \u2014 arranges the option content<\/li>\n\n\n\n<li><code>container<\/code> \u2014 contains the start, icon-only, default, and end slots<\/li>\n<\/ul>\n\n\n\n<p id=\"h-list-header\"><strong>List Header<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>inner<\/code> \u2014 arranges the list header content<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-range\">Range<\/h3>\n\n\n\n<p>The <code>.range-value-min<\/code> and <code>.range-value-max<\/code> classes are applied to <code>ion-range<\/code> when the value reaches the configured <code>min<\/code> or <code>max<\/code>. When <code>dualKnobs<\/code> is enabled, both classes may be applied at the same time if the lower and upper knobs are set to the minimum and maximum values, respectively.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-select\">Select<\/h3>\n\n\n\n<p>The following Shadow Parts allow developers to adjust the appearance of the Select component:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>bottom<\/code> \u2014 container for helper text, error text, and counter<\/li>\n\n\n\n<li><code>wrapper<\/code> \u2014 clickable label element wrapping the entire form field<\/li>\n\n\n\n<li><code>inner<\/code> \u2014 manages the slots, selected values or placeholder, and toggle icons<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-toast\">Toast<\/h3>\n\n\n\n<p>The following Shadow Parts enable customization of the Toast overlay and its content:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>wrapper<\/code> \u2014 outer wrapper for the toast overlay<\/li>\n\n\n\n<li><code>content<\/code> \u2014 live region containing the header and message<\/li>\n<\/ul>\n\n\n\n<p>Thanks to <a href=\"https:\/\/github.com\/Hurubon\" target=\"_blank\" rel=\"noreferrer noopener\">Hurubon<\/a> for adding this feature!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-new-and-updated-properties\">\u2728 New and Updated Properties<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-segment-view\">Segment View<\/h3>\n\n\n\n<p>A new <code>swipeGesture<\/code> property has been added to Segment View to control whether the view can be swiped.<\/p>\n\n\n\n<p>This setting is independent of the <code>swipeGesture<\/code> property on Segment. If you want to fully disable swiping, you must set <code>swipeGesture<\/code> to <code>&quot;false&quot;<\/code> on both the Segment and Segment View components.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-select-0\">Select<\/h3>\n\n\n\n<p>A new <code>cancelText<\/code> property has been added to the modal interface for Select.<\/p>\n\n\n\n<p>When using <code>interface=&quot;modal&quot;<\/code>, developers can now customize the cancel button text by setting the <code>cancelText<\/code> property on <code>ion-select<\/code>. The value will be passed through to the underlying modal.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">&lt;ion-select label=&quot;Fruit&quot; interface=&quot;modal&quot; value=&quot;bananas&quot; cancel-text=&quot;Close me&quot;&gt;\n  &lt;ion-select-option value=&quot;apples&quot;&gt;Apples&lt;\/ion-select-option&gt;\n  &lt;ion-select-option value=&quot;bananas&quot;&gt;Bananas&lt;\/ion-select-option&gt;\n  &lt;ion-select-option value=&quot;oranges&quot;&gt;Oranges&lt;\/ion-select-option&gt;\n&lt;\/ion-select&gt;<\/code><\/pre>\n\n\n\n<p>Thanks to <a href=\"https:\/\/github.com\/niconaso\" target=\"_blank\" rel=\"noreferrer noopener\">niconaso<\/a> for helping out with this!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-textarea\">Textarea<\/h3>\n\n\n\n<p>The <code>disabled<\/code> and <code>readonly<\/code> properties on Textarea now reflect to the host element.<\/p>\n\n\n\n<p>When either property is set, the corresponding HTML attribute is applied to the component&#8217;s host element. This improves consistency with native behavior and enables styling via attribute selectors.<\/p>\n\n\n\n<p>Thanks to <a href=\"https:\/\/github.com\/KillerCodeMonkey\" target=\"_blank\" rel=\"noreferrer noopener\">KillerCodeMonkey<\/a> for implementing this!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-angular-injector-support\">\ud83c\udd70\ufe0f Angular Injector Support<\/h2>\n\n\n\n<p><code>ModalController<\/code> and <code>PopoverController<\/code> in Angular now support passing a custom Injector when creating overlays.<\/p>\n\n\n\n<p>By default, overlays use the root injector for dependency injection. With this update, you can provide a custom injector so that components rendered inside a modal or popover can access services and tokens that are scoped to a specific route or component tree.<\/p>\n\n\n\n<p>This is especially useful when:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Using route-scoped services<\/li>\n\n\n\n<li>Providing Angular CDK&#8217;s <code>Dir<\/code> directive for bidirectional text support<\/li>\n\n\n\n<li>Accessing providers that are not registered at the root level<\/li>\n<\/ul>\n\n\n\n<p>You can pass the current component&#8217;s injector directly:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">const modal = await this.modalController.create({\n  component: MyModalComponent,\n  injector: this.injector,\n});<\/code><\/pre>\n\n\n\n<p>Or create a custom injector with specific providers:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">const customInjector = Injector.create({\n  providers: [{ provide: MyService, useValue: myServiceInstance }],\n  parent: this.injector,\n});\n\nconst modal = await this.modalController.create({\n  component: MyModalComponent,\n  injector: customInjector,\n});<\/code><\/pre>\n\n\n\n<p><code>PopoverController<\/code> supports the same injector option.<\/p>\n\n\n\n<p>This enhancement removes the need for wrapper components or other workarounds when overlays need access to locally scoped dependencies.<\/p>\n\n\n\n<p>Check out the <a href=\"https:\/\/ionicframework.com\/docs\/angular\/overlays\" target=\"_blank\" rel=\"noreferrer noopener\">Angular Overlays documentation<\/a> for more information.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-stencil-update\">\ud83e\udde9 Stencil Update<\/h2>\n\n\n\n<p>Stencil has been updated from <code>v4.38<\/code> to <code>v4.43<\/code>. This update includes various compiler improvements and bug fixes. For a complete list of changes, check out the <a href=\"https:\/\/github.com\/stenciljs\/core\/blob\/main\/CHANGELOG.md\" target=\"_blank\" rel=\"noreferrer noopener\">Stencil Changelog<\/a>.<\/p>\n\n\n\n<p>As with any dependency update, if you encounter issues related to this Stencil upgrade, please <a href=\"https:\/\/github.com\/ionic-team\/ionic-framework\/issues\" target=\"_blank\" rel=\"noreferrer noopener\">open a new issue<\/a> so we can investigate.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\ud83d\udd2e-Looking-Ahead:-The-Road-to-Ionic-9\">\ud83d\udd2e Looking Ahead: Ionic Framework 9<\/h2>\n\n\n\n<p>Ionic Framework 8.8 marks the final minor release in the Ionic 8 lifecycle. As we look ahead, our focus is shifting to the next major evolution of the framework: <strong>Ionic Framework 9<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-modular-ionic\">Modular Ionic<\/h3>\n\n\n\n<p>Ionic Framework 9 will introduce significant architectural changes aimed at making the framework <strong>more modular and easier to extend<\/strong>. These changes lay the foundation for greater flexibility in how developers customize and build on top of Ionic Framework.<\/p>\n\n\n\n<p>One of the main areas to benefit from Ionic Framework 9&#8217;s new architecture is <strong>theming<\/strong>. Developers will be able to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create and distribute custom themes without modifying the core framework<\/li>\n\n\n\n<li>Share reusable themes across projects<\/li>\n\n\n\n<li>Configure component behavior based on the theme<\/li>\n\n\n\n<li>Build themes inspired by design systems such as Liquid Glass<\/li>\n<\/ul>\n\n\n\n<p>While we are not planning to ship an official Liquid Glass theme right now, the goal is to provide the <strong>underlying architecture<\/strong> that enables developers to implement these types of design systems themselves without waiting on us.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-react-router-support\">React Router Support<\/h3>\n\n\n\n<p>Ionic Framework 9 will add support for <strong>React Router 6<\/strong>, enabling developers to adopt modern React routing patterns. This update lays the groundwork for future support of React Router 7. We&#8217;ll share more details on this soon.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<p>Ionic Framework 8.8 enhances customization today while also paving the way for the modular architecture and React Router 6 support coming in Ionic Framework 9. We can&#8217;t wait to see what you build with it! \ud83d\ude80<\/p>\n\n\n\n<script>document.querySelectorAll('.device-demo video').forEach(video => { video.style.aspectRatio = null});<\/script>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re excited to announce the release of Ionic Framework 8.8! This update makes customizing components easier and more flexible by adding new CSS classes, exposing internal elements through CSS Shadow Parts, and introducing new events for the Modal and Refresher components. Many of the features in this release support community-driven projects adapting Ionic Framework to [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":6656,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,120],"tags":[23,3],"class_list":["post-6655","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-announcements","tag-framework","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 Framework 8.8 - 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-framework-8-8\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Announcing Ionic Framework 8.8\" \/>\n<meta property=\"og:description\" content=\"We&#8217;re excited to announce the release of Ionic Framework 8.8! This update makes customizing components easier and more flexible by adding new CSS classes, exposing internal elements through CSS Shadow Parts, and introducing new events for the Modal and Refresher components. Many of the features in this release support community-driven projects adapting Ionic Framework to [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-06T21:24:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-09T14:19:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2026\/02\/8.8.0-blog-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2240\" \/>\n\t<meta property=\"og:image:height\" content=\"1120\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Brandy Smith\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brandy Smith\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 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-framework-8-8#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8\"},\"author\":{\"name\":\"Brandy Smith\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/fcd7940afdce3781b3381ec7c1b16c26\"},\"headline\":\"Announcing Ionic Framework 8.8\",\"datePublished\":\"2026-03-06T21:24:43+00:00\",\"dateModified\":\"2026-03-09T14:19:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8\"},\"wordCount\":1716,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2026\/02\/8.8.0-blog-feature-image.png\",\"keywords\":[\"Framework\",\"Ionic\"],\"articleSection\":[\"All\",\"Announcements\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8\",\"url\":\"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8\",\"name\":\"Announcing Ionic Framework 8.8 - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2026\/02\/8.8.0-blog-feature-image.png\",\"datePublished\":\"2026-03-06T21:24:43+00:00\",\"dateModified\":\"2026-03-09T14:19:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2026\/02\/8.8.0-blog-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2026\/02\/8.8.0-blog-feature-image.png\",\"width\":2240,\"height\":1120,\"caption\":\"Release graphic for Ionic Framework 8.8.0\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Announcing Ionic Framework 8.8\"}]},{\"@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\/fcd7940afdce3781b3381ec7c1b16c26\",\"name\":\"Brandy Smith\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/11\/headshot-zoomed-150x150.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/11\/headshot-zoomed-150x150.png\",\"caption\":\"Brandy Smith\"},\"url\":\"https:\/\/ionic.io\/blog\/author\/brandy\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Announcing Ionic Framework 8.8 - 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-framework-8-8","og_locale":"en_US","og_type":"article","og_title":"Announcing Ionic Framework 8.8","og_description":"We&#8217;re excited to announce the release of Ionic Framework 8.8! This update makes customizing components easier and more flexible by adding new CSS classes, exposing internal elements through CSS Shadow Parts, and introducing new events for the Modal and Refresher components. Many of the features in this release support community-driven projects adapting Ionic Framework to [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8","og_site_name":"Ionic Blog","article_published_time":"2026-03-06T21:24:43+00:00","article_modified_time":"2026-03-09T14:19:36+00:00","og_image":[{"width":2240,"height":1120,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2026\/02\/8.8.0-blog-feature-image.png","type":"image\/png"}],"author":"Brandy Smith","twitter_card":"summary_large_image","twitter_creator":"@ionicframework","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Brandy Smith","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8"},"author":{"name":"Brandy Smith","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/fcd7940afdce3781b3381ec7c1b16c26"},"headline":"Announcing Ionic Framework 8.8","datePublished":"2026-03-06T21:24:43+00:00","dateModified":"2026-03-09T14:19:36+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8"},"wordCount":1716,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2026\/02\/8.8.0-blog-feature-image.png","keywords":["Framework","Ionic"],"articleSection":["All","Announcements"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8","url":"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8","name":"Announcing Ionic Framework 8.8 - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2026\/02\/8.8.0-blog-feature-image.png","datePublished":"2026-03-06T21:24:43+00:00","dateModified":"2026-03-09T14:19:36+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2026\/02\/8.8.0-blog-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2026\/02\/8.8.0-blog-feature-image.png","width":2240,"height":1120,"caption":"Release graphic for Ionic Framework 8.8.0"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-framework-8-8#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Announcing Ionic Framework 8.8"}]},{"@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\/fcd7940afdce3781b3381ec7c1b16c26","name":"Brandy Smith","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/11\/headshot-zoomed-150x150.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/11\/headshot-zoomed-150x150.png","caption":"Brandy Smith"},"url":"https:\/\/ionic.io\/blog\/author\/brandy"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2026\/02\/8.8.0-blog-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/6655","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\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=6655"}],"version-history":[{"count":114,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/6655\/revisions"}],"predecessor-version":[{"id":6796,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/6655\/revisions\/6796"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/6656"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=6655"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=6655"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=6655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}