phoenix-duskmoon-ui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Phoenix Duskmoon UI

Elixir component library providing 80+ LiveView HEEX components that render as HTML Custom Elements (

<el-dm-*>

) styled by

@duskmoon-dev/core

Version: 9.0.1

这是一个为Elixir提供的组件库，包含80+个LiveView HEEX组件，这些组件会渲染为由

@duskmoon-dev/core

设置样式的HTML自定义元素（

<el-dm-*>

）。

版本：9.0.1

Installation

安装

elixir

undefined

elixir

undefined

mix.exs

{:phoenix_duskmoon, "~> 9.0"}


```bash
bun add @duskmoon-dev/core @duskmoon-dev/elements @duskmoon-dev/css-art @duskmoon-dev/art-elements

{:phoenix_duskmoon, "~> 9.0"}


```bash
bun add @duskmoon-dev/core @duskmoon-dev/elements @duskmoon-dev/css-art @duskmoon-dev/art-elements

Setup

配置

1. Import components in

app_web.ex

1. 在

app_web.ex

中导入组件

elixir

defp html_helpers do
  quote do
    use PhoenixDuskmoon.Component    # all dm_* UI components
    use PhoenixDuskmoon.ArtComponent # all dm_art_* decorative components
  end
end

elixir

defp html_helpers do
  quote do
    use PhoenixDuskmoon.Component    # 所有dm_* UI组件
    use PhoenixDuskmoon.ArtComponent # 所有dm_art_*装饰组件
  end
end

2. CSS (

assets/css/app.css

)

2. CSS（

assets/css/app.css

）

css

@import "tailwindcss";
@plugin "@duskmoon-dev/core/plugin";
@import "@duskmoon-dev/core/themes/sunshine";
@import "@duskmoon-dev/core/themes/moonlight";
@import "@duskmoon-dev/core/components";

For custom elements to inherit theme colors, include the element-theme-bridge (ships with the package or copy from the repo's

assets/css/element-theme-bridge.css

For CSS art effects, import each CSS art stylesheet you need:

css

@import "@duskmoon-dev/css-art/eclipse.css";
@import "@duskmoon-dev/css-art/snow.css";
/* ... etc */

css

@import "tailwindcss";
@plugin "@duskmoon-dev/core/plugin";
@import "@duskmoon-dev/core/themes/sunshine";
@import "@duskmoon-dev/core/themes/moonlight";
@import "@duskmoon-dev/core/components";

为了让自定义元素继承主题颜色，请引入element-theme-bridge（随包提供，或从仓库的

assets/css/element-theme-bridge.css

复制）。

如需CSS艺术效果，请导入你需要的每个CSS艺术样式表：

css

@import "@duskmoon-dev/css-art/eclipse.css";
@import "@duskmoon-dev/css-art/snow.css";
/* ... 等等 */

3. JavaScript hooks (

assets/js/app.js

)

3. JavaScript钩子（

assets/js/app.js

）

javascript

import { LiveSocket } from "phoenix_live_view";
import * as DuskmoonHooks from "phoenix_duskmoon/hooks";

let liveSocket = new LiveSocket("/live", Socket, {
  params: { _csrf_token: csrfToken },
  hooks: DuskmoonHooks
});

Merge with your own hooks:

hooks: { ...DuskmoonHooks, ...MyHooks }

javascript

import { LiveSocket } from "phoenix_live_view";
import * as DuskmoonHooks from "phoenix_duskmoon/hooks";

let liveSocket = new LiveSocket("/live", Socket, {
  params: { _csrf_token: csrfToken },
  hooks: DuskmoonHooks
});

与你自己的钩子合并：

hooks: { ...DuskmoonHooks, ...MyHooks }

。

4. Register custom elements

4. 注册自定义元素

javascript

import "@duskmoon-dev/el-button/register";
import "@duskmoon-dev/el-card/register";
// ... register each el-* package you use

Without registration,

<el-dm-*>

content is invisible.

javascript

import "@duskmoon-dev/el-button/register";
import "@duskmoon-dev/el-card/register";
// ... 注册你使用的每个el-*包

如果不注册，

<el-dm-*>

内容将不可见。

Architecture (v9)

架构（v9）

HEEX Components (dm_btn, dm_card)
       |
Custom Elements (<el-dm-button>, <el-dm-card>)
       |
@duskmoon-dev/core (CSS variables, design tokens)

CSS class naming (BEM):

dm-component

dm-component--variant

dm-component__element

Color mapping:

"accent"

in component APIs maps to

"tertiary"

in CSS tokens.

HEEX Components (dm_btn, dm_card)
       |
Custom Elements (<el-dm-button>, <el-dm-card>)
       |
@duskmoon-dev/core (CSS variables, design tokens)

CSS类命名（BEM规范）：

dm-component

dm-component--variant

dm-component__element

颜色映射： 组件API中的

"accent"

对应CSS令牌中的

"tertiary"

。

Hooks Reference

钩子参考

Hook	Used by	Purpose
`WebComponentHook`	Any `el-dm-` with `phx-` events	Bridges custom element events to LiveView
`FormElementHook`	Form `el-dm-*` inputs	Adds `phx-feedback-for` support
`ThemeSwitcher`	`dm_theme_switcher`	Theme toggle + localStorage persistence
`Spotlight`	Spotlight search component	Cmd/Ctrl+K keyboard shortcut
`PageHeader`	`dm_page_header`	IntersectionObserver for scroll-based nav

钩子	适用组件	用途
`WebComponentHook`	所有带有 `phx-` 事件的 `el-dm-` 组件	将自定义元素事件桥接到LiveView
`FormElementHook`	表单类 `el-dm-*` 输入组件	支持 `phx-feedback-for`
`ThemeSwitcher`	`dm_theme_switcher`	主题切换 + localStorage持久化
`Spotlight`	Spotlight搜索组件	Cmd/Ctrl+K键盘快捷键
`PageHeader`	`dm_page_header`	基于IntersectionObserver的滚动导航

Component Quick Reference

组件快速参考

All components use

dm_

prefix. Common attributes across most components:

```
id
```
,
```
class
```
— standard HTML
```
variant
```
— visual style (values vary per component)
```
color
```
— primary | secondary | tertiary | accent | info | success | warning | error
```
size
```
— xs | sm | md | lg (varies per component)
```
disabled
```
— boolean
```
rest
```
— passes through global HTML attributes

For full component catalog with all attributes and slots, see references/components.md.

所有组件均使用

dm_

前缀。大多数组件的通用属性：

```
id
```
,
```
class
```
— 标准HTML属性
```
variant
```
— 视觉样式（值因组件而异）
```
color
```
— primary | secondary | tertiary | accent | info | success | warning | error
```
size
```
— xs | sm | md | lg（因组件而异）
```
disabled
```
— 布尔值
```
rest
```
— 传递全局HTML属性

如需包含所有属性和插槽的完整组件目录，请查看references/components.md。

Action

操作组件

Function	Module	Description
`dm_btn`	Action.Button	Button with variants, confirm dialog, noise effect
`dm_link`	Action.Link	LiveView-aware link (navigate/patch/href)
`dm_dropdown`	Action.Dropdown	Popover-based dropdown with trigger + content slots
`dm_menu` / `dm_menu_item`	Action.Menu	Anchored menu with placement control
`dm_toggle_group`	Action.Toggle	Toggle button group (segmented, chip, etc.)

函数	模块	描述
`dm_btn`	Action.Button	带有多种变体、确认对话框、噪点效果的按钮
`dm_link`	Action.Link	支持LiveView的链接（navigate/patch/href）
`dm_dropdown`	Action.Dropdown	基于弹出框的下拉菜单，包含触发器和内容插槽
`dm_menu` / `dm_menu_item`	Action.Menu	可控制位置的锚定菜单
`dm_toggle_group`	Action.Toggle	切换按钮组（分段式、芯片式等）

Data Display

数据展示

Function	Module	Description
`dm_accordion`	DataDisplay.Accordion	Multi-panel expand/collapse
`dm_avatar`	DataDisplay.Avatar	User avatar with status indicators
`dm_badge`	DataDisplay.Badge	Label badge with color variants
`dm_card` / `dm_async_card`	DataDisplay.Card	Content card with title/action slots
`dm_chip`	DataDisplay.Chip	Deletable chip/tag
`dm_collapse` / `dm_collapse_group`	DataDisplay.Collapse	Single collapsible panel
`dm_flash` / `dm_flash_group`	DataDisplay.Flash	Flash messages
`dm_list`	DataDisplay.List	Structured list with icons and subtitles
`dm_markdown`	DataDisplay.Markdown	Markdown renderer with syntax highlighting
`dm_pagination` / `dm_pagination_thin`	DataDisplay.Pagination	Page navigation
`dm_popover`	DataDisplay.Popover	Contextual overlay with trigger
`dm_progress`	DataDisplay.Progress	Linear/circular progress
`dm_skeleton_*`	DataDisplay.Skeleton	8 skeleton variants (text, avatar, card, table, list, form, comment, base)
`dm_stat`	DataDisplay.Stat	Stat display with icon slot
`dm_table`	DataDisplay.Table	Data table with streaming support
`dm_timeline`	DataDisplay.Timeline	Vertical/horizontal timeline
`dm_tooltip`	DataDisplay.Tooltip	Tooltip wrapper

函数	模块	描述
`dm_accordion`	DataDisplay.Accordion	多面板展开/折叠组件
`dm_avatar`	DataDisplay.Avatar	带状态指示器的用户头像
`dm_badge`	DataDisplay.Badge	带颜色变体的标签徽章
`dm_card` / `dm_async_card`	DataDisplay.Card	带标题/操作插槽的内容卡片
`dm_chip`	DataDisplay.Chip	可删除的标签/芯片组件
`dm_collapse` / `dm_collapse_group`	DataDisplay.Collapse	单个可折叠面板
`dm_flash` / `dm_flash_group`	DataDisplay.Flash	提示消息组件
`dm_list`	DataDisplay.List	带图标和副标题的结构化列表
`dm_markdown`	DataDisplay.Markdown	带语法高亮的Markdown渲染器
`dm_pagination` / `dm_pagination_thin`	DataDisplay.Pagination	分页导航组件
`dm_popover`	DataDisplay.Popover	带触发器的上下文浮层
`dm_progress`	DataDisplay.Progress	线性/圆形进度条
`dm_skeleton_*`	DataDisplay.Skeleton	8种骨架屏变体（文本、头像、卡片、表格、列表、表单、评论、基础款）
`dm_stat`	DataDisplay.Stat	带图标插槽的统计展示组件
`dm_table`	DataDisplay.Table	支持流式加载的数据表格
`dm_timeline`	DataDisplay.Timeline	垂直/水平时间线
`dm_tooltip`	DataDisplay.Tooltip	提示框包裹组件

Data Entry

数据输入

Function	Module	Description
`dm_form`	DataEntry.Form	Form container + layout helpers ( `dm_label` , `dm_error` , `dm_alert` , `dm_fieldset` , `dm_form_row` , `dm_form_grid` , `dm_form_section` , `dm_form_divider` , `dm_form_inline` , `dm_form_hint` , `dm_form_counter` )
`dm_input`	DataEntry.Input	Universal input (30+ types via `type` attr)
`dm_compact_input`	DataEntry.CompactInput	Compact variant of input
`dm_checkbox`	DataEntry.Checkbox	Checkbox with label
`dm_radio`	DataEntry.Radio	Radio button with label
`dm_select`	DataEntry.Select	Select dropdown
`dm_switch`	DataEntry.Switch	Toggle switch
`dm_slider`	DataEntry.Slider	Range slider
`dm_textarea`	DataEntry.Textarea	Multi-line text input
`dm_rating`	DataEntry.Rating	Star rating
`dm_segment_control`	DataEntry.SegmentControl	Segmented control
`dm_multi_select`	DataEntry.MultiSelect	Multi-select with tags
`dm_autocomplete`	DataEntry.Autocomplete	Autocomplete input
`dm_otp_input`	DataEntry.OtpInput	OTP code input
`dm_pin_input`	DataEntry.PinInput	PIN input
`dm_file_upload`	DataEntry.FileUpload	File upload area
`dm_time_input`	DataEntry.TimeInput	Time picker
`dm_cascader`	DataEntry.Cascader	Cascading select
`dm_tree_select`	DataEntry.TreeSelect	Tree-structured select
`dm_markdown_input`	DataEntry.MarkdownInput	Markdown editor with preview

函数	模块	描述
`dm_form`	DataEntry.Form	表单容器 + 布局辅助组件（ `dm_label` , `dm_error` , `dm_alert` , `dm_fieldset` , `dm_form_row` , `dm_form_grid` , `dm_form_section` , `dm_form_divider` , `dm_form_inline` , `dm_form_hint` , `dm_form_counter` ）
`dm_input`	DataEntry.Input	通用输入组件（通过 `type` 属性支持30+种类型）
`dm_compact_input`	DataEntry.CompactInput	紧凑型输入组件
`dm_checkbox`	DataEntry.Checkbox	带标签的复选框
`dm_radio`	DataEntry.Radio	带标签的单选按钮
`dm_select`	DataEntry.Select	下拉选择器
`dm_switch`	DataEntry.Switch	切换开关
`dm_slider`	DataEntry.Slider	范围滑块
`dm_textarea`	DataEntry.Textarea	多行文本输入框
`dm_rating`	DataEntry.Rating	星级评分组件
`dm_segment_control`	DataEntry.SegmentControl	分段控制器
`dm_multi_select`	DataEntry.MultiSelect	带标签的多选组件
`dm_autocomplete`	DataEntry.Autocomplete	自动补全输入框
`dm_otp_input`	DataEntry.OtpInput	OTP验证码输入框
`dm_pin_input`	DataEntry.PinInput	PIN码输入框
`dm_file_upload`	DataEntry.FileUpload	文件上传区域
`dm_time_input`	DataEntry.TimeInput	时间选择器
`dm_cascader`	DataEntry.Cascader	级联选择器
`dm_tree_select`	DataEntry.TreeSelect	树形结构选择器
`dm_markdown_input`	DataEntry.MarkdownInput	带预览的Markdown编辑器

Feedback

反馈组件

Function	Module	Description
`dm_modal`	Feedback.Dialog	Modal dialog with trigger/title/body/footer slots
`dm_loading_spinner` / `dm_loading_ex`	Feedback.Loading	Loading indicators
`dm_toast` / `dm_toast_container`	Feedback.Toast	Toast notifications
`dm_snackbar` / `dm_snackbar_container`	Feedback.Snackbar	Snackbar messages

函数	模块	描述
`dm_modal`	Feedback.Dialog	带触发器/标题/主体/页脚插槽的模态对话框
`dm_loading_spinner` / `dm_loading_ex`	Feedback.Loading	加载指示器
`dm_toast` / `dm_toast_container`	Feedback.Toast	通知提示框
`dm_snackbar` / `dm_snackbar_container`	Feedback.Snackbar	底部消息条

Navigation

导航组件

Function	Module	Description
`dm_actionbar`	Navigation.Actionbar	Action toolbar with left/right slots
`dm_appbar` / `dm_simple_appbar`	Navigation.Appbar	Top navigation bar
`dm_bottom_nav`	Navigation.BottomNav	Mobile bottom navigation
`dm_breadcrumb`	Navigation.Breadcrumb	Breadcrumb trail
`dm_left_menu` / `dm_left_menu_group`	Navigation.LeftMenu	Sidebar menu
`dm_navbar`	Navigation.Navbar	Horizontal navbar (start/center/end)
`dm_nested_menu` / `dm_nested_menu_item`	Navigation.NestedMenu	Nested collapsible menu
`dm_page_footer`	Navigation.PageFooter	Page footer with sections
`dm_page_header`	Navigation.PageHeader	Page header with scroll-aware nav (needs hook)
`dm_stepper`	Navigation.Stepper	CSS-only stepper
`dm_steps`	Navigation.Steps	Stepper via custom element
`dm_tab`	Navigation.Tab	Tabbed content

函数	模块	描述
`dm_actionbar`	Navigation.Actionbar	带左侧/右侧插槽的操作工具栏
`dm_appbar` / `dm_simple_appbar`	Navigation.Appbar	顶部导航栏
`dm_bottom_nav`	Navigation.BottomNav	移动端底部导航
`dm_breadcrumb`	Navigation.Breadcrumb	面包屑导航
`dm_left_menu` / `dm_left_menu_group`	Navigation.LeftMenu	侧边栏菜单
`dm_navbar`	Navigation.Navbar	水平导航栏（左侧/中间/右侧）
`dm_nested_menu` / `dm_nested_menu_item`	Navigation.NestedMenu	嵌套可折叠菜单
`dm_page_footer`	Navigation.PageFooter	带分区的页面页脚
`dm_page_header`	Navigation.PageHeader	支持滚动感知的页面头部（需要钩子）
`dm_stepper`	Navigation.Stepper	纯CSS步骤指示器
`dm_steps`	Navigation.Steps	基于自定义元素的步骤指示器
`dm_tab`	Navigation.Tab	标签页内容切换组件

Layout

布局组件

Function	Module	Description
`dm_bottom_sheet`	Layout.BottomSheet	Bottom sheet overlay
`dm_divider`	Layout.Divider	Horizontal/vertical divider
`dm_drawer`	Layout.Drawer	Slide-out drawer panel
`dm_theme_switcher`	Layout.ThemeSwitcher	Theme toggle (needs hook)

函数	模块	描述
`dm_bottom_sheet`	Layout.BottomSheet	底部弹出层
`dm_divider`	Layout.Divider	水平/垂直分隔线
`dm_drawer`	Layout.Drawer	滑出式抽屉面板
`dm_theme_switcher`	Layout.ThemeSwitcher	主题切换器（需要钩子）

Icon

图标组件

Function	Module	Description
`dm_mdi`	Icon.Icons	Material Design Icons (7000+ icons)
`dm_bsi`	Icon.Icons	Bootstrap Icons (2000+ icons)

函数	模块	描述
`dm_mdi`	Icon.Icons	Material Design Icons（7000+图标）
`dm_bsi`	Icon.Icons	Bootstrap Icons（2000+图标）

CSS Art (decorative)

CSS艺术（装饰性）

All art components require

id

(required string) and accept

class

rest

global attrs. Import via

use PhoenixDuskmoon.ArtComponent

Function	Module	Description
`dm_art_atom`	ArtComponent.Atom	Animated atom
`dm_art_cat_stargazer`	ArtComponent.CatStargazer	Cat stargazer scene
`dm_art_circular_gallery`	ArtComponent.CircularGallery	Circular gallery
`dm_art_color_spin`	ArtComponent.ColorSpin	Color spin effect
`dm_art_eclipse`	ArtComponent.Eclipse	Animated eclipse
`dm_art_flower_animation`	ArtComponent.FlowerAnimation	Flower animation
`dm_art_gemini_input`	ArtComponent.GeminiInput	Gemini-style input (size, placeholder)
`dm_art_moon`	ArtComponent.Moon	Moon scene
`dm_art_mountain`	ArtComponent.Mountain	Mountain landscape
`dm_art_plasma_ball`	ArtComponent.PlasmaBall	Interactive plasma ball
`dm_art_snow`	ArtComponent.Snow	Falling snowflakes (unicode, fall)
`dm_art_sun`	ArtComponent.Sun	Sun scene
`dm_art_synthwave_starfield`	ArtComponent.SynthwaveStarfield	Synthwave starfield

所有艺术组件都需要

id

（必填字符串），并支持

class

rest

全局属性。需通过

use PhoenixDuskmoon.ArtComponent

导入。

函数	模块	描述
`dm_art_atom`	ArtComponent.Atom	动画原子效果
`dm_art_cat_stargazer`	ArtComponent.CatStargazer	猫咪观星场景
`dm_art_circular_gallery`	ArtComponent.CircularGallery	圆形画廊效果
`dm_art_color_spin`	ArtComponent.ColorSpin	颜色旋转效果
`dm_art_eclipse`	ArtComponent.Eclipse	动画日食效果
`dm_art_flower_animation`	ArtComponent.FlowerAnimation	花朵动画效果
`dm_art_gemini_input`	ArtComponent.GeminiInput	Gemini风格输入框（支持尺寸、占位符）
`dm_art_moon`	ArtComponent.Moon	月亮场景效果
`dm_art_mountain`	ArtComponent.Mountain	山脉景观效果
`dm_art_plasma_ball`	ArtComponent.PlasmaBall	交互式等离子球效果
`dm_art_snow`	ArtComponent.Snow	雪花飘落效果（Unicode字符、下落动画）
`dm_art_sun`	ArtComponent.Sun	太阳场景效果
`dm_art_synthwave_starfield`	ArtComponent.SynthwaveStarfield	合成波星空效果

Usage Examples

使用示例

heex

<%!-- Button with variant --%>
<.dm_btn variant="primary" size="md">Save</.dm_btn>
<.dm_btn variant="error" shape="circle" loading={@saving}>X</.dm_btn>

<%!-- Button with confirmation dialog --%>
<.dm_btn confirm="Delete this item?" phx-click="delete" phx-value-id={@item.id}>
  Delete
</.dm_btn>

<%!-- Card with slots --%>
<.dm_card variant="bordered">
  <:title>Dashboard</:title>
  Content here
  <:action><.dm_btn variant="primary">View</.dm_btn></:action>
</.dm_card>

<%!-- Icons --%>
<.dm_mdi name="home" class="w-6 h-6" />
<.dm_bsi name="house" class="w-5 h-5" />

<%!-- Form with inputs --%>
<.dm_form for={@form} phx-submit="save">
  <.dm_input field={@form[:name]} label="Name" />
  <.dm_select field={@form[:role]} label="Role" options={[{"admin", "Admin"}, {"user", "User"}]} />
  <.dm_switch field={@form[:active]} label="Active" />
  <:actions>
    <.dm_btn variant="primary" type="submit">Save</.dm_btn>
  </:actions>
</.dm_form>

<%!-- Navigation --%>
<.dm_appbar title="My App" title_to={~p"/"}>
  <:menu to={~p"/dashboard"} active={@active == :dashboard}>Dashboard</:menu>
  <:menu to={~p"/settings"}>Settings</:menu>
  <:user_profile>
    <.dm_avatar name={@current_user.name} size="sm" />
  </:user_profile>
</.dm_appbar>

<%!-- Theme switcher (requires ThemeSwitcher hook) --%>
<.dm_theme_switcher id="theme-toggle" theme={@theme} />

<%!-- Tabs --%>
<.dm_tab id="my-tabs" active_tab_index={0}>
  <:tab name="overview">Overview</:tab>
  <:tab name="details">Details</:tab>
  <:tab_content name="overview">Overview content</:tab_content>
  <:tab_content name="details">Details content</:tab_content>
</.dm_tab>

<%!-- Modal --%>
<.dm_modal id="confirm-modal">
  <:trigger><.dm_btn>Open</.dm_btn></:trigger>
  <:title>Confirm</:title>
  <:body>Are you sure?</:body>
  <:footer><.dm_btn variant="primary" phx-click="confirm">Yes</.dm_btn></:footer>
</.dm_modal>

<%!-- Art components --%>
<.dm_art_snow id="snow-1" />
<.dm_art_eclipse id="eclipse-1" />
<.dm_art_gemini_input id="ai-input" size="lg" placeholder="Ask anything..." />

heex

<%!-- 带变体的按钮 --%>
<.dm_btn variant="primary" size="md">保存</.dm_btn>
<.dm_btn variant="error" shape="circle" loading={@saving}>X</.dm_btn>

<%!-- 带确认对话框的按钮 --%>
<.dm_btn confirm="确定要删除此项目吗？" phx-click="delete" phx-value-id={@item.id}>
  删除
</.dm_btn>

<%!-- 带插槽的卡片 --%>
<.dm_card variant="bordered">
  <:title>仪表盘</:title>
  内容区域
  <:action><.dm_btn variant="primary">查看</.dm_btn></:action>
</.dm_card>

<%!-- 图标 --%>
<.dm_mdi name="home" class="w-6 h-6" />
<.dm_bsi name="house" class="w-5 h-5" />

<%!-- 带输入组件的表单 --%>
<.dm_form for={@form} phx-submit="save">
  <.dm_input field={@form[:name]} label="姓名" />
  <.dm_select field={@form[:role]} label="角色" options={[{"admin", "管理员"}, {"user", "普通用户"}]} />
  <.dm_switch field={@form[:active]} label="启用" />
  <:actions>
    <.dm_btn variant="primary" type="submit">保存</.dm_btn>
  </:actions>
</.dm_form>

<%!-- 导航栏 --%>
<.dm_appbar title="我的应用" title_to={~p"/"}>
  <:menu to={~p"/dashboard"} active={@active == :dashboard}>仪表盘</:menu>
  <:menu to={~p"/settings"}>设置</:menu>
  <:user_profile>
    <.dm_avatar name={@current_user.name} size="sm" />
  </:user_profile>
</.dm_appbar>

<%!-- 主题切换器（需要ThemeSwitcher钩子） --%>
<.dm_theme_switcher id="theme-toggle" theme={@theme} />

<%!-- 标签页 --%>
<.dm_tab id="my-tabs" active_tab_index={0}>
  <:tab name="overview">概览</:tab>
  <:tab name="details">详情</:tab>
  <:tab_content name="overview">概览内容</:tab_content>
  <:tab_content name="details">详情内容</:tab_content>
</.dm_tab>

<%!-- 模态框 --%>
<.dm_modal id="confirm-modal">
  <:trigger><.dm_btn>打开</.dm_btn></:trigger>
  <:title>确认操作</:title>
  <:body>你确定要执行此操作吗？</:body>
  <:footer><.dm_btn variant="primary" phx-click="confirm">确定</.dm_btn></:footer>
</.dm_modal>

<%!-- 艺术组件 --%>
<.dm_art_snow id="snow-1" />
<.dm_art_eclipse id="eclipse-1" />
<.dm_art_gemini_input id="ai-input" size="lg" placeholder="有什么想问的..." />

Package Exports

包导出

Import path	File
`phoenix_duskmoon`	`priv/static/phoenix_duskmoon.js`
`phoenix_duskmoon/hooks`	`assets/js/hooks/index.js`
`phoenix_duskmoon/css`	`priv/static/phoenix_duskmoon.css`
`phoenix_duskmoon/svg/mdi/*.svg`	`priv/mdi/svg/*.svg`
`phoenix_duskmoon/svg/bsi/*.svg`	`priv/bsi/svg/*.svg`

导入路径	文件
`phoenix_duskmoon`	`priv/static/phoenix_duskmoon.js`
`phoenix_duskmoon/hooks`	`assets/js/hooks/index.js`
`phoenix_duskmoon/css`	`priv/static/phoenix_duskmoon.css`
`phoenix_duskmoon/svg/mdi/*.svg`	`priv/mdi/svg/*.svg`
`phoenix_duskmoon/svg/bsi/*.svg`	`priv/bsi/svg/*.svg`

phoenix-duskmoon-ui

Original

Translation

Phoenix Duskmoon UI

Phoenix Duskmoon UI

Installation

安装

mix.exs

mix.exs

Setup

配置

1. Import components in app_web.ex

1. 在app_web.ex中导入组件

2. CSS (assets/css/app.css)

2. CSS（assets/css/app.css）

3. JavaScript hooks (assets/js/app.js)

3. JavaScript钩子（assets/js/app.js）

4. Register custom elements

4. 注册自定义元素

Architecture (v9)

架构（v9）

Hooks Reference

钩子参考

Component Quick Reference

组件快速参考

Action

操作组件

Data Display

数据展示

Data Entry

数据输入

Feedback

反馈组件

Navigation

导航组件

Layout

布局组件

Icon

图标组件

CSS Art (decorative)

CSS艺术（装饰性）

Usage Examples

使用示例

Package Exports

包导出

1. Import components in
`app_web.ex`

1. 在
`app_web.ex`
中导入组件

2. CSS (
`assets/css/app.css`
)

2. CSS（
`assets/css/app.css`
）

3. JavaScript hooks (
`assets/js/app.js`
)

3. JavaScript钩子（
`assets/js/app.js`
）