mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-11 08:34:27 +02:00
Code Issues Releases Wiki Activity

feat: Dot navigation

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-21 15:25:08 +07:00
parent a8c929d1c6
commit 9c2641ef15
7 changed files with 92 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
contents/_includes/covers/dot-navigation.njk Normal file
View File

@@ -0,0 +1,7 @@
<div class="dot-navigation">
<div class="dot-navigation__item"></div>
<div class="dot-navigation__item dot-navigation__item--active"></div>
<div class="dot-navigation__item"></div>
<div class="dot-navigation__item"></div>
<div class="dot-navigation__item"></div>
</div>

54
contents/dot-navigation.md Normal file
View File

@@ -0,0 +1,54 @@
---
layout: layouts/post.njk
title: Dot navigation
description: Create dot navigation with CSS flexbox
keywords: css dot navigation, css flexbox
---
## HTML
```html
<div class="dot-navigation">
<div class="dot-navigation__item"></div>
<!-- Repeat other dots -->
...
</div>
```
## CSS
```css
.dot-navigation {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Reset styles */
list-style-type: none;
margin: 0;
padding: 0;
}
.dot-navigation__item {
/* Rounded border */
border-radius: 9999px;
height: 0.75rem;
width: 0.75rem;
/* Inactive dot */
background-color: transparent;
border: 1px solid #d1d5db;
/* OPTIONAL: Spacing between dots */
margin: 0 0.25rem;
}
/* Active dot */
.dot-navigation__item--active {
background-color: #d1d5db;
}
```
{% demo %}{% include "covers/dot-navigation.njk" %}{% enddemo %}

1
contents/index.njk
View File

@@ -127,6 +127,7 @@ eleventyExcludeFromCollections: true
<div class="category__posts">
{% pattern "Breadcrumb" %}{% include "covers/breadcrumb.njk" %}{% endpattern %}
{% pattern "Circular navigation" %}{% include "covers/circular-navigation.njk" %}{% endpattern %}
{% pattern "Dot navigation" %}{% include "covers/dot-navigation.njk" %}{% endpattern %}
</div>
</div>

113
pages/dot-navigation/index.tsx
View File

@@ -1,113 +0,0 @@
import * as React from 'react';
import Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
interface DotProps {
index: number;
}
const Details: React.FC<{}> = () => {
const [activeItem, setActiveItem] = React.useState(0);
const Dot: React.FC<DotProps> = ({ index }) => {
const isActive = index === activeItem;
const click = () => setActiveItem(index);
return (
<li
style={{
backgroundColor: isActive ? '#d1d5db' : '',
border: isActive ? 'none' : '1px solid #d1d5db',
borderRadius: '9999px',
cursor: 'pointer',
height: '12px',
margin: '0 4px',
width: '12px',
}}
onClick={click}
/>
);
};
return (
<PatternLayout pattern={Pattern.DotNavigation}>
<Head>
<meta name="description" content="Create dot navigation with CSS flexbox" />
<meta name="og:description" content="Create dot navigation with CSS flexbox" />
<meta name="twitter:description" content="Create dot navigation with CSS flexbox" />
<meta name="keywords" content="css dot navigation, css flexbox" />
</Head>
<BrowserFrame
html={`
<ul class="dots">
<li class="dots__item"></li>
<!-- Repeat other dots -->
...
</div>
`}
css={`
.dots {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Reset styles */
list-style-type: none;
margin: 0;
padding: 0;
}
.dots__item {
/* Rounded border */
border-radius: 9999px;
height: 12px;
width: 12px;
/* Active dot */
background-color: #d1d5db;
/* Inactive dot */
background-color: transparent;
border: 1px solid #d1d5db;
/* OPTIONAL: Spacing between dots */
margin: 0 4px;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<ul
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
listStyleType: 'none',
margin: 0,
padding: 0,
}}
>
<Dot index={0} />
<Dot index={1} />
<Dot index={2} />
<Dot index={3} />
</ul>
</div>
</BrowserFrame>
</PatternLayout>
);
};
export default Details;

61
patterns/dot-navigation/Cover.tsx
View File

@@ -1,61 +0,0 @@
import * as 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={{ alignItems: 'center', display: 'flex' }}>
<div
style={{
border: '1px solid #d1d5db',
borderRadius: '9999px',
height: '8px',
margin: '0 4px',
width: '8px',
}}
/>
<div
style={{
backgroundColor: '#d1d5db',
borderRadius: '9999px',
height: '8px',
margin: '0 4px',
width: '8px',
}}
/>
<div
style={{
border: '1px solid #d1d5db',
borderRadius: '9999px',
height: '8px',
margin: '0 4px',
width: '8px',
}}
/>
<div
style={{
border: '1px solid #d1d5db',
borderRadius: '9999px',
height: '8px',
margin: '0 4px',
width: '8px',
}}
/>
</div>
</div>
</Frame>
);
};
export default Cover;

1
styles/index.scss
View File

@@ -34,6 +34,7 @@
@import './patterns/diagonal-section';
@import './patterns/docked-at-corner';
@import './patterns/dot-leader';
@import './patterns/dot-navigation';
@import './patterns/drop-area';
@import './patterns/drop-cap';
@import './patterns/fading-long-section';

29
styles/patterns/_dot-navigation.scss Normal file
View File

@@ -0,0 +1,29 @@
.dot-navigation {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Reset styles */
list-style-type: none;
margin: 0;
padding: 0;
}
.dot-navigation__item {
/* Rounded border */
border-radius: 9999px;
height: 0.75rem;
width: 0.75rem;
/* Inactive dot */
background-color: transparent;
border: 1px solid #d1d5db;
/* OPTIONAL: Spacing between dots */
margin: 0 0.25rem;
}
.dot-navigation__item--active {
background-color: #d1d5db;
}