mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-12 09:04:26 +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/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;