BetterUi Components

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<div class="h-screen overflow-hidden flex flex-col" data-controller="better-ui--drawer--layout" data-better-ui--drawer--layout-position-value="left" data-better-ui--drawer--layout-breakpoint-value="lg">
  <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 lg:hidden' data-action='click->better-ui--drawer--layout#toggle'>
          <svg class='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6h16M4 12h16M4 18h16'></path></svg>
        </button>
      </div>
      Playground
    </div>
    <div class="flex items-center gap-2">
      Actions
    </div>
  </header>
  <div class="flex flex-1 overflow-hidden relative">
    <div class="fixed inset-0 bg-black/50 z-40 hidden opacity-0 transition-opacity duration-300 lg:hidden"
         data-better-ui--drawer--layout-target="overlay"
         data-action="click->better-ui--drawer--layout#close">
    </div>
    <div class="hidden h-full lg:flex">
      <aside class="flex flex-col h-full w-64 bg-white text-grayscale-900 border-r border-grayscale-200 shrink-0" data-position="left" data-collapsible="true">
        <div class="flex-1 overflow-y-auto p-4 space-y-6">
          Navigation
        </div>
      </aside>
    </div>
    <div class="fixed inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out -translate-x-full lg:hidden"
           data-better-ui--drawer--layout-target="sidebar">
      <aside class="flex flex-col h-full w-64 bg-white text-grayscale-900 border-r border-grayscale-200 shrink-0" data-position="left" data-collapsible="true">
        <div class="flex-1 overflow-y-auto p-4 space-y-6">
          Navigation
        </div>
      </aside>
    </div>
    <main class="flex-1 overflow-auto">
      <div class='p-6'>
        <h1 class='text-2xl font-bold mb-4'>Main Content</h1>
        <p>This is the main content area.</p>
      </div>
    </main>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
render BetterUi::Drawer::LayoutComponent.new(
  sidebar_position: sidebar_position.to_sym,
  sidebar_breakpoint: sidebar_breakpoint.to_sym
) do |layout|
  layout.with_header(variant: header_variant.to_sym) do |header|
    header.with_mobile_menu_button do
      "<button class='p-2 rounded-md lg:hidden' data-action='click->better-ui--drawer--layout#toggle'>
        <svg class='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6h16M4 12h16M4 18h16'></path></svg>
      </button>".html_safe
    end
    header.with_logo { "Playground" }
    header.with_actions { "Actions" }
  end
  layout.with_sidebar(variant: sidebar_variant.to_sym, position: sidebar_position.to_sym) do |sidebar|
    sidebar.with_navigation { "Navigation" }
  end
  layout.with_main do
    "<div class='p-6'>
      <h1 class='text-2xl font-bold mb-4'>Main Content</h1>
      <p>This is the main content area.</p>
    </div>".html_safe
  end
end

No notes provided.

Param Description Input

—

—

—

—