Skip to content

Commit bb90741

Browse files
mapsandappsbrandyscarney
mapsandapps
and
brandyscarney
authored
docs(input): notes about appropriate uses of counter (#3109)
* docs(input): note deprecated properties --------- Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
1 parent 288a265 commit bb90741

File tree

7 files changed

+115
-0
lines changed

7 files changed

+115
-0
lines changed

‎docs/api/input.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,10 +104,18 @@ import HelperError from '@site/static/usage/v7/input/helper-error/index.md';
104104

105105
The input counter is text that displays under an input to notify the user of how many characters have been entered out of the total that the input will accept. When adding counter, the default behavior is to format the value that gets displayed as `inputLength` / `maxLength`. This behavior can be customized by passing in a formatter function to the `counterFormatter` property.
106106

107+
The `counter` and `counterFormatter` properties on `ion-item` were [deprecated in Ionic 7](/docs/api/input#using-the-modern-syntax) and should be used directly on `ion-input` instead.
108+
107109
import Counter from '@site/static/usage/v7/input/counter/index.md';
108110

109111
<Counter />
110112

113+
Inputs with a counter add a border between the input and the counter, therefore they should not be placed inside of an `ion-item` which adds an additional border under the item. The `ion-padding-start` class can be added to align the counter inputs with inputs inside of items.
114+
115+
import CounterAlignment from '@site/static/usage/v7/input/counter-alignment/index.md';
116+
117+
<CounterAlignment />
118+
111119
## Filtering User Input
112120

113121
Developers can use the `ionInput` event to update the input value in response to user input such as a keypress. This is useful for filtering out invalid or unwanted characters.

‎static/usage/v7/input/counter-alignment/angular.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-input label="Text input" placeholder="Enter text"></ion-input>
5+
</ion-item>
6+
7+
<div class="ion-padding-start">
8+
<ion-input label="Counter input" [counter]="true" maxlength="20"></ion-input>
9+
</div>
10+
</ion-list>
11+
```

‎static/usage/v7/input/counter-alignment/demo.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Input</title>
7+
<link rel="stylesheet" href="../../../common.css" />
8+
<script src="../../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
11+
</head>
12+
13+
<body>
14+
<ion-app>
15+
<ion-content>
16+
<div class="container">
17+
<ion-list>
18+
<ion-item>
19+
<ion-input label="Text input" placeholder="Enter text"></ion-input>
20+
</ion-item>
21+
22+
<div class="ion-padding-start">
23+
<ion-input label="Counter input" counter="true" maxlength="20"></ion-input>
24+
</div>
25+
</ion-list>
26+
</div>
27+
</ion-content>
28+
</ion-app>
29+
</body>
30+
</html>

‎static/usage/v7/input/counter-alignment/index.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
import angular from './angular.md';
7+
8+
<Playground
9+
version="7"
10+
code={{
11+
javascript,
12+
react,
13+
vue,
14+
angular,
15+
}}
16+
src="usage/v7/input/counter-alignment/demo.html"
17+
/>

‎static/usage/v7/input/counter-alignment/javascript.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-input label="Text input" placeholder="Enter text"></ion-input>
5+
</ion-item>
6+
7+
<div class="ion-padding-start">
8+
<ion-input label="Counter input" counter="true" maxlength="20"></ion-input>
9+
</div>
10+
</ion-list>
11+
```

‎static/usage/v7/input/counter-alignment/react.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonInput, IonItem, IonList } from '@ionic/react';
4+
5+
function Example() {
6+
return (
7+
<>
8+
<IonList>
9+
<IonItem>
10+
<IonInput label="Text input" placeholder="Enter text"></IonInput>
11+
</IonItem>
12+
13+
<div className="ion-padding-start">
14+
<IonInput label="Counter input" counter={true} maxlength={20}></IonInput>
15+
</div>
16+
</IonList>
17+
</>
18+
);
19+
}
20+
export default Example;
21+
```

‎static/usage/v7/input/counter-alignment/vue.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
```html
2+
<template>
3+
<ion-list>
4+
<ion-item>
5+
<ion-input label="Text input" placeholder="Enter text"></ion-input>
6+
</ion-item>
7+
8+
<div class="ion-padding-start">
9+
<ion-input label="Counter input" :counter="true" maxlength="20"></ion-input>
10+
</div>
11+
</ion-list>
12+
</template>
13+
14+
<script lang="ts" setup>
15+
import { IonInput, IonItem, IonList } from '@ionic/vue';
16+
</script>
17+
```

0 commit comments

Comments
 (0)