@duskmoon-dev/el-card (日语)
装有页眉、身体和页脚的容器部件.
安装
bun add @duskmoon-dev/el-card
使用量
自动注册( 建议)
使用组件的最简单方式 - 只需导入即可:
<!-- Via CDN -->
<script type="module" src="https://esm.sh/@duskmoon-dev/el-card/register"></script>
<!-- Now use the element -->
<el-dm-card>
<h3 slot="header">Card Title</h3>
<p>Card body content goes here.</p>
<div slot="footer">
<button>Action</button>
</div>
</el-dm-card>
或与一捆子:
import '@duskmoon-dev/el-card/register';
手工登记
<script type="module">
import { register } from '@duskmoon-dev/el-card';
register();
</script>
<el-dm-card>
<h3 slot="header">Card Title</h3>
<p>Card body content goes here.</p>
</el-dm-card>
备选案文
| 备选案文 | 说明 |
|---|
elevated | 有阴影的出牌( 默认) |
outlined | 带有边框的卡 |
filled | 有微妙背景的牌 |
铺垫
| 大小 | 说明 |
|---|
none | 无粘贴 |
sm | 小垫子 |
md | 中度粘贴( 默认) |
lg | 大型垫地 |
属性
| 属性 | 类型 | 默认 | 说明 |
|---|
variant | 字符串 | elevated | 卡片变型 |
interactive | 布尔 | false | 让牌可以点击 |
padding | 字符串 | md | 铺设大小 |
槽数
| 槽 | 说明 |
|---|
| (默认) | 纸牌正文内容 |
header | 标题部分 |
footer | 页脚部分 |
media | 媒体内容(图像/视频) |
CSS 组件
| 编 | 说明 |
|---|
card | 主卡容器 |
header | 标题部分 |
body | 机构部分 |
footer | 页脚部分 |
media | 媒体科 |
CSS 自定义属性
| 财产 | 说明 |
|---|
--dm-card-padding | 贴纸 |
--dm-card-border-radius | 边界半径 |
--dm-card-background | 背景颜色 |
--dm-card-border-color | 边框颜色 |
--dm-card-shadow | 框阴影 |
实例
<el-dm-card>
<img slot="media" src="image.jpg" alt="Card image" />
<h3 slot="header">Image Card</h3>
<p>Description of the image.</p>
</el-dm-card>
互动卡
<el-dm-card interactive onclick="handleClick()">
<h3 slot="header">Clickable Card</h3>
<p>Click me!</p>
</el-dm-card>
概要备选案文
<el-dm-card variant="outlined">
<p>Outlined card content.</p>
</el-dm-card>
许可证
麻省理工学院