Corex.FloatingPanel (Corex v0.1.0-alpha.30)

View Source

Phoenix implementation of Zag.js Floating Panel.

Examples

Basic

<.floating_panel id="my-floating-panel" default_open={false} class="floating-panel">
  <:open_trigger>Close panel</:open_trigger>
  <:closed_trigger>Open panel</:closed_trigger>
  <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>
  <:content>
    <p>
      Congue molestie ipsum gravida a. Sed ac eros luctus, cursus turpis
      non, pellentesque elit. Pellentesque sagittis fermentum.
    </p>
  </:content>
</.floating_panel>

Required slots: :open_trigger, :closed_trigger, :minimize_trigger, :maximize_trigger, :default_trigger, :close_trigger, :content.

Styling

Use data attributes to target elements:

[data-scope="floating-panel"][data-part="root"] {}
[data-scope="floating-panel"][data-part="trigger"] {}
[data-scope="floating-panel"][data-part="positioner"] {}
[data-scope="floating-panel"][data-part="content"] {}
[data-scope="floating-panel"][data-part="title"] {}
[data-scope="floating-panel"][data-part="header"] {}
[data-scope="floating-panel"][data-part="body"] {}
[data-scope="floating-panel"][data-part="drag-trigger"] {}
[data-scope="floating-panel"][data-part="resize-trigger"] {}
[data-scope="floating-panel"][data-part="close-trigger"] {}
[data-scope="floating-panel"][data-part="control"] {}
[data-scope="floating-panel"][data-part="stage-trigger"] {}

If you wish to use the default Corex styling, you can use the class floating-panel on the component. This requires to install Mix.Tasks.Corex.Design first and import the component css file.

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/floating-panel.css";

You can then use modifiers

<.floating_panel class="floating-panel floating-panel--accent floating-panel--lg">
</.floating_panel>

Learn more about modifiers and Corex Design

Summary

Components

floating_panel(assigns)

Components

floating_panel(assigns)

Attributes

  • id (:string) - The id of the floating panel.
  • open (:boolean) - Controlled open state when controlled is true. Defaults to nil.
  • default_open (:boolean) - Initial open state when uncontrolled. Defaults to false.
  • controlled (:boolean) - Whether open state is controlled externally. Defaults to false.
  • draggable (:boolean) - Whether the panel can be dragged. Defaults to true.
  • resizable (:boolean) - Whether the panel can be resized. Defaults to true.
  • allow_overflow (:boolean) - Whether content can overflow. Defaults to true.
  • close_on_escape (:boolean) - Whether Escape closes the panel. Defaults to true.
  • disabled (:boolean) - Whether the panel is disabled. Defaults to false.
  • dir (:string) - Text direction. Defaults to nil. Must be one of nil, "ltr", or "rtl".
  • size (:map) - Controlled size when controlled. Defaults to nil.
  • default_size (:map) - Initial size when uncontrolled. Defaults to nil.
  • position (:map) - Controlled position when controlled. Defaults to nil.
  • default_position (:map) - Initial position when uncontrolled. Defaults to nil.
  • min_size (:map) - Minimum size constraints. Defaults to nil.
  • max_size (:map) - Maximum size constraints. Defaults to nil.
  • persist_rect (:boolean) - Whether to persist position and size. Defaults to false.
  • grid_size (:integer) - Grid snapping size for drag and resize. Defaults to 1.
  • on_open_change (:string) - Server event when open state changes. Defaults to nil.
  • on_open_change_client (:string) - Client event when open state changes. Defaults to nil.
  • on_position_change (:string) - Server event when position changes. Defaults to nil.
  • on_size_change (:string) - Server event when size changes. Defaults to nil.
  • on_stage_change (:string) - Server event when stage (minimized/maximized) changes. Defaults to nil.
  • translation (Corex.FloatingPanel.Translation) - Override translatable strings. Defaults to nil.
  • Global attributes are accepted.

Slots

  • open_trigger (required) - Accepts attributes:
    • class (:string)
  • closed_trigger (required) - Accepts attributes:
    • class (:string)
  • minimize_trigger (required) - Accepts attributes:
    • class (:string)
  • maximize_trigger (required) - Accepts attributes:
    • class (:string)
  • default_trigger (required) - Accepts attributes:
    • class (:string)
  • close_trigger (required) - Accepts attributes:
    • class (:string)
  • content (required) - Accepts attributes:
    • class (:string)