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 stepper input

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-16 21:32:22 +07:00
parent 3b15246048
commit cc23a75425
6 changed files with 112 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/App.jsx
View File

@@ -5,6 +5,7 @@ import Home from './Home';
import Badge from './layouts/Badge';
import Centering from './layouts/Centering';
import Sidebar from './layouts/Sidebar';
import StepperInput from './layouts/StepperInput';
import StickyFooter from './layouts/StickyFooter';
import StickyHeader from './layouts/StickyHeader';
@@ -16,6 +17,7 @@ const App = () => {
<Route exact={true} path='/badge'><Badge /></Route>
<Route exact={true} path='/centering'><Centering /></Route>
<Route exact={true} path='/sidebar'><Sidebar /></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>
</Switch>

8
client/Home.jsx
View File

@@ -6,7 +6,7 @@ import CenterCover from './covers/CenterCover';
import SidebarCover from './covers/SidebarCover';
import StickyFooterCover from './covers/StickyFooterCover';
import StickyHeaderCover from './covers/StickyHeaderCover';
import StepperCover from './covers/StepperCover';
import StepperInputCover from './covers/StepperInputCover';
import Layout from './Layout';
import useDocumentTitle from './useDocumentTitle';
@@ -69,9 +69,9 @@ const Home = () => {
</Link>
</div>
<div className="pa2 w-20">
<Link to="/stepper" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
<StepperCover />
<h4 className="f4 mv0 pt3">Stepper</h4>
<Link to="/stepper-input" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
<StepperInputCover />
<h4 className="f4 mv0 pt3">Stepper input</h4>
</Link>
</div>
</div>

19
client/covers/StepperCover.jsx
View File

@@ -1,19 +0,0 @@
import React from 'react';
import Frame from '../placeholders/Frame';
const StepperCover = () => {
return (
<Frame>
<div className="h-100 flex items-center justify-center pa2">
<div className="b--black-30 ba br2 flex w-100">
<div className="w-20 br b--black-30 tc">-</div>
<div className="flex-grow-1 bg-white"></div>
<div className="w-20 bl b--black-30 tc">+</div>
</div>
</div>
</Frame>
);
};
export default StepperCover;

19
client/covers/StepperInputCover.jsx Normal file
View File

@@ -0,0 +1,19 @@
import React from 'react';
import Frame from '../placeholders/Frame';
const StepperInputCover = () => {
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 w1">-</div>
<div className="flex-grow-1 bg-white"></div>
<div className="b--black-30 bl flex items-center justify-center w1">+</div>
</div>
</div>
</Frame>
);
};
export default StepperInputCover;

2
client/layouts/Badge.jsx
View File

@@ -2,8 +2,6 @@ import React from 'react';
import DetailsLayout from '../DetailsLayout';
import BrowserFrame from '../placeholders/BrowserFrame';
import Dot from '../placeholders/Dot';
import Rectangle from '../placeholders/Rectangle';
import SampleCode from '../SampleCode';
import useDocumentTitle from '../useDocumentTitle';

87
client/layouts/StepperInput.jsx Normal file
View File

@@ -0,0 +1,87 @@
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import DetailsLayout from '../DetailsLayout';
import BrowserFrame from '../placeholders/BrowserFrame';
import SampleCode from '../SampleCode';
import useDocumentTitle from '../useDocumentTitle';
const StepperInput = () => {
useDocumentTitle('CSS Layout ∙ Stepper input');
const [value, setValue] = useState(0);
const decrease = () => setValue(value - 1);
const increase = () => setValue(value + 1);
const change = (e) => setValue(parseInt(e.target.value, 10));
return (
<DetailsLayout>
<h1 className="f1 tc">Stepper input</h1>
<div className="lh-copy mb3">
The content of minus and plus buttons are centered by using the technique in the <Link to="/centering" className="link">Centering</Link> page.
</div>
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="b--black-30 ba br2 flex h2 w4">
<button className="bg-black-05 bn flex items-center justify-center pointer w2" onClick={decrease}>-</button>
<div className="b--black-30 ba bb-0 bt-0 h-100" style={{ flex: 1 }}>
<input type="text" className="bn h-100 pa2 w-100" value={value} onChange={change} />
</div>
<button className="bg-black-05 bn flex items-center justify-center pointer w2" onClick={increase}>+</button>
</div>
</div>
}
source={
<SampleCode
lang="html"
code={`
<div style="
display: flex;
/* Border */
border: 1px solid rgba(0, 0, 0, .3);
/* Size */
height: 32px;
width: 128px;
">
<!-- Minus button -->
<button style="
/* Content is centered */
align-items: center;
display: flex;
justify-content: center;
/* Size */
width: 32px;
">-</button>
<!-- Input container -->
<div style="flex: 1">
<input type="text" style="
/* Take full size of its container */
height: 100%;
width: 100%;
" />
</div>
<!-- Plus button -->
<button style="
/* Content is centered */
align-items: center;
display: flex;
justify-content: center;
/* Size */
width: 32px;
">+</button>
</div>
`}
/>
}
/>
</DetailsLayout>
);
};
export default StepperInput;