diff --git a/angular.html b/angular.html index 8077139..4e7d338 100755 --- a/angular.html +++ b/angular.html @@ -10,8 +10,9 @@ - - + + + @@ -38,8 +39,8 @@ - - + + diff --git a/angular2.html b/angular2.html index e7007f2..a52067e 100755 --- a/angular2.html +++ b/angular2.html @@ -10,8 +10,9 @@ - - + + + @@ -38,8 +39,8 @@ - - + + diff --git a/components.html b/components.html index 93bbc19..3fc0287 100755 --- a/components.html +++ b/components.html @@ -10,8 +10,9 @@ - - + + + @@ -38,8 +39,9 @@ - - + + + @@ -95,7 +97,7 @@

Overview

Patternfly web components require patternfly.css, patternfly-additions.css, and patternfly-webcomponents.css.

-
<link rel="stylesheet" href="node_modules/patternfly/dist/css/patternfly.css">
+                                
<link rel="stylesheet" href="node_modules/patternfly/dist/css/patternfly.css">
 <link rel="stylesheet" href="node_modules/patternfly/dist/css/patternfly-additions.css">
 <link rel="stylesheet" href="node_modules/patternfly-webcomponents/dist/css/patternfly-webcomponents.css">
 

@@ -107,6 +109,287 @@ 
Overview
+ +
+

Accordion

+
+
+ + + +

+ Lorem ipsum +

+ + + + Praesent sagittis est et arcu fringilla placerat. Cras erat ante, dapibus non mauris ac, volutpat sollicitudin ligula. Morbi gravida nisl vel risus tempor, sit amet luctus erat tempus. Curabitur blandit sem non pretium bibendum. Donec eleifend non turpis vitae vestibulum. Vestibulum ut sem ac nunc posuere blandit sed porta lorem. Cras rutrum velit vel leo iaculis imperdiet. + + + + + +

+ Dolor sit amet +

+ + +
+ Donec consequat dignissim neque, sed suscipit quam egestas in. Fusce bibendum laoreet lectus commodo interdum. Vestibulum odio ipsum, tristique et ante vel, iaculis placerat nulla. Suspendisse iaculis urna feugiat lorem semper, ut iaculis risus tempus. +
+ + + + +

+ Consectetur +

+ + + + Curabitur nisl quam, interdum a venenatis a, consequat a ligula. Nunc nec lorem in erat rhoncus lacinia at ac orci. Sed nec augue congue, vehicula justo quis, venenatis turpis. Nunc quis consectetur purus. Nam vitae viverra lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu augue felis. Maecenas in dignissim purus, quis pulvinar lectus. Vivamus euismod ultrices diam, in mattis nibh. + + + + +
+ 
<pf-accordion>
+    <pf-accordion-panel>
+        <pf-accordion-heading>
+            <h4 class="panel-title">
+                <a data-toggle="collapse" href="#">
+                    Lorem ipsum
+                </a>
+            </h4>
+        </pf-accordion-heading>
+        <pf-accordion-template>
+            <pf-accordion-body>
+                Praesent sagittis est et arcu fringilla placerat. Cras erat ante, dapibus non mauris ac, volutpat sollicitudin ligula. Morbi gravida nisl vel risus tempor, sit amet luctus erat tempus. Curabitur blandit sem non pretium bibendum. Donec eleifend non turpis vitae vestibulum. Vestibulum ut sem ac nunc posuere blandit sed porta lorem. Cras rutrum velit vel leo iaculis imperdiet.
+            </pf-accordion-body>
+        </pf-accordion-template>
+    </pf-accordion-panel>
+    <pf-accordion-panel>
+        <pf-accordion-heading>
+        <h4 class="panel-title">
+            <a data-toggle="collapse" href="#">
+                Dolor sit amet
+            </a>
+        </h4>
+        </pf-accordion-heading>
+        <pf-accordion-template>
+            <div class="panel-body">
+                Donec consequat dignissim neque, sed suscipit quam egestas in. Fusce bibendum laoreet lectus commodo interdum. Vestibulum odio ipsum, tristique et ante vel, iaculis placerat nulla. Suspendisse iaculis urna feugiat lorem semper, ut iaculis risus tempus.
+            </div>
+        </pf-accordion-template>
+    </pf-accordion-panel>
+    <pf-accordion-panel>
+        <pf-accordion-heading>
+            <h4 class="panel-title">
+                <a data-toggle="collapse" href="#">
+                Consectetur
+                </a>
+            </h4>
+        </pf-accordion-heading>
+        <pf-accordion-template>
+            <pf-accordion-body>
+                Curabitur nisl quam, interdum a venenatis a, consequat a ligula. Nunc nec lorem in erat rhoncus lacinia at ac orci. Sed nec augue congue, vehicula justo quis, venenatis turpis. Nunc quis consectetur purus. Nam vitae viverra lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu augue felis. Maecenas in dignissim purus, quis pulvinar lectus. Vivamus euismod ultrices diam, in mattis nibh.
+            </pf-accordion-body>
+        </pf-accordion-template>
+    </pf-accordion-panel>
+</pf-accordion>
+

With context modifiers

+
+ + + +

+ New product available +

+ + + +

You can read this anytime

+ + + + + +

+ Vulnerebility check +

+ + + +

No known security vulnerebility

+

All good!

+ + + + + +

+ Network diagnostics +

+ + + +

Degraded network performance

+

Something is wrong, you should check this immediately.

+ + + + + +

+ Instance reachability tests +

+ + + +

5 instances failed the rechability tests

+

Take action immediately

+ + + + +
+ 
<pf-accordion>
+    <pf-accordion-panel class="panel-info">
+        <pf-accordion-heading>
+            <h4 class="panel-title">
+                <a data-toggle="collapse" href="#">New product available</a>
+            </h4>
+        </pf-accordion-heading>
+        <pf-accordion-template>
+            <pf-accordion-body>
+                <p>You can read this anytime</p>
+            </pf-accordion-body>
+        </pf-accordion-template>
+    </pf-accordion-panel>
+    <pf-accordion-panel class="panel-success">
+        <pf-accordion-heading>
+            <h4 class="panel-title">
+                <a data-toggle="collapse" href="#">Vulnerebility check</a></a>
+            </h4>
+        </pf-accordion-heading>
+        <pf-accordion-template>
+            <pf-accordion-body>
+                <h3>No known security vulnerebility</h3>
+                <p>All good!</p>
+            </pf-accordion-body>
+        </pf-accordion-template>
+    </pf-accordion-panel>
+    <pf-accordion-panel class="panel-warning">
+        <pf-accordion-heading>
+            <h4 class="panel-title">
+                <a data-toggle="collapse" href="#">Network diagnostics</a>
+            </h4>
+        </pf-accordion-heading>
+        <pf-accordion-template>
+            <pf-accordion-body>
+                <h3>Degraded network performance</h3>
+                <p>Something is wrong, you should check this immediately.</p>
+            </pf-accordion-body>
+        </pf-accordion-template>
+    </pf-accordion-panel>
+    <pf-accordion-panel class="panel-danger">
+        <pf-accordion-heading>
+            <h4 class="panel-title">
+                <a data-toggle="collapse" href="#">Instance reachability tests</a></a>
+            </h4>
+        </pf-accordion-heading>
+        <pf-accordion-template>
+            <pf-accordion-body>
+                <h3>5 instances failed the rechability tests</h3>
+                <p>Take action immediately</p>
+            </pf-accordion-body>
+        </pf-accordion-template>
+    </pf-accordion-panel>
+</pf-accordion>
+

Fixed witdth accordions

+
+ + + +

+ Lorem ipsum +

+ + + + But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. + + + + + +

+ Dolor sit amet +

+ + +
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. +
+ + +
+ 
<pf-accordion>
+    <pf-accordion-panel class="panel-info">
+        <pf-accordion-heading>
+            <h4 class="panel-title">
+                <a data-toggle="collapse" href="#">New product available</a>
+            </h4>
+        </pf-accordion-heading>
+        <pf-accordion-template>
+            <pf-accordion-body>
+                <p>You can read this anytime</p>
+            </pf-accordion-body>
+        </pf-accordion-template>
+    </pf-accordion-panel>
+    <pf-accordion-panel class="panel-success">
+        <pf-accordion-heading>
+            <h4 class="panel-title">
+                <a data-toggle="collapse" href="#">Vulnerebility check</a></a>
+            </h4>
+        </pf-accordion-heading>
+        <pf-accordion-template>
+            <pf-accordion-body>
+                <h3>No known security vulnerebility</h3>
+                <p>All good!</p>
+            </pf-accordion-body>
+        </pf-accordion-template>
+    </pf-accordion-panel>
+    <pf-accordion-panel class="panel-warning">
+        <pf-accordion-heading>
+            <h4 class="panel-title">
+                <a data-toggle="collapse" href="#">Network diagnostics</a>
+            </h4>
+        </pf-accordion-heading>
+        <pf-accordion-template>
+            <pf-accordion-body>
+                <h3>Degraded network performance</h3>
+                <p>Something is wrong, you should check this immediately.</p>
+            </pf-accordion-body>
+        </pf-accordion-template>
+    </pf-accordion-panel>
+    <pf-accordion-panel class="panel-danger">
+        <pf-accordion-heading>
+            <h4 class="panel-title">
+                <a data-toggle="collapse" href="#">Instance reachability tests</a></a>
+            </h4>
+        </pf-accordion-heading>
+        <pf-accordion-template>
+            <pf-accordion-body>
+                <h3>5 instances failed the rechability tests</h3>
+                <p>Take action immediately</p>
+            </pf-accordion-body>
+        </pf-accordion-template>
+    </pf-accordion-panel>
+</pf-accordion>
+
+
+

Alerts

@@ -267,6 +550,7 @@

Tooltips