BetterUi Components

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<header class="w-full h-16 bg-white border-b border-grayscale-200 text-grayscale-900 sticky top-0 flex items-center justify-between px-4 z-40" >
  <div class="flex items-center shrink-0">
    <div class="lg:hidden flex items-center mr-2">
      <button class='p-2 rounded-md'>Menu</button>
    </div>
    Playground Header
  </div>
  <div class="hidden lg:flex flex-1 items-center justify-center px-4">
    <nav>Navigation</nav>
  </div>
  <div class="flex items-center gap-2">
    Actions
  </div>
</header>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
render BetterUi::Drawer::HeaderComponent.new(
  variant: variant.to_sym,
  height: height.to_sym,
  sticky: sticky
) do |header|
  header.with_mobile_menu_button do
    "<button class='p-2 rounded-md'>Menu</button>".html_safe
  end
  header.with_logo { "Playground Header" }
  header.with_navigation do
    "<nav>Navigation</nav>".html_safe
  end
  header.with_actions { "Actions" }
end

No notes provided.

Param Description Input

—

—

—