mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-11 00:24:12 +02:00
feat: Toggle password visibility
This commit is contained in:
Phuoc Nguyen
@@ -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>
|
||||
@@ -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
65
contents/toggle-password-visibility.md
Normal 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 %}
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -78,6 +78,7 @@
|
||||
@import './patterns/teardrop';
|
||||
@import './patterns/three-dimensions-card';
|
||||
@import './patterns/timeline';
|
||||
@import './patterns/toggle-password-visibility';
|
||||
@import './patterns/tooltip';
|
||||
@import './patterns/tree-diagram';
|
||||
@import './patterns/triangle-buttons';
|
||||
|
||||
41
styles/patterns/_toggle-password-visibility.scss
Normal file
41
styles/patterns/_toggle-password-visibility.scss
Normal 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;
|
||||
}
|
||||
Reference in New Issue
Block a user