@duskmoon-dev/要素

所有 DuskMoon 自定义元素在一个包中.

安装

bun add @duskmoon-dev/elements

使用量

通过 CDN (推荐) 自动注册

使用所有元素的最简单方式 - 只要添加脚本标记 :

<!-- Via CDN - registers all elements automatically -->
<script type="module" src="https://esm.sh/@duskmoon-dev/elements/register"></script>

<!-- Now all elements are available -->
<el-dm-button variant="primary">Click me</el-dm-button>
<el-dm-card>
  <h2>Card Title</h2>
  <p>Card content</p>
</el-dm-card>
<el-dm-input label="Name" placeholder="Enter your name"></el-dm-input>

用 Bundler 自动注册

// Just import to register all elements
import '@duskmoon-dev/elements/register';

手工登记

import { registerAll } from '@duskmoon-dev/elements';

// Register all elements
registerAll();

或者登记个人要素:

import { registerButton, registerCard, registerTable } from '@duskmoon-dev/elements';

registerButton();
registerCard();
registerTable();

使用元素类

import { ElDmButton, ElDmTable, ElDmTabs } from '@duskmoon-dev/elements';

// Access element classes directly
const button = document.querySelector('el-dm-button') as ElDmButton;
button.variant = 'primary';

包含要素

基本要素

窗体元素

反馈显示( D)

导航

地表和容器

数据显示

再出口公用事业

该套软件还从下列公司再出口公用事业: @duskmoon-dev/el-base数字 :

import {
  BaseElement,
  css,
  combineStyles,
  cssVars,
  defaultTheme,
  resetStyles,
} from '@duskmoon-dev/elements';

单个软件包

如果您仅需要特定元素, 请单独安装, 用于较小的捆绑大小 :

使用单个包的例子 :

<!-- Only load the button element -->
<script type="module" src="https://esm.sh/@duskmoon-dev/el-button/register"></script>

<el-dm-button>Click me</el-dm-button>

或与一捆子:

import '@duskmoon-dev/el-button/register';
import '@duskmoon-dev/el-table/register';

类型脚本支持

所有元素类型和接口均导出 :

import type {
  // Property types from core
  Size,
  Variant,
  ValidationState,

  // Element-specific types
  TableColumn,
  TableRow,
  AutocompleteOption,
  BreadcrumbItem,
  PopoverPlacement,
  TabsVariant,
} from '@duskmoon-dev/elements';

许可证

麻省理工学院