mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-05 13:47:25 +02:00
Merge pull request #70 from phuoc-ng/custom-checkbox-button
Add custom checkbox button
This commit is contained in:
phuoc-ng
GitHub
@@ -8,6 +8,7 @@ enum Pattern {
|
||||
CircularNavigation = 'Circular navigation',
|
||||
CookieBanner = 'Cookie banner',
|
||||
CornerRibbon = 'Corner ribbon',
|
||||
CustomCheckboxButton = 'Custom checkbox button',
|
||||
CustomRadioButton = 'Custom radio button',
|
||||
DockedAtCorner = 'Docked at corner',
|
||||
DotLeader = 'Dot leader',
|
||||
|
||||
@@ -92,6 +92,7 @@ const ExplorePage = () => {
|
||||
<CoverCard pattern={Pattern.CircularNavigation} />
|
||||
<CoverCard pattern={Pattern.CookieBanner} />
|
||||
<CoverCard pattern={Pattern.CornerRibbon} />
|
||||
<CoverCard pattern={Pattern.CustomCheckboxButton} />
|
||||
<CoverCard pattern={Pattern.CustomRadioButton} />
|
||||
<CoverCard pattern={Pattern.DockedAtCorner} />
|
||||
<CoverCard pattern={Pattern.DotLeader} />
|
||||
|
||||
79
client/patterns/custom-checkbox-button/Cover.tsx
Normal file
79
client/patterns/custom-checkbox-button/Cover.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
import Square from '../../placeholders/Square';
|
||||
|
||||
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: '4px',
|
||||
display: 'flex',
|
||||
height: '24px',
|
||||
justifyContent: 'center',
|
||||
marginRight: '8px',
|
||||
padding: '4px',
|
||||
width: '24px',
|
||||
}}
|
||||
>
|
||||
<Square backgroundColor='transparent' />
|
||||
</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: '4px',
|
||||
display: 'flex',
|
||||
height: '24px',
|
||||
justifyContent: 'center',
|
||||
marginRight: '8px',
|
||||
padding: '4px',
|
||||
width: '24px',
|
||||
}}
|
||||
>
|
||||
<Square backgroundColor='#00449E' />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
159
client/patterns/custom-checkbox-button/Details.tsx
Normal file
159
client/patterns/custom-checkbox-button/Details.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
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 CheckboxProps {
|
||||
isChecked: boolean;
|
||||
value: string;
|
||||
}
|
||||
|
||||
const Details: React.FC<{}> = () => {
|
||||
const Checkbox: React.FC<CheckboxProps> = ({ isChecked, value, children }) => {
|
||||
const [checked, setChecked] = useState(isChecked);
|
||||
const click = () => setChecked((c) => !c);
|
||||
|
||||
return (
|
||||
<label
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
cursor: 'pointer',
|
||||
display: 'inline-flex',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="option"
|
||||
value={value}
|
||||
checked={checked}
|
||||
style={{ display: 'none' }}
|
||||
onChange={click}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
marginRight: '8px',
|
||||
padding: '4px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: checked ? '#00449E' : 'transparent',
|
||||
borderRadius: '4px',
|
||||
height: '16px',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{children}
|
||||
</label>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<DetailsLayout title="Custom checkbox 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',
|
||||
}}
|
||||
>
|
||||
<Checkbox value='1' isChecked={false}>
|
||||
<div style={{ width: '100px' }}><Rectangle /></div>
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<Checkbox value='2' isChecked={true}>
|
||||
<div style={{ width: '200px' }}><Rectangle /></div>
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
}}
|
||||
>
|
||||
<Checkbox value='3' isChecked={false}>
|
||||
<div style={{ width: '150px' }}><Rectangle /></div>
|
||||
</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<label style="
|
||||
/* Center the content horizontally */
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
|
||||
/* Cursor */
|
||||
cursor: pointer;
|
||||
">
|
||||
<!-- The real checkbox -->
|
||||
<input
|
||||
type="checkbox"
|
||||
style="
|
||||
/* Hide it */
|
||||
display: none;
|
||||
"
|
||||
/>
|
||||
|
||||
<!-- The fake square -->
|
||||
<div style="
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
|
||||
/* Spacing */
|
||||
margin-right: 8px;
|
||||
padding: 4px;
|
||||
">
|
||||
<!-- The inner square -->
|
||||
<div style="
|
||||
border-radius: 4px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
|
||||
/* For selected checkbox */
|
||||
background-color: #00449E;
|
||||
|
||||
/* For not selected checkbox */
|
||||
background-color: transparent;
|
||||
" />
|
||||
</div>
|
||||
|
||||
<!-- The text -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.CustomRadioButton]} />
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
@@ -36,7 +36,7 @@ const Cover: React.FC<{}> = () => {
|
||||
padding: '4px',
|
||||
}}
|
||||
>
|
||||
<Circle />
|
||||
<Circle backgroundColor='#00449E' />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<Rectangle />
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
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';
|
||||
@@ -40,7 +42,7 @@ const Details: React.FC<{}> = () => {
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: value === selectedValue
|
||||
? 'rgba(0, 0, 0, 0.3)'
|
||||
? '#00449E'
|
||||
: 'transparent',
|
||||
borderRadius: '9999px',
|
||||
height: '16px',
|
||||
@@ -139,7 +141,7 @@ const Details: React.FC<{}> = () => {
|
||||
width: 16px;
|
||||
|
||||
/* For selected radio */
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
background-color: #00449E;
|
||||
|
||||
/* For not selected radio */
|
||||
background-color: transparent;
|
||||
@@ -152,6 +154,7 @@ const Details: React.FC<{}> = () => {
|
||||
`}
|
||||
/>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.CustomCheckboxButton]} />
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,14 +1,18 @@
|
||||
import React from 'react';
|
||||
|
||||
interface SquareProps {
|
||||
backgroundColor?: string;
|
||||
size?: number;
|
||||
}
|
||||
|
||||
const Square: React.FC<SquareProps> = ({ size = 8 }) => {
|
||||
const Square: React.FC<SquareProps> = ({
|
||||
backgroundColor = 'rgba(0, 0, 0, 0.3)',
|
||||
size = 8,
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
backgroundColor,
|
||||
borderRadius: '4px',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
|
||||
@@ -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-checkbox-button</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>
|
||||
|
||||
Reference in New Issue
Block a user