Packages

daisy_ui_components

0.9.0
0.9.7 0.9.6 0.9.5 0.9.4 0.9.3 0.9.2 0.9.1 0.9.0 0.8.7 0.8.7-rc.0 0.8.6 0.8.5 0.8.4 0.8.3 0.8.2 0.8.1 0.8.0 0.7.6 0.7.5 0.7.4 0.7.3 0.7.2 0.7.1 0.7.0 0.6.0 0.5.0 0.4.3 0.4.2 0.4.1 0.4.0 0.3.0 0.2.1 0.2.0 0.1.7 0.1.6 0.1.5 0.1.4 0.1.3 0.1.2 0.1.1 0.1.0

DaisyUI component library for LiveView

HexDocs

Current section

Files

Jump to
Readme
41 Versions
1 Dependency
Dependants
Files
Activity
daisy_ui_components lib daisy_ui_components collapse.ex
Raw

lib/daisy_ui_components/collapse.ex 

defmodule DaisyUIComponents.Collapse do

  @moduledoc """

  Collapse component



  https://daisyui.com/components/collapse/

  """



  use DaisyUIComponents, :component



  @doc """

  Renders a Collapse.



  ## Examples



      <.collapse checkbox>

        <:title>Title</:title>

        Content goes here

      </.collapse>

  """



  attr :class, :any, default: nil



  attr :checkbox, :boolean,

    default: false,

    doc:

      "This collapse works with checkbox instead of focus. It needs to get clicked again to get closed."



  attr :arrow, :boolean, default: false

  attr :plus, :boolean, default: false

  attr :open, :boolean, default: false

  attr :close, :boolean, default: false

  attr :rest, :global



  slot :title, required: true

  slot :inner_block, required: true



  def collapse(assigns) do

    assigns =

      assign(

        assigns,

        :class,

        classes([

          "collapse",

          maybe_add_class(assigns[:arrow], "collapse-arrow"),

          maybe_add_class(assigns[:plus], "collapse-plus"),

          maybe_add_class(assigns[:open], "collapse-open"),

          maybe_add_class(assigns[:close], "collapse-close"),

          assigns.class

        ])

      )



    ~H"""

    <div tabindex="0" class={@class} {@rest}>

      <input :if={@checkbox} type="checkbox" />



      <div class="collapse-title">

        {render_slot(@title)}

      </div>



      <div class="collapse-content">

        {render_slot(@inner_block)}

      </div>

    </div>

    """

  end

end