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

Merge pull request #71 from phuoc-ng/radio-group

Browse Source 
Add radio button group
This commit is contained in:
phuoc-ng
2019-12-01 21:40:38 +07:00
committed by GitHub
parent 03b1daa6ae 0c66e2da32
commit 4bcf4f6af1
8 changed files with 205 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/constants/Pattern.ts
View File

@@ -35,6 +35,7 @@ enum Pattern {
ProgressBar = 'Progress bar',
QuestionsAndAnswers = 'Questions and answers',
RadialProgressBar = 'Radial progress bar',
RadioButtonGroup = 'Radio button group',
RadioSwitch = 'Radio switch',
Rating = 'Rating',
Ribbon = 'Ribbon',

1
client/pages/ExplorePage.tsx
View File

@@ -118,6 +118,7 @@ const ExplorePage = () => {
<CoverCard pattern={Pattern.ProgressBar} />
<CoverCard pattern={Pattern.QuestionsAndAnswers} />
<CoverCard pattern={Pattern.RadialProgressBar} />
<CoverCard pattern={Pattern.RadioButtonGroup} />
<CoverCard pattern={Pattern.RadioSwitch} />
<CoverCard pattern={Pattern.Rating} />
<CoverCard pattern={Pattern.Ribbon} />

2
client/patterns/custom-checkbox-button/Details.tsx
View File

@@ -151,7 +151,7 @@ const Details: React.FC<{}> = () => {
`}
/>
</div>
<RelatedPatterns patterns={[Pattern.CustomRadioButton]} />
<RelatedPatterns patterns={[Pattern.CustomRadioButton, Pattern.RadioButtonGroup]} />
</DetailsLayout>
);
};

2
client/patterns/custom-radio-button/Details.tsx
View File

@@ -154,7 +154,7 @@ const Details: React.FC<{}> = () => {
`}
/>
</div>
<RelatedPatterns patterns={[Pattern.CustomCheckboxButton]} />
<RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.RadioButtonGroup]} />
</DetailsLayout>
);
};

51
client/patterns/radio-button-group/Cover.tsx Normal file
View File

@@ -0,0 +1,51 @@
import 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={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
height: '24px',
width: '100%',
}}
>
<div
style={{
backgroundColor: '#00449E',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
flex: 1,
}}
/>
<div
style={{
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
flex: 1,
}}
/>
<div
style={{
flex: 1,
}}
/>
</div>
</div>
</Frame>
);
};
export default Cover;

143
client/patterns/radio-button-group/Details.tsx Normal file
View File

@@ -0,0 +1,143 @@
import React, { useState } from 'react';
import './radioButtonGroup.css';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
interface RadioProps {
value: string;
}
const Details: React.FC<{}> = () => {
const [selectedValue, setSelectedValue] = useState('1');
const Radio: React.FC<RadioProps> = ({ value, children }) => {
const click = () => setSelectedValue(value);
return (
<label
style={{
alignItems: 'center',
backgroundColor: value === selectedValue ? '#00449E' : 'transparent',
cursor: 'pointer',
display: 'inline-flex',
padding: '8px',
}}
>
<input
type="radio"
name="option"
value={value}
style={{ display: 'none' }}
onChange={click}
/>
{children}
</label>
);
};
return (
<DetailsLayout title="Radio button group">
<div style={{ padding: '64px 32px' }}>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
className="p-radio-button-group"
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
height: '32px',
}}
>
<Radio value='1'>
<div style={{ width: '80px' }}><Rectangle /></div>
</Radio>
<Radio value='2'>
<div style={{ width: '120px' }}><Rectangle /></div>
</Radio>
<Radio value='3'>
<div style={{ width: '100px' }}><Rectangle /></div>
</Radio>
</div>
</div>
)}
source={`
<style>
.p-radio-button-group label {
border-right: 1px solid rgba(0, 0, 0, 0.3);
}
/* Remove the right border from the last label */
.p-radio-button-group label:last-child {
border-right-color: transparent;
}
</style>
<div
class="p-radio-button-group"
style="
display: flex;
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
height: 32px;
"
>
<!-- Each radio item -->
<label style="
/* Center the content */
align-items: center;
display: inline-flex;
padding: 8px;
/* For selected radio */
background-color: #00449E;
color: #FFF;
/* For not selected radio */
background-color: transparent;
color: #CCC;
">
<!-- The radio input -->
<input
type="radio"
style="
/* Hide it */
display: none;
"
/>
<!-- The text -->
...
</label>
<!-- Repeat other items -->
...
</div>
`}
/>
</div>
<RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.CustomRadioButton]} />
</DetailsLayout>
);
};
export default Details;

6
client/patterns/radio-button-group/radioButtonGroup.css Normal file
View File

@@ -0,0 +1,6 @@
.p-radio-button-group label {
border-right: 1px solid rgba(0, 0, 0, 0.3);
}
.p-radio-button-group label:last-child {
border-right-color: transparent;
}

1
public/sitemap.xml
View File

@@ -40,6 +40,7 @@
<url><loc>https://csslayout.io/patterns/property-list</loc></url>
<url><loc>https://csslayout.io/patterns/questions-and-answers</loc></url>
<url><loc>https://csslayout.io/patterns/radial-progress-bar</loc></url>
<url><loc>https://csslayout.io/patterns/radio-button-group</loc></url>
<url><loc>https://csslayout.io/patterns/radio-switch</loc></url>
<url><loc>https://csslayout.io/patterns/rating</loc></url>
<url><loc>https://csslayout.io/patterns/ribbon</loc></url>