Packages
mishka_chelekom
0.0.9
0.0.10-alpha.5
0.0.10-alpha.4
0.0.10-alpha.3
0.0.10-alpha.2
0.0.10-alpha.1
0.0.9
0.0.9-rc.2
0.0.9-rc.1
0.0.9-beta.5
0.0.9-beta.4
0.0.9-beta.3
0.0.9-beta.2
0.0.9-beta.1
0.0.9-alpha.20
0.0.9-alpha.18
0.0.9-alpha.17
0.0.9-alpha.16
0.0.9-alpha.15
0.0.9-alpha.14
0.0.9-alpha.13
0.0.9-alpha.12
0.0.9-alpha.11
0.0.9-alpha.10
0.0.9-alpha.9
0.0.9-alpha.8
0.0.9-alpha.7
0.0.9-alpha.6
0.0.9-alpha.5
0.0.9-alpha.4
0.0.9-alpha.3
0.0.9-alpha.2
0.0.9-alpha.1
0.0.8
0.0.8-rc.2
0.0.8-rc.1
0.0.8-beta.5
0.0.8-beta.4
0.0.8-beta.3
0.0.8-beta.2
0.0.8-beta.1
0.0.8-alpha.4
0.0.8-alpha.3
0.0.8-alpha.2
0.0.8-alpha.1
0.0.7
0.0.6
0.0.6-alpha.2
0.0.6-alpha.1
0.0.5
0.0.5-beta.2
0.0.5-beta.1
0.0.5-alpha.12
0.0.5-alpha.11
0.0.5-alpha.10
0.0.5-alpha.9
0.0.5-alpha.8
0.0.5-alpha.7
0.0.5-alpha.6
0.0.5-alpha.5
0.0.5-alpha.4
0.0.5-alpha.3
0.0.5-alpha.2
0.0.5-alpha.1
0.0.4
0.0.4-beta.3
0.0.4-beta.2
0.0.4-beta.1
0.0.4-alpha.9
0.0.4-alpha.8
0.0.4-alpha.7
0.0.4-alpha.6
0.0.4-alpha.5
0.0.4-alpha.4
0.0.4-alpha.3
0.0.4-alpha.2
0.0.4-alpha.1
0.0.3
0.0.3-alpha.3
0.0.3-alpha.2
0.0.3-alpha.1
0.0.2
0.0.2-rc.2
0.0.2-rc.1
0.0.2-beta.4
0.0.2-beta.3
0.0.2-beta.2
0.0.2-beta.1
0.0.2-alpha.3
0.0.2-alpha.2
0.0.2-alpha.1
0.0.1
Mishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView
Current section
Files
Jump to
Current section
Files
priv/headless/separator.eex
defmodule <%= @module %> do
@moduledoc """
Headless **separator** — a thematic divider between groups of content.
Renders a `<div role="separator">` (or `role="none"` when `decorative`) carrying
`aria-orientation`, with no JavaScript. Pass an inner block to render a labelled
separator (the label is centered structurally by your styles). Style via the
`chelekom-separator*` classes — this component ships **no** colors or spacing.
No formal WAI-ARIA APG pattern; follows the `separator` role:
https://www.w3.org/TR/wai-aria-1.2/#separator
"""
use Phoenix.Component
@doc type: :component
attr :id, :string, default: nil, doc: "Optional id"
attr :orientation, :string, default: "horizontal", values: ~w(horizontal vertical), doc: "Axis of the separator"
attr :decorative, :boolean, default: false, doc: "If true, the separator is purely visual (role=none)"
attr :class, :any, default: nil, doc: "Extra classes for the root"
attr :rest, :global
slot :inner_block, doc: "Optional label for a labelled separator"
def <%= @component_prefix %>separator(assigns) do
~H"""
<div
id={@id}
role={if @decorative, do: "none", else: "separator"}
aria-orientation={!@decorative && @orientation || nil}
data-orientation={@orientation}
class={["chelekom-separator", @class]}
{@rest}
>
<span :if={@inner_block != []} data-part="label" class="chelekom-separator__label">
{render_slot(@inner_block)}
</span>
</div>
"""
end
end