Packages
phoenix_duskmoon
9.0.0-rc.1
9.9.2
9.9.1
9.9.0
9.8.0
9.7.1
9.7.0
9.6.4
9.6.3
9.6.2
9.6.1
9.6.0
9.5.4
9.5.3
9.5.2
9.5.1
9.5.0
9.4.3
9.4.2
9.4.1
9.4.0
9.3.0
9.2.0
9.1.4
9.1.3
9.1.1
9.1.1-rc.1
retired
9.0.1
9.0.0-rc.3
9.0.0-rc.2
9.0.0-rc.1
8.0.0
7.2.1
7.2.0
7.1.3
7.1.2
7.1.1
6.3.2
6.3.1
6.3.0
6.2.0
6.1.3
6.1.2
6.1.1
6.1.0
6.0.10
6.0.9
6.0.8
6.0.7
6.0.6
6.0.5
6.0.4
6.0.3
6.0.2
6.0.1
6.0.0
5.2.0-beta.5
5.2.0-beta.4
5.2.0-beta.3
5.2.0-beta.2
5.2.0-beta.1
5.1.0
5.0.6
5.0.5
5.0.4
5.0.3
5.0.2
5.0.1
5.0.0
4.6.6
4.6.5
4.6.4
4.6.3
4.6.2
4.6.1
4.6.0
4.5.2
4.5.1
4.5.0
4.4.4
4.4.3
4.4.2
4.4.1
4.4.0
4.3.2
4.3.1
4.3.0
4.2.0
4.1.1
4.1.0
4.0.0
Duskmoon UI component library for Phoenix LiveView
Current section
Files
Jump to
Current section
Files
lib/phoenix_duskmoon/component/layout/divider.ex
defmodule PhoenixDuskmoon.Component.Layout.Divider do
@moduledoc """
Divider component for separating content sections.
This is a HEEX component using CSS custom properties from the theme.
## Examples
<.dm_divider />
<.dm_divider>Section Title</.dm_divider>
<.dm_divider orientation="vertical" />
<.dm_divider variant="primary" style="dashed">
Settings
</.dm_divider>
<.dm_divider size="lg" variant="primary" />
## Attributes
* `orientation` - Divider orientation: horizontal, vertical (default: horizontal)
* `variant` - Divider color variant: base, primary, secondary, light, dark (default: base)
* `style` - Divider line style: solid, dashed, dotted (default: solid)
* `size` - Divider thickness: xs, sm, md, lg (default: md)
* `class` - Additional CSS classes
## Slots
* `:inner_block` - Optional content to display in the divider
"""
use Phoenix.Component
@doc """
Renders a divider for separating content sections.
## Examples
<.dm_divider />
<.dm_divider orientation="vertical" />
<.dm_divider variant="primary">Section</.dm_divider>
"""
@doc type: :component
attr(:orientation, :string,
default: "horizontal",
values: ["horizontal", "vertical"],
doc: "divider orientation"
)
attr(:variant, :string,
default: "base",
values: [
"base",
"primary",
"secondary",
"light",
"dark"
],
doc: "divider color variant"
)
attr(:style, :string,
default: "solid",
values: ["solid", "dashed", "dotted"],
doc: "line style"
)
attr(:size, :string,
default: "md",
values: ["xs", "sm", "md", "lg", "xl"],
doc: "divider spacing size"
)
attr(:gradient, :boolean, default: false, doc: "use gradient divider style")
attr(:inset, :string,
default: nil,
values: [nil, "left", "right", "both"],
doc: "inset the divider from edges"
)
attr(:text_position, :string,
default: nil,
values: [nil, "left", "right"],
doc: "position of text content within the divider"
)
attr(:class, :any, default: nil, doc: "additional CSS classes")
attr(:rest, :global)
slot(:inner_block, required: false, doc: "optional text content displayed within the divider")
def dm_divider(assigns) do
~H"""
<div
role="separator"
aria-orientation={@orientation}
class={[
"divider",
@orientation == "vertical" && "divider-vertical",
divider_variant(@variant),
@style != "solid" && "divider-#{@style}",
@size != "md" && "divider-#{@size}",
@gradient && "divider-gradient",
inset_class(@inset),
@inner_block != [] && "divider-text",
@inner_block != [] && text_position_class(@text_position),
@class
]}
{@rest}
>
<span :if={@inner_block != []} class="divider-text-content">
{render_slot(@inner_block)}
</span>
</div>
"""
end
defp divider_variant("primary"), do: "divider-primary"
defp divider_variant("secondary"), do: "divider-secondary"
defp divider_variant("light"), do: "divider-light"
defp divider_variant("dark"), do: "divider-dark"
defp divider_variant(_), do: nil
defp inset_class("left"), do: "divider-inset"
defp inset_class("right"), do: "divider-inset-right"
defp inset_class("both"), do: "divider-inset-both"
defp inset_class(_), do: nil
defp text_position_class("left"), do: "divider-text-left"
defp text_position_class("right"), do: "divider-text-right"
defp text_position_class(_), do: nil
end