Merge pull request #99 from tamasnet/master

Added support for centered horizontal tabs.
vaadin · Jun 20, 2018 · ef1eb08 · ef1eb08
2 parents d7cda07 + 7e30cff
commit ef1eb08
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/demo/tabs-basic-demos.html b/demo/tabs-basic-demos.html
@@ -28,6 +28,17 @@ <h3>Vertical tabs</h3>
       </template>
     </vaadin-demo-snippet>
 
+    <h3>Centered horizontal tabs</h3>
+    <vaadin-demo-snippet id='tabs-basic-demos-centered-horizontal-tabs'>
+      <template preserve-content>
+        <vaadin-tabs centered>
+          <vaadin-tab>Tab one</vaadin-tab>
+          <vaadin-tab>Tab two</vaadin-tab>
+          <vaadin-tab>Tab three</vaadin-tab>
+        </vaadin-tabs>
+      </template>
+    </vaadin-demo-snippet>
+
     <h3>Scrollable horizontal tabs</h3>
     <vaadin-demo-snippet id='tabs-basic-demos-scrollable-horizontal-tabs'>
       <template preserve-content>

diff --git a/src/vaadin-tabs.html b/src/vaadin-tabs.html
@@ -36,6 +36,10 @@
         -ms-overflow-style: none;
       }
 
+      :host([orientation="horizontal"][centered]) [part="tabs"] {
+        justify-content: center;
+      }
+
       /* This seems more future-proof than `overflow: -moz-scrollbars-none` which is marked obsolete
          and is no longer guaranteed to work:
          https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Mozilla_Extensions */
@@ -121,6 +125,7 @@
        * Attribute  | Description | Part name
        * -----------|-------------|------------
        * `orientation` | Tabs disposition, valid values are `horizontal` and `vertical`. | :host
+       * `centered` | Center tabs horizontally. Ignored for vertical tabs, incompatible with scrolling. | :host
        * `overflow` | It's set to `start`, `end`, none or both. | :host
        *
        * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
@@ -155,6 +160,14 @@
               type: String
             },
 
+            /**
+             * Center tabs horizontally. Ignored for vertical tabs, incompatible with scrolling.
+             */
+            centered: {
+              value: false,
+              type: Boolean
+            },
+
             /**
              * The index of the selected tab.
              */