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

Organize patterns

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-12-05 20:48:37 +07:00
parent b02edc1bee
commit af9abd8dc3
1 changed files with 56 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
client/pages/ExplorePage.tsx
View File

@@ -73,11 +73,12 @@ const ExplorePage = () => {
</div> </div>
<section> <section>
<Heading title="Layouts" /> <Heading title="Layout" />
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}> <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
<CoverCard pattern={Pattern.HolyGrail} /> <CoverCard pattern={Pattern.HolyGrail} />
<CoverCard pattern={Pattern.Sidebar} /> <CoverCard pattern={Pattern.Sidebar} />
<CoverCard pattern={Pattern.SimpleGrid} />
<CoverCard pattern={Pattern.SplitScreen} /> <CoverCard pattern={Pattern.SplitScreen} />
<CoverCard pattern={Pattern.StickyFooter} /> <CoverCard pattern={Pattern.StickyFooter} />
<CoverCard pattern={Pattern.StickyHeader} /> <CoverCard pattern={Pattern.StickyHeader} />
@@ -85,65 +86,85 @@ const ExplorePage = () => {
</section> </section>
<section> <section>
<Heading title="Patterns" /> <Heading title="Navigation" />
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
<CoverCard pattern={Pattern.Breadcrumb} />
<CoverCard pattern={Pattern.CircularNavigation} />
<CoverCard pattern={Pattern.DotNavigation} />
<CoverCard pattern={Pattern.Dropdown} />
<CoverCard pattern={Pattern.FullScreenMenu} />
<CoverCard pattern={Pattern.Menu} />
<CoverCard pattern={Pattern.Pagination} />
<CoverCard pattern={Pattern.PreviousNextButtons} />
<CoverCard pattern={Pattern.SplitNavigation} />
<CoverCard pattern={Pattern.Tab} />
<CoverCard pattern={Pattern.Wizard} />
</div>
</section>
<section>
<Heading title="Input" />
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
<CoverCard pattern={Pattern.ButtonWithIcon} />
<CoverCard pattern={Pattern.CustomCheckboxButton} />
<CoverCard pattern={Pattern.CustomRadioButton} />
<CoverCard pattern={Pattern.FloatingLabel} />
<CoverCard pattern={Pattern.InputAddon} />
<CoverCard pattern={Pattern.RadioButtonGroup} />
<CoverCard pattern={Pattern.RadioSwitch} />
<CoverCard pattern={Pattern.Rating} />
<CoverCard pattern={Pattern.SearchBox} />
<CoverCard pattern={Pattern.Slider} />
<CoverCard pattern={Pattern.SpinButton} />
<CoverCard pattern={Pattern.StepperInput} />
<CoverCard pattern={Pattern.Switch} />
<CoverCard pattern={Pattern.TogglePasswordVisibility} />
<CoverCard pattern={Pattern.UploadButton} />
</div>
</section>
<section>
<Heading title="Display" />
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}> <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
<CoverCard pattern={Pattern.Accordion} /> <CoverCard pattern={Pattern.Accordion} />
<CoverCard pattern={Pattern.Avatar} /> <CoverCard pattern={Pattern.Avatar} />
<CoverCard pattern={Pattern.AvatarList} /> <CoverCard pattern={Pattern.AvatarList} />
<CoverCard pattern={Pattern.Badge} /> <CoverCard pattern={Pattern.Badge} />
<CoverCard pattern={Pattern.Breadcrumb} />
<CoverCard pattern={Pattern.ButtonWithIcon} />
<CoverCard pattern={Pattern.Card} /> <CoverCard pattern={Pattern.Card} />
<CoverCard pattern={Pattern.Centering} /> <CoverCard pattern={Pattern.Centering} />
<CoverCard pattern={Pattern.CircularNavigation} />
<CoverCard pattern={Pattern.CookieBanner} /> <CoverCard pattern={Pattern.CookieBanner} />
<CoverCard pattern={Pattern.CornerRibbon} /> <CoverCard pattern={Pattern.CornerRibbon} />
<CoverCard pattern={Pattern.CustomCheckboxButton} />
<CoverCard pattern={Pattern.CustomRadioButton} />
<CoverCard pattern={Pattern.DockedAtCorner} /> <CoverCard pattern={Pattern.DockedAtCorner} />
<CoverCard pattern={Pattern.DotLeader} /> <CoverCard pattern={Pattern.DotLeader} />
<CoverCard pattern={Pattern.DotNavigation} />
<CoverCard pattern={Pattern.DropArea} /> <CoverCard pattern={Pattern.DropArea} />
<CoverCard pattern={Pattern.DropCap} /> <CoverCard pattern={Pattern.DropCap} />
<CoverCard pattern={Pattern.Dropdown} />
<CoverCard pattern={Pattern.FeatureList} /> <CoverCard pattern={Pattern.FeatureList} />
<CoverCard pattern={Pattern.FixedAtCorner} /> <CoverCard pattern={Pattern.FixedAtCorner} />
<CoverCard pattern={Pattern.FloatingLabel} />
<CoverCard pattern={Pattern.FullScreenMenu} />
<CoverCard pattern={Pattern.InitialAvatar} /> <CoverCard pattern={Pattern.InitialAvatar} />
<CoverCard pattern={Pattern.InputAddon} />
<CoverCard pattern={Pattern.MediaObject} /> <CoverCard pattern={Pattern.MediaObject} />
<CoverCard pattern={Pattern.Menu} />
<CoverCard pattern={Pattern.Modal} />
<CoverCard pattern={Pattern.Notification} />
<CoverCard pattern={Pattern.OverlayPlayButton} /> <CoverCard pattern={Pattern.OverlayPlayButton} />
<CoverCard pattern={Pattern.Pagination} />
<CoverCard pattern={Pattern.PopoverArrow} />
<CoverCard pattern={Pattern.PresenceIndicator} />
<CoverCard pattern={Pattern.PreviousNextButtons} />
<CoverCard pattern={Pattern.PricingTable} /> <CoverCard pattern={Pattern.PricingTable} />
<CoverCard pattern={Pattern.PropertyList} /> <CoverCard pattern={Pattern.PropertyList} />
<CoverCard pattern={Pattern.ProgressBar} />
<CoverCard pattern={Pattern.QuestionsAndAnswers} /> <CoverCard pattern={Pattern.QuestionsAndAnswers} />
<CoverCard pattern={Pattern.RadialProgressBar} />
<CoverCard pattern={Pattern.RadioButtonGroup} />
<CoverCard pattern={Pattern.RadioSwitch} />
<CoverCard pattern={Pattern.Rating} />
<CoverCard pattern={Pattern.Ribbon} /> <CoverCard pattern={Pattern.Ribbon} />
<CoverCard pattern={Pattern.SameHeightColumns} /> <CoverCard pattern={Pattern.SameHeightColumns} />
<CoverCard pattern={Pattern.SearchBox} />
<CoverCard pattern={Pattern.Separator} /> <CoverCard pattern={Pattern.Separator} />
<CoverCard pattern={Pattern.SimpleGrid} /> </div>
<CoverCard pattern={Pattern.Slider} /> </section>
<CoverCard pattern={Pattern.SpinButton} />
<CoverCard pattern={Pattern.SplitNavigation} /> <section>
<CoverCard pattern={Pattern.StepperInput} /> <Heading title="Feedback" />
<CoverCard pattern={Pattern.Switch} />
<CoverCard pattern={Pattern.Tab} /> <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
<CoverCard pattern={Pattern.TogglePasswordVisibility} /> <CoverCard pattern={Pattern.Modal} />
<CoverCard pattern={Pattern.UploadButton} /> <CoverCard pattern={Pattern.Notification} />
<CoverCard pattern={Pattern.Wizard} /> <CoverCard pattern={Pattern.PopoverArrow} />
<CoverCard pattern={Pattern.ProgressBar} />
<CoverCard pattern={Pattern.RadialProgressBar} />
<CoverCard pattern={Pattern.PresenceIndicator} />
</div> </div>
</section> </section>
</div> </div>