mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-06 14:16:50 +02:00
Add breadcrumb
This commit is contained in:
Phuoc Nguyen
@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
|
||||
|
||||
import Home from './Home';
|
||||
import Badge from './layouts/badge/Details';
|
||||
import Breadcrumb from './layouts/breadcrumb/Details';
|
||||
import ButtonWithIcon from './layouts/button-with-icon/Details';
|
||||
import Card from './layouts/card/Details';
|
||||
import Centering from './layouts/centering/Details';
|
||||
@@ -29,6 +30,7 @@ const App = () => {
|
||||
<Switch>
|
||||
<Route exact={true} path='/'><Home /></Route>
|
||||
<Route exact={true} path='/badge'><Badge /></Route>
|
||||
<Route exact={true} path='/breadcrumb'><Breadcrumb /></Route>
|
||||
<Route exact={true} path='/button-with-icon'><ButtonWithIcon /></Route>
|
||||
<Route exact={true} path='/card'><Card /></Route>
|
||||
<Route exact={true} path='/centering'><Centering /></Route>
|
||||
|
||||
@@ -2,6 +2,7 @@ import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import BadgeCover from './layouts/badge/Cover';
|
||||
import BreadcrumbCover from './layouts/breadcrumb/Cover';
|
||||
import ButtonWithIconCover from './layouts/button-with-icon/Cover';
|
||||
import CardCover from './layouts/card/Cover';
|
||||
import CenterCover from './layouts/centering/Cover';
|
||||
@@ -50,31 +51,31 @@ const Home = () => {
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/holy-grail" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<HolyGrailCover />
|
||||
<h4 className="f4 mv0 pt3">Holy grail</h4>
|
||||
<h4 className="f5 mv0 pt3">Holy grail</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/sidebar" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<SidebarCover />
|
||||
<h4 className="f4 mv0 pt3">Sidebar</h4>
|
||||
<h4 className="f5 mv0 pt3">Sidebar</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/split-screen" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<SplitScreenCover />
|
||||
<h4 className="f4 mv0 pt3">Split screen</h4>
|
||||
<h4 className="f5 mv0 pt3">Split screen</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/sticky-footer" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<StickyFooterCover />
|
||||
<h4 className="f4 mv0 pt3">Sticky footer</h4>
|
||||
<h4 className="f5 mv0 pt3">Sticky footer</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/sticky-header" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<StickyHeaderCover />
|
||||
<h4 className="f4 mv0 pt3">Sticky header</h4>
|
||||
<h4 className="f5 mv0 pt3">Sticky header</h4>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
@@ -85,91 +86,97 @@ const Home = () => {
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/badge" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<BadgeCover />
|
||||
<h4 className="f4 mv0 pt3">Badge</h4>
|
||||
<h4 className="f5 mv0 pt3">Badge</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/breadcrumb" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<BreadcrumbCover />
|
||||
<h4 className="f5 mv0 pt3">Breadcrumb</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/button-with-icon" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<ButtonWithIconCover />
|
||||
<h4 className="f4 mv0 pt3">Button with icon</h4>
|
||||
<h4 className="f5 mv0 pt3">Button with icon</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/card" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<CardCover />
|
||||
<h4 className="f4 mv0 pt3">Card</h4>
|
||||
<h4 className="f5 mv0 pt3">Card</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/centering" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<CenterCover />
|
||||
<h4 className="f4 mv0 pt3">Centering</h4>
|
||||
<h4 className="f5 mv0 pt3">Centering</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/fixed-at-corner" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<FixedAtCornerCover />
|
||||
<h4 className="f4 mv0 pt3">Fixed at corner</h4>
|
||||
<h4 className="f5 mv0 pt3">Fixed at corner</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/input-add-on" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<InputAddonCover />
|
||||
<h4 className="f4 mv0 pt3">Input addon</h4>
|
||||
<h4 className="f5 mv0 pt3">Input addon</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/media-object" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<MediaObjectCover />
|
||||
<h4 className="f4 mv0 pt3">Media object</h4>
|
||||
<h4 className="f5 mv0 pt3">Media object</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/menu" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<MenuCover />
|
||||
<h4 className="f4 mv0 pt3">Menu</h4>
|
||||
<h4 className="f5 mv0 pt3">Menu</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/modal" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<ModalCover />
|
||||
<h4 className="f4 mv0 pt3">Modal</h4>
|
||||
<h4 className="f5 mv0 pt3">Modal</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/notification" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<NotificationCover />
|
||||
<h4 className="f4 mv0 pt3">Notification</h4>
|
||||
<h4 className="f5 mv0 pt3">Notification</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/pagination" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<PaginationCover />
|
||||
<h4 className="f4 mv0 pt3">Pagination</h4>
|
||||
<h4 className="f5 mv0 pt3">Pagination</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/previous-next-buttons" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<PreviousNextButtonCover />
|
||||
<h4 className="f4 mv0 pt3">Previous next buttons</h4>
|
||||
<h4 className="f5 mv0 pt3">Previous next buttons</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/progress-bar" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<ProgressBarCover />
|
||||
<h4 className="f4 mv0 pt3">Progress bar</h4>
|
||||
<h4 className="f5 mv0 pt3">Progress bar</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/same-height-columns" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<SameHeightColumnsCover />
|
||||
<h4 className="f4 mv0 pt3">Same height columns</h4>
|
||||
<h4 className="f5 mv0 pt3">Same height columns</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 />
|
||||
<h4 className="f4 mv0 pt3">Stepper input</h4>
|
||||
<h4 className="f5 mv0 pt3">Stepper input</h4>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
22
client/layouts/breadcrumb/Cover.jsx
Normal file
22
client/layouts/breadcrumb/Cover.jsx
Normal file
@@ -0,0 +1,22 @@
|
||||
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 justify-center h2 w-80">
|
||||
<div className="w-20"><Rectangle /></div>
|
||||
<div className="mh1 black">/</div>
|
||||
<div className="w-20"><Rectangle /></div>
|
||||
<div className="mh1 black">/</div>
|
||||
<div className="w-20"><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
55
client/layouts/breadcrumb/Details.jsx
Normal file
55
client/layouts/breadcrumb/Details.jsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../DetailsLayout';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
import SampleCode from '../../SampleCode';
|
||||
import useDocumentTitle from '../../hooks/useDocumentTitle';
|
||||
|
||||
const Details = () => {
|
||||
useDocumentTitle('CSS Layout ∙ Breadcrumb');
|
||||
|
||||
return (
|
||||
<DetailsLayout>
|
||||
<h1 className="f1 tc">Breadcrumb</h1>
|
||||
<BrowserFrame
|
||||
content={
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="flex items-center">
|
||||
<div className="w4"><Rectangle height={16} /></div>
|
||||
<div className="mh1 f2 black-30">/</div>
|
||||
<div className="w2"><Rectangle height={16} /></div>
|
||||
<div className="mh1 f2 black-30">/</div>
|
||||
<div className="w3"><Rectangle height={16} /></div>
|
||||
<div className="mh1 f2 black-30">/</div>
|
||||
<div className="w2"><Rectangle height={16} /></div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="
|
||||
/* Content is centered vertically */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
">
|
||||
<!-- Breadcrumb item -->
|
||||
<a>...</a>
|
||||
|
||||
<!-- Separator -->
|
||||
<div style="margin: 0 8px;">/</span>
|
||||
|
||||
<!-- Repeated items and separators -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
Reference in New Issue
Block a user