Hello Fam!
Are you looking to easily create eye-catching, modern, and responsive "Hero" sections for your B4A, B4i, and B4J apps?
Introducing B4XDaisyHero, a custom view component inspired by the elegant design principles of DaisyUI and Tailwind CSS. This component allows you to build stunning headers and introductory sections with minimal effort, utilizing a highly customizable, cross-platform approach.
Key Features:
' Note: You can retrieve the hero's internal content panel via h1.GetContentPanel
' to add your titles, descriptions, and buttons!
Try it out and let me know what you build with it! Questions and feedback are highly appreciated.
Related Content
Are you looking to easily create eye-catching, modern, and responsive "Hero" sections for your B4A, B4i, and B4J apps?
Introducing B4XDaisyHero, a custom view component inspired by the elegant design principles of DaisyUI and Tailwind CSS. This component allows you to build stunning headers and introductory sections with minimal effort, utilizing a highly customizable, cross-platform approach.
Key Features:
- Fully Cross-Platform: Works seamlessly across B4A, B4i, and B4J using XUI.
- Smart Layout Engine: Uses B4XFlexLayout under the hood to automatically handle content alignment, direction (vertical, horizontal, reverse), gaps, and padding.
- Beautiful Aesthetics: Supports DaisyUI semantic color variants (primary, secondary, info, error, etc.).
- Customizable Corners & Shadows: Easily apply Tailwind-style rounded corners (e.g., rounded-box, rounded-full) and elevation shadows (xs to xl).
- Image Overlays: Add background images coupled with a customizable colored overlay layer for perfect text readability.
- Designer Support: Can be added and configured directly via the visual designer or initialized dynamically in code.
B4X:
' Ensure you have a B4XDaisyHero dimensioned in Class_Globals
Private h1 As B4XDaisyHero
Private pnlHost As B4XView ' The parent panel
' Initialize and add the hero component
h1.Initialize(Me, "hero")
h1.AddToParent(pnlHost, 10dip, 10dip, 400dip, 320dip)
' Configure the layout properties
h1.Direction = "vertical"
h1.ContentAlignment = "center"
h1.Gap = "4"
' Configure DaisyUI styling variants
h1.BackgroundColorVariant = "bg-base-300"
h1.TextColorVariant = "text-neutral-content"
h1.RoundedBox = True' Note: You can retrieve the hero's internal content panel via h1.GetContentPanel
' to add your titles, descriptions, and buttons!
Try it out and let me know what you build with it! Questions and feedback are highly appreciated.
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...