diff --git a/contents/_includes/covers/dot-navigation.njk b/contents/_includes/covers/dot-navigation.njk new file mode 100644 index 0000000..b881dd2 --- /dev/null +++ b/contents/_includes/covers/dot-navigation.njk @@ -0,0 +1,7 @@ +
+
+
+
+
+
+
diff --git a/contents/dot-navigation.md b/contents/dot-navigation.md new file mode 100644 index 0000000..b935dfb --- /dev/null +++ b/contents/dot-navigation.md @@ -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 +
+
+ + + ... +
+``` + +## 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 %} diff --git a/contents/index.njk b/contents/index.njk index 74e4140..847eae1 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -127,6 +127,7 @@ eleventyExcludeFromCollections: true
{% 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 %}
diff --git a/pages/dot-navigation/index.tsx b/pages/dot-navigation/index.tsx deleted file mode 100644 index 40cecf1..0000000 --- a/pages/dot-navigation/index.tsx +++ /dev/null @@ -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 = ({ index }) => { - const isActive = index === activeItem; - const click = () => setActiveItem(index); - return ( -
  • - ); - }; - - return ( - - - - - - - - -
  • - - - ... - -`} - 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; - } - `} - > -
    - -
    - - - ); -}; - -export default Details; diff --git a/patterns/dot-navigation/Cover.tsx b/patterns/dot-navigation/Cover.tsx deleted file mode 100644 index 6bd3110..0000000 --- a/patterns/dot-navigation/Cover.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; - -const Cover: React.FC<{}> = () => { - return ( - -
    -
    -
    -
    -
    -
    -
    -
    - - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index c21bc79..ac167ec 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -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'; diff --git a/styles/patterns/_dot-navigation.scss b/styles/patterns/_dot-navigation.scss new file mode 100644 index 0000000..5a02ecd --- /dev/null +++ b/styles/patterns/_dot-navigation.scss @@ -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; +}