1
0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-19 12:21:23 +02:00

Merge pull request #60 from phuoc-ng/floating-label

Add floating label
This commit is contained in:
phuoc-ng
2019-11-28 20:31:04 +07:00
committed by GitHub
15 changed files with 249 additions and 115 deletions

View File

@@ -3,66 +3,20 @@ import { BrowserRouter as Router, Route, Switch as RouteSwitch } from 'react-rou
import './index.css';
import Pattern from './constants/Pattern';
import Explore from './Explore';
import Home from './Home';
import DetailsLoader from './loaders/DetailsLoader';
import ExplorePage from './pages/ExplorePage';
import HomePage from './pages/HomePage';
import PatternPage from './pages/PatternPage';
const App = () => {
return (
<Router>
<RouteSwitch>
<Route exact={true} path='/'><Home /></Route>
<Route exact={true} path='/explore'><Explore /></Route>
<Route exact={true} path='/badge'><DetailsLoader pattern={Pattern.Badge} /></Route>
<Route exact={true} path='/breadcrumb'><DetailsLoader pattern={Pattern.Breadcrumb} /></Route>
<Route exact={true} path='/button-with-icon'><DetailsLoader pattern={Pattern.ButtonWithIcon} /></Route>
<Route exact={true} path='/card'><DetailsLoader pattern={Pattern.Card} /></Route>
<Route exact={true} path='/centering'><DetailsLoader pattern={Pattern.Centering} /></Route>
<Route exact={true} path='/docked-at-corner'><DetailsLoader pattern={Pattern.DockedAtCorner} /></Route>
<Route exact={true} path='/dot-leader'><DetailsLoader pattern={Pattern.DotLeader} /></Route>
<Route exact={true} path='/dot-navigation'><DetailsLoader pattern={Pattern.DotNavigation} /></Route>
<Route exact={true} path='/drop-area'><DetailsLoader pattern={Pattern.DropArea} /></Route>
<Route exact={true} path='/feature-list'><DetailsLoader pattern={Pattern.FeatureList} /></Route>
<Route exact={true} path='/fixed-at-corner'><DetailsLoader pattern={Pattern.FixedAtCorner} /></Route>
<Route exact={true} path='/holy-grail'><DetailsLoader pattern={Pattern.HolyGrail} /></Route>
<Route exact={true} path='/input-add-on'><DetailsLoader pattern={Pattern.InputAddOn} /></Route>
<Route exact={true} path='/media-object'><DetailsLoader pattern={Pattern.MediaObject} /></Route>
<Route exact={true} path='/menu'><DetailsLoader pattern={Pattern.Menu} /></Route>
<Route exact={true} path='/modal'><DetailsLoader pattern={Pattern.Modal} /></Route>
<Route exact={true} path='/notification'><DetailsLoader pattern={Pattern.Notification} /></Route>
<Route exact={true} path='/pagination'><DetailsLoader pattern={Pattern.Pagination} /></Route>
<Route exact={true} path='/previous-next-buttons'>
<DetailsLoader pattern={Pattern.PreviousNextButtons} />
</Route>
<Route exact={true} path='/pricing-table'><DetailsLoader pattern={Pattern.PricingTable} /></Route>
<Route exact={true} path='/property-list'><DetailsLoader pattern={Pattern.PropertyList} /></Route>
<Route exact={true} path='/progress-bar'><DetailsLoader pattern={Pattern.ProgressBar} /></Route>
<Route exact={true} path='/questions-and-answers'>
<DetailsLoader pattern={Pattern.QuestionsAndAnswers} />
</Route>
<Route exact={true} path='/radio-switch'><DetailsLoader pattern={Pattern.RadioSwitch} /></Route>
<Route exact={true} path='/rating'><DetailsLoader pattern={Pattern.Rating} /></Route>
<Route exact={true} path='/same-height-columns'>
<DetailsLoader pattern={Pattern.SameHeightColumns} />
</Route>
<Route exact={true} path='/search-box'><DetailsLoader pattern={Pattern.SearchBox} /></Route>
<Route exact={true} path='/separator'><DetailsLoader pattern={Pattern.Separator} /></Route>
<Route exact={true} path='/sidebar'><DetailsLoader pattern={Pattern.Sidebar} /></Route>
<Route exact={true} path='/simple-grid'><DetailsLoader pattern={Pattern.SimpleGrid} /></Route>
<Route exact={true} path='/slider'><DetailsLoader pattern={Pattern.Slider} /></Route>
<Route exact={true} path='/spin-button'><DetailsLoader pattern={Pattern.SpinButton} /></Route>
<Route exact={true} path='/split-navigation'><DetailsLoader pattern={Pattern.SplitNavigation} /></Route>
<Route exact={true} path='/split-screen'><DetailsLoader pattern={Pattern.SplitScreen} /></Route>
<Route exact={true} path='/stepper-input'><DetailsLoader pattern={Pattern.StepperInput} /></Route>
<Route exact={true} path='/sticky-footer'><DetailsLoader pattern={Pattern.StickyFooter} /></Route>
<Route exact={true} path='/sticky-header'><DetailsLoader pattern={Pattern.StickyHeader} /></Route>
<Route exact={true} path='/switch'><DetailsLoader pattern={Pattern.Switch} /></Route>
<Route exact={true} path='/tab'><DetailsLoader pattern={Pattern.Tab} /></Route>
<Route exact={true} path='/toggle-password-visibility'>
<DetailsLoader pattern={Pattern.TogglePasswordVisibility} />
</Route>
<Route exact={true} path='/wizard'><DetailsLoader pattern={Pattern.Wizard} /></Route>
<Route exact={true} path='/'><HomePage /></Route>
<Route exact={true} path='/patterns'><ExplorePage /></Route>
<Route
path='/patterns/:pattern'
render={(props) => <PatternPage pattern={props.match.params.pattern as string} />} // tslint:disable-line
/>
</RouteSwitch>
</Router>
);

View File

@@ -12,7 +12,7 @@ interface CoverCardProps {
const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
return (
<Link
to={`/${slug(pattern)}`}
to={`/patterns/${slug(pattern)}`}
style={{
alignItems: 'center',
display: 'flex',

View File

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

View File

@@ -35,7 +35,7 @@ const DetailsLayout: React.FC<DetailsLayoutProps> = ({ title, children }) => {
</Link>
<div>~</div>
<Link
to="/explore"
to="/patterns"
style={{
color: '#FFF',
padding: '8px 16px',

View File

@@ -3,10 +3,8 @@ import React from 'react';
import './spinner.css';
import Pattern from '../constants/Pattern';
interface DetailsLoaderProps {
pattern: Pattern;
pattern: string;
}
const slug = (item: string) => item.toLowerCase().split(' ').join('-');

View File

@@ -1,13 +1,13 @@
import React from 'react';
import { Link } from 'react-router-dom';
import CoverCard from './components/CoverCard';
import Heading from './components/Heading';
import Pattern from './constants/Pattern';
import useDocumentTitle from './hooks/useDocumentTitle';
import Layout from './layouts/Layout';
import CoverCard from '../components/CoverCard';
import Heading from '../components/Heading';
import Pattern from '../constants/Pattern';
import useDocumentTitle from '../hooks/useDocumentTitle';
import Layout from '../layouts/Layout';
const Home = () => {
const ExplorePage = () => {
useDocumentTitle('CSS Layout ∙ Explore');
return (
@@ -96,6 +96,7 @@ const Home = () => {
<CoverCard pattern={Pattern.DropArea} />
<CoverCard pattern={Pattern.FeatureList} />
<CoverCard pattern={Pattern.FixedAtCorner} />
<CoverCard pattern={Pattern.FloatingLabel} />
<CoverCard pattern={Pattern.InputAddOn} />
<CoverCard pattern={Pattern.MediaObject} />
<CoverCard pattern={Pattern.Menu} />
@@ -128,4 +129,4 @@ const Home = () => {
);
};
export default Home;
export default ExplorePage;

View File

@@ -3,12 +3,12 @@ import { Link } from 'react-router-dom';
import './home.css';
import CoverCard from './components/CoverCard';
import Pattern from './constants/Pattern';
import useDocumentTitle from './hooks/useDocumentTitle';
import Layout from './layouts/Layout';
import CoverCard from '../components/CoverCard';
import Pattern from '../constants/Pattern';
import useDocumentTitle from '../hooks/useDocumentTitle';
import Layout from '../layouts/Layout';
const Home = () => {
const HomePage = () => {
useDocumentTitle('CSS Layout');
return (
@@ -169,7 +169,7 @@ const Home = () => {
50+ patterns
</div>
<Link
to="/explore"
to="/patterns"
style={{
backgroundColor: '#00449e',
borderRadius: '4px',
@@ -208,6 +208,7 @@ const Home = () => {
<CoverCard pattern={Pattern.DropArea} />
<CoverCard pattern={Pattern.FeatureList} />
<CoverCard pattern={Pattern.FixedAtCorner} />
<CoverCard pattern={Pattern.FloatingLabel} />
<CoverCard pattern={Pattern.InputAddOn} />
<CoverCard pattern={Pattern.MediaObject} />
<CoverCard pattern={Pattern.Menu} />
@@ -240,4 +241,4 @@ const Home = () => {
);
};
export default Home;
export default HomePage;

View File

@@ -0,0 +1,24 @@
import React from 'react';
import Pattern from '../constants/Pattern';
import DetailsLoader from '../loaders/DetailsLoader';
interface PatternPageProps {
pattern: string;
}
const capitalizeFirstLetter = (s: string) => `${s.charAt(0).toUpperCase()}${s.slice(1)}`;
const PatternPage: React.FC<PatternPageProps> = ({ pattern }) => {
const name = pattern.split('-').map((s) => capitalizeFirstLetter(s)).join('');
const patterns = Object.keys(Pattern);
return (
patterns.indexOf(name) === -1
// TODO: Render 404
? <div>404</div>
: <DetailsLoader pattern={pattern} />
);
};
export default PatternPage;

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;

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;

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;
}

View File

@@ -1,42 +1,43 @@
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9">
<url><loc>https://csslayout.io/holy-grail</loc></url>
<url><loc>https://csslayout.io/sidebar</loc></url>
<url><loc>https://csslayout.io/split-screen</loc></url>
<url><loc>https://csslayout.io/sticky-footer</loc></url>
<url><loc>https://csslayout.io/sticky-header</loc></url>
<url><loc>https://csslayout.io/badge</loc></url>
<url><loc>https://csslayout.io/breadcrumb</loc></url>
<url><loc>https://csslayout.io/button-with-icon</loc></url>
<url><loc>https://csslayout.io/card</loc></url>
<url><loc>https://csslayout.io/centering</loc></url>
<url><loc>https://csslayout.io/docked-at-corner</loc></url>
<url><loc>https://csslayout.io/dot-navigation</loc></url>
<url><loc>https://csslayout.io/drop-area</loc></url>
<url><loc>https://csslayout.io/feature-list</loc></url>
<url><loc>https://csslayout.io/fixed-at-corner</loc></url>
<url><loc>https://csslayout.io/input-addon</loc></url>
<url><loc>https://csslayout.io/media-object</loc></url>
<url><loc>https://csslayout.io/menu</loc></url>
<url><loc>https://csslayout.io/modal</loc></url>
<url><loc>https://csslayout.io/notification</loc></url>
<url><loc>https://csslayout.io/pagination</loc></url>
<url><loc>https://csslayout.io/previous-next-buttons</loc></url>
<url><loc>https://csslayout.io/pricing-table</loc></url>
<url><loc>https://csslayout.io/progress-bar</loc></url>
<url><loc>https://csslayout.io/property-list</loc></url>
<url><loc>https://csslayout.io/questions-and-answers</loc></url>
<url><loc>https://csslayout.io/radio-switch</loc></url>
<url><loc>https://csslayout.io/rating</loc></url>
<url><loc>https://csslayout.io/same-height-columns</loc></url>
<url><loc>https://csslayout.io/search-box</loc></url>
<url><loc>https://csslayout.io/separator</loc></url>
<url><loc>https://csslayout.io/simple-grid</loc></url>
<url><loc>https://csslayout.io/slider</loc></url>
<url><loc>https://csslayout.io/spin-button</loc></url>
<url><loc>https://csslayout.io/split-navigation</loc></url>
<url><loc>https://csslayout.io/stepper-input</loc></url>
<url><loc>https://csslayout.io/switch</loc></url>
<url><loc>https://csslayout.io/tab</loc></url>
<url><loc>https://csslayout.io/toggle-password-visibility</loc></url>
<url><loc>https://csslayout.io/wizard</loc></url>
<url><loc>https://csslayout.io/patterns</loc></url>
<url><loc>https://csslayout.io/patterns/holy-grail</loc></url>
<url><loc>https://csslayout.io/patterns/sidebar</loc></url>
<url><loc>https://csslayout.io/patterns/split-screen</loc></url>
<url><loc>https://csslayout.io/patterns/sticky-footer</loc></url>
<url><loc>https://csslayout.io/patterns/sticky-header</loc></url>
<url><loc>https://csslayout.io/patterns/badge</loc></url>
<url><loc>https://csslayout.io/patterns/breadcrumb</loc></url>
<url><loc>https://csslayout.io/patterns/button-with-icon</loc></url>
<url><loc>https://csslayout.io/patterns/card</loc></url>
<url><loc>https://csslayout.io/patterns/centering</loc></url>
<url><loc>https://csslayout.io/patterns/docked-at-corner</loc></url>
<url><loc>https://csslayout.io/patterns/dot-navigation</loc></url>
<url><loc>https://csslayout.io/patterns/drop-area</loc></url>
<url><loc>https://csslayout.io/patterns/feature-list</loc></url>
<url><loc>https://csslayout.io/patterns/fixed-at-corner</loc></url>
<url><loc>https://csslayout.io/patterns/input-addon</loc></url>
<url><loc>https://csslayout.io/patterns/media-object</loc></url>
<url><loc>https://csslayout.io/patterns/menu</loc></url>
<url><loc>https://csslayout.io/patterns/modal</loc></url>
<url><loc>https://csslayout.io/patterns/notification</loc></url>
<url><loc>https://csslayout.io/patterns/pagination</loc></url>
<url><loc>https://csslayout.io/patterns/previous-next-buttons</loc></url>
<url><loc>https://csslayout.io/patterns/pricing-table</loc></url>
<url><loc>https://csslayout.io/patterns/progress-bar</loc></url>
<url><loc>https://csslayout.io/patterns/property-list</loc></url>
<url><loc>https://csslayout.io/patterns/questions-and-answers</loc></url>
<url><loc>https://csslayout.io/patterns/radio-switch</loc></url>
<url><loc>https://csslayout.io/patterns/rating</loc></url>
<url><loc>https://csslayout.io/patterns/same-height-columns</loc></url>
<url><loc>https://csslayout.io/patterns/search-box</loc></url>
<url><loc>https://csslayout.io/patterns/separator</loc></url>
<url><loc>https://csslayout.io/patterns/simple-grid</loc></url>
<url><loc>https://csslayout.io/patterns/slider</loc></url>
<url><loc>https://csslayout.io/patterns/spin-button</loc></url>
<url><loc>https://csslayout.io/patterns/split-navigation</loc></url>
<url><loc>https://csslayout.io/patterns/stepper-input</loc></url>
<url><loc>https://csslayout.io/patterns/switch</loc></url>
<url><loc>https://csslayout.io/patterns/tab</loc></url>
<url><loc>https://csslayout.io/patterns/toggle-password-visibility</loc></url>
<url><loc>https://csslayout.io/patterns/wizard</loc></url>
</urlset>