Skip to content

Commit 44caee9

Browse files
liamdebeasiliamdebeasi
authored
docs(password-toggle): add password toggle docs (#3541)
1 parent 67896a6 commit 44caee9

File tree

8 files changed

+129
-1
lines changed

8 files changed

+129
-1
lines changed

‎docs/api/input-password-toggle.md

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
title: "ion-password-toggle"
3+
---
4+
import Props from '@ionic-internal/component-api/v8/input-password-toggle/props.md';
5+
import Events from '@ionic-internal/component-api/v8/input-password-toggle/events.md';
6+
import Methods from '@ionic-internal/component-api/v8/input-password-toggle/methods.md';
7+
import Parts from '@ionic-internal/component-api/v8/input-password-toggle/parts.md';
8+
import CustomProps from '@ionic-internal/component-api/v8/input-password-toggle/custom-props.md';
9+
import Slots from '@ionic-internal/component-api/v8/input-password-toggle/slots.md';
10+
11+
<head>
12+
<title>ion-input-password-toggle: Toggle the visibility of a password in Input</title>
13+
<meta name="description" content="ion-input-password-toggle is a companion component to ion-input. It allows users to toggle the visibility of text in a password input." />
14+
</head>
15+
16+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
17+
18+
<EncapsulationPill type="shadow" />
19+
20+
21+
The InputPasswordToggle component is a companion component to [Input](./input). It allows users to toggle the visibility of text in a password input.
22+
23+
## Basic Usage
24+
25+
:::info
26+
InputPasswordToggle must be used with an [Input](./input) that has its [`type`](./input/#type) property set to either `'text'` or `'password'`.
27+
28+
Using any other `type` will cause a warning to be logged.
29+
:::
30+
31+
32+
import Basic from '@site/static/usage/v8/input-password-toggle/basic/index.md';
33+
34+
<Basic />
35+
36+
## Properties
37+
<Props />
38+
39+
## Events
40+
<Events />
41+
42+
## Methods
43+
<Methods />
44+
45+
## CSS Shadow Parts
46+
<Parts />
47+
48+
## CSS Custom Properties
49+
<CustomProps />
50+
51+
## Slots
52+
<Slots />

‎sidebars.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -352,7 +352,7 @@ module.exports = {
352352
type: 'category',
353353
label: 'Input',
354354
collapsed: false,
355-
items: ['api/input', 'api/textarea'],
355+
items: ['api/input', 'api/input-password-toggle', 'api/textarea'],
356356
},
357357
{
358358
type: 'category',

‎static/usage/v8/input-password-toggle/basic/angular.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
```html
2+
<ion-input type="password" label="Password" value="NeverGonnaGiveYouUp">
3+
<ion-input-password-toggle slot="end"></ion-input-password-toggle>
4+
</ion-input>
5+
```

‎static/usage/v8/input-password-toggle/basic/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@next/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
11+
12+
<style>
13+
ion-input.custom-input {
14+
width: fit-content;
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
<ion-app>
21+
<ion-content>
22+
<div class="container">
23+
<ion-input class="custom-input" type="password" label="Password" value="NeverGonnaGiveYouUp">
24+
<ion-input-password-toggle slot="end"></ion-input-password-toggle>
25+
</ion-input>
26+
</div>
27+
</ion-content>
28+
</ion-app>
29+
</body>
30+
</html>

‎static/usage/v8/input-password-toggle/basic/index.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
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="8"
10+
code={{ javascript, react, vue, angular }}
11+
src="usage/v8/input-password-toggle/basic/demo.html"
12+
/>

‎static/usage/v8/input-password-toggle/basic/javascript.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
```html
2+
<ion-input type="password" label="Password" value="NeverGonnaGiveYouUp">
3+
<ion-input-password-toggle slot="end"></ion-input-password-toggle>
4+
</ion-input>
5+
```

‎static/usage/v8/input-password-toggle/basic/react.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonInput, IonInputPasswordToggle } from '@ionic/react';
4+
5+
function Example() {
6+
return (
7+
<IonInput type="password" label="Password" value="NeverGonnaGiveYouUp">
8+
<IonInputPasswordToggle slot="end"></IonInputPasswordToggle>
9+
</IonInput>
10+
);
11+
}
12+
export default Example;
13+
```

‎static/usage/v8/input-password-toggle/basic/vue.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```html
2+
<template>
3+
<ion-input type="password" label="Password" value="NeverGonnaGiveYouUp">
4+
<ion-input-password-toggle slot="end"></ion-input-password-toggle>
5+
</ion-input>
6+
</template>
7+
8+
<script setup lang="ts">
9+
import { IonInput, InputPasswordToggle } from '@ionic/vue';
10+
</script>
11+
```

0 commit comments

Comments
 (0)