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

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>
    <.icon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.icon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.icon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.icon 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)
  • open (:boolean) - Defaults to nil.
  • default_open (:boolean) - Defaults to false.
  • controlled (:boolean) - Defaults to false.
  • draggable (:boolean) - Defaults to true.
  • resizable (:boolean) - Defaults to true.
  • allow_overflow (:boolean) - Defaults to true.
  • close_on_escape (:boolean) - Defaults to true.
  • disabled (:boolean) - Defaults to false.
  • dir (:string) - Defaults to nil.Must be one of nil, "ltr", or "rtl".
  • size (:map) - Defaults to nil.
  • default_size (:map) - Defaults to nil.
  • position (:map) - Defaults to nil.
  • default_position (:map) - Defaults to nil.
  • min_size (:map) - Defaults to nil.
  • max_size (:map) - Defaults to nil.
  • persist_rect (:boolean) - Defaults to false.
  • grid_size (:integer) - Defaults to 1.
  • on_open_change (:string) - Defaults to nil.
  • on_open_change_client (:string) - Defaults to nil.
  • on_position_change (:string) - Defaults to nil.
  • on_size_change (:string) - Defaults to nil.
  • on_stage_change (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • open_trigger (required)
  • closed_trigger (required)
  • minimize_trigger (required)
  • maximize_trigger (required)
  • default_trigger (required)
  • close_trigger (required)
  • content (required)