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

Merge pull request #69 from phuoc-ng/custom-radio

Browse Source 
Add custom radio button
This commit is contained in:
phuoc-ng
2019-12-01 19:05:53 +07:00
committed by GitHub
parent fba9e42023 3a57915833
commit 86f323faa2
27 changed files with 288 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/constants/Pattern.ts
View File

@@ -8,6 +8,7 @@ enum Pattern {
CircularNavigation = 'Circular navigation',
CookieBanner = 'Cookie banner',
CornerRibbon = 'Corner ribbon',
CustomRadioButton = 'Custom radio button',
DockedAtCorner = 'Docked at corner',
DotLeader = 'Dot leader',
DotNavigation = 'Dot navigation',

28
client/layouts/Footer.tsx
View File

@@ -27,6 +27,7 @@ const Footer: React.FC<{}> = () => {
listStyleType: 'none',
margin: 0,
padding: 0,
width: '100%',
}}
>
<li style={{ alignItems: 'center', display: 'flex' }}>
@@ -42,14 +43,14 @@ const Footer: React.FC<{}> = () => {
</h3>
&#123;
</li>
<ul style={{ listStyleType: 'none', margin: 0, padding: '0 24px' }}>
<li>
css-layout,
<span style={{ color: 'rgba(0, 0, 0, 0.3)', marginLeft: '16px' }}>
<ul style={{ listStyleType: 'none', margin: 0, paddingLeft: '24px' }}>
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
<div>css-layout,</div>
<div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
/&#42; You are here &#42;/
</span>
</div>
</li>
<li>
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
<a
href="https://formvalidation.io"
style={{ textDecoration: 'none' }}
@@ -58,8 +59,11 @@ const Footer: React.FC<{}> = () => {
>
form-validation,
</a>
<div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
/&#42; A JS validation library &#42;/
</div>
</li>
<li>
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
<a
href="https://blur.page"
style={{ textDecoration: 'none' }}
@@ -68,8 +72,11 @@ const Footer: React.FC<{}> = () => {
>
blur-page,
</a>
<div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
/&#42; Chrome and Firefox extensions &#42;/
</div>
</li>
<li>
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
<a
href="https://react-pdf-viewer.dev"
style={{ textDecoration: 'none' }}
@@ -78,6 +85,9 @@ const Footer: React.FC<{}> = () => {
>
react-pdf-viewer,
</a>
<div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
/&#42; A React component &#42;/
</div>
</li>
</ul>
<li>&#125;</li>
@@ -114,7 +124,7 @@ const Footer: React.FC<{}> = () => {
</h3>
&#123;
</li>
<ul style={{ listStyleType: 'none', margin: 0, padding: '0 24px' }}>
<ul style={{ listStyleType: 'none', margin: 0, paddingLeft: '24px' }}>
<li style={{ alignItems: 'center', display: 'flex' }}>
<div>twitter:</div>
<a

1
client/pages/ExplorePage.tsx
View File

@@ -92,6 +92,7 @@ const ExplorePage = () => {
<CoverCard pattern={Pattern.CircularNavigation} />
<CoverCard pattern={Pattern.CookieBanner} />
<CoverCard pattern={Pattern.CornerRibbon} />
<CoverCard pattern={Pattern.CustomRadioButton} />
<CoverCard pattern={Pattern.DockedAtCorner} />
<CoverCard pattern={Pattern.DotLeader} />
<CoverCard pattern={Pattern.DotNavigation} />

2
client/patterns/avatar-list/Details.tsx
View File

@@ -58,7 +58,7 @@ const Details: React.FC<{}> = () => {
/* Add a white curve between avatars */
box-shadow: 0 0 0 4px #FFF;
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;
justify-content: center;

2
client/patterns/badge/Details.tsx
View File

@@ -39,7 +39,7 @@ const Details: React.FC<{}> = () => {
)}
source={`
<div style="
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;
justify-content: center;

2
client/patterns/button-with-icon/Details.tsx
View File

@@ -41,7 +41,7 @@ const Details: React.FC<{}> = () => {
)}
source={`
<button style="
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;
flex-direction: row;

2
client/patterns/circular-navigation/Details.tsx
View File

@@ -104,7 +104,7 @@ const Details: React.FC<{}> = () => {
*/
transform: rotate(-0deg);
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;
justify-content: center;

2
client/patterns/cookie-banner/Details.tsx
View File

@@ -53,7 +53,7 @@ const Details: React.FC<{}> = () => {
position: fixed;
width: 100%;
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;
justify-content: center;

75
client/patterns/custom-radio-button/Cover.tsx Normal file
View File

@@ -0,0 +1,75 @@
import React from 'react';
import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
marginBottom: '8px',
width: '100%',
}}
>
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
display: 'flex',
justifyContent: 'center',
marginRight: '8px',
padding: '4px',
}}
>
<Circle />
</div>
<div style={{ flex: 1 }}>
<Rectangle />
</div>
</div>
<div
style={{
alignItems: 'center',
display: 'flex',
marginBottom: '8px',
width: '100%',
}}
>
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
display: 'flex',
justifyContent: 'center',
marginRight: '8px',
padding: '4px',
}}
>
<Circle backgroundColor='transparent' />
</div>
<div style={{ flex: 1 }}>
<Rectangle />
</div>
</div>
</div>
</Frame>
);
};
export default Cover;

159
client/patterns/custom-radio-button/Details.tsx Normal file
View File

@@ -0,0 +1,159 @@
import React, { useState } from 'react';
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',
cursor: 'pointer',
display: 'inline-flex',
}}
>
<input
type="radio"
name="option"
value={value}
style={{ display: 'none' }}
onChange={click}
/>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
marginRight: '8px',
padding: '4px',
}}
>
<div
style={{
backgroundColor: value === selectedValue
? 'rgba(0, 0, 0, 0.3)'
: 'transparent',
borderRadius: '9999px',
height: '16px',
width: '16px',
}}
/>
</div>
{children}
</label>
);
};
return (
<DetailsLayout title="Custom radio button">
<div style={{ padding: '64px 32px' }}>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '200px' }}>
<div
style={{
alignItems: 'center',
display: 'inline-flex',
marginBottom: '16px',
}}
>
<Radio value='1'>
<div style={{ width: '100px' }}><Rectangle /></div>
</Radio>
</div>
<div
style={{
alignItems: 'center',
display: 'inline-flex',
marginBottom: '16px',
}}
>
<Radio value='2'>
<div style={{ width: '200px' }}><Rectangle /></div>
</Radio>
</div>
<div
style={{
alignItems: 'center',
display: 'inline-flex',
}}
>
<Radio value='3'>
<div style={{ width: '150px' }}><Rectangle /></div>
</Radio>
</div>
</div>
</div>
)}
source={`
<label style="
/* Center the content horizontally */
align-items: center;
display: inline-flex;
/* Cursor */
cursor: pointer;
">
<!-- The real radio -->
<input
type="radio"
style="
/* Hide it */
display: none;
"
/>
<!-- The fake circle -->
<div style="
/* Rounded border */
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 9999px;
/* Spacing */
margin-right: 8px;
padding: 4px;
">
<!-- The inner circle -->
<div style="
/* Rounded border */
border-radius: 9999px;
height: 16px;
width: 16px;
/* For selected radio */
background-color: rgba(0, 0, 0, 0.3);
/* For not selected radio */
background-color: transparent;
" />
</div>
<!-- The text -->
...
</div>
`}
/>
</div>
</DetailsLayout>
);
};
export default Details;

2
client/patterns/docked-at-corner/Details.tsx
View File

@@ -59,7 +59,7 @@ const Details: React.FC<{}> = () => {
top: 0;
transform: translate(50%, -50%);
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;
justify-content: center;

2
client/patterns/dot-leader/Details.tsx
View File

@@ -66,7 +66,7 @@ const Details: React.FC<{}> = () => {
)}
source={`
<div style="
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;
justify-content: center;

2
client/patterns/dot-navigation/Details.tsx
View File

@@ -63,7 +63,7 @@ const Details: React.FC<{}> = () => {
)}
source={`
<ul style="
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;
justify-content: center;

2
client/patterns/drop-area/Details.tsx
View File

@@ -40,7 +40,7 @@ const Details: React.FC<{}> = () => {
)}
source={`
<div style="
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;
justify-content: center;

2
client/patterns/full-screen-menu/Details.tsx
View File

@@ -91,7 +91,7 @@ const Details: React.FC<{}> = () => {
top: 0;
width: 100%;
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;
justify-content: center;

8
client/patterns/input-addon/Details.tsx
View File

@@ -144,7 +144,7 @@ const Details: React.FC<{}> = () => {
">
<!-- Add-on -->
<div style="
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
@@ -174,7 +174,7 @@ const Details: React.FC<{}> = () => {
<!-- Add-on -->
<div style="
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
@@ -192,7 +192,7 @@ const Details: React.FC<{}> = () => {
">
<!-- Add-on -->
<div style="
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
@@ -208,7 +208,7 @@ const Details: React.FC<{}> = () => {
<!-- Add-on -->
<div style="
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;
justify-content: center;

2
client/patterns/overlay-play-button/Details.tsx
View File

@@ -76,7 +76,7 @@ const Details: React.FC<{}> = () => {
height: 100%;
width: 100%;
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;
justify-content: center;

4
client/patterns/pagination/Details.tsx
View File

@@ -108,7 +108,7 @@ const Details: React.FC<{}> = () => {
">
<!-- Pagination item -->
<div style="
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
@@ -121,7 +121,7 @@ const Details: React.FC<{}> = () => {
<!-- Don't set the right border for the last item -->
<div style="
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;
justify-content: center;

2
client/patterns/progress-bar/Details.tsx
View File

@@ -61,7 +61,7 @@ const Details: React.FC<{}> = () => {
border-radius: 9999px;
">
<div style="
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;
justify-content: center;

2
client/patterns/radial-progress-bar/Details.tsx
View File

@@ -89,7 +89,7 @@ const Details: React.FC<{}> = () => {
">
<!-- Show number of percentages -->
<div style="
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;
justify-content: center;

2
client/patterns/rating/Details.tsx
View File

@@ -30,7 +30,7 @@ const Details: React.FC<{}> = () => {
source={`
<style>
.p-rating {
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;
justify-content: center;

4
client/patterns/stepper-input/Details.tsx
View File

@@ -99,7 +99,7 @@ const Details: React.FC<{}> = () => {
">
<!-- Minus button -->
<button style="
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
@@ -119,7 +119,7 @@ const Details: React.FC<{}> = () => {
<!-- Plus button -->
<button style="
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;
justify-content: center;

2
client/patterns/tab/Details.tsx
View File

@@ -73,7 +73,7 @@ const Details: React.FC<{}> = () => {
)}
source={`
<div style="
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;
justify-content: center;

2
client/patterns/upload-button/Details.tsx
View File

@@ -78,7 +78,7 @@ const Details: React.FC<{}> = () => {
/* Used to position the input */
position: relative;
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;

4
client/patterns/wizard/Details.tsx
View File

@@ -114,7 +114,7 @@ const Details: React.FC<{}> = () => {
flex: 1;
">
<div style="
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
@@ -133,7 +133,7 @@ const Details: React.FC<{}> = () => {
<!-- The step number -->
<div style="
/* Content is centered */
/* Center the content */
align-items: center;
display: flex;
justify-content: center;

8
client/placeholders/Circle.tsx
View File

@@ -1,14 +1,18 @@
import React from 'react';
interface CircleProps {
backgroundColor?: string;
size?: number;
}
const Circle: React.FC<CircleProps> = ({ size = 16 }) => {
const Circle: React.FC<CircleProps> = ({
backgroundColor = 'rgba(0, 0, 0, .3)',
size = 16,
}) => {
return (
<div
style={{
backgroundColor: 'rgba(0, 0, 0, .3)',
backgroundColor,
borderRadius: '9999px',
height: `${size}px`,
width: `${size}px`,

1
public/sitemap.xml
View File

@@ -14,6 +14,7 @@
<url><loc>https://csslayout.io/patterns/circular-navigation</loc></url>
<url><loc>https://csslayout.io/patterns/cookie-banner</loc></url>
<url><loc>https://csslayout.io/patterns/corner-ribbon</loc></url>
<url><loc>https://csslayout.io/patterns/custom-radio-button</loc></url>
<url><loc>https://csslayout.io/patterns/docked-at-corner</loc></url>
<url><loc>https://csslayout.io/patterns/dot-leader</loc></url>
<url><loc>https://csslayout.io/patterns/dot-navigation</loc></url>