Hi Fam
Are you tired of manually coding backgrounds, corner radii, and padding just to make a simple, good-looking notification badge or a tag chip? I'm excited to share a brand new custom view that brings modern web aesthetics straight to your B4X projects: B4XDaisyBadge!
Inspired by the incredibly popular Tailwind CSS and DaisyUI frameworks, B4XDaisyBadge allows you to effortlessly drop stunning, highly customizable badges and chips right into your Designer or create them programmatically.
Key Features:
• DaisyUI Color Variants: Instantly apply semantic colors like primary, secondary, accent, info, success, warning, and error.
• Multiple Visual Styles: Choose from solid, soft, outline, dash, or ghost to perfectly match your app's theme.
• Tailwind Sizing & Rounding: Easily scale your badges (xs, sm, md, lg, xl) and adjust the corner radius using familiar Tailwind tokens (e.g., rounded-full, rounded-md).
• Avatars & SVG Icons: Seamlessly embed images, text avatars, or SVG icons on the left or right side of your badge.
• Interactive Toggles & Closable Chips: Need filter tags? Set Toggle = True to let users check/uncheck chips. Need dismissible tags? Set Closable = True to show a handy 'X' icon.
• Auto-Sizing: Badges can automatically fit their content (fit-content) or be constrained to explicit dimensions.
Simple Usage Example:
You can easily configure everything via the Visual Designer, but if you prefer doing it in code, here is a quick snippet to get you started:
Related Content
www.b4x.com
Are you tired of manually coding backgrounds, corner radii, and padding just to make a simple, good-looking notification badge or a tag chip? I'm excited to share a brand new custom view that brings modern web aesthetics straight to your B4X projects: B4XDaisyBadge!
Inspired by the incredibly popular Tailwind CSS and DaisyUI frameworks, B4XDaisyBadge allows you to effortlessly drop stunning, highly customizable badges and chips right into your Designer or create them programmatically.
Key Features:• DaisyUI Color Variants: Instantly apply semantic colors like primary, secondary, accent, info, success, warning, and error.
• Multiple Visual Styles: Choose from solid, soft, outline, dash, or ghost to perfectly match your app's theme.
• Tailwind Sizing & Rounding: Easily scale your badges (xs, sm, md, lg, xl) and adjust the corner radius using familiar Tailwind tokens (e.g., rounded-full, rounded-md).
• Avatars & SVG Icons: Seamlessly embed images, text avatars, or SVG icons on the left or right side of your badge.
• Interactive Toggles & Closable Chips: Need filter tags? Set Toggle = True to let users check/uncheck chips. Need dismissible tags? Set Closable = True to show a handy 'X' icon.
• Auto-Sizing: Badges can automatically fit their content (fit-content) or be constrained to explicit dimensions.
Simple Usage Example:You can easily configure everything via the Visual Designer, but if you prefer doing it in code, here is a quick snippet to get you started:
B4X:
' 1. Initialize the badge
Dim myBadge As B4XDaisyBadge
myBadge.Initialize(Me, "myBadge")
' 2. Configure properties
myBadge.setText("New Message")
myBadge.setVariant("primary") ' primary, secondary, accent, success, etc.
myBadge.setStyle("soft") ' solid, soft, outline, dash, ghost
myBadge.setRounded("rounded-full")
myBadge.setIconAsset("bell-solid.svg") ' Optional SVG icon
' 3. Add to your layout
' AddToParent(Parent, Left, Top, Width, Height)
' Note: If Width and Height are 0, it will auto-size to fit the content!
myBadge.AddToParent(pnlHost, 20dip, 20dip, 0, 0)
' Optional: Handle click events!
Sub myBadge_Click(Tag As Object)
Log("Badge was clicked!")
End Sub
' Optional: Handle toggle checked events!
Sub myBadge_Checked(Id As String, Checked As Boolean)
Log("Badge Toggle State: " & Checked)
End SubRelated 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...
www.b4x.com
