diff --git a/docs/assets/scripts/docs.js b/docs/assets/scripts/docs.js index 2ea5b9a..57ce7d2 100644 --- a/docs/assets/scripts/docs.js +++ b/docs/assets/scripts/docs.js @@ -86,6 +86,22 @@ const colorToast = (col) => { toast.classList.add(col); } +// Component: Tab +const tabList = document.querySelector('#tab-demo > nav > ol'); +const tabPanels = document.querySelectorAll('#tab-demo > section > div'); +const tabs = tabList + ? [...tabList.querySelectorAll('li')].filter(t => !t.classList.contains('disabled')) + : []; +tabs.forEach((tab, i) => { + tab.addEventListener('click', () => { + tabs.forEach(t => t.classList.remove('active')) + tabPanels.forEach(p => p.classList.remove('active')); + const panel = [...tabPanels][i]; + panel.classList.add('active'); + tab.classList.add('active'); + }); +}); + // Ready? Let's go! (() => { // Handle initial theme mode diff --git a/docs/pages/components/badge.md b/docs/pages/components/badge.md index 4850766..113c662 100644 --- a/docs/pages/components/badge.md +++ b/docs/pages/components/badge.md @@ -65,3 +65,31 @@ The `badge` class also works on button elements. ``` + +### Tab badges + +The `badge` class also works on tab navigation list elements. + +
+
+ +
+
+ +```html +
+ +
+``` diff --git a/docs/pages/components/button.md b/docs/pages/components/button.md index d9f4306..6d1412c 100644 --- a/docs/pages/components/button.md +++ b/docs/pages/components/button.md @@ -192,6 +192,24 @@ Use the `busy` class to replace the text of a button with a Load settings ``` +### Button badges + +The `badge` class can be used to show [badges](/components/badge) on buttons. + +
+ + + + +
+ +```html + + + + +``` + ### Button group Use the `button-group` class on an element containing buttons, to group buttons to a single logical unit. diff --git a/docs/pages/components/tab.md b/docs/pages/components/tab.md new file mode 100644 index 0000000..4f7f2a1 --- /dev/null +++ b/docs/pages/components/tab.md @@ -0,0 +1,208 @@ +--- +title: 'Components: Tab - Sloth.css' +description: Navigation for quickly switching between content divs +tags: variants accent neutral success alert size outline pill +--- + +## Tab + +A tab navigation lets users quickly switch between content divs. + +

+ Sloth.css is a CSS only library and does not ship any JavaScript. To handle appearance, and manual or autmatic closing of toast messages, you'll need to implement that with JavaScript. +

+ +### Basic tab navigation + +Use the `tab-group` class on a parent element containing a `