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

Merge pull request #10 from phuoc-ng/input-addon

Browse Source 
Add input add-on
This commit is contained in:
phuoc-ng
2019-11-16 22:26:18 +07:00
committed by GitHub
parent 6286671113 478156632f
commit 54e03e89f6
4 changed files with 168 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/App.jsx
View File

@@ -4,6 +4,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import Badge from './layouts/Badge';
import Centering from './layouts/Centering';
import InputAddon from './layouts/InputAddon';
import Sidebar from './layouts/Sidebar';
import StepperInput from './layouts/StepperInput';
import StickyFooter from './layouts/StickyFooter';
@@ -16,6 +17,7 @@ const App = () => {
<Route exact={true} path='/'><Home /></Route>
<Route exact={true} path='/badge'><Badge /></Route>
<Route exact={true} path='/centering'><Centering /></Route>
<Route exact={true} path='/input-add-on'><InputAddon /></Route>
<Route exact={true} path='/sidebar'><Sidebar /></Route>
<Route exact={true} path='/stepper-input'><StepperInput /></Route>
<Route exact={true} path='/sticky-footer'><StickyFooter /></Route>

7
client/Home.jsx
View File

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
import BadgeCover from './covers/BadgeCover';
import CenterCover from './covers/CenterCover';
import InputAddonCover from './covers/InputAddonCover';
import SidebarCover from './covers/SidebarCover';
import StickyFooterCover from './covers/StickyFooterCover';
import StickyHeaderCover from './covers/StickyHeaderCover';
@@ -68,6 +69,12 @@ const Home = () => {
<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">
<InputAddonCover />
<h4 className="f4 mv0 pt3">Input addon</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">
<StepperInputCover />

23
client/covers/InputAddonCover.jsx Normal file
View File

@@ -0,0 +1,23 @@
import React from 'react';
import Frame from '../placeholders/Frame';
import Line from '../placeholders/Line';
const InputAddonCover = () => {
return (
<Frame>
<div className="h-100 flex items-center justify-center pa2">
<div className="b--black-30 ba br2 flex w-100 h1">
<div className="b--black-30 br flex items-center justify-center w-30 ph2">
<div className="w-100">
<Line />
</div>
</div>
<div className="flex-grow-1"></div>
</div>
</div>
</Frame>
);
};
export default InputAddonCover;

136
client/layouts/InputAddon.jsx Normal file
View File

@@ -0,0 +1,136 @@
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 '../useDocumentTitle';
const InputAddon = () => {
useDocumentTitle('CSS Layout ∙ Input add-on');
return (
<DetailsLayout>
<h1 className="f1 tc">Input add-on</h1>
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="w5">
<div className="b--black-30 ba br2 flex h2 w-100 mb3">
<div className="bg-black-05 flex items-center justify-center pa2 br b--black-30 w-30">
<Rectangle />
</div>
<input type="text" className="bn pa2 flex-auto" style={{ marginRight: '1px' }} />
</div>
<div className="b--black-30 ba br2 flex h2 w-100 mb3">
<input type="text" className="bn pa2 flex-auto" style={{ marginLeft: '1px' }} />
<div className="bg-black-05 flex items-center justify-center pa2 bl b--black-30 w-40">
<Rectangle />
</div>
</div>
<div className="b--black-30 ba br2 flex h2 w-100">
<div className="bg-black-05 flex items-center justify-center pa2 br b--black-30 w-20">
<Rectangle />
</div>
<input type="text" className="bn pa2 flex-auto" />
<div className="bg-black-05 flex items-center justify-center pa2 bl b--black-30 w-30">
<Rectangle />
</div>
</div>
</div>
</div>
}
source={
<SampleCode
lang="html"
code={`
<!-- Add-on prepended -->
<div style="
display: flex;
/* Take full size */
width: 100%;
">
<!-- Add-on -->
<div style="
/* Content is centered */
align-items: center;
display: flex;
justify-content: center;
">
...
</div>
<!-- Input -->
<input type="text" style="
/* Take the remaining width */
flex: 1;
" />
</div>
<!-- Add-on appended -->
<div style="
display: flex;
/* Take full size */
width: 100%;
">
<!-- Input -->
<input type="text" style="
/* Take the remaining width */
flex: 1;
" />
<!-- Add-on -->
<div style="
/* Content is centered */
align-items: center;
display: flex;
justify-content: center;
">
...
</div>
</div>
<!-- Appended and prepended add-ons -->
<div style="
display: flex;
/* Take full size */
width: 100%;
">
<!-- Add-on -->
<div style="
/* Content is centered */
align-items: center;
display: flex;
justify-content: center;
">
...
</div>
<!-- Input -->
<input type="text" style="
/* Take the remaining width */
flex: 1;
" />
<!-- Add-on -->
<div style="
/* Content is centered */
align-items: center;
display: flex;
justify-content: center;
">
...
</div>
</div>
`}
/>
}
/>
</DetailsLayout>
);
};
export default InputAddon;