diff --git a/docs/api/input.md b/docs/api/input.md index e8dcc311e26..519963e4d9c 100644 --- a/docs/api/input.md +++ b/docs/api/input.md @@ -104,10 +104,18 @@ import HelperError from '@site/static/usage/v7/input/helper-error/index.md'; 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. +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. + import Counter from '@site/static/usage/v7/input/counter/index.md'; +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. + +import CounterAlignment from '@site/static/usage/v7/input/counter-alignment/index.md'; + + + ## Filtering User Input 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. diff --git a/static/usage/v7/input/counter-alignment/angular.md b/static/usage/v7/input/counter-alignment/angular.md new file mode 100644 index 00000000000..c08e1cdd758 --- /dev/null +++ b/static/usage/v7/input/counter-alignment/angular.md @@ -0,0 +1,11 @@ +```html + + + + + +
+ +
+ +``` diff --git a/static/usage/v7/input/counter-alignment/demo.html b/static/usage/v7/input/counter-alignment/demo.html new file mode 100644 index 00000000000..4fb07004def --- /dev/null +++ b/static/usage/v7/input/counter-alignment/demo.html @@ -0,0 +1,30 @@ + + + + + + Input + + + + + + + + + +
+ + + + + +
+ +
+ +
+ + + + diff --git a/static/usage/v7/input/counter-alignment/index.md b/static/usage/v7/input/counter-alignment/index.md new file mode 100644 index 00000000000..c590c8a24c8 --- /dev/null +++ b/static/usage/v7/input/counter-alignment/index.md @@ -0,0 +1,17 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v7/input/counter-alignment/javascript.md b/static/usage/v7/input/counter-alignment/javascript.md new file mode 100644 index 00000000000..3a9b526ba70 --- /dev/null +++ b/static/usage/v7/input/counter-alignment/javascript.md @@ -0,0 +1,11 @@ +```html + + + + + +
+ +
+ +``` diff --git a/static/usage/v7/input/counter-alignment/react.md b/static/usage/v7/input/counter-alignment/react.md new file mode 100644 index 00000000000..5687f244f0c --- /dev/null +++ b/static/usage/v7/input/counter-alignment/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonInput, IonItem, IonList } from '@ionic/react'; + +function Example() { + return ( + <> + + + + + +
+ +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v7/input/counter-alignment/vue.md b/static/usage/v7/input/counter-alignment/vue.md new file mode 100644 index 00000000000..77c9d4b0fde --- /dev/null +++ b/static/usage/v7/input/counter-alignment/vue.md @@ -0,0 +1,17 @@ +```html + + + +```