mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-09-01 01:51:43 +02:00
Code Issues Releases Wiki Activity

feat: Toggle password visibility

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-21 11:46:06 +07:00
parent 31ee4ad4f0
commit 6460d04d47
7 changed files with 116 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
contents/_includes/patterns/toggle-password-visibility.njk Normal file
View File

@@ -0,0 +1,8 @@
<div class="toggle-password-visibility">
<input type="text" class="toggle-password-visibility__input" value="*****" />
<button class="toggle-password-visibility__toggle">
<svg class="toggle-password-visibility__svg" viewBox="0 0 24 24">
<path d="M23.5,12c0,0-5.148,6.5-11.5,6.5S0.5,12,0.5,12S5.648,5.5,12,5.5S23.5,12,23.5,12z M12,8c2.209,0,4,1.791,4,4 s-1.791,4-4,4s-4-1.791-4-4S9.791,8,12,8z M12,10c1.105,0,2,0.895,2,2s-0.895,2-2,2s-2-0.895-2-2"></path>
</svg>
</button>
</div>

1
contents/index.njk
View File

@@ -100,6 +100,7 @@ eleventyExcludeFromCollections: true
{% pattern "Spin button" %}{% include "patterns/spin-button.njk" %}{% endpattern %}
{% pattern "Stepper input" %}{% include "patterns/stepper-input.njk" %}{% endpattern %}
{% pattern "Switch" %}{% include "patterns/switch.njk" %}{% endpattern %}
{% pattern "Toggle password visibility" %}{% include "patterns/toggle-password-visibility.njk" %}{% endpattern %}
{% pattern "Upload button" %}{% include "patterns/upload-button.njk" %}{% endpattern %}
</div>
</div>

65
contents/toggle-password-visibility.md Normal file
View File

@@ -0,0 +1,65 @@
---
layout: layouts/post.njk
title: Toggle password visibility
description: Create a toggle password visibility with CSS flexbox
keywords: css flexbox, toggle password visibilit
---
## HTML
```html
<div class="toggle-password-visibility">
<!-- Text input -->
<input type="text" class="toggle-password-visibility__input" />
<!-- Toggle button sticks to the right -->
<button class="toggle-password-visibility__toggle">
...
</button>
</div>
```
## CSS
```css
.toggle-password-visibility {
display: flex;
/* Border */
border: 1px solid #d1d5db;
border-radius: 0.25rem;
padding: 0.25rem;
}
.toggle-password-visibility__input {
border-color: transparent;
/* Take available width */
flex: 1;
}
.toggle-password-visibility__toggle {
/* Reset */
background: #fff;
border-color: transparent;
/* Center the content */
display: flex;
align-items: center;
justify-content: center;
}
```
In reality, the `click` event handler of the button needs to update the `type` attribute of the input to `text` or `password`:
```js
document
.querySelector('.toggle-password-visibility__toggle')
.addEventListener('click', (e) => {
const input = e.target.previousElementSibling;
const type = input.getAttribute('type');
input.setAttribute('type', type === 'text' ? 'password' : 'text');
});
```
{% demo %}{% include "patterns/toggle-password-visibility.njk" %}{% enddemo %}