Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(password-toggle): add password toggle docs #3541

Merged
merged 4 commits into from
Mar 27, 2024
Merged

docs(password-toggle): add password toggle docs #3541

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c0186d4
docs(password-toggle): add password toggle docs
liamdebeasi Mar 21, 2024
7c59a1e
spelling
liamdebeasi Mar 21, 2024
d3cca0c
add note about proper usage
liamdebeasi Mar 22, 2024
c88465b
chore: revert TODOs
liamdebeasi Mar 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions docs/api/input-password-toggle.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

<head>
<title>ion-input-password-toggle: Toggle the visibility of a password in Input</title>
<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." />
</head>

import EncapsulationPill from '@components/page/api/EncapsulationPill';

<EncapsulationPill type="shadow" />


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';

<Basic />

## Properties
<Props />

## Events
<Events />

## Methods
<Methods />

## CSS Shadow Parts
<Parts />

## CSS Custom Properties
<CustomProps />

## Slots
<Slots />
2 changes: 1 addition & 1 deletion sidebars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
5 changes: 5 additions & 0 deletions static/usage/v8/input-password-toggle/basic/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
```html
<ion-input type="password" label="Password" value="NeverGonnaGiveYouUp">
<ion-input-password-toggle slot="end"></ion-input-password-toggle>
</ion-input>
```
30 changes: 30 additions & 0 deletions static/usage/v8/input-password-toggle/basic/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Input</title>
<link rel="stylesheet" href="../../common.css" />
<script src="../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />

<style>
ion-input.custom-input {
width: fit-content;
}
</style>
</head>

<body>
<ion-app>
<ion-content>
<div class="container">
<ion-input class="custom-input" type="password" label="Password" value="NeverGonnaGiveYouUp">
<ion-input-password-toggle slot="end"></ion-input-password-toggle>
</ion-input>
</div>
</ion-content>
</ion-app>
</body>
</html>
12 changes: 12 additions & 0 deletions static/usage/v8/input-password-toggle/basic/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

<Playground
version="8"
code={{ javascript, react, vue, angular }}
src="usage/v8/input-password-toggle/basic/demo.html"
/>
5 changes: 5 additions & 0 deletions static/usage/v8/input-password-toggle/basic/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
```html
<ion-input type="password" label="Password" value="NeverGonnaGiveYouUp">
<ion-input-password-toggle slot="end"></ion-input-password-toggle>
</ion-input>
```
13 changes: 13 additions & 0 deletions static/usage/v8/input-password-toggle/basic/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
```tsx
import React from 'react';
import { IonInput, IonInputPasswordToggle } from '@ionic/react';

function Example() {
return (
<IonInput type="password" label="Password" value="NeverGonnaGiveYouUp">
<IonInputPasswordToggle slot="end"></IonInputPasswordToggle>
</IonInput>
);
}
export default Example;
```
11 changes: 11 additions & 0 deletions static/usage/v8/input-password-toggle/basic/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
```html
<template>
<ion-input type="password" label="Password" value="NeverGonnaGiveYouUp">
<ion-input-password-toggle slot="end"></ion-input-password-toggle>
</ion-input>
</template>

<script setup lang="ts">
import { IonInput, InputPasswordToggle } from '@ionic/vue';
</script>
```