1
0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-13 17:44:19 +02:00

Add tree diagram pattern

This commit is contained in:
Phuoc Nguyen
2021-04-03 11:59:27 +07:00
parent e7da183726
commit bf5532a030
5 changed files with 392 additions and 0 deletions

View File

@@ -89,6 +89,7 @@ enum Pattern {
Timeline = 'Timeline',
TogglePasswordVisibility = 'Toggle password visibility',
Tooltip = 'Tooltip',
TreeDiagram = 'Tree diagram',
TriangleButtons = 'Triangle buttons',
UploadButton = 'Upload button',
ValidationIcon = 'Validation icon',

View File

@@ -140,6 +140,7 @@ const ExplorePage = () => {
<CoverCard pattern={Pattern.StickyTableHeaders} />
<CoverCard pattern={Pattern.Teardrop} />
<CoverCard pattern={Pattern.Timeline} />
<CoverCard pattern={Pattern.TreeDiagram} />
<CoverCard pattern={Pattern.TriangleButtons} />
<CoverCard pattern={Pattern.VideoBackground} />
<CoverCard pattern={Pattern.Voting} />

View File

@@ -0,0 +1,137 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';
import Square from '../../placeholders/Square';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '0.5rem',
}}
>
<div
style={{
}}
>
<div
style={{
display: 'flex',
justifyContent: 'center',
padding: '0rem 0.5rem 1rem 0.5rem',
position: 'relative',
}}
>
<div
style={{
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
height: '1rem',
position: 'absolute',
right: '50%',
bottom: 0,
width: '50%',
}}
/>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: '0.25rem',
height: '1rem',
width: '1rem',
}}
/>
</div>
<div
style={{
display: 'flex',
flexWrap: 'nowrap',
}}
>
<div
style={{
padding: '1rem 0.5rem 0 0.5rem',
position: 'relative',
}}
>
<div
style={{
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
height: '1rem',
position: 'absolute',
right: '50%',
top: 0,
width: '50%',
}}
/>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: '0.25rem',
height: '1rem',
width: '1rem',
}}
/>
<div
style={{
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
height: '1rem',
left: '50%',
position: 'absolute',
top: 0,
width: '50%',
}}
/>
</div>
<div
style={{
padding: '1rem 0.5rem 0 0.5rem',
position: 'relative',
}}
>
<div
style={{
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
height: '1rem',
position: 'absolute',
right: '50%',
top: 0,
width: '50%',
}}
/>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: '0.25rem',
height: '1rem',
width: '1rem',
}}
/>
<div
style={{
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
height: '1rem',
position: 'absolute',
right: '50%',
top: 0,
width: '50%',
}}
/>
</div>
</div>
</div>
</div>
</Frame>
);
};
export default Cover;

View File

@@ -0,0 +1,186 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import { Helmet } from 'react-helmet';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Square from '../../placeholders/Square';
import './tree-diagram.css';
const Details: React.FC<{}> = () => {
const [value, setValue] = React.useState(900);
const decrease = () => setValue(value - 1);
const increase = () => setValue(value + 1);
return (
<DetailsLayout pattern={Pattern.TreeDiagram}>
<Helmet>
<meta name="description" content="Create a tree diagram with CSS" />
<meta name="keywords" content="css sitemap, css tree diagram" />
</Helmet>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div className="tree-diagram">
<ul>
<li>
<!-- Content -->
...
<!-- Sub items -->
<ul>
<li>
<!-- Content -->
...
<!-- Sub items -->
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</li>
<li>...</li>
...
</ul>
</li>
<!-- Repeat other items -->
...
</ul>
</div>
`}
css={`
.tree-diagram ul {
display: flex;
position: relative;
/* Reset */
list-style-type: none;
margin: 0;
padding: 1rem 0.5rem 0rem 0.5rem;
}
.tree-diagram ul ul::before {
border-right: 1px solid rgba(0, 0, 0, .3);
content: '';
/* Position */
position: absolute;
top: 0;
right: 50%;
/* Size */
height: 1rem;
width: 50%;
}
.tree-diagram li {
padding: 1rem 0.5rem 0rem 0.5rem;
position: relative;
/* Center the content */
align-items: center;
display: flex;
flex-direction: column;
}
.tree-diagram li::before {
border-right: 1px solid rgba(0, 0, 0, .3);
border-top: 1px solid rgba(0, 0, 0, .3);
content: '';
/* Position */
position: absolute;
top: 0;
right: 50%;
/* Size */
height: 1rem;
width: 50%;
}
.tree-diagram li::after {
border-top: 1px solid rgba(0, 0, 0, .3);
content: '';
/* Position */
position: absolute;
top: 0;
right: 0;
/* Size */
width: 50%;
}
.tree-diagram li:first-child::before,
.tree-diagram li:last-child::after {
/* Remove the top of border from the first and last items */
border-top: none;
}
/* Add a root item if you want */
li.tree-diagram__root::before {
border-right: none;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '0.5rem',
}}
>
<div className="tree-diagram">
<ul>
<li className="tree-diagram__root">
<Square size='2.5rem' />
<ul>
<li>
<Square size='2rem' />
<ul>
<li><Square size='1.5rem' /></li>
</ul>
</li>
<li>
<Square size='2rem' />
<ul>
<li>
<Square size='1.5rem' />
<ul>
<li><Square size='1rem' /></li>
<li><Square size='1rem' /></li>
<li><Square size='1rem' /></li>
</ul>
</li>
<li><Square size='1.5rem' /></li>
<li>
<Square size='1.5rem' />
<ul>
<li><Square size='1rem' /></li>
<li><Square size='1rem' /></li>
</ul>
</li>
</ul>
</li>
<li><Square size='2rem' /></li>
</ul>
</li>
</ul>
</div>
</div>
</BrowserFrame>
</div>
</DetailsLayout>
);
};
export default Details;

View File

@@ -0,0 +1,67 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
.tree-diagram ul {
display: flex;
position: relative;
/* Reset */
list-style-type: none;
margin: 0;
padding: 1rem 0.5rem 0rem 0.5rem;
}
.tree-diagram ul ul::before {
border-right: 1px solid rgba(0, 0, 0, .3);
content: '';
height: 1rem;
position: absolute;
top: 0;
right: 50%;
width: 50%;
}
.tree-diagram li {
padding: 1rem 0.5rem 0rem 0.5rem;
position: relative;
/* Center the content */
align-items: center;
display: flex;
flex-direction: column;
}
.tree-diagram li::before {
border-right: 1px solid rgba(0, 0, 0, .3);
border-top: 1px solid rgba(0, 0, 0, .3);
content: '';
height: 1rem;
/* Position */
position: absolute;
top: 0;
right: 50%;
width: 50%;
}
.tree-diagram li::after {
border-top: 1px solid rgba(0, 0, 0, .3);
content: '';
/* Position */
position: absolute;
top: 0;
right: 0;
width: 50%;
}
.tree-diagram li:first-child::before,
.tree-diagram li:last-child::after {
border-top: none;
}
li.tree-diagram__root::before {
border-right: none;
}