{"id":5411,"date":"2023-06-21T09:28:00","date_gmt":"2023-06-21T13:28:00","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=5411"},"modified":"2023-06-21T09:28:03","modified_gmt":"2023-06-21T13:28:03","slug":"announcing-ionic-v7-1","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1","title":{"rendered":"Announcing Ionic v7.1"},"content":{"rendered":"\n<p>We\u2019re so excited to announce the release of Ionic 7.1 \ud83c\udf89. It is the first feature release of the Ionic 7 development cycle, and it\u2019s packed with tons of new features for datetime, input, select, and more.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Let\u2019s get into it. \ud83d\udc47<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Input Masking<\/h2>\n\n\n\n<p>Input masking is coming to Ionic! Input masks are a way of formatting text as users type. For example, if a user types a US phone number as \u201c5555555555,\u201d the input mask would automatically format the number so it displays as \u201c+1 (555) 555-5555\u201d in the text input. This makes data more readable to users.<\/p>\n\n\n\n<p>We are excited to have <a href=\"https:\/\/tinkoff.github.io\/maskito\/getting-started\/what-is-maskito\">Maskito<\/a> as the recommended input masking library for Ionic Framework applications. The Maskito team has built a great library that works with any JavaScript Framework, and we cannot wait to see what you create with the power of input masking at your disposal!<\/p>\n\n\n\n<p>We have added a playground to the <a href=\"https:\/\/ionicframework.com\/docs\/api\/input#input-masking\">Input documentation<\/a> that shows how to use input masking in Ionic. Check out the&nbsp;<a href=\"https:\/\/tinkoff.github.io\/maskito\/core-concepts\/overview\" target=\"_blank\" rel=\"noreferrer noopener\">Maskito documentation<\/a>&nbsp;to learn more about input masking.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"374\" style=\"aspect-ratio: 1002 \/ 374;\" width=\"1002\" controls src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/input-masking-highres.mov\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">HTML Labels for Select<\/h2>\n\n\n\n<p>In Ionic 7 we added a <code>label<\/code> property to Select so developers can pass labels that are associated with the native form control. This worked for plaintext labels, but developers wanted a way to provide labels with custom HTML too. In Ionic 7.1 we added a <code>label<\/code> slot to Select so developers can provide HTML labels. Developers who want to use plaintext labels can continue to use the <code>label<\/code> property.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-slot-1-1024x221.png\" alt=\"\" class=\"wp-image-5415 lazyload\" width=\"450\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-slot-1-1024x221.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-slot-1-300x65.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-slot-1-768x165.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-slot-1-1536x331.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-slot-1-2048x441.png 2048w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/221;\" \/><noscript><img decoding=\"async\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-slot-1-1024x221.png\" alt=\"\" class=\"wp-image-5415\" width=\"450\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-slot-1-1024x221.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-slot-1-300x65.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-slot-1-768x165.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-slot-1-1536x331.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-slot-1-2048x441.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">&lt;ion-select fill=&quot;outline&quot; label-placement=&quot;floating&quot; value=&quot;apple&quot;&gt;\n  &lt;div slot=&quot;label&quot;&gt;Favorite Fruit &lt;ion-text color=&quot;danger&quot;&gt;(Required)&lt;\/ion-text&gt;&lt;\/div&gt;\n  &lt;ion-select-option value=&quot;apple&quot;&gt;Apple&lt;\/ion-select-option&gt;\n  &lt;ion-select-option value=&quot;banana&quot;&gt;Banana&lt;\/ion-select-option&gt;\n  &lt;ion-select-option value=&quot;orange&quot;&gt;Orange&lt;\/ion-select-option&gt;\n&lt;\/ion-select&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">HTML Labels for Input and Textarea<\/h2>\n\n\n\n<p>We also added a <code>label<\/code> property to both Input and Textarea in Ionic 7. Developers also wanted to provide labels with custom HTML. In Ionic 7.1 we added experimental support for the <code>label<\/code> slot on Input and Textarea. Developers who want to use plaintext labels can continue to use the <code>label<\/code> property.<\/p>\n\n\n\n<p>The Input and Textarea components do not use the Shadow DOM. As a result, they cannot take advantage of native Web Component slots. Fortunately, Stencil has a simulated slot feature that we are using for Input and Textarea. Since this behavior is simulated and may not perfectly match the native slot behavior, we have marked this feature as experimental.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/input-textarea-slot-1-1024x502.png\" alt=\"\" class=\"wp-image-5434 lazyload\" width=\"450\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/input-textarea-slot-1-1024x502.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/input-textarea-slot-1-300x147.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/input-textarea-slot-1-768x377.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/input-textarea-slot-1-1536x753.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/input-textarea-slot-1-2048x1004.png 2048w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/502;\" \/><noscript><img decoding=\"async\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/input-textarea-slot-1-1024x502.png\" alt=\"\" class=\"wp-image-5434\" width=\"450\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/input-textarea-slot-1-1024x502.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/input-textarea-slot-1-300x147.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/input-textarea-slot-1-768x377.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/input-textarea-slot-1-1536x753.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/input-textarea-slot-1-2048x1004.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">&lt;ion-input fill=&quot;outline&quot; label-placement=&quot;floating&quot; value=&quot;hi@ionic.io&quot;&gt;\n  &lt;div slot=&quot;label&quot;&gt;Email &lt;ion-text color=&quot;danger&quot;&gt;(Required)&lt;\/ion-text&gt;&lt;\/div&gt;\n&lt;\/ion-input&gt;\n\n&lt;ion-textarea fill=&quot;outline&quot; label-placement=&quot;floating&quot; value=&quot;Lorem Ipsum&quot;&gt;\n  &lt;div slot=&quot;label&quot;&gt;Comments &lt;ion-text color=&quot;danger&quot;&gt;(Required)&lt;\/ion-text&gt;&lt;\/div&gt;\n&lt;\/ion-textarea&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Label Property for Range<\/h2>\n\n\n\n<p>In Ionic 7 we added a <code>label<\/code> slot to Range. This was great for passing HTML labels, but developers needed an easier way to provide plaintext labels. In Ionic 7.1 we added a <code>label<\/code> property to Range so developers can do just that! Developers who want to use HTML labels can continue to use the <code>label<\/code> slot.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/range-label-prop-1-1024x67.png\" alt=\"\" class=\"wp-image-5435 lazyload\" width=\"450\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/range-label-prop-1-1024x67.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/range-label-prop-1-300x20.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/range-label-prop-1-768x50.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/range-label-prop-1-1536x101.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/range-label-prop-1-2048x134.png 2048w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/67;\" \/><noscript><img decoding=\"async\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/range-label-prop-1-1024x67.png\" alt=\"\" class=\"wp-image-5435\" width=\"450\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/range-label-prop-1-1024x67.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/range-label-prop-1-300x20.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/range-label-prop-1-768x50.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/range-label-prop-1-1536x101.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/range-label-prop-1-2048x134.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">&lt;ion-range label=&quot;Temperature&quot;&gt;\n  &lt;ion-icon name=&quot;snow&quot; slot=&quot;start&quot;&gt;&lt;\/ion-icon&gt;\n  &lt;ion-icon name=&quot;flame&quot; slot=&quot;end&quot;&gt;&lt;\/ion-icon&gt;\n&lt;\/ion-range&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Datetime Styling<\/h2>\n\n\n\n<p>In Ionic 7.1 we are excited to provide developers with more tools to control the look of Datetime.<\/p>\n\n\n\n<p>First, we added the <code>wheel-item<\/code> CSS Shadow Part to customize each item in a wheel picker. We also added the <code>active<\/code> part so developers can target the selected picker item.<\/p>\n\n\n\n<p>Following that feature, we added the <code>time-button<\/code> CSS Shadow Part to customize the button that presents the time wheel picker. We also added the <code>active<\/code> part so developers can customize the button when the time wheel picker is visible.<\/p>\n\n\n\n<p>Next, we added <code>--wheel-highlight-background<\/code> and <code>--wheel-fade-background-rgb<\/code> CSS Variables to customize the highlight and fade effects on the wheel picker.<\/p>\n\n\n\n<p>Finally, we added a <code>month-year-button<\/code> CSS Shadow Part to customize the button that toggles the month and year wheel picker.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-grid-1-1024x1024.png\" alt=\"\" class=\"wp-image-5430 lazyload\" width=\"450\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-grid-1-1024x1024.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-grid-1-300x300.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-grid-1-150x150.png 150w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-grid-1-768x768.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-grid-1-1536x1536.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-grid-1-2048x2048.png 2048w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/1024;\" \/><noscript><img decoding=\"async\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-grid-1-1024x1024.png\" alt=\"\" class=\"wp-image-5430\" width=\"450\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-grid-1-1024x1024.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-grid-1-300x300.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-grid-1-150x150.png 150w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-grid-1-768x768.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-grid-1-1536x1536.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-grid-1-2048x2048.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-time-picker-2-1024x1024.png\" alt=\"\" class=\"wp-image-5432 lazyload\" width=\"450\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-time-picker-2-1024x1024.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-time-picker-2-300x300.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-time-picker-2-150x150.png 150w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-time-picker-2-768x768.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-time-picker-2-1536x1536.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-time-picker-2-2048x2048.png 2048w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/1024;\" \/><noscript><img decoding=\"async\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-time-picker-2-1024x1024.png\" alt=\"\" class=\"wp-image-5432\" width=\"450\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-time-picker-2-1024x1024.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-time-picker-2-300x300.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-time-picker-2-150x150.png 150w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-time-picker-2-768x768.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-time-picker-2-1536x1536.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/datetime-time-picker-2-2048x2048.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">ion-datetime {\n  --background: #333;\n  --wheel-highlight-background: #111;\n  --wheel-fade-background-rgb: 51, 51, 51;\n\n  border-radius: 8px;\n\n  width: 350px;\n\n  color: white;\n}\n\nion-datetime::part(month-year-button) {\n  --color: white;\n}\n\nion-datetime::part(time-button) {\n  background: #111;\n  color: white;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Select Styling<\/h2>\n\n\n\n<p>CSS Shadow Parts have been added to the <code>label<\/code> and <code>container<\/code> inside of Select, giving developers greater control over the visual identity of the component.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-style-1-1024x159.png\" alt=\"\" class=\"wp-image-5437 lazyload\" width=\"450\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-style-1-1024x159.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-style-1-300x47.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-style-1-768x119.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-style-1-1536x239.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-style-1-2048x319.png 2048w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/159;\" \/><noscript><img decoding=\"async\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-style-1-1024x159.png\" alt=\"\" class=\"wp-image-5437\" width=\"450\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-style-1-1024x159.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-style-1-300x47.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-style-1-768x119.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-style-1-1536x239.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-style-1-2048x319.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">ion-select {\n  --padding-start: 16px;\n  --padding-end: 16px;\n\n  --background: #e9eaff;\n}\n\nion-select::part(container) {\n  width: 100%;\n}\n\nion-select::part(label) {\n  color: #6e5afd;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Custom Icons for Select<\/h2>\n\n\n\n<p>Developers can now control the icon used in Select with the <code>toggleIcon<\/code> property. This property accepts any SVG icon data, including an Ionicon. We also added <code>expandedIcon<\/code> so developers can change the icon used when the Select is open.<\/p>\n\n\n\n<p>This new feature pairs well with the existing <code>icon<\/code> CSS Shadow Part so you can customize the icon styles.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-icon-1-1024x217.png\" alt=\"\" class=\"wp-image-5438 lazyload\" width=\"450\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-icon-1-1024x217.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-icon-1-300x64.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-icon-1-768x163.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-icon-1-1536x325.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-icon-1-2048x434.png 2048w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/217;\" \/><noscript><img decoding=\"async\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-icon-1-1024x217.png\" alt=\"\" class=\"wp-image-5438\" width=\"450\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-icon-1-1024x217.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-icon-1-300x64.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-icon-1-768x163.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-icon-1-1536x325.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/select-icon-1-2048x434.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">&lt;style&gt;\nion-select::part(icon) {\n  width: 22px;\n\n  color: #0088cc;\n}\n&lt;\/style&gt;\n\n&lt;ion-select toggle-icon=&quot;caret-down-circle-outline&quot; expanded-icon=&quot;caret-up-circle-outline&quot; fill=&quot;icon&quot; label=&quot;Favorite Fruit&quot; label-placement=&quot;floating&quot;&gt;\n  &lt;ion-select-option value=&quot;apple&quot;&gt;Apple&lt;\/ion-select-option&gt;\n  &lt;ion-select-option value=&quot;banana&quot;&gt;Banana&lt;\/ion-select-option&gt;\n  &lt;ion-select-option value=&quot;orange&quot;&gt;Orange&lt;\/ion-select-option&gt;\n&lt;\/ion-select&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Segment Type Improvements<\/h2>\n\n\n\n<p>Segment was updated to accept number values in addition to string values.<\/p>\n\n\n\n<p>Thanks to <a href=\"https:\/\/github.com\/Morritz\">Morritz<\/a><strong> <\/strong>for contributing to this feature!<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">&lt;!-- Angular Code --&gt;\n&lt;ion-segment [value]=&quot;1&quot;&gt;\n  &lt;ion-segment-button [value]=&quot;1&quot;&gt;Option 1&lt;\/ion-segment-button&gt;\n  &lt;ion-segment-button [value]=&quot;2&quot;&gt;Option 2&lt;\/ion-segment-button&gt;\n  &lt;ion-segment-button [value]=&quot;3&quot;&gt;Option 3&lt;\/ion-segment-button&gt;\n&lt;\/ion-segment&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Angular NavController Improvements<\/h2>\n\n\n\n<p>The <code>NavController.pop()<\/code> method in<code> @ionic\/angular<\/code> now returns a boolean so developers can know if the pop operation was successful.<\/p>\n\n\n\n<p>Thanks to <a href=\"https:\/\/github.com\/andrzejpindor\">andrzejpindor<\/a> for contributing to this feature!<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">const result = await this.navController.pop();<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>We\u2019re so excited to announce the release of Ionic 7.1 \ud83c\udf89. It is the first feature release of the Ionic 7 development cycle, and it\u2019s packed with tons of new features for datetime, input, select, and more.<\/p>\n","protected":false},"author":72,"featured_media":5426,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"1","publish_post_category":"12","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"564869","discourse_permalink":"http:\/\/forum.ionicframework.com\/t\/announcing-ionic-v7-1\/234314","wpdc_publishing_response":"success","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[120,122],"tags":[23,3],"class_list":["post-5411","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-announcements","category-product","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 v7.1 - Ionic Blog<\/title>\n<meta name=\"description\" content=\"We\u2019re so excited to announce the release of Ionic 7.1. This release is packed with tons of new features for datetime, input, select, and more.\" \/>\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-v7-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Announcing Ionic v7.1\" \/>\n<meta property=\"og:description\" content=\"We\u2019re so excited to announce the release of Ionic 7.1. This release is packed with tons of new features for datetime, input, select, and more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-21T13:28:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-21T13:28:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/ionic-7.1-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=\"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=\"6 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-v7-1#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1\"},\"author\":{\"name\":\"Liam DeBeasi\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/d314e583cf08e7a28c51e8ffc3d621fa\"},\"headline\":\"Announcing Ionic v7.1\",\"datePublished\":\"2023-06-21T13:28:00+00:00\",\"dateModified\":\"2023-06-21T13:28:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1\"},\"wordCount\":669,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/ionic-7.1-feature-image.png\",\"keywords\":[\"Framework\",\"Ionic\"],\"articleSection\":[\"Announcements\",\"Product\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1\",\"url\":\"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1\",\"name\":\"Announcing Ionic v7.1 - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/ionic-7.1-feature-image.png\",\"datePublished\":\"2023-06-21T13:28:00+00:00\",\"dateModified\":\"2023-06-21T13:28:03+00:00\",\"description\":\"We\u2019re so excited to announce the release of Ionic 7.1. This release is packed with tons of new features for datetime, input, select, and more.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/ionic-7.1-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/ionic-7.1-feature-image.png\",\"width\":2240,\"height\":1120},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Announcing Ionic v7.1\"}]},{\"@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 v7.1 - Ionic Blog","description":"We\u2019re so excited to announce the release of Ionic 7.1. This release is packed with tons of new features for datetime, input, select, and more.","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-v7-1","og_locale":"en_US","og_type":"article","og_title":"Announcing Ionic v7.1","og_description":"We\u2019re so excited to announce the release of Ionic 7.1. This release is packed with tons of new features for datetime, input, select, and more.","og_url":"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1","og_site_name":"Ionic Blog","article_published_time":"2023-06-21T13:28:00+00:00","article_modified_time":"2023-06-21T13:28:03+00:00","og_image":[{"width":2240,"height":1120,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/ionic-7.1-feature-image.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":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1"},"author":{"name":"Liam DeBeasi","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/d314e583cf08e7a28c51e8ffc3d621fa"},"headline":"Announcing Ionic v7.1","datePublished":"2023-06-21T13:28:00+00:00","dateModified":"2023-06-21T13:28:03+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1"},"wordCount":669,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/ionic-7.1-feature-image.png","keywords":["Framework","Ionic"],"articleSection":["Announcements","Product"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/announcing-ionic-v7-1#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1","url":"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1","name":"Announcing Ionic v7.1 - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/ionic-7.1-feature-image.png","datePublished":"2023-06-21T13:28:00+00:00","dateModified":"2023-06-21T13:28:03+00:00","description":"We\u2019re so excited to announce the release of Ionic 7.1. This release is packed with tons of new features for datetime, input, select, and more.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/announcing-ionic-v7-1"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/ionic-7.1-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/ionic-7.1-feature-image.png","width":2240,"height":1120},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-v7-1#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Announcing Ionic v7.1"}]},{"@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\/2023\/06\/ionic-7.1-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5411","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=5411"}],"version-history":[{"count":21,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5411\/revisions"}],"predecessor-version":[{"id":5453,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5411\/revisions\/5453"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/5426"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=5411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=5411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=5411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}