Packages

corex

0.1.0-alpha.31
0.1.2 0.1.1 0.1.0 0.1.0-rc.1 0.1.0-rc.0 0.1.0-beta.5 0.1.0-beta.4 0.1.0-beta.3 0.1.0-beta.2 0.1.0-beta.1 0.1.0-alpha.33 0.1.0-alpha.32 0.1.0-alpha.31 0.1.0-alpha.30 0.1.0-alpha.29 0.1.0-alpha.28 0.1.0-alpha.27 0.1.0-alpha.26 0.1.0-alpha.25 0.1.0-alpha.24 0.1.0-alpha.23 0.1.0-alpha.22 0.1.0-alpha.21 0.1.0-alpha.20 0.1.0-alpha.19 0.1.0-alpha.18 0.1.0-alpha.17 0.1.0-alpha.16 0.1.0-alpha.15 0.1.0-alpha.14 0.1.0-alpha.13 0.1.0-alpha.12 0.1.0-alpha.11 0.1.0-alpha.10 0.1.0-alpha.9 0.1.0-alpha.8 0.1.0-alpha.7 0.1.0-alpha.6 0.1.0-alpha.5 0.1.0-alpha.4 0.1.0-alpha.3 0.1.0-alpha.2 0.1.0-alpha.1

Accessible and unstyled UI components library written in Elixir and TypeScript that integrates Zag.js state machines into the Phoenix Framework.

HexDocs

Current section

Files

Jump to
Readme
43 Versions
5 Dependencies
Dependants
Files
Activity
corex lib components layout heading.ex
Raw

lib/components/layout/heading.ex 

defmodule Corex.Layout.Heading do

  @moduledoc ~S'''

  A layout heading component for page titles, subtitles, and actions.



  ## Examples



  ### Basic



  Use the `:title` and `:subtitle` slots for the main heading content. Use the `:actions` slot for buttons or links on the right.



  ```heex

  <.layout_heading>

    <:title>Page Title</:title>

    <:subtitle>Optional subtitle or context</:subtitle>

    <:actions>

      <.action phx-click="save">Save</.action>

    </:actions>

  </.layout_heading>

  ```



  ### Title and subtitle only



  Omit the `:actions` slot when no action buttons are needed.



  ```heex

  <.layout_heading>

    <:title>Settings</:title>

    <:subtitle>Manage your preferences</:subtitle>

  </.layout_heading>

  ```



  ## Styling



  Target elements with data attributes:



  - `[data-scope="layout-heading"][data-part="root"]` – root container

  - `[data-scope="layout-heading"][data-part="content"]` – title/subtitle wrapper

  - `[data-scope="layout-heading"][data-part="title"]` – main title

  - `[data-scope="layout-heading"][data-part="subtitle"]` – subtitle

  - `[data-scope="layout-heading"][data-part="actions"]` – actions wrapper

  '''

  use Phoenix.Component



  attr(:rest, :global)



  slot(:title)

  slot(:subtitle)

  slot(:actions)



  def layout_heading(assigns) do

    ~H"""

    <div data-scope="layout-heading" data-part="root" {@rest}>

      <div :if={@title != [] or @subtitle != []} data-scope="layout-heading" data-part="content">

        <h1 :if={@title != []} data-scope="layout-heading" data-part="title">{render_slot(@title)}</h1>

        <h2 :if={@subtitle != []} data-scope="layout-heading" data-part="subtitle">{render_slot(@subtitle)}</h2>

      </div>

      <div :if={@actions != []} data-scope="layout-heading" data-part="actions">

        {render_slot(@actions)}

      </div>

    </div>

    """

  end

end