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

Rename to typescript extension

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-24 23:09:38 +07:00
parent bf35bd3b92
commit 642e179699
104 changed files with 183 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
client/patterns/radio-switch/Details.tsx Normal file
View File

@@ -0,0 +1,81 @@
import React, { useState } from 'react';
import Heading from '../../components/Heading';
import RelatedPatterns from '../../components/RelatedPatterns';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details = () => {
const [isFirstChecked, setFirstChecked] = useState(false);
const toggle = () => setFirstChecked(c => !c);
return (
<DetailsLayout title="Radio switch">
<div className="ph4 pv5">
<BrowserFrame
content={
<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} 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} onChange={toggle} />
<div className={`w3 br1 ${isFirstChecked ? 'bg-black-20' : 'bg-white'}`} style={{ height: '8px' }} />
</label>
</div>
</div>
}
source={`
<!-- Container -->
<div style="
background-color: rgba(0, 0, 0, .1);
border-radius: 9999px;
display: inline-flex;
padding: 4px;
">
<!-- Radio container -->
<label style="
border-radius: 9999px;
cursor: pointer;
padding: 4px 8px;
/* For selected radio only */
background-color: #357edd;
color: #fff;
">
<input type="radio" style="display: none" />
<!-- Text -->
...
</label>
<!-- Other radio item -->
...
</div>
`}
/>
</div>
<section>
<Heading title="Use cases" />
<div className="pa4">
<div className="inline-flex br-pill bg-black-10 pa1">
<label className="pointer pv1 ph2 br-pill flex bg-blue white">
<input type="radio" className="dn" />
Monthly
</label>
<label className="pointer pv1 ph2 br-pill flex">
<input type="radio" className="dn" />
Yearly
</label>
</div>
</div>
</section>
<RelatedPatterns patterns={['Switch']} />
</DetailsLayout>
);
};
export default Details;