Hello Fam! 
I'm excited to share a brand new custom UI component to enhance your application's user experience: B4XDaisyDiff.
If you've ever needed to showcase a "Before and After" image comparison or a side-by-side text difference, this component handles it beautifully with a simple, interactive drag slider. Inspired by DaisyUI styling, it brings modern CSS-like token properties (such as w-full, rounded-xl, and semantic color variants like primary or success) straight into the B4X Designer.
Key Features:
Simple Usage Code Snippet: You can add B4XDaisyDiff entirely through the designer, or you can create and configure it programmatically. Here is a quick snippet to get you started with an image comparison:
(Note: For text diffs, you can set DiffType to "text" and use setText1, setText2, and their respective color variants!)
I hope this helps you build more engaging UIs! Let me know if you have any questions or feature requests below. Happy coding!
Related Content
www.b4x.com
I'm excited to share a brand new custom UI component to enhance your application's user experience: B4XDaisyDiff.
If you've ever needed to showcase a "Before and After" image comparison or a side-by-side text difference, this component handles it beautifully with a simple, interactive drag slider. Inspired by DaisyUI styling, it brings modern CSS-like token properties (such as w-full, rounded-xl, and semantic color variants like primary or success) straight into the B4X Designer.
Key Features:- Dual Modes: Supports both image and text rendering modes (DiffType).
- Highly Customizable: Easily adjust Width, Height, Rounded corners, Shadow, and text sizes using familiar Tailwind-style naming.
- Interactive Split: Users can drag the divider seamlessly left and right, starting from a custom default position (e.g., 0.5 for center).
- Designer Support: Fully supported in the visual designer with intuitive custom properties.
Simple Usage Code Snippet: You can add B4XDaisyDiff entirely through the designer, or you can create and configure it programmatically. Here is a quick snippet to get you started with an image comparison:
B4X:
' 1. Declare the component
Private MyDiff As B4XDaisyDiff
' 2. Initialize and add to your layout
MyDiff.Initialize(Me, "MyDiff")
MyDiff.AddToParent(Root, 10dip, 10dip, 300dip, 300dip)
' 3. Configure the DiffType to Image
MyDiff.setDiffType("image")
' 4. Load your before and after images (ensure they are in the Assets folder)
MyDiff.setImage1("photo-before.webp")
MyDiff.setImage2("photo-after.webp")
' 5. Set the initial slider position (0.0 to 1.0)
MyDiff.setPosition(0.5)(Note: For text diffs, you can set DiffType to "text" and use setText1, setText2, and their respective color variants!)
I hope this helps you build more engaging UIs! Let me know if you have any questions or feature requests below. Happy coding!
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
