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.
(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
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.
- 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.
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 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...