We’re so excited to announce the release of Ionic 7.1 
. It is the first feature release of the Ionic 7
development cycle, and it’s packed with tons of new features for
datetime, input, select, and more.
Let’s get into it. 
Input Masking
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 “5555555555,” the input mask would automatically format the number so it displays as “+1 (555) 555-5555” in the text input. This makes data more readable to users.
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!
We have added a playground to the Input documentation that shows how to use input masking in Ionic. Check out the Maskito documentation to learn more about input masking.
HTML Labels for Select
In Ionic 7 we added a label 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 slot to Select so developers can provide HTML
labels. Developers who want to use plaintext labels can continue to
use the label property.
<ion-select fill="outline" label-placement="floating" value="apple">
<div slot="label">Favorite Fruit <ion-text color="danger">(Required)</ion-text></div>
<ion-select-option value="apple">Apple</ion-select-option>
<ion-select-option value="banana">Banana</ion-select-option>
<ion-select-option value="orange">Orange</ion-select-option>
</ion-select>HTML Labels for Input and Textarea
We also added a label 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 slot on Input and Textarea. Developers who want
to use plaintext labels can continue to use the label
property.
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.
<ion-input fill="outline" label-placement="floating" value="This email address is being protected from spambots. You need JavaScript enabled to view it. ">
<div slot="label">Email <ion-text color="danger">(Required)</ion-text></div>
</ion-input>
<ion-textarea fill="outline" label-placement="floating" value="Lorem Ipsum">
<div slot="label">Comments <ion-text color="danger">(Required)</ion-text></div>
</ion-textarea>Label Property for Range
In Ionic 7 we added a label 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 property to Range so developers can do just
that! Developers who want to use HTML labels can continue to use
the label slot.
<ion-range label="Temperature">
<ion-icon name="snow" slot="start"></ion-icon>
<ion-icon name="flame" slot="end"></ion-icon>
</ion-range>Datetime Styling
In Ionic 7.1 we are excited to provide developers with more tools to control the look of Datetime.
First, we added the wheel-item CSS Shadow Part to
customize each item in a wheel picker. We also added the
active part so developers can target the selected
picker item.
Following that feature, we added the time-button
CSS Shadow Part to customize the button that presents the time
wheel picker. We also added the active part so
developers can customize the button when the time wheel picker is
visible.
Next, we added --wheel-highlight-background and
--wheel-fade-background-rgb CSS Variables to customize
the highlight and fade effects on the wheel picker.
Finally, we added a month-year-button CSS Shadow
Part to customize the button that toggles the month and year wheel
picker.
ion-datetime {
--background: #333;
--wheel-highlight-background: #111;
--wheel-fade-background-rgb: 51, 51, 51;
border-radius: 8px;
width: 350px;
color: white;
}
ion-datetime::part(month-year-button) {
--color: white;
}
ion-datetime::part(time-button) {
background: #111;
color: white;
}Select Styling
CSS Shadow Parts have been added to the label and
container inside of Select, giving developers greater
control over the visual identity of the component.
ion-select {
--padding-start: 16px;
--padding-end: 16px;
--background: #e9eaff;
}
ion-select::part(container) {
width: 100%;
}
ion-select::part(label) {
color: #6e5afd;
}Custom Icons for Select
Developers can now control the icon used in Select with the
toggleIcon property. This property accepts any SVG
icon data, including an Ionicon. We also added
expandedIcon so developers can change the icon used
when the Select is open.
This new feature pairs well with the existing icon
CSS Shadow Part so you can customize the icon styles.
<style>
ion-select::part(icon) {
width: 22px;
color: #0088cc;
}
</style>
<ion-select toggle-icon="caret-down-circle-outline" expanded-icon="caret-up-circle-outline" fill="icon" label="Favorite Fruit" label-placement="floating">
<ion-select-option value="apple">Apple</ion-select-option>
<ion-select-option value="banana">Banana</ion-select-option>
<ion-select-option value="orange">Orange</ion-select-option>
</ion-select>Segment Type Improvements
Segment was updated to accept number values in addition to string values.
Thanks to Morritz for contributing to this feature!
<!-- Angular Code -->
<ion-segment [value]="1">
<ion-segment-button [value]="1">Option 1</ion-segment-button>
<ion-segment-button [value]="2">Option 2</ion-segment-button>
<ion-segment-button [value]="3">Option 3</ion-segment-button>
</ion-segment>Angular NavController Improvements
The NavController.pop() method in
@ionic/angular now returns a boolean so developers can
know if the pop operation was successful.
Thanks to andrzejpindor for contributing to this feature!
const result = await this.navController.pop();The post Announcing Ionic v7.1 appeared first on Ionic Blog.
