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

Add button with icon

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-17 10:29:57 +07:00
parent f43797f4e9
commit 6393b96e84
4 changed files with 108 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/App.jsx
View File

@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home'; import Home from './Home';
import Badge from './layouts/Badge'; import Badge from './layouts/Badge';
import ButtonWithIcon from './layouts/ButtonWithIcon';
import Centering from './layouts/Centering'; import Centering from './layouts/Centering';
import HolyGrail from './layouts/HolyGrail'; import HolyGrail from './layouts/HolyGrail';
import InputAddon from './layouts/InputAddon'; import InputAddon from './layouts/InputAddon';
@@ -18,6 +19,7 @@ const App = () => {
<Switch> <Switch>
<Route exact={true} path='/'><Home /></Route> <Route exact={true} path='/'><Home /></Route>
<Route exact={true} path='/badge'><Badge /></Route> <Route exact={true} path='/badge'><Badge /></Route>
<Route exact={true} path='/button-with-icon'><ButtonWithIcon /></Route>
<Route exact={true} path='/centering'><Centering /></Route> <Route exact={true} path='/centering'><Centering /></Route>
<Route exact={true} path='/holy-grail'><HolyGrail /></Route> <Route exact={true} path='/holy-grail'><HolyGrail /></Route>
<Route exact={true} path='/input-add-on'><InputAddon /></Route> <Route exact={true} path='/input-add-on'><InputAddon /></Route>

47
client/Home.jsx
View File

@@ -2,6 +2,7 @@ import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import BadgeCover from './covers/BadgeCover'; import BadgeCover from './covers/BadgeCover';
import ButtonWithIconCover from './covers/ButtonWithIconCover';
import CenterCover from './covers/CenterCover'; import CenterCover from './covers/CenterCover';
import HolyGrailCover from './covers/HolyGrailCover'; import HolyGrailCover from './covers/HolyGrailCover';
import InputAddonCover from './covers/InputAddonCover'; import InputAddonCover from './covers/InputAddonCover';
@@ -35,27 +36,27 @@ const Home = () => {
<div className="mw8 center pb4"> <div className="mw8 center pb4">
<h2 className="f2 lh-copy">Layouts</h2> <h2 className="f2 lh-copy">Layouts</h2>
<div className="flex flex-wrap"> <div className="flex flex-wrap items-start">
<div className="pa2 w-20"> <div className="pa1 w-20">
<Link to="/holy-grail" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4"> <Link to="/holy-grail" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
<HolyGrailCover /> <HolyGrailCover />
<h4 className="f4 mv0 pt3">Holy grail</h4> <h4 className="f4 mv0 pt3">Holy grail</h4>
</Link> </Link>
</div> </div>
<div className="pa2 w-20"> <div className="pa1 w-20">
<Link to="/sidebar" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4"> <Link to="/sidebar" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
<SidebarCover /> <SidebarCover />
<h4 className="f4 mv0 pt3">Sidebar</h4> <h4 className="f4 mv0 pt3">Sidebar</h4>
</Link> </Link>
</div> </div>
<div className="pa2 w-20"> <div className="pa1 w-20">
<Link to="/sticky-footer" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4"> <Link to="/sticky-footer" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
<StickyFooterCover /> <StickyFooterCover />
<h4 className="f4 mv0 pt3">Sticky footer</h4> <h4 className="f4 mv0 pt3">Sticky footer</h4>
</Link> </Link>
</div> </div>
<div className="pa2 w-20"> <div className="pa1 w-20">
<Link to="/sticky-header" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4"> <Link to="/sticky-header" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
<StickyHeaderCover /> <StickyHeaderCover />
<h4 className="f4 mv0 pt3">Sticky header</h4> <h4 className="f4 mv0 pt3">Sticky header</h4>
</Link> </Link>
@@ -64,33 +65,39 @@ const Home = () => {
<h2 className="f2 lh-copy">Patterns</h2> <h2 className="f2 lh-copy">Patterns</h2>
<div className="flex flex-wrap"> <div className="flex flex-wrap items-start">
<div className="pa2 w-20"> <div className="pa1 w-20">
<Link to="/badge" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4"> <Link to="/badge" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
<BadgeCover /> <BadgeCover />
<h4 className="f4 mv0 pt3">Badge</h4> <h4 className="f4 mv0 pt3">Badge</h4>
</Link> </Link>
</div> </div>
<div className="pa2 w-20"> <div className="pa1 w-20">
<Link to="/centering" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4"> <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>
</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 /> <CenterCover />
<h4 className="f4 mv0 pt3">Centering</h4> <h4 className="f4 mv0 pt3">Centering</h4>
</Link> </Link>
</div> </div>
<div className="pa2 w-20"> <div className="pa1 w-20">
<Link to="/input-add-on" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4"> <Link to="/input-add-on" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
<InputAddonCover /> <InputAddonCover />
<h4 className="f4 mv0 pt3">Input addon</h4> <h4 className="f4 mv0 pt3">Input addon</h4>
</Link> </Link>
</div> </div>
<div className="pa2 w-20"> <div className="pa1 w-20">
<Link to="/media-object" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4"> <Link to="/media-object" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
<MediaObjectCover /> <MediaObjectCover />
<h4 className="f4 mv0 pt3">Media object</h4> <h4 className="f4 mv0 pt3">Media object</h4>
</Link> </Link>
</div> </div>
<div className="pa2 w-20"> <div className="pa1 w-20">
<Link to="/stepper-input" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4"> <Link to="/stepper-input" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
<StepperInputCover /> <StepperInputCover />
<h4 className="f4 mv0 pt3">Stepper input</h4> <h4 className="f4 mv0 pt3">Stepper input</h4>
</Link> </Link>

20
client/covers/ButtonWithIconCover.jsx Normal file
View File

@@ -0,0 +1,20 @@
import React from 'react';
import Dot from '../placeholders/Dot';
import Frame from '../placeholders/Frame';
import Rectangle from '../placeholders/Rectangle';
const ButtonWithIconCover = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center pa2">
<div className="w-100 h2 flex flex-row items-center ba b--black-30 br2 ph1">
<div className="mr1"><Dot /></div>
<Rectangle />
</div>
</div>
</Frame>
);
};
export default ButtonWithIconCover;

56
client/layouts/ButtonWithIcon.jsx Normal file
View File

@@ -0,0 +1,56 @@
import React from 'react';
import DetailsLayout from '../DetailsLayout';
import Dot from '../placeholders/Dot';
import BrowserFrame from '../placeholders/BrowserFrame';
import Rectangle from '../placeholders/Rectangle';
import SampleCode from '../SampleCode';
import useDocumentTitle from '../useDocumentTitle';
const ButtonWithIcon = () => {
useDocumentTitle('CSS Layout ∙ Button with icon');
return (
<DetailsLayout>
<h1 className="f1 tc">Button with icon</h1>
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="w5">
<div className="w-100 h3 flex flex-row items-center ba b--black-30 br2 ph2">
<div className="mr2"><Dot size={32} /></div>
<Rectangle />
</div>
</div>
</div>
}
source={
<SampleCode
lang="html"
code={`
<div style="
/* Content is centered */
align-items: center;
display: flex;
justify-content: center;
/* Colors */
background-color: rgba(0, 0, 0, .3);
color: #FFF;
/* Rounded border */
border-radius: 9999px;
height: 32px;
width: 32px;
">
1
</div>
`}
/>
}
/>
</DetailsLayout>
);
};
export default ButtonWithIcon;