From e3d75a6d45aec998344e164c7a2636f487ae1538 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Tue, 30 Aug 2022 14:49:17 -0700 Subject: [PATCH] docs(clayui.com): Panel add warning and work around for collapse plugin for 7.4 - Update examples with panel-secondary and panel-unstyled --- packages/clay-panel/docs/markup-panel.md | 318 +++++++++++++---------- 1 file changed, 187 insertions(+), 131 deletions(-) diff --git a/packages/clay-panel/docs/markup-panel.md b/packages/clay-panel/docs/markup-panel.md index fab210cdad..5206cc694c 100644 --- a/packages/clay-panel/docs/markup-panel.md +++ b/packages/clay-panel/docs/markup-panel.md @@ -8,6 +8,8 @@ mainTabURL: 'docs/components/panel.html'
- [Basic Usage](#css-basic-usage) + - [Secondary](#css-panel-secondary) + - [Unstyled](#css-panel-unstyled) - [Collapsible](#css-collapsible) - [Groups](#css-groups) - [With Sheets](#css-with-sheets) @@ -19,14 +21,14 @@ mainTabURL: 'docs/components/panel.html' ## Basic Usage(#css-basic-usage)
-
-
- Title -
-
Header!
-
Body!
-
Footer!
-
+
+
+ Title +
+
Header!
+
Body!
+
Footer!
+
```html @@ -40,18 +42,66 @@ mainTabURL: 'docs/components/panel.html'
``` +### Secondary(#css-panel-secondary) + +
+
+
+ Title +
+
Body!
+
Footer!
+
+
+ +```html +
+
+ Title +
+
Body!
+
Footer!
+
+``` + +### Unstyled(#css-panel-unstyled) + +
+
+
+ Title +
+
Body!
+
Footer!
+
+
+ +```html +
+
+ Title +
+
Body!
+
Footer!
+
+``` + ## Collapsible(#css-collapsible) Collapsable panels provide you with the ability to expand and collapse content as needed. They can simplify the interface by hiding content until it is needed. +
+ This page uses Bootstrap's collapse plugin which requires JQuery. Liferay 7.4 no longer includes JQuery by default. We have included a standalone collapse plugin in 7.4, just replace the attribute data-toggle="collapse" with data-toggle="liferay-collapse" on the trigger. +
+
-
-
Here is some content inside for number One
-
-
-
- -
-
Here is some content inside for number Two
-
-
-
- -
-
Here is some content inside for number Three
-
-
-
+
+
+ +
+
Here is some content inside for number One
+
+
+
+ +
+
Here is some content inside for number Two
+
+
+
+ +
+
Here is some content inside for number Three
+
+
+
```html
-
+
-
+
-
+
-
-
Here is some content inside for number One
-
-
-
- -
-
Here is some content inside for number Two
-
-
-
- -
-
Here is some content inside for number Three
-
-
-
-
+
+
+

Sheet Title

+
+
+
+ +
+
Here is some content inside for number One
+
+
+
+ +
+
Here is some content inside for number Two
+
+
+
+ +
+
Here is some content inside for number Three
+
+
+
+
```html
+
+

Sheet Title

+
-
+
-
+
-
+