diff --git a/contents/_includes/covers/tab.njk b/contents/_includes/covers/tab.njk new file mode 100644 index 0000000..6afa51a --- /dev/null +++ b/contents/_includes/covers/tab.njk @@ -0,0 +1,11 @@ +
+
+ {% circle %} +
+
+ {% circle %} +
+
+ {% circle %} +
+
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index e7b8398..bb4ec05 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -129,6 +129,7 @@ eleventyExcludeFromCollections: true {% pattern "Circular navigation" %}{% include "covers/circular-navigation.njk" %}{% endpattern %} {% pattern "Dot navigation" %}{% include "covers/dot-navigation.njk" %}{% endpattern %} {% pattern "Drawer" %}{% include "covers/drawer.njk" %}{% endpattern %} + {% pattern "Tab" %}{% include "covers/tab.njk" %}{% endpattern %} {% pattern "Wizard" %}{% include "covers/wizard.njk" %}{% endpattern %} diff --git a/contents/tab.md b/contents/tab.md new file mode 100644 index 0000000..c5e5b9d --- /dev/null +++ b/contents/tab.md @@ -0,0 +1,58 @@ +--- +layout: layouts/post.njk +title: Tab +description: Create tabs with CSS flexbox +keywords: css flexbox, css navigation, css tab +--- + +## HTML + +```html +
+ +
+ ... +
+ + +
+ ... +
+
+``` + +## CSS + +```css +.tab { + /* Center the content */ + align-items: center; + display: flex; + justify-content: center; +} + +.tab__item { + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; + padding: 0.5rem 1rem; +} + +.tab__item--active { + /* Border */ + border: 1px solid #d1d5db; + /* Hide the bottom border */ + border-bottom-color: transparent; + + /* Border radius */ + border-top-left-radius: 2px; + border-top-right-radius: 2px; +} + +.tab__item--inactive { + /* Has only the bottom border */ + border-bottom: 1px solid #d1d5db; +} + +``` + +{% demo %}{% include "covers/tab.njk" %}{% enddemo %} diff --git a/pages/tab/index.tsx b/pages/tab/index.tsx deleted file mode 100644 index 83a6286..0000000 --- a/pages/tab/index.tsx +++ /dev/null @@ -1,122 +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'; -import Rectangle from '../../placeholders/Rectangle'; - -interface TabProps { - tabIndex: number; -} - -const Details: React.FC<{}> = () => { - const [activeTab, setActiveTab] = React.useState(0); - - const Tab: React.FC = ({ tabIndex, children }) => { - const isActive = tabIndex === activeTab; - const click = () => setActiveTab(tabIndex); - return ( -
- {children} -
- ); - }; - - return ( - - - - - - - - - -
- ... -
- - -
- ... -
- -`} - css={` - .tabs { - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - } - - .tabs__tab--active { - /* Border */ - border: 1px solid #d1d5db; - /* Hide the bottom border */ - border-bottom-color: transparent; - - /* Border radius */ - border-top-left-radius: 2px; - border-top-right-radius: 2px; - } - - .tabs__tab--inactive { - /* Has only the bottom border */ - border-bottom: 1px solid #d1d5db; - } - `} - > -
-
- -
- -
- - -
- -
- - -
- -
- -
-
- - - ); -}; - -export default Details; diff --git a/patterns/tab/Cover.tsx b/patterns/tab/Cover.tsx deleted file mode 100644 index 05e09dd..0000000 --- a/patterns/tab/Cover.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import * as React from 'react'; - -import Circle from '../../placeholders/Circle'; -import Frame from '../../placeholders/Frame'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
- -
-
- -
-
- -
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index 168db3c..55f9889 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -90,6 +90,7 @@ @import './patterns/sticky-table-column'; @import './patterns/sticky-table-headers'; @import './patterns/switch'; +@import './patterns/tab'; @import './patterns/teardrop'; @import './patterns/three-dimensions-card'; @import './patterns/timeline'; diff --git a/styles/patterns/_tab.scss b/styles/patterns/_tab.scss new file mode 100644 index 0000000..f452ae3 --- /dev/null +++ b/styles/patterns/_tab.scss @@ -0,0 +1,28 @@ +.tab { + /* Center the content */ + align-items: center; + display: flex; + justify-content: center; +} + +.tab__item { + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; + padding: 0.5rem 1rem; +} + +.tab__item--active { + /* Border */ + border: 1px solid #d1d5db; + /* Hide the bottom border */ + border-bottom-color: transparent; + + /* Border radius */ + border-top-left-radius: 2px; + border-top-right-radius: 2px; +} + +.tab__item--inactive { + /* Has only the bottom border */ + border-bottom: 1px solid #d1d5db; +}