Hi Fam
Welcome to the future of B4X UI design! If you've ever wanted the sleek, modern look of Tailwind CSS and daisyUI in your B4X applications, the B4XDaisyNavbar component is here to deliver.
The B4XDaisyNavbar is a versatile, highly customizable navigation bar class that divides your top menu into three distinct sections: a Start slot, a Center slot, and an End slot. This structure perfectly mimics the flexbox layouts found in modern web design.
Key Features & Highlights:
• Theming & Variants: Easily apply built-in daisyUI color variants like primary, secondary, accent, neutral, info, success, warning, or error.
• Stunning Special Effects: Turn on a beautiful, translucent "Glass" effect with just a boolean switch (setGlass(True)).
• Shadows & Radii: Utilize Tailwind-inspired shadow scales (from sm to 2xl) and rounded corner styles (sm, md, lg, xl, 2xl, 3xl, or full).
• Interactive Elements Made Easy: The component includes built-in methods to effortlessly add common elements. You can use AddHamburger to place an animated menu icon, AddLogo for branding, AddAvatarToStart or AddAvatarToEnd for user profiles, and AddTitleToCenter to clearly label your current page.
• Complex Layouts, Simple Code: Pin a hamburger menu to the start, drop your app logo in the center, and add an interactive notification bell to the end—all with just a few lines of code.
• Event Handling: The hamburger menu automatically fires Opened and Closed events, allowing you to easily hook it up to a side drawer or custom menu logic.
Quick Example: Here's how easy it is to create an interactive navbar with a hamburger menu, logo, and a notification bell:
Related Content
www.b4x.com
Welcome to the future of B4X UI design! If you've ever wanted the sleek, modern look of Tailwind CSS and daisyUI in your B4X applications, the B4XDaisyNavbar component is here to deliver.
The B4XDaisyNavbar is a versatile, highly customizable navigation bar class that divides your top menu into three distinct sections: a Start slot, a Center slot, and an End slot. This structure perfectly mimics the flexbox layouts found in modern web design.
Key Features & Highlights:
• Theming & Variants: Easily apply built-in daisyUI color variants like primary, secondary, accent, neutral, info, success, warning, or error.
• Stunning Special Effects: Turn on a beautiful, translucent "Glass" effect with just a boolean switch (setGlass(True)).
• Shadows & Radii: Utilize Tailwind-inspired shadow scales (from sm to 2xl) and rounded corner styles (sm, md, lg, xl, 2xl, 3xl, or full).
• Interactive Elements Made Easy: The component includes built-in methods to effortlessly add common elements. You can use AddHamburger to place an animated menu icon, AddLogo for branding, AddAvatarToStart or AddAvatarToEnd for user profiles, and AddTitleToCenter to clearly label your current page.
• Complex Layouts, Simple Code: Pin a hamburger menu to the start, drop your app logo in the center, and add an interactive notification bell to the end—all with just a few lines of code.
• Event Handling: The hamburger menu automatically fires Opened and Closed events, allowing you to easily hook it up to a side drawer or custom menu logic.
Quick Example: Here's how easy it is to create an interactive navbar with a hamburger menu, logo, and a notification bell:
B4X:
Dim nb As B4XDaisyNavbar
nb.Initialize(Me, "nb_int")
Dim nbView As B4XView = nb.AddToParent(pnlContent, 10dip, currentY, Root.Width - 20dip, 64dip)
' Add interactive components
nb.AddHamburger(48dip)
nb.AddLogo("wonderperson@192.webp", 40dip, 40dip, "squircle")
nb.AddTitleToStart("B4XDaisy UIKit")
' Add Bell Icon to the end slot
Dim bell As B4XDaisySvgIcon
bell.Initialize(Me, "")
Dim bellView As B4XView = bell.CreateView(24dip, 24dip)
bell.setSvgAsset("bell-solid.svg")
nb.AddViewToEnd(bellView, 24dip, 24dip)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
