From 7fb20a1b37921067f9b32e3f3b248772f85511e3 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 5 Jul 2018 18:27:02 -0400 Subject: [PATCH] docs(item-divider): update usage examples and add preview --- core/src/components/item-divider/readme.md | 3 +- .../item-divider/test/preview/index.html | 154 ++++++++++++++++++ .../item-divider/usage/javascript.md | 48 ++++-- 3 files changed, 191 insertions(+), 14 deletions(-) create mode 100644 core/src/components/item-divider/test/preview/index.html diff --git a/core/src/components/item-divider/readme.md b/core/src/components/item-divider/readme.md index 3c4c25e6c9..c64aa69266 100644 --- a/core/src/components/item-divider/readme.md +++ b/core/src/components/item-divider/readme.md @@ -1,7 +1,6 @@ # ion-item-divider -Item Divider is divider component for list items. -Similar to ListHeaders, item dividers are styled to be inset with the rest of the list items. +Item Dividers are block elements that can be used to separate items in a list. They are similar to list headers, but instead of being placed at the top of a list, they should go in between groups of like items. diff --git a/core/src/components/item-divider/test/preview/index.html b/core/src/components/item-divider/test/preview/index.html new file mode 100644 index 0000000000..0c463d6b76 --- /dev/null +++ b/core/src/components/item-divider/test/preview/index.html @@ -0,0 +1,154 @@ + + + + + + Item - Dividers + + + + + + + + + + Item Divider + + + + + + + + Divider by itself + + + + + + + Divider in List + + + + + + Danger Divider in List + + + + + + + + Divider in Item Group + + + + + Secondary Divider in Item Group + + + + + + + +

Secondary header

 + Plain Ol' div with some text + + + + + + + + Item Divider + + Danger Span + + + button + + + + + Multiline text that should wrap when it is too long + to fit on one line in the item. Attribute on .item + + + + + + + + + + + + + + + Dark + +
Primary h5
+ + + + + + +

H1 Title Text

+ + + + + + + + + + Light + + + + + + + Primary + + + + + + + + + Secondary + + + + + Column 1 + + + Column 2 + + + Column 3 + + + + + + + + + + + diff --git a/core/src/components/item-divider/usage/javascript.md b/core/src/components/item-divider/usage/javascript.md index 5af182b132..0f5d7326fe 100644 --- a/core/src/components/item-divider/usage/javascript.md +++ b/core/src/components/item-divider/usage/javascript.md @@ -1,16 +1,40 @@ ```html + + + Basic Item Divider + + + + + + Secondary Item Divider + + + + - Section A - A1 - A2 - A3 - A4 - A5 - Section B - B1 - B2 - B3 - B4 - B5 + + + Section A + + + + A1 + A2 + A3 + A4 + A5 + + + + Section B + + + + B1 + B2 + B3 + B4 + B5 ```