Class: UI::DrawerComponent

Inherits:
ViewComponent::Base
  • Object
show all
Includes:
DrawerBehavior
Defined in:
app/view_components/ui/drawer_component.rb

Overview

Drawer container component (ViewComponent) A mobile-first drawer with gesture-based drag-to-close

Examples:

Basic usage

<%= render UI::DrawerComponent.new(open: false) do %>
  <%= render UI::TriggerComponent.new { "Open Drawer" } %>
  <%= render UI::OverlayComponent.new %>
  <%= render UI::ContentComponent.new do %>
    <%= render UI::HeaderComponent.new do %>
      <%= render UI::TitleComponent.new { "Drawer Title" } %>
      <%= render UI::DescriptionComponent.new { "Drawer description" } %>
    <% end %>
    <!-- Content -->
    <%= render UI::FooterComponent.new do %>
      <%= render UI::CloseComponent.new { "Cancel" } %>
    <% end %>
  <% end %>
<% end %>

With snap points

<%= render UI::DrawerComponent.new(
  snap_points: ["148px", "355px", 1],
  modal: false
) do %>
  <!-- Drawer content -->
<% end %>

Instance Method Summary collapse

Methods included from DrawerBehavior

#drawer_base_classes, #drawer_classes, #drawer_data_attributes, #drawer_html_attributes, #merged_drawer_data_attributes

Constructor Details

#initialize(open: false, direction: "bottom", dismissible: true, modal: true, snap_points: nil, active_snap_point: nil, fade_from_index: nil, snap_to_sequential_point: false, handle_only: false, reposition_inputs: true, classes: "", id: nil, attributes: {}) ⇒ DrawerComponent

Returns a new instance of DrawerComponent.

Parameters:

  • open (Boolean) (defaults to: false) —

    whether the drawer is open

  • direction (String) (defaults to: "bottom") —

    drawer position: “bottom”, “top”, “left”, “right”

  • dismissible (Boolean) (defaults to: true) —

    allow closing via drag/overlay/escape

  • modal (Boolean) (defaults to: true) —

    block background interaction

  • snap_points (Array) (defaults to: nil) —

    snap positions (px values or 0-1)

  • active_snap_point (Integer) (defaults to: nil) —

    current snap point index

  • fade_from_index (Integer) (defaults to: nil) —

    overlay fade threshold

  • snap_to_sequential_point (Boolean) (defaults to: false) —

    prevent velocity-based skip

  • handle_only (Boolean) (defaults to: false) —

    restrict dragging to handle only

  • reposition_inputs (Boolean) (defaults to: true) —

    reposition when keyboard appears

  • classes (String) (defaults to: "") —

    additional CSS classes

  • attributes (Hash) (defaults to: {}) —

    additional HTML attributes



44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
# File 'app/view_components/ui/drawer_component.rb', line 44

def initialize(
  open: false,
  direction: "bottom",
  dismissible: true,
  modal: true,
  snap_points: nil,
  active_snap_point: nil,
  fade_from_index: nil,
  snap_to_sequential_point: false,
  handle_only: false,
  reposition_inputs: true,
  classes: "",
  id: nil,
  attributes: {}
)
  @open = open
  @direction = direction
  @dismissible = dismissible
  @modal = modal
  @snap_points = snap_points
  @active_snap_point = active_snap_point
  @fade_from_index = fade_from_index
  @snap_to_sequential_point = snap_to_sequential_point
  @handle_only = handle_only
  @reposition_inputs = reposition_inputs
  @classes = classes
  @id = id
  @attributes = attributes
end

Instance Method Details

#call ⇒ Object 



74
75
76
77
78
79
80
 
# File 'app/view_components/ui/drawer_component.rb', line 74

def call
  attrs = drawer_html_attributes
  attrs[:data] = attrs[:data].merge(@attributes.fetch(:data, {}))
  attrs[:id] = @id if @id

  content_tag :div, content, **attrs.merge(@attributes.except(:data))
end