diff --git a/docs/api/input-password-toggle.md b/docs/api/input-password-toggle.md new file mode 100644 index 00000000000..ede03ccb3ea --- /dev/null +++ b/docs/api/input-password-toggle.md @@ -0,0 +1,52 @@ +--- +title: "ion-password-toggle" +--- +import Props from '@ionic-internal/component-api/v8/input-password-toggle/props.md'; +import Events from '@ionic-internal/component-api/v8/input-password-toggle/events.md'; +import Methods from '@ionic-internal/component-api/v8/input-password-toggle/methods.md'; +import Parts from '@ionic-internal/component-api/v8/input-password-toggle/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/input-password-toggle/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/input-password-toggle/slots.md'; + + + ion-input-password-toggle: Toggle the visibility of a password in Input + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + + +The InputPasswordToggle component is a companion component to [Input](./input). It allows users to toggle the visibility of text in a password input. + +## Basic Usage + +:::info +InputPasswordToggle must be used with an [Input](./input) that has its [`type`](./input/#type) property set to either `'text'` or `'password'`. + +Using any other `type` will cause a warning to be logged. +::: + + +import Basic from '@site/static/usage/v8/input-password-toggle/basic/index.md'; + + + +## Properties + + +## Events + + +## Methods + + +## CSS Shadow Parts + + +## CSS Custom Properties + + +## Slots + diff --git a/sidebars.js b/sidebars.js index e9094c63ef3..fa0deedbff8 100644 --- a/sidebars.js +++ b/sidebars.js @@ -352,7 +352,7 @@ module.exports = { type: 'category', label: 'Input', collapsed: false, - items: ['api/input', 'api/textarea'], + items: ['api/input', 'api/input-password-toggle', 'api/textarea'], }, { type: 'category', diff --git a/static/usage/v8/input-password-toggle/basic/angular.md b/static/usage/v8/input-password-toggle/basic/angular.md new file mode 100644 index 00000000000..5a1acf3ffc3 --- /dev/null +++ b/static/usage/v8/input-password-toggle/basic/angular.md @@ -0,0 +1,5 @@ +```html + + + +``` diff --git a/static/usage/v8/input-password-toggle/basic/demo.html b/static/usage/v8/input-password-toggle/basic/demo.html new file mode 100644 index 00000000000..642fae3652b --- /dev/null +++ b/static/usage/v8/input-password-toggle/basic/demo.html @@ -0,0 +1,30 @@ + + + + + + Input + + + + + + + + + + + +
+ + + +
+
+
+ + diff --git a/static/usage/v8/input-password-toggle/basic/index.md b/static/usage/v8/input-password-toggle/basic/index.md new file mode 100644 index 00000000000..037fec4f190 --- /dev/null +++ b/static/usage/v8/input-password-toggle/basic/index.md @@ -0,0 +1,12 @@ +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/v8/input-password-toggle/basic/javascript.md b/static/usage/v8/input-password-toggle/basic/javascript.md new file mode 100644 index 00000000000..5a1acf3ffc3 --- /dev/null +++ b/static/usage/v8/input-password-toggle/basic/javascript.md @@ -0,0 +1,5 @@ +```html + + + +``` diff --git a/static/usage/v8/input-password-toggle/basic/react.md b/static/usage/v8/input-password-toggle/basic/react.md new file mode 100644 index 00000000000..88ade62f97c --- /dev/null +++ b/static/usage/v8/input-password-toggle/basic/react.md @@ -0,0 +1,13 @@ +```tsx +import React from 'react'; +import { IonInput, IonInputPasswordToggle } from '@ionic/react'; + +function Example() { + return ( + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/input-password-toggle/basic/vue.md b/static/usage/v8/input-password-toggle/basic/vue.md new file mode 100644 index 00000000000..806941c3762 --- /dev/null +++ b/static/usage/v8/input-password-toggle/basic/vue.md @@ -0,0 +1,11 @@ +```html + + + +```