mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-12 00:54:45 +02:00
Merge pull request #62 from phuoc-ng/circule-navigation
Add circular navigation
This commit is contained in:
@@ -5,6 +5,7 @@ enum Pattern {
|
|||||||
ButtonWithIcon = 'Button with icon',
|
ButtonWithIcon = 'Button with icon',
|
||||||
Card = 'Card',
|
Card = 'Card',
|
||||||
Centering = 'Centering',
|
Centering = 'Centering',
|
||||||
|
CircularNavigation = 'Circular navigation',
|
||||||
DockedAtCorner = 'Docked at corner',
|
DockedAtCorner = 'Docked at corner',
|
||||||
DotLeader = 'Dot leader',
|
DotLeader = 'Dot leader',
|
||||||
DotNavigation = 'Dot navigation',
|
DotNavigation = 'Dot navigation',
|
||||||
|
@@ -28,10 +28,31 @@ this
|
|||||||
expect(r).is(superFastWebsite);
|
expect(r).is(superFastWebsite);
|
||||||
expect(r).is(seoFriendly);
|
expect(r).is(seoFriendly);
|
||||||
})
|
})
|
||||||
.finally(() => {/* Give me 1 star */}) 🎉 /* https://github.com/phuoc-ng/csslayout */
|
|
||||||
`}
|
`}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
className="hljs"
|
||||||
|
style={{
|
||||||
|
lineHeight: 1.5,
|
||||||
|
listStyleType: 'none',
|
||||||
|
marginTop: '-16px',
|
||||||
|
paddingLeft: '40px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
.finally(
|
||||||
|
<span className="hljs-function"><span className="hljs-params">()</span> => </span>
|
||||||
|
{
|
||||||
|
<span className="hljs-comment">
|
||||||
|
<a
|
||||||
|
href="https://github.com/phuoc-ng/csslayout"
|
||||||
|
style={{ color: 'currentColor', textDecoration: 'none' }}
|
||||||
|
>
|
||||||
|
/* Give me 1 Github star here */
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
}) 🎉
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@@ -89,6 +89,7 @@ const ExplorePage = () => {
|
|||||||
<CoverCard pattern={Pattern.ButtonWithIcon} />
|
<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.DockedAtCorner} />
|
<CoverCard pattern={Pattern.DockedAtCorner} />
|
||||||
<CoverCard pattern={Pattern.DotLeader} />
|
<CoverCard pattern={Pattern.DotLeader} />
|
||||||
<CoverCard pattern={Pattern.DotNavigation} />
|
<CoverCard pattern={Pattern.DotNavigation} />
|
||||||
|
@@ -201,6 +201,7 @@ const HomePage = () => {
|
|||||||
<CoverCard pattern={Pattern.ButtonWithIcon} />
|
<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.DockedAtCorner} />
|
<CoverCard pattern={Pattern.DockedAtCorner} />
|
||||||
<CoverCard pattern={Pattern.DotLeader} />
|
<CoverCard pattern={Pattern.DotLeader} />
|
||||||
<CoverCard pattern={Pattern.DotNavigation} />
|
<CoverCard pattern={Pattern.DotNavigation} />
|
||||||
|
106
client/patterns/circular-navigation/Cover.tsx
Normal file
106
client/patterns/circular-navigation/Cover.tsx
Normal file
@@ -0,0 +1,106 @@
|
|||||||
|
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={{ position: 'relative' }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||||
|
borderRadius: '4px',
|
||||||
|
color: '#FFF',
|
||||||
|
height: '16px',
|
||||||
|
width: '16px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
||||||
|
borderRadius: '9999px',
|
||||||
|
color: '#FFF',
|
||||||
|
height: '16px',
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
transform: 'rotate(0deg) translateX(-32px)',
|
||||||
|
width: '16px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
||||||
|
borderRadius: '9999px',
|
||||||
|
color: '#FFF',
|
||||||
|
height: '16px',
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
transform: 'rotate(60deg) translateX(-32px)',
|
||||||
|
width: '16px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
||||||
|
borderRadius: '9999px',
|
||||||
|
color: '#FFF',
|
||||||
|
height: '16px',
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
transform: 'rotate(120deg) translateX(-32px)',
|
||||||
|
width: '16px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
||||||
|
borderRadius: '9999px',
|
||||||
|
color: '#FFF',
|
||||||
|
height: '16px',
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
transform: 'rotate(180deg) translateX(-32px)',
|
||||||
|
width: '16px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
||||||
|
borderRadius: '9999px',
|
||||||
|
color: '#FFF',
|
||||||
|
height: '16px',
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
transform: 'rotate(240deg) translateX(-32px)',
|
||||||
|
width: '16px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
||||||
|
borderRadius: '9999px',
|
||||||
|
color: '#FFF',
|
||||||
|
height: '16px',
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
transform: 'rotate(300deg) translateX(-32px)',
|
||||||
|
width: '16px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Frame>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Cover;
|
131
client/patterns/circular-navigation/Details.tsx
Normal file
131
client/patterns/circular-navigation/Details.tsx
Normal file
@@ -0,0 +1,131 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||||
|
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||||
|
import Square from '../../placeholders/Square';
|
||||||
|
|
||||||
|
interface CircularItemProps {
|
||||||
|
degree: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CircularItem: React.FC<CircularItemProps> = ({ degree, children }) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
||||||
|
borderRadius: '9999px',
|
||||||
|
color: '#FFF',
|
||||||
|
height: '32px',
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
transform: `rotate(${degree}deg) translateX(-80px)`,
|
||||||
|
width: '32px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
transform: `rotate(-${degree}deg)`,
|
||||||
|
width: '100%',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const Details: React.FC<{}> = () => {
|
||||||
|
const numItems = 6;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DetailsLayout title="Circular navigation">
|
||||||
|
<div style={{ padding: '64px 32px' }}>
|
||||||
|
<BrowserFrame
|
||||||
|
content={(
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '8px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ position: 'relative' }}>
|
||||||
|
<div style={{ height: '32px', width: '32px' }}>
|
||||||
|
<Square />
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
Array(numItems).fill(0).map((_, i) => {
|
||||||
|
return (
|
||||||
|
<CircularItem key={i} degree={360 / numItems * i}>{i + 1}</CircularItem>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
source={`
|
||||||
|
<div style="
|
||||||
|
position: relative;
|
||||||
|
">
|
||||||
|
<!-- The trigger element that will show all circles when user clicks it -->
|
||||||
|
...
|
||||||
|
|
||||||
|
<!-- A circle menu item -->
|
||||||
|
<div style="
|
||||||
|
/* Position */
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
/*
|
||||||
|
80px is the distance from the item to the trigger element.
|
||||||
|
Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item
|
||||||
|
in case you want to have a total of 6 menu items.
|
||||||
|
The formulation is 360 / numberOfItems * indexOfItem
|
||||||
|
*/
|
||||||
|
transform: rotate(0deg) translateX(-80px);
|
||||||
|
|
||||||
|
/* Must have the same size as the trigger element */
|
||||||
|
height: 32px;
|
||||||
|
width: 32px;
|
||||||
|
">
|
||||||
|
<!-- The inner -->
|
||||||
|
<div style="
|
||||||
|
/*
|
||||||
|
Rotate it to make it displayed vertically
|
||||||
|
Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item
|
||||||
|
in case you want to have a total of 6 menu items.
|
||||||
|
The formulation is -(360 / numberOfItems * indexOfItem)
|
||||||
|
*/
|
||||||
|
transform: rotate(-0deg);
|
||||||
|
|
||||||
|
/* Content is centered */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/* Take full size */
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
">
|
||||||
|
<!-- The content -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Repeat menu items -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</DetailsLayout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Details;
|
@@ -11,6 +11,7 @@
|
|||||||
<url><loc>https://csslayout.io/patterns/button-with-icon</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/card</loc></url>
|
||||||
<url><loc>https://csslayout.io/patterns/centering</loc></url>
|
<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/docked-at-corner</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-leader</loc></url>
|
||||||
<url><loc>https://csslayout.io/patterns/dot-navigation</loc></url>
|
<url><loc>https://csslayout.io/patterns/dot-navigation</loc></url>
|
||||||
|
Reference in New Issue
Block a user