feat(ld-tabs): support full width tabs

emdgroup-liquid · Sep 20, 2021 · 4337569 · 4337569
1 parent 359bed2
commit 4337569
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 9 deletions.
diff --git a/src/liquid/components/ld-tabs/ld-tablist.css b/src/liquid/components/ld-tabs/ld-tablist.css
@@ -9,6 +9,7 @@
   display: flex;
   overflow: hidden;
   z-index: 0;
+  background-color: var(--ld-tab-btn-scroll-bg-color);
 
   &::after {
     content: '';
@@ -33,6 +34,15 @@
     border-top-left-radius: var(--ld-br-l);
     border-top-right-radius: var(--ld-br-l);
   }
+
+  .ld-tabs--ghost & {
+    --ld-tab-btn-scroll-bg-color: transparent;
+  }
+
+  .ld-tabs--brand-color & {
+    --ld-tab-btn-scroll-color-active: var(--ld-col-wht);
+    --ld-tab-btn-scroll-color: var(--ld-col-wht);
+  }
 }
 
 .ld-tablist__scroll-container {
@@ -63,15 +73,6 @@
     display: inline-flex;
   }
 
-  :where(.ld-tabs--ghost) & {
-    --ld-tab-btn-scroll-bg-color: transparent;
-  }
-
-  :where(.ld-tabs--brand-color) & {
-    --ld-tab-btn-scroll-color-active: var(--ld-col-wht);
-    --ld-tab-btn-scroll-color: var(--ld-col-wht);
-  }
-
   &:focus:focus-visible {
     outline: none;
   }

diff --git a/src/liquid/components/ld-tabs/readme.md b/src/liquid/components/ld-tabs/readme.md
@@ -195,6 +195,34 @@ You should try to avoid using tab bars with more than five tab items. But if you
 </ld-tabs>
 {% endexample %}
 
+### Full width
+
+{% example 'html', false, false, 'light' %}
+<ld-tabs style="width: 100%" mode="ghost">
+  <ld-tablist>
+    <ld-tab selected>Fruits</ld-tab>
+    <ld-tab disabled>Vegetables</ld-tab>
+    <ld-tab>Nuts</ld-tab>
+  </ld-tablist>
+</ld-tabs>
+
+<ld-tabs style="width: 100%">
+  <ld-tablist>
+    <ld-tab selected>Fruits</ld-tab>
+    <ld-tab disabled>Vegetables</ld-tab>
+    <ld-tab>Nuts</ld-tab>
+  </ld-tablist>
+</ld-tabs>
+
+<ld-tabs style="width: 100%" mode="brand-color">
+  <ld-tablist>
+    <ld-tab selected>Fruits</ld-tab>
+    <ld-tab disabled>Vegetables</ld-tab>
+    <ld-tab>Nuts</ld-tab>
+  </ld-tablist>
+</ld-tabs>
+{% endexample %}
+
 ## Events
 
 The `ld-tabs` component emits the `tabChange` event which you can use to bind custom event handlers. The event is only emmitted on clicks on non-disabled and non-selected tabs.