mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-05 05:37:29 +02:00
Code Issues Releases Wiki Activity

feat: Switch

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-21 11:02:13 +07:00
parent 0b10a85fd8
commit 8ca8a87f96
8 changed files with 140 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
contents/_includes/patterns/switch.njk Normal file
View File

@@ -0,0 +1,8 @@
<label class="switch switch--off">
<input type="checkbox" class="switch__input" />
<div class="switch__circle"></div>
</label>
<label class="switch switch--on">
<input type="checkbox" class="switch__input" />
<div class="switch__circle"></div>
</label>

4
contents/badge.md
View File

@@ -33,6 +33,4 @@ keywords: css badge, css flexbox
}
```
{% demo %}
{% include "patterns/badge.njk" %}
{% enddemo %}
{% demo %}{% include "patterns/badge.njk" %}{% enddemo %}

1
contents/index.njk
View File

@@ -98,6 +98,7 @@ eleventyExcludeFromCollections: true
{% pattern "Slider" %}{% include "patterns/slider.njk" %}{% endpattern %}
{% 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 %}
</div>
</div>

83
contents/switch.md Normal file
View File

@@ -0,0 +1,83 @@
---
layout: layouts/post.njk
title: Switch
description: Create a switch with CSS flexbox
keywords: css custom checkbox, css flexbox, css switch, css switcher
---
The checkbox is placed inside a label. So when clicking on the label, the checkbox will be checked even though it's hidden.
## HTML
```html
<label class="switch switch--on">
<input type="checkbox" class="switch__input" />
<!-- Circle -->
<div class="switch__circle"></div>
</label>
<label class="switch switch--off">
<input type="checkbox" class="switch__input" />
<!-- Circle -->
<div class="switch__circle"></div>
</label>
```
## CSS
```css
.switch {
display: flex;
/* Rounded border */
border-radius: 9999px;
/* Size */
height: 2rem;
width: 4rem;
/* Demo */
margin-bottom: 0.5rem;
}
.switch__input {
/* Hide the input */
display: none;
}
.switch__circle {
/* Rounded border */
border-radius: 9999px;
/* Size */
width: 2rem;
background-color: #fff;
}
```
The switch comes with two variants:
```css
/* ON status */
.switch--on {
background-color: #357edd;
border: 1px solid #357edd;
/* Push the circle to the right */
justify-content: flex-end;
}
/* OFF status */
.switch--off {
background-color: #d1d5db;
border: 1px solid #d1d5db;
}
.switch--off .switch__circle {
border: 1px solid #d1d5db;
}
```
{% demo %}{% include "patterns/switch.njk" %}{% enddemo %}

122
pages/switch/index.tsx
View File

@@ -1,122 +0,0 @@
import * as React from 'react';
import Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
const [checked, setChecked] = React.useState(false);
const toggle = () => setChecked((c) => !c);
return (
<PatternLayout pattern={Pattern.Switch}>
<Head>
<meta name="description" content="Create a switch with CSS flexbox" />
<meta name="og:description" content="Create a switch with CSS flexbox" />
<meta name="twitter:description" content="Create a switch with CSS flexbox" />
<meta name="keywords" content="css custom checkbox, css flexbox, css switch, css switcher" />
</Head>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
The checkbox is placed inside a label. So when clicking on the label, the checkbox will be checked even
though it's hidden.
</div>
<BrowserFrame
html={`
<label class="label">
<input type="checkbox" class="label__input" />
<!-- Circle -->
<div class="label__circle"></div>
</label>
`}
css={`
.label {
display: flex;
/* Rounded border */
border-radius: 9999px;
/* Size */
height: 32px;
width: 64px;
/* OFF status */
background-color: rgba(0, 0, 0, 0.1);
border: 1px solid #d1d5db;
/* ON status */
background-color: #357edd;
border: 1px solid #357edd;
/* Push the circle to the right */
justify-content: flex-end;
}
.label__input {
/* Hide the input */
display: none;
}
.label__circle {
/* Rounded border */
border-radius: 9999px;
/* Size */
width: 32px;
background-color: #fff;
/* OFF status */
border: 1px solid #d1d5db;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<label
htmlFor="checkbox-switch"
style={{
backgroundColor: checked ? '#357EDD' : 'rgba(0, 0, 0, 0.1)',
border: `1px solid ${checked ? '#357EDD' : '#d1d5db'}`,
borderRadius: '9999px',
display: 'flex',
height: '32px',
justifyContent: checked ? 'flex-end' : '',
width: '64px',
}}
>
<input
id="checkbox-switch"
type="checkbox"
style={{ display: 'none' }}
checked={checked}
onChange={toggle}
/>
<div
style={{
backgroundColor: '#FFF',
border: checked ? '' : '1px solid #d1d5db',
borderRadius: '9999px',
width: '32px',
}}
/>
</label>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.RadioSwitch]} />
</PatternLayout>
);
};
export default Details;

43
patterns/switch/Cover.tsx
View File

@@ -1,43 +0,0 @@
import * as React from 'react';
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={{
backgroundColor: '#d1d5db',
border: '1px solid rgba(0, 0, 0, 0.1)',
borderRadius: '9999px',
display: 'flex',
height: '16px',
justifyContent: 'flex-end',
width: '32px',
}}
>
<div
style={{
backgroundColor: '#FFF',
borderRadius: '9999px',
height: '100%',
width: '16px',
}}
/>
</div>
</div>
</Frame>
);
};
export default Cover;

1
styles/index.scss
View File

@@ -73,6 +73,7 @@
@import './patterns/stepper-input';
@import './patterns/sticky-table-column';
@import './patterns/sticky-table-headers';
@import './patterns/switch';
@import './patterns/teardrop';
@import './patterns/three-dimensions-card';
@import './patterns/timeline';

46
styles/patterns/_switch.scss Normal file
View File

@@ -0,0 +1,46 @@
.switch {
display: flex;
/* Rounded border */
border-radius: 9999px;
/* Size */
height: 2rem;
width: 4rem;
/* Demo */
margin-bottom: 0.5rem;
}
.switch__input {
/* Hide the input */
display: none;
}
.switch__circle {
/* Rounded border */
border-radius: 9999px;
/* Size */
width: 2rem;
background-color: #fff;
}
/* ON status */
.switch--on {
background-color: #357edd;
border: 1px solid #357edd;
/* Push the circle to the right */
justify-content: flex-end;
}
/* OFF status */
.switch--off {
background-color: #d1d5db;
border: 1px solid #d1d5db;
}
.switch--off .switch__circle {
border: 1px solid #d1d5db;
}