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

Merge pull request #174 from phuoc-ng/tree

Browse Source 
Pattern 93: Tree diagram
This commit is contained in:
phuoc-ng
2021-04-03 12:37:25 +07:00
committed by GitHub
parent e7da183726 f81f16cc38
commit d78be479d3
8 changed files with 399 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/constants/Pattern.ts
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',

1
client/pages/ExplorePage.tsx
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} />

137
client/patterns/tree-diagram/Cover.tsx Normal file
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;

186
client/patterns/tree-diagram/Details.tsx Normal file
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;

67
client/patterns/tree-diagram/tree-diagram.css Normal file
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;
}

10
client/placeholders/Square.tsx
View File

@@ -7,20 +7,20 @@ import * as React from 'react';
interface SquareProps {
backgroundColor?: string;
size?: number;
size?: string;
}
const Square: React.FC<SquareProps> = ({
backgroundColor = 'rgba(0, 0, 0, 0.3)',
size = 8,
size = '100%',
}) => {
return (
<div
style={{
backgroundColor,
borderRadius: '4px',
height: '100%',
width: '100%',
borderRadius: '0.25rem',
height: size,
width: size,
}}
/>
);

1
client/placeholders/browserFrame.css
View File

@@ -10,6 +10,7 @@
.demo__live {
height: 32rem;
overflow: auto;
}
.demo__css,

1
public/sitemap.xml
View File

@@ -85,6 +85,7 @@
<url><loc>https://csslayout.io/patterns/timeline</loc></url>
<url><loc>https://csslayout.io/patterns/toggle-password-visibility</loc></url>
<url><loc>https://csslayout.io/patterns/tooltip</loc></url>
<url><loc>https://csslayout.io/patterns/tree-diagram</loc></url>
<url><loc>https://csslayout.io/patterns/triangle-buttons</loc></url>
<url><loc>https://csslayout.io/patterns/upload-button</loc></url>
<url><loc>https://csslayout.io/patterns/validation-icon</loc></url>