diff --git a/elements/pfe-content-set/README.md b/elements/pfe-content-set/README.md index fee419b3d2..52f415553f 100644 --- a/elements/pfe-content-set/README.md +++ b/elements/pfe-content-set/README.md @@ -43,6 +43,9 @@ Each header must have an attribute of `pfe-content-set--header` and each panel m - `vertical` - Accordion: No effect. - Tabs: Headings stack on the left, content pane is shown on the right. +- `pfe-align="center"` + - Accordion: No effect. + - Tabs: Tabs are centered. diff --git a/elements/pfe-content-set/demo/index.html b/elements/pfe-content-set/demo/index.html index e27eb1f85f..e2e6e85a13 100644 --- a/elements/pfe-content-set/demo/index.html +++ b/elements/pfe-content-set/demo/index.html @@ -276,6 +276,24 @@

Heading 2

Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.
+
+ +

Align: center

+ +

Heading 1

+
+

Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.

+ +
+

Heading 2

+
Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.
+

Heading 3

+
Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.
+
+ +

This content set's markup is incorrect.

Heading 1

diff --git a/elements/pfe-content-set/src/pfe-content-set.js b/elements/pfe-content-set/src/pfe-content-set.js index a9524be07e..153945f960 100644 --- a/elements/pfe-content-set/src/pfe-content-set.js +++ b/elements/pfe-content-set/src/pfe-content-set.js @@ -155,6 +155,10 @@ class PfeContentSet extends PFElement { tabs.setAttribute("on", this.on.value); } + if (this.align.value) { + tabs.setAttribute("pfe-tab-align", this.align.value); + } + if (!existingTabs) { this.appendChild(fragment); } diff --git a/elements/pfe-content-set/src/pfe-content-set.json b/elements/pfe-content-set/src/pfe-content-set.json index 753dbdfe1d..77dd626771 100644 --- a/elements/pfe-content-set/src/pfe-content-set.json +++ b/elements/pfe-content-set/src/pfe-content-set.json @@ -41,6 +41,12 @@ "default": "wind", "prefixed": true }, + "align": { + "title": "Align", + "type": "string", + "enum": ["center"], + "prefixed": true + }, "on": { "title": "Context", "type": "string", diff --git a/elements/pfe-content-set/test/pfe-content-set_test.html b/elements/pfe-content-set/test/pfe-content-set_test.html index ec6674bc14..ef6749e511 100644 --- a/elements/pfe-content-set/test/pfe-content-set_test.html +++ b/elements/pfe-content-set/test/pfe-content-set_test.html @@ -70,6 +70,11 @@

Heading 1

+ +

Heading 1

+

Panel 1

+
+