playbook_ui_docs 14.11.1.pre.alpha.PLAY1751pbcontenttagpt25529 → 14.11.1.pre.alpha.pbntr703collapsiblerowsrails5536
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.html.erb +47 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_rails.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +1 -0
- data/dist/playbook-doc.js +1 -1
- metadata +4 -2
- /data/app/pb_kits/playbook/pb_table/docs/{_table_with_collapsible.md → _table_with_collapsible_react.md} +0 -0
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a0fcf72f15fec611ffdef65c393b28b96345892a8987de757593f0664c7d38da
|
|
4
|
+
data.tar.gz: 0a48735df26cbec4df95d2c1086ee5a0a8daefe077dc2990a13cdf6c9d4900a1
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b6a84dbf9b1ef53e79ee628d152cf34b42f634ae9165395cded05afbbea8be88834edb16f1b87e4a3d4c9a0e3ba545c9e5da4d4a2b97381a8ee168718de5ab60
|
|
7
|
+
data.tar.gz: cac4d03797b8f9df6088c01d93e7983cb75ef2010ab6a847e09c804d6384e1d0d8865d3d8298ec7ca0545fea4fca2464ec8b4a8f353b5c217baa744e273ae8a5
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
<% content = capture do %>
|
|
2
|
+
<%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
|
|
3
|
+
<%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
|
|
4
|
+
<% end %>
|
|
5
|
+
<% end %>
|
|
6
|
+
|
|
7
|
+
<%= pb_rails("table", props: { size: "sm" }) do %>
|
|
8
|
+
<%= pb_rails("table/table_head") do %>
|
|
9
|
+
<%= pb_rails("table/table_row") do %>
|
|
10
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
|
|
11
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
|
|
12
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
|
|
13
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
|
|
14
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
|
|
15
|
+
<%= pb_rails("table/table_header", props: { text: ""}) %>
|
|
16
|
+
<% end %>
|
|
17
|
+
<% end %>
|
|
18
|
+
<%= pb_rails("table/table_body") do %>
|
|
19
|
+
<%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, id: "1" }) do %>
|
|
20
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
21
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
22
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
23
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
24
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
25
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
|
|
26
|
+
<%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
|
|
27
|
+
<% end %>
|
|
28
|
+
<% end %>
|
|
29
|
+
<%= pb_rails("table/table_row") do %>
|
|
30
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
31
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
32
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
33
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
34
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
35
|
+
<%= pb_rails("table/table_cell", props: { text: ""}) %>
|
|
36
|
+
<% end %>
|
|
37
|
+
<%= pb_rails("table/table_row") do %>
|
|
38
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
39
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
40
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
41
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
42
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
43
|
+
<%= pb_rails("table/table_cell", props: { text: ""}) %>
|
|
44
|
+
<% end %>
|
|
45
|
+
<% end %>
|
|
46
|
+
<% end %>
|
|
47
|
+
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsible_content` prop to add any content to the collapsible Row.
|
|
2
|
+
Please be aware that you will need to pass in an `id` to any table rows you want to be collapsible. Make sure every `id` is unique if you are using multipe collapsibles.
|
|
@@ -30,6 +30,7 @@ examples:
|
|
|
30
30
|
- table_with_subcomponents_rails: Table with Sub Components (Table Elements)
|
|
31
31
|
- table_with_subcomponents_as_divs: Table with Sub Components (Divs)
|
|
32
32
|
- table_outer_padding: Outer Padding
|
|
33
|
+
- table_with_collapsible: Table with Collapsible
|
|
33
34
|
|
|
34
35
|
react:
|
|
35
36
|
- table_sm: Small
|