Class: PhlexKit::Select
- Inherits:
-
BaseComponent
- Object
- Phlex::HTML
- BaseComponent
- PhlexKit::Select
- Defined in:
- app/components/phlex_kit/select/select.rb
Overview
Custom dropdown select, ported from ruby_ui's RubyUI::Select — the styled popover (Image #2), NOT the native
Multi-part. The hidden SelectInput carries the form value/name; SelectTrigger + SelectValue are the closed-state button; SelectContent > SelectGroup > (SelectLabel +) SelectItem are the panel:
render PhlexKit::Select.new do
render PhlexKit::SelectInput.new(name: "user[role]", id: "user_role", value: @user.role)
render PhlexKit::SelectTrigger.new do
render PhlexKit::SelectValue.new(placeholder: "Select a role") { @user.role&.capitalize }
end
render PhlexKit::SelectContent.new do
render PhlexKit::SelectGroup.new do
render PhlexKit::SelectItem.new(value: "admin", "aria-selected": "true") { "Admin" }
end
end
endInstance Method Summary collapse
-
#initialize(**attrs) ⇒ Select
constructor
A new instance of Select.
- #view_template(&block) ⇒ Object
Methods inherited from BaseComponent
Constructor Details
#initialize(**attrs) ⇒ Select
Returns a new instance of Select.
27 28 29 |
# File 'app/components/phlex_kit/select/select.rb', line 27 def initialize(**attrs) @attrs = attrs end |
Instance Method Details
#view_template(&block) ⇒ Object
31 32 33 34 35 36 37 38 39 40 41 |
# File 'app/components/phlex_kit/select/select.rb', line 31 def view_template(&block) div(**mix({ class: "pk-select", data: { controller: "phlex-kit--select", phlex_kit__select_open_value: "false", action: "click@window->phlex-kit--select#clickOutside", phlex_kit__select_phlex_kit__select_item_outlet: ".pk-select-item" } }, @attrs), &block) end |