Hello Fam!
Are you looking for an elegant way to organize content in your applications? I am thrilled to introduce the B4XDaisyAccordion, a lightweight, responsive, and highly customizable UI component designed to take your app interfaces to the next level.
The B4XDaisyAccordion acts as a wrapper and manager for your collapsible content (B4XDaisyCollapse), neatly organizing them into a dynamic vertical stack. Here are some of the key features built right into the component to help you optimize your user experience:
By leveraging the B4XDaisyAccordion, you can save hours of UI development while providing your users with a modern, smooth, and interactive layout element. Let me know what you think below! Happy coding!
Related Content
Are you looking for an elegant way to organize content in your applications? I am thrilled to introduce the B4XDaisyAccordion, a lightweight, responsive, and highly customizable UI component designed to take your app interfaces to the next level.
The B4XDaisyAccordion acts as a wrapper and manager for your collapsible content (B4XDaisyCollapse), neatly organizing them into a dynamic vertical stack. Here are some of the key features built right into the component to help you optimize your user experience:
- Smart Layout Management: It automatically auto-shrinks to fit its contents and shifts page siblings below it by the delta smoothly and dynamically.
- OpenOnlyOne Toggle: Keep your UI uncluttered! If enabled, the accordion ensures that only one collapse item can remain open at a time; expanding one automatically collapses the others.
- Highly Customizable Styling: Change the look entirely via Designer Properties! Apply dynamic SpaceY gaps between items, choose border Rounded radii (from rounded-none to rounded-full), and apply elevations natively using the Shadow property (xs up to 2xl).
- Theme Aware: Forces the component to re-evaluate its styling against the currently active global theme in real-time with the UpdateTheme method.
- Flexible Expansion Icons: Set custom indicator icons (arrow, plus, or none) and position them effortlessly to the left or right of your headers.
B4X:
' In Class_Globals
Private xui As XUI
Private pnlHost As B4XView ' The parent panel in your layout
Private myAccordion As B4XDaisyAccordion
' In your initialization sub (e.g., B4XPage_Created)
' 1. Initialize the Accordion (pass the callback object and event name)
myAccordion.Initialize(Me, "myAccordion")
' 2. Initialize and configure a collapse item (assuming you have B4XDaisyCollapse available)
Dim item1 As B4XDaisyCollapse
item1.Initialize(Me, "item1")
' Note: You would typically add content to item1 here...
' 3. Add the item to your accordion
' The accordion will assign a unique group name and ensure it is sized correctly
myAccordion.AddItem(item1)
' 4. Add the accordion to your Host Panel (Parent, Left, Top, Width, Height)
myAccordion.AddToParent(pnlHost, 20dip, 50dip, pnlHost.Width - 40dip, 200dip)By leveraging the B4XDaisyAccordion, you can save hours of UI development while providing your users with a modern, smooth, and interactive layout element. Let me know what you think below! Happy coding!
Related Content
[B4X] [B4A] B4XDaisy UI Kit - Native Components inspired by DaisyUI & Tailwind
Hi Fam Download from GitHub Download from Google Drive Track the Project Ask NotebookLLM about B4XDaisyUI I am proud to present the B4X Daisy UI Kit, a suite of native custom views designed to bring the modern aesthetic and utility of the DaisyUI (Tailwind CSS) framework to B4X...