Hi everyone!
I’m excited to share B4XDaisySteps, a new UI component designed to simplify how you manage multi-step processes in your B4X projects (B4A, B4i, B4J). Heavily inspired by the DaisyUI and Tailwind CSS ecosystems, this component brings a clean, modern aesthetic to your native applications.
Whether you're building a checkout flow, a setup wizard, or a complex onboarding process, B4XDaisySteps provides the professional look and feel your users expect.
Key Features:
Check out the screenshots below to see it in action across different orientations and styles! I hope you find this useful! Let me know if you have any feedback or feature requests.
Related Content
www.b4x.com
I’m excited to share B4XDaisySteps, a new UI component designed to simplify how you manage multi-step processes in your B4X projects (B4A, B4i, B4J). Heavily inspired by the DaisyUI and Tailwind CSS ecosystems, this component brings a clean, modern aesthetic to your native applications.
Whether you're building a checkout flow, a setup wizard, or a complex onboarding process, B4XDaisySteps provides the professional look and feel your users expect.
Key Features:
- Fully Responsive: Easily switch between horizontal and vertical orientations.
- DaisyUI Color Variants: Supports standard semantic colors like primary, secondary, accent, info, success, warning, and error.
- Active Step Highlighting: Automatically highlight completed steps up to a specific index using your chosen ActiveColor.
- Custom Icons & SVGs: Add text, emojis, or even custom SVG icons directly from your Files folder into the step circles.
- Smart Scrolling: If you have many steps, enable the Scrollable property to ensure they fit perfectly in any container.
- Flexible Layouts: Control padding, margins, and component sizing using familiar Tailwind-style spacing tokens.
- Interactive: Built-in StepClick event allows users to interact with specific steps in the process.
B4X:
' Initialize and add to your layout
Dim stepsDemo As B4XDaisySteps
stepsDemo.Initialize(Me, "steps")
stepsDemo.AddToParent(Root, 10dip, 10dip, 300dip, 150dip)
' Add steps with different styles and icons
stepsDemo.AddStep("Register", "primary")
stepsDemo.AddStepWithIcon("Plan", "primary", "📅")
stepsDemo.AddStepWithSvgIcon("Payment", "secondary", "credit-card.svg")
stepsDemo.AddStep("Done", "success")
' Highlight the current progress (0-based index)
' This highlights the first two steps with the "accent" color
stepsDemo.ActiveStep = 1
stepsDemo.ActiveColor = "accent"
' Refresh the component to apply changes
stepsDemo.RefreshCheck out the screenshots below to see it in action across different orientations and styles! I hope you find this useful! Let me know if you have any feedback or feature requests.
Related Content
[B4X] [B4A] B4XDaisy UI Kit - Native Components inspired by DaisyUI & Tailwind
Hi Fam Disclaimer: The [B4A] in the title? This b4xlib has only been tested with B4A, thus the title. I have not checked the cross-platform functionality as its on the roadmap when I finish the complete library. The b4xlib is still in ALPHA stage, things might change, apis might break and...
www.b4x.com
