mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-06 06:07:33 +02:00
Merge pull request #32 from phuoc-ng/tab
Tab, simple grid, navigation and wizard
This commit is contained in:
phuoc-ng
GitHub
@@ -22,12 +22,16 @@ import ProgressBar from './layouts/progress-bar/Details';
|
||||
import SameHeightColumns from './layouts/same-height-columns/Details';
|
||||
import Separator from './layouts/separator/Details';
|
||||
import Sidebar from './layouts/sidebar/Details';
|
||||
import SimpleGrid from './layouts/simple-grid/Details';
|
||||
import Slider from './layouts/slider/Details';
|
||||
import SplitNavigation from './layouts/split-navigation/Details';
|
||||
import SplitScreen from './layouts/split-screen/Details';
|
||||
import StepperInput from './layouts/stepper-input/Details';
|
||||
import StickyFooter from './layouts/sticky-footer/Details';
|
||||
import StickyHeader from './layouts/sticky-header/Details';
|
||||
import Switch from './layouts/switch/Details';
|
||||
import Tab from './layouts/tab/Details';
|
||||
import Wizard from './layouts/wizard/Details';
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
@@ -54,12 +58,16 @@ const App = () => {
|
||||
<Route exact={true} path='/same-height-columns'><SameHeightColumns /></Route>
|
||||
<Route exact={true} path='/separator'><Separator /></Route>
|
||||
<Route exact={true} path='/sidebar'><Sidebar /></Route>
|
||||
<Route exact={true} path='/simple-grid'><SimpleGrid /></Route>
|
||||
<Route exact={true} path='/slider'><Slider /></Route>
|
||||
<Route exact={true} path='/split-navigation'><SplitNavigation /></Route>
|
||||
<Route exact={true} path='/split-screen'><SplitScreen /></Route>
|
||||
<Route exact={true} path='/stepper-input'><StepperInput /></Route>
|
||||
<Route exact={true} path='/sticky-footer'><StickyFooter /></Route>
|
||||
<Route exact={true} path='/sticky-header'><StickyHeader /></Route>
|
||||
<Route exact={true} path='/switch'><Switch /></Route>
|
||||
<Route exact={true} path='/tab'><Tab /></Route>
|
||||
<Route exact={true} path='/wizard'><Wizard /></Route>
|
||||
</RouteSwitch>
|
||||
</Router>
|
||||
);
|
||||
|
||||
@@ -21,12 +21,16 @@ import ProgressBarCover from './layouts/progress-bar/Cover';
|
||||
import SameHeightColumnsCover from './layouts/same-height-columns/Cover';
|
||||
import SeparatorCover from './layouts/separator/Cover';
|
||||
import SidebarCover from './layouts/sidebar/Cover';
|
||||
import SimpleGridCover from './layouts/simple-grid/Cover';
|
||||
import SliderCover from './layouts/slider/Cover';
|
||||
import SplitNavigationCover from './layouts/split-navigation/Cover';
|
||||
import SplitScreenCover from './layouts/split-screen/Cover';
|
||||
import StepperInputCover from './layouts/stepper-input/Cover';
|
||||
import StickyFooterCover from './layouts/sticky-footer/Cover';
|
||||
import StickyHeaderCover from './layouts/sticky-header/Cover';
|
||||
import SwitchCover from './layouts/switch/Cover';
|
||||
import TabCover from './layouts/tab/Cover';
|
||||
import WizardCover from './layouts/wizard/Cover';
|
||||
import Layout from './Layout';
|
||||
import useDocumentTitle from './hooks/useDocumentTitle';
|
||||
|
||||
@@ -216,12 +220,24 @@ const Home = () => {
|
||||
<h4 className="f5 mv0 pt3">Separator</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/simple-grid" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<SimpleGridCover />
|
||||
<h4 className="f5 mv0 pt3">Simple grid</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/slider" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<SliderCover />
|
||||
<h4 className="f5 mv0 pt3">Slider</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/split-navigation" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<SplitNavigationCover />
|
||||
<h4 className="f5 mv0 pt3">Split navigation</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/stepper-input" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<StepperInputCover />
|
||||
@@ -234,6 +250,18 @@ const Home = () => {
|
||||
<h4 className="f5 mv0 pt3">Switch</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/tab" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<TabCover />
|
||||
<h4 className="f5 mv0 pt3">Tab</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/wizard" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<WizardCover />
|
||||
<h4 className="f5 mv0 pt3">Wizard</h4>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
31
client/layouts/simple-grid/Cover.jsx
Normal file
31
client/layouts/simple-grid/Cover.jsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="w-80">
|
||||
<div className="flex items-center mb1">
|
||||
<div className="ph1" style={{ flex: '0 0 50%' }}><Rectangle /></div>
|
||||
<div className="ph1" style={{ flex: '1' }}><Rectangle /></div>
|
||||
</div>
|
||||
<div className="flex items-center mb1">
|
||||
<div className="ph1" style={{ flex: '0 0 33%' }}><Rectangle /></div>
|
||||
<div className="ph1" style={{ flex: '0 0 33%' }}><Rectangle /></div>
|
||||
<div className="ph1" style={{ flex: '0 0 33%' }}><Rectangle /></div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="ph1" style={{ flex: '0 0 25%' }}><Rectangle /></div>
|
||||
<div className="ph1" style={{ flex: '1' }}><Rectangle /></div>
|
||||
<div className="ph1" style={{ flex: '0 0 25%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
121
client/layouts/simple-grid/Details.jsx
Normal file
121
client/layouts/simple-grid/Details.jsx
Normal file
@@ -0,0 +1,121 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../DetailsLayout';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
import SampleCode from '../../SampleCode';
|
||||
|
||||
const Details = () => {
|
||||
return (
|
||||
<DetailsLayout title="Simple grid">
|
||||
<BrowserFrame
|
||||
content={
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="w-60">
|
||||
<div className="flex" style={{ margin: '0 -8px 8px -8px' }}>
|
||||
<div className="ph2" style={{ flex: '1' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div className="ph2" style={{ flex: '1' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex" style={{ margin: '0 -8px 32px -8px' }}>
|
||||
<div className="ph2" style={{ flex: '0 0 50%' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div className="ph2" style={{ flex: '1' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div className="ph2" style={{ flex: '1' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex" style={{ margin: '0 -8px 8px -8px' }}>
|
||||
<div className="ph2" style={{ flex: '1' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div className="ph2" style={{ flex: '1' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div className="ph2" style={{ flex: '1' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex" style={{ margin: '0 -8px 32px -8px' }}>
|
||||
<div className="ph2" style={{ flex: '0 0 33.3333%' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div className="ph2" style={{ flex: '1' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex" style={{ margin: '0 -8px 8px -8px' }}>
|
||||
<div className="ph2" style={{ flex: '1' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div className="ph2" style={{ flex: '1' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div className="ph2" style={{ flex: '1' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div className="ph2" style={{ flex: '1' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex" style={{ margin: '0 -8px 0 -8px' }}>
|
||||
<div className="ph2" style={{ flex: '0 0 25%' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div className="ph2" style={{ flex: '1' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div className="ph2" style={{ flex: '0 0 33.3333%' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<!-- Row -->
|
||||
<div style="
|
||||
display: flex;
|
||||
|
||||
margin-left: -8px;
|
||||
margin-right: -8px;
|
||||
">
|
||||
<!--Cell with given width. Replace 25% with whatever you want -->
|
||||
<div style="
|
||||
flex: 0 0 25%;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
">25%</div>
|
||||
|
||||
<!-- Cell that takes remaining width -->
|
||||
<div style="
|
||||
flex: 1;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
20
client/layouts/split-navigation/Cover.jsx
Normal file
20
client/layouts/split-navigation/Cover.jsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="flex items-center w-80 b--black-30 ba br2 pa1">
|
||||
<div className="w1 mr1"><Rectangle /></div>
|
||||
<div className="w1 mr1"><Rectangle /></div>
|
||||
<div className="w1 ml-auto"><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
56
client/layouts/split-navigation/Details.jsx
Normal file
56
client/layouts/split-navigation/Details.jsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../DetailsLayout';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
import SampleCode from '../../SampleCode';
|
||||
|
||||
const Details = () => {
|
||||
return (
|
||||
<DetailsLayout title="Split navigation">
|
||||
<BrowserFrame
|
||||
content={
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<ul className="list ma0 b--black-30 ba br3 flex items-center pa3 w-60">
|
||||
<li className="w-20 mr1"><Rectangle /></li>
|
||||
<li className="w-10 mr1"><Rectangle /></li>
|
||||
<li className="w-20 mr1"><Rectangle /></li>
|
||||
<li className="w-10 ml-auto"><Rectangle /></li>
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<ul style="
|
||||
/* Content is centered horizontally */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
/* Reset styles */
|
||||
list-stype-type: none;
|
||||
margin: 0;
|
||||
">
|
||||
<!-- Navigation item -->
|
||||
<li>
|
||||
<a href="">...</a>
|
||||
</li>
|
||||
|
||||
<!-- Navigation item that sticks to the right -->
|
||||
<li style="
|
||||
/* Sticks to the right */
|
||||
margin-left: auto;
|
||||
">
|
||||
<a href="">...</a>
|
||||
</li>
|
||||
</ul>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
20
client/layouts/tab/Cover.jsx
Normal file
20
client/layouts/tab/Cover.jsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
|
||||
import Circle from '../../placeholders/Circle';
|
||||
import Frame from '../../placeholders/Frame';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="ph2 pv1 ba b--black-30 br2 br--top" style={{ borderBottomColor: 'transparent' }}><Circle size={8} /></div>
|
||||
<div className="ph2 pv1 bb b--black-30"><Circle size={8} /></div>
|
||||
<div className="ph2 pv1 bb b--black-30"><Circle size={8} /></div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
91
client/layouts/tab/Details.jsx
Normal file
91
client/layouts/tab/Details.jsx
Normal file
@@ -0,0 +1,91 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import DetailsLayout from '../../DetailsLayout';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
import SampleCode from '../../SampleCode';
|
||||
|
||||
const Details = () => {
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
|
||||
const Tab = ({ tabIndex, children }) => {
|
||||
const isActive = tabIndex === activeTab;
|
||||
const click = () => setActiveTab(tabIndex);
|
||||
return (
|
||||
<div
|
||||
className={`pointer pa3 b--black-30 ${isActive ? 'ba br2 br--top' : 'bb'}`}
|
||||
style={{
|
||||
borderBottomColor: isActive ? 'transparent' : '',
|
||||
}}
|
||||
onClick={click}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<DetailsLayout title="Tab">
|
||||
<BrowserFrame
|
||||
content={
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="flex items-center justify-center">
|
||||
<Tab tabIndex={0}>
|
||||
<div className="w3">
|
||||
<Rectangle height={8} />
|
||||
</div>
|
||||
</Tab>
|
||||
<Tab tabIndex={1}>
|
||||
<div className="w2">
|
||||
<Rectangle height={8} />
|
||||
</div>
|
||||
</Tab>
|
||||
<Tab tabIndex={2}>
|
||||
<div className="w4">
|
||||
<Rectangle height={8} />
|
||||
</div>
|
||||
</Tab>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="
|
||||
/* Content is centered */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
">
|
||||
<!-- Active tab -->
|
||||
<div style="
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
/* Hide the bottom border */
|
||||
border-bottom-color: transparent;
|
||||
|
||||
/* Border radius */
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Inactive tab -->
|
||||
<div style="
|
||||
/* Has only the bottom border */
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
32
client/layouts/wizard/Cover.jsx
Normal file
32
client/layouts/wizard/Cover.jsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Line from '../../placeholders/Line';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="flex w-80">
|
||||
<div className="flex items-center justify-center" style={{ flex: 1 }}>
|
||||
<div style={{ flex: 1 }} />
|
||||
<div className="w1 h1 f7 flex items-center justify-center white br-pill bg-black-30">1</div>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
</div>
|
||||
<div className="flex items-center justify-center" style={{ flex: 1 }}>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
<div className="w1 h1 f7 flex items-center justify-center white br-pill bg-black-30">2</div>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
</div>
|
||||
<div className="flex items-center justify-center" style={{ flex: 1 }}>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
<div className="w1 h1 f7 flex items-center justify-center white br-pill bg-black-30">3</div>
|
||||
<div style={{ flex: 1 }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
119
client/layouts/wizard/Details.jsx
Normal file
119
client/layouts/wizard/Details.jsx
Normal file
@@ -0,0 +1,119 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../DetailsLayout';
|
||||
import Block from '../../placeholders/Block';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Circle from '../../placeholders/Circle';
|
||||
import Line from '../../placeholders/Line';
|
||||
import SampleCode from '../../SampleCode';
|
||||
|
||||
const Details = () => {
|
||||
return (
|
||||
<DetailsLayout title="Wizard">
|
||||
<BrowserFrame
|
||||
content={
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="flex w-80">
|
||||
<div style={{ flex: 1 }}>
|
||||
<div className="mb3 flex items-center justify-center">
|
||||
<div style={{ flex: 1 }} />
|
||||
<div className="flex items-center justify-center mh1"><Circle size={32} /></div>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
</div>
|
||||
<div className="ph3 flex justify-center"><Block justify='center' numberOfBlocks={5} /></div>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div className="mb3 flex items-center justify-center">
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
<div className="flex items-center justify-center mh1"><Circle size={32} /></div>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
</div>
|
||||
<div className="ph3 flex justify-center"><Block justify='center' numberOfBlocks={5} /></div>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div className="mb3 flex items-center justify-center">
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
<div className="flex items-center justify-center mh1"><Circle size={32} /></div>
|
||||
<div style={{ flex: 1 }} />
|
||||
</div>
|
||||
<div className="ph3 flex justify-center"><Block justify='center' numberOfBlocks={5} /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="
|
||||
display: flex;
|
||||
">
|
||||
<!-- Step -->
|
||||
<div style="
|
||||
/* Make all steps have the same width */
|
||||
flex: 1;
|
||||
">
|
||||
<div style="
|
||||
/* Content is centered */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
">
|
||||
<!-- The left connector -->
|
||||
<div style="
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
/*
|
||||
For the first step, you might need to set it to transparent background:
|
||||
background-color: transparent;
|
||||
*/
|
||||
" />
|
||||
|
||||
<!-- The step number -->
|
||||
<div style="
|
||||
/* Content is centered */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Rounded border */
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
border-radius: 9999px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
|
||||
/* OPTIONAL: Spacing between it and connectors */
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- The right connector -->
|
||||
<div style="
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
/*
|
||||
For the last step, you might need to set it to transparent background:
|
||||
background-color: transparent;
|
||||
*/
|
||||
" />
|
||||
</div>
|
||||
|
||||
<!-- Title of step -->
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
@@ -1,11 +1,10 @@
|
||||
import React from 'react';
|
||||
|
||||
import random from '../helpers/random';
|
||||
import Rectangle from './Rectangle';
|
||||
|
||||
const Block = ({ numberOfBlocks }) => {
|
||||
const Block = ({ justify = 'start', numberOfBlocks }) => {
|
||||
return (
|
||||
<div className="flex flex-wrap w-100">
|
||||
<div className={`flex flex-wrap w-100 justify-${justify}`}>
|
||||
{
|
||||
Array(numberOfBlocks).fill(0).map((_, i) => {
|
||||
const s = random(1, 5);
|
||||
|
||||
Reference in New Issue
Block a user