class Line::Message::Builder::Flex::Box

Represents a “box” component in a LINE Flex Message.

A box is a fundamental layout container that arranges its child components (contents) in a specified direction (layout: horizontal, vertical, or baseline). It can hold various other components like text, images, buttons, or even nested boxes, allowing for complex layouts.

Boxes have numerous properties to control their appearance and the arrangement of their children, such as padding, margin, spacing between items, justification, and alignment.

A box can also have an action associated with it, making the entire box area tappable.

Example

Line::Message::Builder.with do
  flex alt_text: "Box example" do
    bubble do
      body do
        layout :horizontal
        spacing :md
        text "Item 1"
        text "Item 2"
      end
    end
  end
end

Attributes

contents [R]

An array holding the child components (e.g., Text, Image, nested Box instances) of this box.

Public Class Methods

new (context: nil, **options, &)

Source

# File lib/line/message/builder/flex/box.rb, line 162
def initialize(context: nil, **options, &)
  @contents = [] # Holds child components
  super # Calls Base#initialize, sets options, and evals block
end

Initializes a new Flex Message Box component. The provided block is instance-eval’d, allowing DSL methods for adding child components (e.g., text, button, nested box) to be called.

context: An optional context for the builder
options: A hash of options to set instance variables. Corresponds to the option definitions in this class and included modules
block: A block to define the contents of this box

Calls superclass method Line::Message::Builder::Base::new

Public Instance Methods

box (**options, &)

Source

# File lib/line/message/builder/flex/box.rb, line 175
def box(**options, &)
  @contents << Flex::Box.new(context: context, **options, &)
end

Adds a nested Flex Box component to this box’s contents.

options: Options for the nested box (see Box)
block: A block to define the contents of the nested box

Returns the newly created nested Box object.

button (**options, &)

Source

# File lib/line/message/builder/flex/box.rb, line 219
def button(**options, &)
  @contents << Flex::Button.new(context: context, **options, &)
end

Adds a Flex Button component to this box’s contents.

options: Options for the button component (see Button)
block: A block to define the button’s action and properties

Returns the newly created Button object.

image (url, **options, &)

Source

# File lib/line/message/builder/flex/box.rb, line 233
def image(url, **options, &)
  @contents << Flex::Image.new(url, context: context, **options, &)
end

Adds a Flex Image component to this box’s contents.

url: The URL of the image
options: Options for the image component (see Image)
block: An optional block for the image component (e.g., for an action)

Returns the newly created Image object.

separator (**options, &)

Source

# File lib/line/message/builder/flex/box.rb, line 248
def separator(**options, &)
  @contents << Flex::Separator.new(context: context, **options, &)
end

Adds a Flex Separator component to this box’s contents.

A separator is a simple component that draws a horizontal line, creating a visual division between other components in a container.

options: Options for the separator component (see Separator)
block: An optional block for advanced separator configuration

Returns the newly created Separator object.

text (text = nil, **options, &)

Source

# File lib/line/message/builder/flex/box.rb, line 207
def text(text = nil, **options, &)
  @contents << Flex::Text.new(text, context: context, **options, &)
end

Adds a Flex Text component to this box’s contents.

text: The text content
options: Options for the text component (see Text)
block: An optional block for the text component. This can be used to define an action for the text or to add Span components within the text

Returns the newly created Text object.

Example: Simple text component

text "Hello, World!"

Example: `Text` with an action

text "Click me" do
  message "Action", text: "You clicked me!"
end

Example: `Text` with spans

text "This has " do
  span "styled", color: "#FF0000"
  span " parts"
end

class Line::Message::Builder::Flex::Box

Example

Example: Simple text component

Example: Text with an action

Example: Text with spans

Example: `Text` with an action

Example: `Text` with spans