docs: add tab custom color example

saadeghi · Dec 8, 2023 · 7ae8f6f · 7ae8f6f
1 parent 216f74a
commit 7ae8f6f
Showing 1 changed file with 15 additions and 0 deletions.
diff --git a/src/docs/src/routes/(docs)/components/tab/+page.svelte.md b/src/docs/src/routes/(docs)/components/tab/+page.svelte.md
@@ -195,3 +195,18 @@ data="{[
 </div>`
 }</pre>
 </Component>
+
+<Component title="Tabs with custom color">
+<div role="tablist" class="tabs tabs-lifted">
+  <button role="tab" class="tab">Tab 1</button>
+  <button role="tab" class="tab tab-active [--tab-bg:yellow] [--tab-border-color:orange] text-primary">Tab 2</button>
+  <button role="tab" class="tab">Tab 3</button>
+</div>
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<div role="tablist" class="$$tabs $$tabs-lifted">
+  <a role="tab" class="$$tab">Tab 1</a>
+  <a role="tab" class="$$tab $$tab-active [--tab-bg:yellow] [--tab-border-color:orange] text-primary">Tab 2</a>
+  <a role="tab" class="$$tab">Tab 3</a>
+</div>`
+}</pre>
+</Component>