mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-13 17:44:19 +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 "Spin button" %}{% include "patterns/spin-button.njk" %}{% endpattern %}
{% pattern "Stepper input" %}{% include "patterns/stepper-input.njk" %}{% endpattern %} {% pattern "Stepper input" %}{% include "patterns/stepper-input.njk" %}{% endpattern %}
{% pattern "Switch" %}{% include "patterns/switch.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 %} {% pattern "Upload button" %}{% include "patterns/upload-button.njk" %}{% endpattern %}
</div> </div>
</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 %}

108
pages/toggle-password-visibility/index.tsx
View File

@@ -1,108 +0,0 @@
import * as React from 'react';
import Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
const [visible, setVisible] = React.useState(false);
const toggle = () => setVisible((v) => !v);
return (
<PatternLayout pattern={Pattern.TogglePasswordVisibility}>
<Head>
<meta name="description" content="Create a toggle password visibility with CSS flexbox" />
<meta name="og:description" content="Create a toggle password visibility with CSS flexbox" />
<meta name="twitter:description" content="Create a toggle password visibility with CSS flexbox" />
<meta name="keywords" content="css flexbox, toggle password visibility" />
</Head>
<BrowserFrame
html={`
<div class="container">
<!-- Text input -->
<input type="text" class="container__input" />
<!-- Toggle button sticks to the right -->
<button>
...
</button>
</div>
`}
css={`
.container {
display: flex;
/* Border */
border: 1px solid #d1d5db;
}
.container__input {
border-color: transparent;
/* Take available width */
flex: 1;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '256px' }}>
<div
style={{
border: '1px solid #d1d5db',
borderRadius: '4px',
display: 'flex',
}}
>
<input
type={visible ? 'text' : 'password'}
autoComplete="off"
style={{
borderColor: 'transparent',
flex: 1,
marginLeft: '1px',
padding: '4px',
}}
/>
<button
style={{ borderColor: 'transparent', marginRight: '1px', padding: '8px' }}
onClick={toggle}
>
<svg
viewBox="0 0 24 24"
style={{
fill: 'none',
height: '24px',
stroke: 'rgba(0, 0, 0, 0.4)',
strokeLinecap: 'round',
strokeLinejoin: 'round',
strokeWidth: 1,
width: '24px',
}}
>
<path
d={
visible
? `M19.518,8.288C20.993,9.357,22.331,10.603,23.5,12c0,0-5.148,6.5-11.5,6.5c-1.017-0.006-2.028-0.162-3-0.464 M4.468,15.7C2.998,14.634,1.666,13.392,0.5,12c0,0,5.148-6.5,11.5-6.5c0.844,0.004,1.683,0.113,2.5,0.325 M8,12 c0-2.209,1.791-4,4-4 M16,12c0,2.209-1.791,4-4,4 M21.75,2.25l-19.5,19.5`
: `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`
}
/>
</svg>
</button>
</div>
</div>
</div>
</BrowserFrame>
</PatternLayout>
);
};
export default Details;

48
patterns/toggle-password-visibility/Cover.tsx
View File

@@ -1,48 +0,0 @@
import * as React from 'react';
import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
border: '1px solid #d1d5db',
borderRadius: '4px',
display: 'flex',
justifyContent: 'space-between',
padding: '4px',
width: '100%',
}}
>
<div style={{ alignItems: 'center', display: 'flex' }}>
<div style={{ marginRight: '4px' }}>
<Circle size={8} />
</div>
<div style={{ marginRight: '4px' }}>
<Circle size={8} />
</div>
<div style={{ marginRight: '4px' }}>
<Circle size={8} />
</div>
</div>
<Circle />
</div>
</div>
</Frame>
);
};
export default Cover;

1
styles/index.scss
View File

@@ -78,6 +78,7 @@
@import './patterns/teardrop'; @import './patterns/teardrop';
@import './patterns/three-dimensions-card'; @import './patterns/three-dimensions-card';
@import './patterns/timeline'; @import './patterns/timeline';
@import './patterns/toggle-password-visibility';
@import './patterns/tooltip'; @import './patterns/tooltip';
@import './patterns/tree-diagram'; @import './patterns/tree-diagram';
@import './patterns/triangle-buttons'; @import './patterns/triangle-buttons';

41
styles/patterns/_toggle-password-visibility.scss Normal file
View File

@@ -0,0 +1,41 @@
.toggle-password-visibility {
display: flex;
/* Border */
border: 1px solid #d1d5db;
border-radius: 0.25rem;
padding: 0.25rem;
/* Demo */
height: 2.5rem;
}
.toggle-password-visibility__input {
border-color: transparent;
/* Take available width */
flex: 1;
/* Demo */
width: 6rem;
}
.toggle-password-visibility__toggle {
/* Reset */
background: #fff;
border-color: transparent;
/* Center the content */
display: flex;
align-items: center;
justify-content: center;
}
.toggle-password-visibility__svg {
fill: none;
height: 1.5rem;
stroke: #d1d5db;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1;
width: 1.5rem;
}