mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-11 16:44:57 +02:00
Merge pull request #52 from phuoc-ng/property-list
Property list pattern
This commit is contained in:
phuoc-ng
GitHub
@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Switch as RouteSwitch } from 'react-rou
|
||||
|
||||
import './index.css';
|
||||
|
||||
import Pattern from './constants/Pattern';
|
||||
import Home from './Home';
|
||||
import DetailsLoader from './loaders/DetailsLoader';
|
||||
|
||||
@@ -11,46 +12,53 @@ const App = () => {
|
||||
<Router>
|
||||
<RouteSwitch>
|
||||
<Route exact={true} path='/'><Home /></Route>
|
||||
<Route exact={true} path='/badge'><DetailsLoader pattern="Badge" /></Route>
|
||||
<Route exact={true} path='/breadcrumb'><DetailsLoader pattern="Breadcrumb" /></Route>
|
||||
<Route exact={true} path='/button-with-icon'><DetailsLoader pattern="Button with icon" /></Route>
|
||||
<Route exact={true} path='/card'><DetailsLoader pattern="Card" /></Route>
|
||||
<Route exact={true} path='/centering'><DetailsLoader pattern="Centering" /></Route>
|
||||
<Route exact={true} path='/docked-at-corner'><DetailsLoader pattern="Docked at corner" /></Route>
|
||||
<Route exact={true} path='/dot-navigation'><DetailsLoader pattern="Dot navigation" /></Route>
|
||||
<Route exact={true} path='/feature-list'><DetailsLoader pattern="Feature list" /></Route>
|
||||
<Route exact={true} path='/fixed-at-corner'><DetailsLoader pattern="Fixed at corner" /></Route>
|
||||
<Route exact={true} path='/holy-grail'><DetailsLoader pattern="Holy grail" /></Route>
|
||||
<Route exact={true} path='/input-add-on'><DetailsLoader pattern="Input add-on" /></Route>
|
||||
<Route exact={true} path='/media-object'><DetailsLoader pattern="Media object" /></Route>
|
||||
<Route exact={true} path='/menu'><DetailsLoader pattern="Menu" /></Route>
|
||||
<Route exact={true} path='/modal'><DetailsLoader pattern="Modal" /></Route>
|
||||
<Route exact={true} path='/notification'><DetailsLoader pattern="Notification" /></Route>
|
||||
<Route exact={true} path='/pagination'><DetailsLoader pattern="Pagination" /></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-navigation'><DetailsLoader pattern={Pattern.DotNavigation} /></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="Previous next buttons" />
|
||||
<DetailsLoader pattern={Pattern.PreviousNextButtons} />
|
||||
</Route>
|
||||
<Route exact={true} path='/pricing-table'><DetailsLoader pattern="Pricing table" /></Route>
|
||||
<Route exact={true} path='/progress-bar'><DetailsLoader pattern="Progress bar" /></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.PropertyList} /></Route>
|
||||
<Route exact={true} path='/questions-and-answers'>
|
||||
<DetailsLoader pattern="Questions and answers" />
|
||||
<DetailsLoader pattern={Pattern.QuestionsAndAnswers} />
|
||||
</Route>
|
||||
<Route exact={true} path='/radio-switch'><DetailsLoader pattern="Radio switch" /></Route>
|
||||
<Route exact={true} path='/same-height-columns'><DetailsLoader pattern="Same height columns" /></Route>
|
||||
<Route exact={true} path='/search-box'><DetailsLoader pattern="Search box" /></Route>
|
||||
<Route exact={true} path='/separator'><DetailsLoader pattern="Separator" /></Route>
|
||||
<Route exact={true} path='/sidebar'><DetailsLoader pattern="Sidebar" /></Route>
|
||||
<Route exact={true} path='/simple-grid'><DetailsLoader pattern="Simple grid" /></Route>
|
||||
<Route exact={true} path='/slider'><DetailsLoader pattern="Slider" /></Route>
|
||||
<Route exact={true} path='/split-navigation'><DetailsLoader pattern="Split navigation" /></Route>
|
||||
<Route exact={true} path='/split-screen'><DetailsLoader pattern="Split screen" /></Route>
|
||||
<Route exact={true} path='/stepper-input'><DetailsLoader pattern="Stepper input" /></Route>
|
||||
<Route exact={true} path='/sticky-footer'><DetailsLoader pattern="Sticky footer" /></Route>
|
||||
<Route exact={true} path='/sticky-header'><DetailsLoader pattern="Sticky header" /></Route>
|
||||
<Route exact={true} path='/switch'><DetailsLoader pattern="Switch" /></Route>
|
||||
<Route exact={true} path='/tab'><DetailsLoader pattern="Tab" /></Route>
|
||||
<Route exact={true} path='/toggle-password-visibility'><DetailsLoader pattern="Toggle password visibility" /></Route>
|
||||
<Route exact={true} path='/wizard'><DetailsLoader pattern="Wizard" /></Route>
|
||||
<Route exact={true} path='/radio-switch'>
|
||||
<DetailsLoader pattern={Pattern.RadioSwitch} />
|
||||
</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='/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>
|
||||
</RouteSwitch>
|
||||
</Router>
|
||||
);
|
||||
|
||||
@@ -87,6 +87,7 @@ const Home = () => {
|
||||
<CoverCard pattern={Pattern.Pagination} />
|
||||
<CoverCard pattern={Pattern.PreviousNextButtons} />
|
||||
<CoverCard pattern={Pattern.PricingTable} />
|
||||
<CoverCard pattern={Pattern.PropertyList} />
|
||||
<CoverCard pattern={Pattern.ProgressBar} />
|
||||
<CoverCard pattern={Pattern.QuestionsAndAnswers} />
|
||||
<CoverCard pattern={Pattern.RadioSwitch} />
|
||||
|
||||
@@ -17,6 +17,7 @@ enum Pattern {
|
||||
Pagination = 'Pagination',
|
||||
PreviousNextButtons = 'Previous next buttons',
|
||||
PricingTable = 'Pricing table',
|
||||
PropertyList = 'Property list',
|
||||
ProgressBar = 'Progress bar',
|
||||
QuestionsAndAnswers = 'Questions and answers',
|
||||
RadioSwitch = 'Radio switch',
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import loadable, { LoadableComponent } from '@loadable/component';
|
||||
import React from 'react';
|
||||
|
||||
import Pattern from '../constants/Pattern';
|
||||
import './spinner.css';
|
||||
|
||||
interface DetailsLoaderProps {
|
||||
pattern: string;
|
||||
pattern: Pattern;
|
||||
}
|
||||
|
||||
const slug = (item: string) => item.toLowerCase().split(' ').join('-');
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import React from 'react';
|
||||
|
||||
import RelatedPatterns from '../../components/RelatedPatterns';
|
||||
import Pattern from '../../constants/Pattern';
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Circle from '../../placeholders/Circle';
|
||||
@@ -108,6 +110,7 @@ const Details: React.FC<{}> = () => {
|
||||
`}
|
||||
/>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.PropertyList]} />
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
30
client/patterns/property-list/Cover.tsx
Normal file
30
client/patterns/property-list/Cover.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
|
||||
import Circle from '../../placeholders/Circle';
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
|
||||
const Cover: React.FC<{}> = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center pa3">
|
||||
<div className="w-100">
|
||||
<div className="bb b--black-30 pv1 flex items-center justify-between">
|
||||
<div className="w-60"><Rectangle height={8} /></div>
|
||||
<Circle size={12} />
|
||||
</div>
|
||||
<div className="bb b--black-30 pv1 flex items-center justify-between">
|
||||
<div className="w-20"><Rectangle height={8} /></div>
|
||||
<Circle size={12} />
|
||||
</div>
|
||||
<div className="bb b--black-30 pv1 flex items-center justify-between">
|
||||
<div className="w-40"><Rectangle height={8} /></div>
|
||||
<Circle size={12} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
110
client/patterns/property-list/Details.tsx
Normal file
110
client/patterns/property-list/Details.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
import React from 'react';
|
||||
|
||||
import Heading from '../../components/Heading';
|
||||
import RelatedPatterns from '../../components/RelatedPatterns';
|
||||
import Pattern from '../../constants/Pattern';
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Circle from '../../placeholders/Circle';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
|
||||
const Details: React.FC<{}> = () => {
|
||||
const Item: React.FC<{}> = ({ children }) => {
|
||||
return (
|
||||
<dl
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
margin: 0,
|
||||
padding: '8px 0',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</dl>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<DetailsLayout title="Property list">
|
||||
<div className="ph4 pv5">
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div style={{ width: '40%' }}>
|
||||
<Item>
|
||||
<dt style={{ width: '80%' }}><Rectangle /></dt>
|
||||
<dd><Circle /></dd>
|
||||
</Item>
|
||||
<Item>
|
||||
<dt style={{ width: '60%' }}><Rectangle /></dt>
|
||||
<dd><Circle /></dd>
|
||||
</Item>
|
||||
<Item>
|
||||
<dt style={{ width: '30%' }}><Rectangle /></dt>
|
||||
<dd><Circle /></dd>
|
||||
</Item>
|
||||
<Item>
|
||||
<dt style={{ width: '50%' }}><Rectangle /></dt>
|
||||
<dd><Circle /></dd>
|
||||
</Item>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<!-- A property item -->
|
||||
<dl style="
|
||||
/* Content is center horizontally */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
/*
|
||||
The property name will stick to the left, and the value
|
||||
will stick to the right
|
||||
*/
|
||||
justify-content: space-between;
|
||||
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* Spacing */
|
||||
margin: 0px;
|
||||
padding: 8px 0px;
|
||||
">
|
||||
<!-- Property name -->
|
||||
<dt>...</dt>
|
||||
|
||||
<!-- Property value -->
|
||||
<dd>...</dd>
|
||||
</dl>
|
||||
`}
|
||||
/>
|
||||
</div>
|
||||
<section>
|
||||
<Heading title="Use cases" />
|
||||
|
||||
<div style={{ padding: '64px', width: '500px' }}>
|
||||
<Item>
|
||||
<dt>Name</dt>
|
||||
<dd>WebAssembly in Action</dd>
|
||||
</Item>
|
||||
<Item>
|
||||
<dt>Author</dt>
|
||||
<dd>Gerard Gallant</dd>
|
||||
</Item>
|
||||
<Item>
|
||||
<dt>Publishing date</dt>
|
||||
<dd>November 2019</dd>
|
||||
</Item>
|
||||
<Item>
|
||||
<dt>ISBN</dt>
|
||||
<dd>9781617295744</dd>
|
||||
</Item>
|
||||
</div>
|
||||
</section>
|
||||
<RelatedPatterns patterns={[Pattern.Menu]} />
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
@@ -7,8 +7,9 @@ interface CircleProps {
|
||||
const Circle: React.FC<CircleProps> = ({ size = 16 }) => {
|
||||
return (
|
||||
<div
|
||||
className="bg-black-30 br-pill"
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, .3)',
|
||||
borderRadius: '9999px',
|
||||
height: `${size}px`,
|
||||
width: `${size}px`,
|
||||
}}
|
||||
|
||||
@@ -7,8 +7,12 @@ interface RectangleProps {
|
||||
const Rectangle: React.FC<RectangleProps> = ({ height = 8 }) => {
|
||||
return (
|
||||
<div
|
||||
className="w-100 bg-black-30 br1"
|
||||
style={{ height: `${height}px` }}
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, .3)',
|
||||
borderRadius: '2px',
|
||||
height: `${height}px`,
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
<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/same-height-columns</loc></url>
|
||||
|
||||
Reference in New Issue
Block a user