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

Add floating label

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-28 09:30:01 +07:00
parent ede365f6e2
commit 9062636d38
5 changed files with 182 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
client/App.tsx
View File

@@ -15,15 +15,33 @@ const App = () => {
<Route exact={true} path='/'><Home /></Route>
<Route exact={true} path='/patterns'><Explore /></Route>
<Route exact={true} path='/patterns/badge'><DetailsLoader pattern={Pattern.Badge} /></Route>
<Route exact={true} path='/patterns/breadcrumb'><DetailsLoader pattern={Pattern.Breadcrumb} /></Route>
<Route exact={true} path='/patterns/button-with-icon'><DetailsLoader pattern={Pattern.ButtonWithIcon} /></Route>
<Route exact={true} path='/patterns/card'><DetailsLoader pattern={Pattern.Card} /></Route>
<Route exact={true} path='/patterns/centering'><DetailsLoader pattern={Pattern.Centering} /></Route>
<Route exact={true} path='/patterns/docked-at-corner'><DetailsLoader pattern={Pattern.DockedAtCorner} /></Route>
<Route exact={true} path='/patterns/dot-leader'><DetailsLoader pattern={Pattern.DotLeader} /></Route>
<Route exact={true} path='/patterns/dot-navigation'><DetailsLoader pattern={Pattern.DotNavigation} /></Route>
<Route exact={true} path='/patterns/drop-area'><DetailsLoader pattern={Pattern.DropArea} /></Route>
<Route exact={true} path='/patterns/badge'>
<DetailsLoader pattern={Pattern.Badge} />
</Route>
<Route exact={true} path='/patterns/breadcrumb'>
<DetailsLoader pattern={Pattern.Breadcrumb} />
</Route>
<Route exact={true} path='/patterns/button-with-icon'>
<DetailsLoader pattern={Pattern.ButtonWithIcon} />
</Route>
<Route exact={true} path='/patterns/card'>
<DetailsLoader pattern={Pattern.Card} />
</Route>
<Route exact={true} path='/patterns/centering'>
<DetailsLoader pattern={Pattern.Centering} />
</Route>
<Route exact={true} path='/patterns/docked-at-corner'>
<DetailsLoader pattern={Pattern.DockedAtCorner} />
</Route>
<Route exact={true} path='/patterns/dot-leader'>
<DetailsLoader pattern={Pattern.DotLeader} />
</Route>
<Route exact={true} path='/patterns/dot-navigation'>
<DetailsLoader pattern={Pattern.DotNavigation} />
</Route>
<Route exact={true} path='/patterns/drop-area'>
<DetailsLoader pattern={Pattern.DropArea} />
</Route>
<Route exact={true} path='/patterns/feature-list'><DetailsLoader pattern={Pattern.FeatureList} /></Route>
<Route exact={true} path='/patterns/fixed-at-corner'><DetailsLoader pattern={Pattern.FixedAtCorner} /></Route>
<Route exact={true} path='/patterns/floating-label'><DetailsLoader pattern={Pattern.FloatingLabel} /></Route>

1
client/constants/Pattern.ts
View File

@@ -10,6 +10,7 @@ enum Pattern {
DropArea = 'Drop area',
FeatureList = 'Feature list',
FixedAtCorner = 'Fixed at corner',
FloatingLabel = 'Floating label',
HolyGrail = 'Holy grail',
InputAddOn = 'Input add-on',
MediaObject = 'Media object',

46
client/patterns/floating-label/Cover.tsx Normal file
View File

@@ -0,0 +1,46 @@
import React from 'react';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
height: '32px',
position: 'relative',
width: '100%',
}}
>
<div
style={{
backgroundColor: '#BBB',
height: '8px',
left: '8px',
padding: '0 8px',
position: 'absolute',
top: 0,
transform: 'translate(0, -50%)',
width: '40%',
}}
/>
</div>
</div>
</Frame>
);
};
export default Cover;

99
client/patterns/floating-label/Details.tsx Normal file
View File

@@ -0,0 +1,99 @@
import React from 'react';
import './floating-label.css';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Floating label">
<div style={{ padding: '64px 32px' }}>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
Type something in the input to see how the label is shown up.
</div>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
className="floating-container"
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
padding: '0 1px',
position: 'relative',
width: '200px',
}}
>
<input
placeholder="Placeholder"
type="text"
style={{
borderColor: 'transparent',
padding: '8px',
width: '100%',
}}
/>
<label
style={{
left: '8px',
padding: '0 8px',
position: 'absolute',
top: 0,
transition: 'all 200ms',
}}
>
Placeholder
</label>
</div>
</div>
)}
source={`
<style>
.floating-container {
position: relative;
}
.floating-container label {
/* Position the label */
left: 8px;
position: absolute;
top: 0;
/* Hide it by default */
opacity: 0;
transition: 'all 200ms',
}
/* Show the label at desired position when the placeholder of input isn't shown */
.floating-container input:not(:placeholder-shown) + label {
background: #FFF;
transform: translate(0, -50%);
opacity: 1;
}
</style>
<div class="floating-container">
<!-- The input -->
<input placeholder="Placeholder" />
<!-- The label -->
<label>Placeholder</label>
</div>
`}
/>
</div>
</DetailsLayout>
);
};
export default Details;

9
client/patterns/floating-label/floating-label.css Normal file
View File

@@ -0,0 +1,9 @@
.floating-container label {
opacity: 0;
}
.floating-container input:not(:placeholder-shown) + label {
background: #FFF;
transform: translate(0, -50%);
opacity: 1;
}