LoopOS UI v1.1.29.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="flex items-center justify-center w-full h-full absolute">
  <div data-controller="popover" data-popover-open-value="false" data-popover-rotate-toggle-value="false" class="lui-popover">
    <button popovertarget="popover-a2f8c39196d7e1ebc1a3-target" data-controller="popover-toggle" data-popover-target="toggle" data-popover-toggle-position-value="bottom_left" data-popover-toggle-anchor-value="top_left" data-popover-toggle-on-close-value="" data-popover-toggle-rotate-value="false" type="button" class="lui-popover-toggle-wrapper">
      <span class="lui-button lui-button--size-default lui-button--neutral--primary w-fit w-fit relative" data-controller="lui--button popover-toggle" data-popover-target="toggle" data-popover-toggle-position-value="bottom_left" data-popover-toggle-anchor-value="top_left" data-popover-toggle-on-close-value="" data-popover-toggle-rotate-value="false" popovertarget="popover-a2f8c39196d7e1ebc1a3-target">
        <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
          Click me
        </span>          
        <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
          <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 16px;">
            progress_activity
          </i>
        </div>
      </span>
    </button>  
    <div id="popover-a2f8c39196d7e1ebc1a3-target" popover="auto" data-popover-target="popover" class="pointer-events-none w-full h-full bg-transparent overflow-hidden">
      <div class="bg-white lui-popover-inner absolute pointer-events-auto">
        <div class="bg-gray-700 p-4 rounded-sm primary-10-bold">
          <p>Content</p>
        </div>
      </div>
    </div>
  </div>
</div>

Popover

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
2
3
4
5
6
7
8
9
10
<div class="flex items-center justify-center w-full h-full absolute">
    <%= render LooposUi::Popover.new(**preview_params) do |popover| %>
        <% popover.with_toggle_button(text: "Click me") %>
        <% popover.with_target do %>
            <div class="bg-gray-700 p-4 rounded-sm primary-10-bold">
                <p>Content</p>
            </div>
        <% end %>
    <% end %>
</div>

No notes provided.

Param Description Input

—

—

—

Description

The Popover component is a container that can be toggled to show or hide its content. It is commonly used in conjunction with the ModelAssociationOverlay component. The content will be hidden by default, and when the user clicks on the button, the content will be shown.

Arguments

Property Default Description
id Generated Probably wont need to set it manually
position :bottom_left The position where the popover will be shown, relative to the toggle button.
mode :auto The mode of the popover. Can be :auto or :manual. If :auto, the popover will be shown on click. More notes bellow.
anchor :top_left The anchor for the target that will be attached to position.
anchor_selector nil The anchor element where the popover will be positioned. Defaults to the toggle slot
on_close nil Can be nil or :refresh. If :refresh, will refresh the page on close (with turbo target lui-main-layout).
open false Default state
rotate_toggle false Animates the toggle by rotating it by 180º when opening/closing the popover

Position values:

  • :top_left
  • :top_center
  • :top_right
  • :bottom_left (default)
  • :bottom_center
  • :bottom_right

Anchor values:

  • :top_left (default)
  • :top_right
  • :bottom_left
  • :bottom_right

Manual mode

When in manual mode, you're responsible for showing and hiding the popover. You can do so calling toggle, show and hide methods on the component instance.

Eg:

Slots

toggle - Slot for the toggle button. It is a required slot. It's a typed slot, you have two options:

  • with_toggle_button: Easy way, uses the Button component to create the toggle button.

  • with_custom_toggle: Hard way. If you use this, somewhere in your custom toggle must be button tag with the attributes provided by the Popover's component toggle_attributes instance method. If you want to use a LooposUI button, use button_attributes instead. Example:

    <%= render LooposUi::Popover.new do |popover| >
        <% popover.with_custom_toggle do >
            <%= tag.button(..., **popover.toggle_attributes) %>
            <%# OR %>
            <%= tag.input(..., **popover.toggle_attributes) %>
            <%# OR %>
            <%= render LooposUi::Button.new(..., **popover.button_attributes) %>
        <% end %>
    <% end %>

target - Any content you want to show when the Popover is open. It is a required slot.