{"id":7393,"date":"2023-07-10T13:24:41","date_gmt":"2023-07-10T13:24:41","guid":{"rendered":"https:\/\/www.ntspl.co.in\/blog\/?p=7393"},"modified":"2023-08-24T07:36:04","modified_gmt":"2023-08-24T07:36:04","slug":"announcing-ionic-v7-1","status":"publish","type":"post","link":"https:\/\/www.ntspl.co.in\/blog\/announcing-ionic-v7-1\/","title":{"rendered":"Announcing Ionic v7.1"},"content":{"rendered":"

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

 <\/p>\n

Let\u2019s get into it. \"\ud83d\udc47\"<\/p>\n

Input Masking<\/h2>\n

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

We are excited to have Maskito 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

We have added a playground to the Input documentation<\/a> that shows how to use input masking in Ionic. Check out the\u00a0Maskito documentation\u00a0to learn more about input masking.<\/p>\n

HTML Labels for Select<\/h2>\n

In Ionic 7 we added a 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 label<\/code> slot to Select so developers can provide HTML labels. Developers who want to use plaintext labels can continue to use the label<\/code> property.<\/p>\n

\"\"<\/figure>\n
<ion-select fill=\"outline\" label-placement=\"floating\" value=\"apple\">\r\n  <div slot=\"label\">Favorite Fruit <ion-text color=\"danger\">(Required)<\/ion-text><\/div>\r\n  <ion-select-option value=\"apple\">Apple<\/ion-select-option>\r\n  <ion-select-option value=\"banana\">Banana<\/ion-select-option>\r\n  <ion-select-option value=\"orange\">Orange<\/ion-select-option>\r\n<\/ion-select><\/code><\/pre>\n
HTML Labels for Input and Textarea<\/h2>\n
We also added a 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 label<\/code> slot on Input and Textarea. Developers who want to use plaintext labels can continue to use the label<\/code> property.<\/p>\n
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
\"\"<\/figure>\n
<ion-input fill=\"outline\" label-placement=\"floating\" value=\"hi@ionic.io\">\r\n  <div slot=\"label\">Email <ion-text color=\"danger\">(Required)<\/ion-text><\/div>\r\n<\/ion-input>\r\n\r\n<ion-textarea fill=\"outline\" label-placement=\"floating\" value=\"Lorem Ipsum\">\r\n  <div slot=\"label\">Comments <ion-text color=\"danger\">(Required)<\/ion-text><\/div>\r\n<\/ion-textarea><\/code><\/pre>\n
Label Property for Range<\/h2>\n
In Ionic 7 we added a 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 label<\/code> property to Range so developers can do just that! Developers who want to use HTML labels can continue to use the label<\/code> slot.<\/p>\n
\"\"<\/figure>\n
<ion-range label=\"Temperature\">\r\n  <ion-icon name=\"snow\" slot=\"start\"><\/ion-icon>\r\n  <ion-icon name=\"flame\" slot=\"end\"><\/ion-icon>\r\n<\/ion-range><\/code><\/pre>\n
Datetime Styling<\/h2>\n
In Ionic 7.1 we are excited to provide developers with more tools to control the look of Datetime.<\/p>\n
First, we added the wheel-item<\/code> CSS Shadow Part to customize each item in a wheel picker. We also added the active<\/code> part so developers can target the selected picker item.<\/p>\n
Following that feature, we added the time-button<\/code> CSS Shadow Part to customize the button that presents the time wheel picker. We also added the active<\/code> part so developers can customize the button when the time wheel picker is visible.<\/p>\n
Next, we added --wheel-highlight-background<\/code> and --wheel-fade-background-rgb<\/code> CSS Variables to customize the highlight and fade effects on the wheel picker.<\/p>\n
Finally, we added a month-year-button<\/code> CSS Shadow Part to customize the button that toggles the month and year wheel picker.<\/p>\n
\"\"<\/figure>\n
\"\"<\/figure>\n
ion-datetime {\r\n  --background: #333;\r\n  --wheel-highlight-background: #111;\r\n  --wheel-fade-background-rgb: 51, 51, 51;\r\n\r\n  border-radius: 8px;\r\n\r\n  width: 350px;\r\n\r\n  color: white;\r\n}\r\n\r\nion-datetime::part(month-year-button) {\r\n  --color: white;\r\n}\r\n\r\nion-datetime::part(time-button) {\r\n  background: #111;\r\n  color: white;\r\n}<\/code><\/pre>\n
Select Styling<\/h2>\n
CSS Shadow Parts have been added to the label<\/code> and container<\/code> inside of Select, giving developers greater control over the visual identity of the component.<\/p>\n
\"\"<\/figure>\n
ion-select {\r\n  --padding-start: 16px;\r\n  --padding-end: 16px;\r\n\r\n  --background: #e9eaff;\r\n}\r\n\r\nion-select::part(container) {\r\n  width: 100%;\r\n}\r\n\r\nion-select::part(label) {\r\n  color: #6e5afd;\r\n}<\/code><\/pre>\n
Custom Icons for Select<\/h2>\n
Developers can now control the icon used in Select with the toggleIcon<\/code> property. This property accepts any SVG icon data, including an Ionicon. We also added expandedIcon<\/code> so developers can change the icon used when the Select is open.<\/p>\n
This new feature pairs well with the existing icon<\/code> CSS Shadow Part so you can customize the icon styles.<\/p>\n
\"\"<\/figure>\n
<style>\r\nion-select::part(icon) {\r\n  width: 22px;\r\n\r\n  color: #0088cc;\r\n}\r\n<\/style>\r\n\r\n<ion-select toggle-icon=\"caret-down-circle-outline\" expanded-icon=\"caret-up-circle-outline\" fill=\"icon\" label=\"Favorite Fruit\" label-placement=\"floating\">\r\n  <ion-select-option value=\"apple\">Apple<\/ion-select-option>\r\n  <ion-select-option value=\"banana\">Banana<\/ion-select-option>\r\n  <ion-select-option value=\"orange\">Orange<\/ion-select-option>\r\n<\/ion-select><\/code><\/pre>\n
Segment Type Improvements<\/h2>\n
Segment was updated to accept number values in addition to string values.<\/p>\n
Thanks to Morritz<\/a> for contributing to this feature!<\/p>\n
<!-- Angular Code -->\r\n<ion-segment [value]=\"1\">\r\n  <ion-segment-button [value]=\"1\">Option 1<\/ion-segment-button>\r\n  <ion-segment-button [value]=\"2\">Option 2<\/ion-segment-button>\r\n  <ion-segment-button [value]=\"3\">Option 3<\/ion-segment-button>\r\n<\/ion-segment><\/code><\/pre>\n
Angular NavController Improvements<\/h2>\n
The NavController.pop()<\/code> method in @ionic\/angular<\/code> now returns a boolean so developers can know if the pop operation was successful.<\/p>\n
Thanks to andrzejpindor<\/a> for contributing to this feature!<\/p>\n
const result = await this.navController.pop();<\/code><\/pre>\n
The post Announcing Ionic v7.1<\/a> appeared first on Ionic Blog<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
We\u2019re so excited to announce the release of Ionic 7.1 . 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.   Let\u2019s get into it. Input Masking Input masking is coming to Ionic! Input masks are a way […]<\/p>\n","protected":false},"author":1,"featured_media":7517,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[449,438],"tags":[544,543,542,546,545],"class_list":["post-7393","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ionic-apps","category-technology","tag-app-development","tag-cross-platform-mobile-apps","tag-ionic-v7-1","tag-mobile-app-framework","tag-stunning-ui-ux"],"acf":{"custom_meta_title":"Ionic 7.1: Empowering the Future of App Development","meta_description":"Discover the power of Ionic v7.1! Build breathtaking cross-platform mobile apps with the latest features and enhancements for unmatched performance. Read this Blog to know more!","meta_keyword":"Ionic v7.1, Cross-platform mobile apps, Cutting-edge features, App development, Enhancements, Developer tools, Performance optimization, Stunning UI\/UX, Mobile app framework, Latest release","other_meta_tag":"\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n"},"_links":{"self":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts\/7393"}],"collection":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/comments?post=7393"}],"version-history":[{"count":4,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts\/7393\/revisions"}],"predecessor-version":[{"id":7876,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts\/7393\/revisions\/7876"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/media\/7517"}],"wp:attachment":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/media?parent=7393"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/categories?post=7393"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/tags?post=7393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}