June 21, 2023
  • Announcements
  • Product
  • Framework
  • Ionic

Announcing Ionic v7.1

Liam DeBeasi

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="hi@ionic.io">
  <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();

Liam DeBeasi

Related Posts