<%= pb_rails("collapsible", props: { name: "default-example" }) do %> <%= pb_rails("collapsible/collapsible_main", props: { padding: "md", name: "default-main"}) do %> <%= pb_rails("body", props: { text: "Main Section"}) %> <% end %> <%= pb_rails("collapsible/collapsible_content", props: { padding: "md" }) do %> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at. <br><br> Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa. <% end %> <% end %>
This kit uses icon
sizes. If you don't give it a size, it will default to medium. This can be replaced with the sizes below:
lg
xs
sm
1x
2x
3x
4x
5x
6x
7x
8x
9x
10x
<%= pb_rails("collapsible", props: { name: "default-example", margin_bottom: "xs" }) do %> <%= pb_rails("collapsible/collapsible_main", props: { padding: "md", name: "default-main", size: "xs" }) do %> <%= pb_rails("body", props: { text: "Extra Small Section"}) %> <% end %> <%= pb_rails("collapsible/collapsible_content", props: { padding: "md" }) do %> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at. <br><br> Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa. <% end %> <% end %> <%= pb_rails("collapsible", props: { name: "default-example", margin_bottom: "xs" }) do %> <%= pb_rails("collapsible/collapsible_main", props: { padding: "md", name: "default-main", size: "sm" }) do %> <%= pb_rails("body", props: { text: "Small Section"}) %> <% end %> <%= pb_rails("collapsible/collapsible_content", props: { padding: "md" }) do %> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at. <br><br> Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa. <% end %> <% end %> <%= pb_rails("collapsible", props: { name: "default-example", margin_bottom: "xs" }) do %> <%= pb_rails("collapsible/collapsible_main", props: { padding: "md", name: "default-main" }) do %> <%= pb_rails("body", props: { text: "Medium Section"}) %> <% end %> <%= pb_rails("collapsible/collapsible_content", props: { padding: "md" }) do %> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at. <br><br> Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa. <% end %> <% end %> <%= pb_rails("collapsible", props: { name: "default-example", margin_bottom: "xs" }) do %> <%= pb_rails("collapsible/collapsible_main", props: { padding: "md", name: "default-main", size: "lg" }) do %> <%= pb_rails("body", props: { text: "Large Section"}) %> <% end %> <%= pb_rails("collapsible/collapsible_content", props: { padding: "md" }) do %> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at. <br><br> Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa. <% end %> <% end %>
This kit uses default
color by default, and can be replaced with colors below:
light
lighter
success
error
link
<%= pb_rails("collapsible", props: { name: "default-example", margin_bottom: "xs" }) do %> <%= pb_rails("collapsible/collapsible_main", props: { padding: "md", name: "default-main", color: "default"}) do %> <%= pb_rails("body", props: { text: "Default Section"}) %> <% end %> <%= pb_rails("collapsible/collapsible_content", props: { padding: "md" }) do %> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at. <br><br> Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa. <% end %> <% end %> <%= pb_rails("collapsible", props: { name: "default-example", margin_bottom: "xs" }) do %> <%= pb_rails("collapsible/collapsible_main", props: { padding: "md", name: "default-main", color: "light"}) do %> <%= pb_rails("body", props: { text: "Light Section"}) %> <% end %> <%= pb_rails("collapsible/collapsible_content", props: { padding: "md" }) do %> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at. <br><br> Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa. <% end %> <% end %> <%= pb_rails("collapsible", props: { name: "default-example", margin_bottom: "xs" }) do %> <%= pb_rails("collapsible/collapsible_main", props: { padding: "md", name: "default-main", color: "lighter"}) do %> <%= pb_rails("body", props: { text: "Lighter Section"}) %> <% end %> <%= pb_rails("collapsible/collapsible_content", props: { padding: "md" }) do %> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at. <br><br> Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa. <% end %> <% end %> <%= pb_rails("collapsible", props: { name: "default-example", margin_bottom: "xs" }) do %> <%= pb_rails("collapsible/collapsible_main", props: { padding: "md", name: "default-main", color: "link"}) do %> <%= pb_rails("body", props: { text: "Link Section"}) %> <% end %> <%= pb_rails("collapsible/collapsible_content", props: { padding: "md" }) do %> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at. <br><br> Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa. <% end %> <% end %> <%= pb_rails("collapsible", props: { name: "default-example", margin_bottom: "xs" }) do %> <%= pb_rails("collapsible/collapsible_main", props: { padding: "md", name: "default-main", color: "error"}) do %> <%= pb_rails("body", props: { text: "Error Section"}) %> <% end %> <%= pb_rails("collapsible/collapsible_content", props: { padding: "md" }) do %> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at. <br><br> Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa. <% end %> <% end %> <%= pb_rails("collapsible", props: { name: "default-example", margin_bottom: "xs" }) do %> <%= pb_rails("collapsible/collapsible_main", props: { padding: "md", name: "default-main", color: "success"}) do %> <%= pb_rails("body", props: { text: "Success Section"}) %> <% end %> <%= pb_rails("collapsible/collapsible_content", props: { padding: "md" }) do %> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at. <br><br> Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa. <% end %> <% end %>
The icon
prop allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when collapsed (chevron-down), and the second value will replace the default icon when expanded (chevron-up). icon
also allows you to pass it a single icon as a string, in which case the icon will not toggle with the collapsible state.
<%= pb_rails("collapsible", props: { name: "custom-icons-example" }) do %> <%= pb_rails("collapsible/collapsible_main", props: { padding: "md", name: "custom-icons-main", icon: ["plus", "minus"]}) do %> <%= pb_rails("body", props: { text: "Main Section"}) %> <% end %> <%= pb_rails("collapsible/collapsible_content", props: { padding: "md" }) do %> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at. <br><br> Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa. <% end %> <% end %>
The collapsed
prop (boolean; default = true) handles the collapsed state of a collapsible. Set it to 'false' and the collapsible will render in an expanded state on page load.
You can also control the collapsed state using an external control (like a button). To do this, you must first apply a unique id to the collapsible/collapsible_content child element. You can then attach an eventListner to the external control of your choice, pass it the id as an argument and use document.dispatchEvent(new CustomEvent(id))
to trigger the action. See the code example below for details.
<div onclick="toggleCollapsibleById('collapsed-toggle')"> <%= pb_rails("button", props: { text: "Toggle Collapsible", variant:"link"}) %> </div> <%= pb_rails("collapsible", props: { name: "default-example" }) do %> <%= pb_rails("collapsible/collapsible_main", props: { padding: "md", name: "default-main"}) do %> <%= pb_rails("body", props: { text: "Main Section"}) %> <% end %> <%= pb_rails("collapsible/collapsible_content", props: { padding: "md", collapsed: false, id:"collapsed-toggle" }) do %> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at. <br><br> Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa. <% end %> <% end %> <script> const toggleCollapsibleById = (id) => { document.dispatchEvent(new CustomEvent(id)); }; </script>
The external control functionality can also be used to toggle multiple collapsibles with the same control. See the code example below to see this in action.
<%= pb_rails("button", props: { variant:"link", text: "Toggle All", id: "toggle-button-example"}) %> <%= pb_rails("collapsible", props: { name: "default-example" }) do %> <%= pb_rails("collapsible/collapsible_main", props: { padding: "xs", name: "default-main"}) do %> <%= pb_rails("body", props: { text: "Main Section"}) %> <% end %> <%= pb_rails("collapsible/collapsible_content", props: { padding: "md", id:"collapse-toggle-1" }) do %> Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa. <% end %> <% end %> <%= pb_rails("collapsible", props: { name: "default-example-2" }) do %> <%= pb_rails("collapsible/collapsible_main", props: { padding: "xs", name: "default-main"}) do %> <%= pb_rails("body", props: { text: "Main Section"}) %> <% end %> <%= pb_rails("collapsible/collapsible_content", props: { padding: "md", id:"collapse-toggle-2" }) do %> Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa. <% end %> <% end %> <%= pb_rails("collapsible", props: { name: "default-example-3" }) do %> <%= pb_rails("collapsible/collapsible_main", props: { padding: "xs", name: "default-main"}) do %> <%= pb_rails("body", props: { text: "Main Section"}) %> <% end %> <%= pb_rails("collapsible/collapsible_content", props: { padding: "md", id:"collapse-toggle-3" }) do %> Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa. <% end %> <% end %> <script> window.addEventListener('DOMContentLoaded', () => { const collapsibles = document.querySelectorAll('[id^="collapse-toggle"]'); const button = document.querySelector("#toggle-button-example"); button.addEventListener("click", () => { collapsibles.forEach(collapsible => { document.dispatchEvent(new CustomEvent(collapsible.id)); }) }) }) </script>
Optionally replace your collapsible/collapsible_main
with any component to customize your Main section's contents and/or style. This gives you full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
NOTE: Custom main sections require data: {"collapsible-main": "true"}
to ensure the collapsible's toggle action works correctly.
<%= pb_rails("collapsible", props: { name: "default-example" }) do %> <%= pb_rails("flex", props: { position: "sticky", top: "0", cursor: "pointer", data: { "collapsible-main": "true", align: "center", gap: "sm", justify: "between" } }) do %> <%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %> <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %> <% end %> <% end %> <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %> <% end %> <%= pb_rails("collapsible/collapsible_content", props: { padding: "none" }) do %> <%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %> <%= pb_rails("list/item") do %> Checklist Item <% end %> <%= pb_rails("list/item") do %> Checklist Item <% end %> <%= pb_rails("list/item") do %> Checklist Item <% end %> <%= pb_rails("list/item") do %> Checklist Item <% end %> <%= pb_rails("list/item") do %> Checklist Item <% end %> <% end %> <% end %> <% end %>
When using a custom Main Section, you can also use the optional collapsible/collapsible_icon
subcomponent.
NOTE: The optional icon subcomponent accepts all icon-related props (icon
, size
, and color
) for further customization. If none of these are specified, the default icon will be rendered.
<%= pb_rails("collapsible", props: { name: "default-example" }) do %> <%= pb_rails("flex", props: { position: "sticky", top: "0", cursor: "pointer", data: { "collapsible-main": "true" }, align: "center", gap: "sm", justify: "between" }) do %> <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %> <%= pb_rails("collapsible/collapsible_icon") %> <% end %> <%= pb_rails("collapsible/collapsible_content", props: { padding: "none" }) do %> <%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %> <%= pb_rails("list/item") do %> Checklist Item <% end %> <%= pb_rails("list/item") do %> Checklist Item <% end %> <%= pb_rails("list/item") do %> Checklist Item <% end %> <%= pb_rails("list/item") do %> Checklist Item <% end %> <%= pb_rails("list/item") do %> Checklist Item <% end %> <% end %> <% end %> <% end %>
<%= pb_rails("collapsible", props: { name: "no-icon-example" }) do %> <%= pb_rails("collapsible/collapsible_main", props: { padding: "md", name: "no-icon-main", icon: "none" }) do %> <%= pb_rails("body", props: { text: "Main Section"}) %> <% end %> <%= pb_rails("collapsible/collapsible_content", props: { padding: "md" }) do %> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at. <br><br> Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa. <% end %> <% end %>
Props | Type | Values |
---|---|---|
max_width |
array
|
0%
xs
sm
md
lg
xl
xxl
0
none
100%
|
min_width |
array
|
0%
xs
sm
md
lg
xl
xxl
0
none
100%
|
z_index |
array
|
1
2
3
4
5
6
7
8
9
10
|
number_spacing |
array
|
tabular
|
shadow |
array
|
none
deep
deeper
deepest
|
line_height |
array
|
tightest
tighter
tight
normal
loose
looser
loosest
|
display |
array
|
block
inline_block
inline
flex
inline_flex
none
|
cursor |
array
|
auto
default
none
contextMenu
help
pointer
progress
wait
cell
crosshair
text
verticalText
alias
copy
move
noDrop
notAllowed
grab
grabbing
eResize
nResize
neResize
nwResize
sResize
seResize
swResize
wResize
ewResize
nsResize
neswResize
nwseResize
colResize
rowResize
allScroll
zoomIn
zoomOut
|
flex_direction |
array
|
row
column
rowReverse
columnReverse
|
flex_wrap |
array
|
wrap
nowrap
wrapReverse
|
justify_content |
array
|
start
end
center
spaceBetween
spaceAround
spaceEvenly
|
justify_self |
array
|
auto
start
end
center
stretch
|
align_items |
array
|
flexStart
flexEnd
start
end
center
baseline
stretch
|
align_content |
array
|
start
end
center
spaceBetween
spaceAround
spaceEvenly
|
align_self |
array
|
auto
start
end
center
stretch
baseline
|
flex |
array
|
auto
initial
0
1
2
3
4
5
6
7
8
9
10
11
12
none
|
flex_grow |
array
|
1
0
|
flex_shrink |
array
|
1
0
|
order |
array
|
1
2
3
4
5
6
7
8
9
10
11
12
|
position |
array
|
relative
absolute
fixed
sticky
|
hover |
array
|
|
border_radius |
array
|
none
xs
sm
md
lg
xl
rounded
|
text_align |
array
|
start
end
left
right
center
justify
justify-all
match-parent
|
overflow |
array
|
visible
hidden
scroll
auto
|
truncate |
array
|
1
2
3
4
5
|
left |
array
|
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit
|
top |
array
|
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit
|
right |
array
|
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit
|
bottom |
array
|
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit
|
vertical_align |
array
|
baseline
super
top
middle
bottom
sub
text-top
text-bottom
|
overflow_x |
array
|
visible
hidden
scroll
auto
|
overflow_y |
array
|
visible
hidden
scroll
auto
|
margin |
array
|
none
xxs
xs
sm
md
lg
xl
|
margin_bottom |
array
|
none
xxs
xs
sm
md
lg
xl
|
margin_left |
array
|
none
xxs
xs
sm
md
lg
xl
|
margin_right |
array
|
none
xxs
xs
sm
md
lg
xl
|
margin_top |
array
|
none
xxs
xs
sm
md
lg
xl
|
margin_x |
array
|
none
xxs
xs
sm
md
lg
xl
|
margin_y |
array
|
none
xxs
xs
sm
md
lg
xl
|
padding |
array
|
none
xxs
xs
sm
md
lg
xl
|
padding_bottom |
array
|
none
xxs
xs
sm
md
lg
xl
|
padding_left |
array
|
none
xxs
xs
sm
md
lg
xl
|
padding_right |
array
|
none
xxs
xs
sm
md
lg
xl
|
padding_top |
array
|
none
xxs
xs
sm
md
lg
xl
|
padding_x |
array
|
none
xxs
xs
sm
md
lg
xl
|
padding_y |
array
|
none
xxs
xs
sm
md
lg
xl
|
classname |
string
|
|
dark |
boolean
|
|
id |
string
|
|
data |
hashprop
|
|
aria |
hashprop
|
|
html_options |
hashprop
|
|
children |
proc
|