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

Add custom radio button

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-12-01 19:05:22 +07:00
parent fba9e42023
commit 3a57915833
27 changed files with 288 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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;