mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-06 06:07:33 +02:00
Add button with icon
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';
|
||||
import ButtonWithIcon from './layouts/ButtonWithIcon';
|
||||
import Centering from './layouts/Centering';
|
||||
import HolyGrail from './layouts/HolyGrail';
|
||||
import InputAddon from './layouts/InputAddon';
|
||||
@@ -18,6 +19,7 @@ const App = () => {
|
||||
<Switch>
|
||||
<Route exact={true} path='/'><Home /></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='/holy-grail'><HolyGrail /></Route>
|
||||
<Route exact={true} path='/input-add-on'><InputAddon /></Route>
|
||||
|
||||
@@ -2,6 +2,7 @@ import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import BadgeCover from './covers/BadgeCover';
|
||||
import ButtonWithIconCover from './covers/ButtonWithIconCover';
|
||||
import CenterCover from './covers/CenterCover';
|
||||
import HolyGrailCover from './covers/HolyGrailCover';
|
||||
import InputAddonCover from './covers/InputAddonCover';
|
||||
@@ -35,62 +36,68 @@ const Home = () => {
|
||||
<div className="mw8 center pb4">
|
||||
<h2 className="f2 lh-copy">Layouts</h2>
|
||||
|
||||
<div className="flex flex-wrap">
|
||||
<div className="pa2 w-20">
|
||||
<Link to="/holy-grail" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
|
||||
<div className="flex flex-wrap items-start">
|
||||
<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>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa2 w-20">
|
||||
<Link to="/sidebar" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
|
||||
<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>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa2 w-20">
|
||||
<Link to="/sticky-footer" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
|
||||
<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>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa2 w-20">
|
||||
<Link to="/sticky-header" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
|
||||
<StickyHeaderCover />
|
||||
<h4 className="f4 mv0 pt3">Sticky header</h4>
|
||||
</Link>
|
||||
<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>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className="f2 lh-copy">Patterns</h2>
|
||||
|
||||
<div className="flex flex-wrap">
|
||||
<div className="pa2 w-20">
|
||||
<Link to="/badge" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
|
||||
<div className="flex flex-wrap items-start">
|
||||
<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>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa2 w-20">
|
||||
<Link to="/centering" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
|
||||
<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>
|
||||
</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>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa2 w-20">
|
||||
<Link to="/input-add-on" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
|
||||
<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>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa2 w-20">
|
||||
<Link to="/media-object" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
|
||||
<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>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa2 w-20">
|
||||
<Link to="/stepper-input" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
|
||||
<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>
|
||||
</Link>
|
||||
|
||||
20
client/covers/ButtonWithIconCover.jsx
Normal file
20
client/covers/ButtonWithIconCover.jsx
Normal 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
56
client/layouts/ButtonWithIcon.jsx
Normal 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;
|
||||
Reference in New Issue
Block a user