Class: BulmaPhlex::Modal

Inherits:
Base
  • Object
show all
Defined in:
lib/bulma_phlex/modal.rb

Overview

Renders a [Bulma modal](bulma.io/documentation/components/modal/) dialog overlay.

Consists of a background, content area, and a close button. Content is provided via a block. Supports customization of the **Stimulus controller** used for open/close behavior via the ‘data_attributes_builder` option.

Defined Under Namespace

Classes: StimulusDataAttributes

Class Method Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(data_attributes_builder: StimulusDataAttributes.new("bulma-phlex--modal"), **html_attributes) ⇒ Modal

Returns a new instance of Modal.



26
27
28
29
 
# File 'lib/bulma_phlex/modal.rb', line 26

def initialize(data_attributes_builder: StimulusDataAttributes.new("bulma-phlex--modal"), **html_attributes)
  @data_attributes_builder = data_attributes_builder
  @html_attributes = html_attributes
end

Class Method Details

.new(data_attributes_builder: StimulusDataAttributes.new("bulma-phlex--modal"), **html_attributes) ⇒ Object

Parameters

  • ‘data_attributes_builder` — Provides data attributes for the container, background, and close button. Defaults to a `StimulusDataAttributes` instance with the controller name `“bulma-phlex–modal”`. Provide a custom builder to use a different controller or customize the data attributes.

  • ‘**html_attributes` — Additional HTML attributes for the outer `<div>` element



22
23
24
 
# File 'lib/bulma_phlex/modal.rb', line 22

def self.new(data_attributes_builder: StimulusDataAttributes.new("bulma-phlex--modal"), **html_attributes)
  super
end

Instance Method Details

#view_template ⇒ Object 



31
32
33
34
35
36
37
38
 
# File 'lib/bulma_phlex/modal.rb', line 31

def view_template(&)
  container = { class: "modal", data: @data_attributes_builder.for_container }
  div(**mix(container, @html_attributes)) do
    div(class: "modal-background", data: @data_attributes_builder.for_background)
    div(class: "modal-content", &)
    button(class: "modal-close is-large", aria: { label: "close" }, data: @data_attributes_builder.for_close_button)
  end
end