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

Use the proper handler for checkbox

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-24 20:27:49 +07:00
parent 2bef43cb22
commit 4299b6ee30
2 changed files with 3 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
client/patterns/radio-switch/Details.jsx
View File

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../../SampleCode';
const Details = () => {
@@ -17,11 +16,11 @@ const Details = () => {
<div className="h-100 flex flex-column items-center justify-center">
<div className="inline-flex br-pill bg-black-10 pa1">
<label className={`pointer pv3 ph2 br-pill ${isFirstChecked ? 'bg-blue white' : ''}`}>
<input type="radio" className="dn" checked={isFirstChecked} onClick={toggle} />
<input type="radio" className="dn" checked={isFirstChecked} onChange={toggle} />
<div className={`w3 br1 ${isFirstChecked ? 'bg-white' : 'bg-black-20'}`} style={{ height: '8px' }} />
</label>
<label className={`pointer pv3 ph2 br-pill ${isFirstChecked ? '' : 'bg-blue white'}`}>
<input type="radio" className="dn" checked={!isFirstChecked} onClick={toggle} />
<input type="radio" className="dn" checked={!isFirstChecked} onChange={toggle} />
<div className={`w3 br1 ${isFirstChecked ? 'bg-black-20' : 'bg-white'}`} style={{ height: '8px' }} />
</label>
</div>

2
client/patterns/switch/Details.jsx
View File

@@ -16,7 +16,7 @@ const Details = () => {
content={
<div className="h-100 flex flex-column items-center justify-center">
<label className={`ba br-pill h2 w3 flex ${checked ? 'justify-end b--blue bg-blue' : 'b--black-30 bg-black-10'}`}>
<input type="checkbox" className="dn" checked={checked} onClick={toggle} />
<input type="checkbox" className="dn" checked={checked} onChange={toggle} />
<div className={`bg-white br-pill w2 ${checked ? '' : 'ba b--black-30'}`} />
</label>
</div>