Orange.Component.Modal (orange v0.5.0)

An modal/dialog component which renders an overlay in the middle of the viewport.

Attributes

  • :open - Whether the modal is open or not. This attribute is required.

  • :offset_x - The offset from the left and right edge of the screen. This attribute is required.

  • :offset_y - The offset from the top and bottom edge of the screen. This attribute is required.

    Info

    When the offset_x/y is too big for the terminal size, the modal will not be rendered.

  • :children - A list of elements used as content of the modal. This attribute is optional.

  • :title - The title of the modal. See Orange.Macro.rect/2 for supported values. This attribute is optional.

  • :style - The modal style. See Orange.Macro.rect/2 for supported values. This attribute is optional.

Examples

defmodule Example do
  @behaviour Orange.Component

  import Orange.Macro

  @impl true
  def init(_attrs), do: %{state: %{search_value: ""}}

  @impl true
  def render(state, _attrs, update) do
    modal_content =
      rect do
        "foo"
        "bar"
      end

    rect do
      rect do
        "Displaying modal..."
      end

      {
        Orange.Component.Modal,
        offset_x: 8,
        offset_y: 4,
        children: [modal_content],
        open: true
      }
    end
  end
end

rendered result