Module Skyline_dialog_v2Source

A Dialog is a layout view that is usually used within a Modal compponent.

Dialogs are created by composing multiple subviews together:

• Section.title emphasizes its contents and reserves space for the close button.
• Section.text wraps the main content and can scroll when the dialog would otherwise overflow.
• Section.footer is a container for action buttons.
• Close_button is a special button that gets placed in the header while being ordered last in the DOM.

Layout behavior

The Dialog.view itself renders as a block element that sizes to its contents. It is typically used inside a Modal, which makes it an overlay element rendered in the browser top layer and constrained by the viewport.

Example

  {%html|
    <Skyline.Dialog.view>
      <Skyline.Dialog.Section.title>
        Dialog with separators
      </>
      <Skyline.Dialog.Close_button.content ~close:%{Effect.Ignore} />
      <Skyline.Dialog.Section.separator />
      <Skyline.Dialog.Section.text>
        This is the content of a dialog that can be used to display bigger blocks of
        content
      </>
      <Skyline.Dialog.Section.separator />
      <Skyline.Dialog.Section.footer>
        <Skyline.Button.view ~on_click:%{Effect.Ignore}>
          Confirm
        </>
        <Skyline.Button.view ~on_click:%{Effect.Ignore} ~intent:%{`Secondary}>
          Cancel
        </>
      </>
    </>
  |}