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

Add accordion

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-12-04 22:34:20 +07:00
parent 5b73a64e4d
commit 9b6ee7a468
5 changed files with 250 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/constants/Pattern.ts
View File

@@ -1,4 +1,5 @@
enum Pattern {
Accordion = 'Accordion',
Avatar = 'Avatar',
AvatarList = 'Avatar list',
Badge = 'Badge',

1
client/pages/ExplorePage.tsx
View File

@@ -88,6 +88,7 @@ const ExplorePage = () => {
<Heading title="Patterns" />
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
<CoverCard pattern={Pattern.Accordion} />
<CoverCard pattern={Pattern.Avatar} />
<CoverCard pattern={Pattern.AvatarList} />
<CoverCard pattern={Pattern.Badge} />

71
client/patterns/accordion/Cover.tsx Normal file
View File

@@ -0,0 +1,71 @@
import React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
import Rectangle from '../../placeholders/Rectangle';
import Triangle from '../../placeholders/Triangle';
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',
height: '100%',
width: '100%',
}}
>
<div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
<div
style={{
alignItems: 'center',
display: 'flex',
padding: '8px',
}}
>
<div style={{ marginRight: '4px' }}>
<Triangle corner='r' size={6} />
</div>
<div style={{ flex: 1 }}>
<Rectangle height={4} />
</div>
</div>
</div>
<div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
<div
style={{
alignItems: 'center',
display: 'flex',
padding: '8px',
}}
>
<div style={{ marginRight: '4px' }}>
<Triangle corner='b' size={6} />
</div>
<div style={{ flex: 1 }}>
<Rectangle height={4} />
</div>
</div>
</div>
<div style={{ padding: '8px' }}>
<div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
<div style={{ width: '80%' }}><Line /></div>
</div>
</div>
</div>
</Frame>
);
};
export default Cover;

176
client/patterns/accordion/Details.tsx Normal file
View File

@@ -0,0 +1,176 @@
import React, { useState } from 'react';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
import Triangle from '../../placeholders/Triangle';
interface ItemProps {
index: number;
title: React.ReactNode;
}
const Details: React.FC<{}> = () => {
const [activeItem, setActiveItem] = useState(1);
const Item: React.FC<ItemProps> = ({ index, title, children }) => {
const isOpened = (index === activeItem);
const click = () => setActiveItem(isOpened ? -1 : index);
return (
<>
<div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
<div
style={{
alignItems: 'center',
cursor: 'pointer',
display: 'flex',
padding: '16px',
}}
onClick={click}
>
<div style={{ marginRight: '12px' }}>
<Triangle size={8} corner={isOpened ? 'b' : 'r'} />
</div>
<div style={{ flex: 1 }}>{title}</div>
</div>
<div
style={{
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
display: isOpened ? 'block' : 'none',
padding: '16px',
}}
>
{children}
</div>
</div>
</>
);
};
return (
<DetailsLayout title="Accordion">
<div style={{ padding: '64px 32px' }}>
<BrowserFrame
content={(
<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)',
borderBottomColor: 'transparent',
borderRadius: '4px',
width: '60%',
}}
>
<Item
index={0}
title={<div style={{ width: '40%' }}><Rectangle /></div>}
>
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
</Item>
<Item
index={1}
title={<div style={{ width: '80%' }}><Rectangle /></div>}
>
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
</Item>
<Item
index={2}
title={<div style={{ width: '60%' }}><Rectangle /></div>}
>
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
</Item>
</div>
</div>
)}
source={`
<!-- Container -->
<div style="
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border-bottom-color: transparent;
border-radius: 4px;
">
<!-- Each accordion item -->
<div style="
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
">
<!-- Heading -->
<div style="
/* Center the content horizontally */
align-items: center;
display: flex;
cursor: pointer;
padding: 16px;
">
<!-- The toggle icon -->
<div style="margin-right: 12px;">...</div>
<!-- The title -->
<div style="
flex: 1; /* Take remaining width */
">
...
</div>
</div>
<!-- The content -->
<div style="
/* For selected item */
display: block;
/* For not selected item */
display: none;
border-top: 1px solid rgba(0, 0, 0, 0.3);
padding: 16px;
">
...
</div>
</div>
<!-- Repeat other item -->
...
</div>
<div style="
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
">
<!-- Heading -->
<div style="
display: flex;
align-items: center;
justify-content: space-between;
">
<!-- Question -->
...
<!-- The toggle icon sticks to the right -->
...
</div>
<!-- Answer -->
</div>
`}
/>
</div>
<RelatedPatterns patterns={[Pattern.QuestionsAndAnswers]} />
</DetailsLayout>
);
};
export default Details;

1
public/sitemap.xml
View File

@@ -5,6 +5,7 @@
<url><loc>https://csslayout.io/patterns/split-screen</loc></url>
<url><loc>https://csslayout.io/patterns/sticky-footer</loc></url>
<url><loc>https://csslayout.io/patterns/sticky-header</loc></url>
<url><loc>https://csslayout.io/patterns/accordion</loc></url>
<url><loc>https://csslayout.io/patterns/avatar</loc></url>
<url><loc>https://csslayout.io/patterns/avatar-list</loc></url>
<url><loc>https://csslayout.io/patterns/badge</loc></url>