mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-06 22:26:33 +02:00
@@ -7,6 +7,7 @@ enum Pattern {
|
||||
Centering = 'Centering',
|
||||
CircularNavigation = 'Circular navigation',
|
||||
CookieBanner = 'Cookie banner',
|
||||
CornerRibbon = 'Corner ribbon',
|
||||
DockedAtCorner = 'Docked at corner',
|
||||
DotLeader = 'Dot leader',
|
||||
DotNavigation = 'Dot navigation',
|
||||
@@ -34,6 +35,7 @@ enum Pattern {
|
||||
RadialProgressBar = 'Radial progress bar',
|
||||
RadioSwitch = 'Radio switch',
|
||||
Rating = 'Rating',
|
||||
Ribbon = 'Ribbon',
|
||||
SameHeightColumns = 'Same height columns',
|
||||
SearchBox = 'Search box',
|
||||
Separator = 'Separator',
|
||||
|
@@ -91,6 +91,7 @@ const ExplorePage = () => {
|
||||
<CoverCard pattern={Pattern.Centering} />
|
||||
<CoverCard pattern={Pattern.CircularNavigation} />
|
||||
<CoverCard pattern={Pattern.CookieBanner} />
|
||||
<CoverCard pattern={Pattern.CornerRibbon} />
|
||||
<CoverCard pattern={Pattern.DockedAtCorner} />
|
||||
<CoverCard pattern={Pattern.DotLeader} />
|
||||
<CoverCard pattern={Pattern.DotNavigation} />
|
||||
@@ -117,6 +118,7 @@ const ExplorePage = () => {
|
||||
<CoverCard pattern={Pattern.RadialProgressBar} />
|
||||
<CoverCard pattern={Pattern.RadioSwitch} />
|
||||
<CoverCard pattern={Pattern.Rating} />
|
||||
<CoverCard pattern={Pattern.Ribbon} />
|
||||
<CoverCard pattern={Pattern.SameHeightColumns} />
|
||||
<CoverCard pattern={Pattern.SearchBox} />
|
||||
<CoverCard pattern={Pattern.Separator} />
|
||||
|
@@ -16,7 +16,7 @@ const MadeOf: React.FC<{}> = () => {
|
||||
fontSize: '48px',
|
||||
fontWeight: 600,
|
||||
textAlign: 'center',
|
||||
textTransform: 'uppercase',
|
||||
textTransform: 'lowercase',
|
||||
}}
|
||||
>
|
||||
How it's made
|
||||
|
56
client/patterns/corner-ribbon/Cover.tsx
Normal file
56
client/patterns/corner-ribbon/Cover.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
|
||||
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: '100%',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '48px',
|
||||
left: 0,
|
||||
overflow: 'hidden',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '48px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
left: '-16px',
|
||||
position: 'absolute',
|
||||
textAlign: 'center',
|
||||
top: '8px',
|
||||
transform: 'rotate(-45deg)',
|
||||
width: '70px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
187
client/patterns/corner-ribbon/Details.tsx
Normal file
187
client/patterns/corner-ribbon/Details.tsx
Normal file
@@ -0,0 +1,187 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
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';
|
||||
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Corner ribbon">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '256px',
|
||||
position: 'relative',
|
||||
width: '256px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100px',
|
||||
left: 0,
|
||||
overflow: 'hidden',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '24px',
|
||||
left: '-64px',
|
||||
position: 'absolute',
|
||||
textAlign: 'center',
|
||||
top: '32px',
|
||||
transform: 'rotate(-45deg)',
|
||||
width: '206px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
position: relative;
|
||||
">
|
||||
<!-- The container -->
|
||||
<div style="
|
||||
/* Displayed at the top left corner */
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
|
||||
/* Size */
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
|
||||
/* Hide the part of its children which is displayed outside */
|
||||
overflow: hidden;
|
||||
">
|
||||
<!-- The ribbon -->
|
||||
<div style="
|
||||
/* Position */
|
||||
left: -64px;
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
|
||||
/* Size */
|
||||
height: 24px;
|
||||
width: 206px;
|
||||
|
||||
/* Displayed diagonally */
|
||||
transform: rotate(-45deg);
|
||||
|
||||
/* Background color */
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* Centerize the text content */
|
||||
text-align: center;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<Heading title="Use cases" />
|
||||
|
||||
<div style={{ padding: '32px' }}>
|
||||
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
|
||||
You can add a ribbon to a <Link to='/patterns/pricing-table'> pricing table</Link> to
|
||||
indicate the most popular option.
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
flex: 1,
|
||||
height: '200px',
|
||||
margin: '0 8px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
flex: 1,
|
||||
height: '300px',
|
||||
margin: '0 8px',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100px',
|
||||
left: 0,
|
||||
overflow: 'hidden',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#00449E',
|
||||
color: '#FFF',
|
||||
fontWeight: 'bold',
|
||||
left: '-64px',
|
||||
padding: '2px 0',
|
||||
position: 'absolute',
|
||||
textAlign: 'center',
|
||||
top: '32px',
|
||||
transform: 'rotate(-45deg)',
|
||||
width: '210px',
|
||||
}}
|
||||
>
|
||||
Popular
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
flex: 1,
|
||||
height: '250px',
|
||||
margin: '0 8px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.FixedAtCorner, Pattern.Ribbon]} />
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
@@ -70,7 +70,7 @@ const Details: React.FC<{}> = () => {
|
||||
`}
|
||||
/>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.CookieBanner]} />
|
||||
<RelatedPatterns patterns={[Pattern.CookieBanner, Pattern.CornerRibbon]} />
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
@@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import Block from '../../placeholders/Block';
|
||||
@@ -10,6 +11,10 @@ const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Pricing table">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
|
||||
You can <Link to='/patterns/ribbon'>add</Link> <Link to='/patterns/corner-ribbon'>a ribbon</Link> to
|
||||
indicate the most popular option.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
|
74
client/patterns/ribbon/Cover.tsx
Normal file
74
client/patterns/ribbon/Cover.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
|
||||
const Cover: React.FC<{}> = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#BBB',
|
||||
height: '24px',
|
||||
position: 'relative',
|
||||
width: '48px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '12px solid #CCC',
|
||||
borderLeftColor: 'transparent',
|
||||
bottom: '-6px',
|
||||
left: '-18px',
|
||||
position: 'absolute',
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '6px solid transparent',
|
||||
borderBottomWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderTopColor: '#AAA',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '6px solid transparent',
|
||||
borderBottomWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderTopColor: '#AAA',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '12px solid #CCC',
|
||||
borderRightColor: 'transparent',
|
||||
bottom: '-6px',
|
||||
position: 'absolute',
|
||||
right: '-18px',
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
169
client/patterns/ribbon/Details.tsx
Normal file
169
client/patterns/ribbon/Details.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
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 Rectangle from '../../placeholders/Rectangle';
|
||||
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Ribbon">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#BBB',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
justifyContent: 'center',
|
||||
padding: '0 16px',
|
||||
position: 'relative',
|
||||
width: '150px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
<div
|
||||
style={{
|
||||
border: '16px solid #CCC',
|
||||
borderLeftColor: 'transparent',
|
||||
bottom: '-8px',
|
||||
left: '-24px',
|
||||
position: 'absolute',
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '8px solid transparent',
|
||||
borderBottomWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderTopColor: '#AAA',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '8px solid transparent',
|
||||
borderBottomWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderTopColor: '#AAA',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '16px solid #CCC',
|
||||
borderRightColor: 'transparent',
|
||||
bottom: '-8px',
|
||||
position: 'absolute',
|
||||
right: '-24px',
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Background color */
|
||||
background-color: #BBB;
|
||||
|
||||
/* Size */
|
||||
height: 32px;
|
||||
|
||||
/* Use to position the corners */
|
||||
position: relative;
|
||||
">
|
||||
<!-- The content -->
|
||||
...
|
||||
|
||||
<!-- The left side -->
|
||||
<div style="
|
||||
/* Position */
|
||||
bottom: -8px;
|
||||
position: absolute;
|
||||
left: -24px;
|
||||
|
||||
/* Displayed under the container */
|
||||
z-index: -1;
|
||||
|
||||
/* Background */
|
||||
border: 16px solid #CCC;
|
||||
border-left-color: transparent;
|
||||
"
|
||||
/>
|
||||
|
||||
<!-- The left triangle displayed below the content -->
|
||||
<div style="
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
|
||||
/* Background */
|
||||
border: 8px solid transparent;
|
||||
border-bottom-width: 0;
|
||||
border-right-width: 0;
|
||||
border-top-color: #AAA;
|
||||
" />
|
||||
|
||||
<!-- The right triangle displayed below the content -->
|
||||
<div style="
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
|
||||
/* Background */
|
||||
border: 8px solid transparent;
|
||||
border-bottom-width: 0;
|
||||
border-left-width: 0;
|
||||
border-top-color: #AAA;
|
||||
" />
|
||||
|
||||
<!-- The right side -->
|
||||
<div style="
|
||||
/* Position */
|
||||
bottom: -8px;
|
||||
position: absolute;
|
||||
right: -24px;
|
||||
|
||||
/* Displayed under the container */
|
||||
z-index: -1;
|
||||
|
||||
/* Background */
|
||||
border: 16px solid #CCC;
|
||||
border-right-color: transparent;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.CornerRibbon]} />
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
@@ -13,6 +13,7 @@
|
||||
<url><loc>https://csslayout.io/patterns/centering</loc></url>
|
||||
<url><loc>https://csslayout.io/patterns/circular-navigation</loc></url>
|
||||
<url><loc>https://csslayout.io/patterns/cookie-banner</loc></url>
|
||||
<url><loc>https://csslayout.io/patterns/corner-ribbon</loc></url>
|
||||
<url><loc>https://csslayout.io/patterns/docked-at-corner</loc></url>
|
||||
<url><loc>https://csslayout.io/patterns/dot-leader</loc></url>
|
||||
<url><loc>https://csslayout.io/patterns/dot-navigation</loc></url>
|
||||
@@ -39,6 +40,7 @@
|
||||
<url><loc>https://csslayout.io/patterns/radial-progress-bar</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/ribbon</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>
|
||||
|
Reference in New Issue
Block a user