diff --git a/devui/card/card.tsx b/devui/card/card.tsx deleted file mode 100644 index 2c415e66f7737dc9163c9a9c5177b84192e69a49..0000000000000000000000000000000000000000 --- a/devui/card/card.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-card', - props: { - }, - setup(props, ctx) { - return () => { - return
devui-card
- } - } -}) \ No newline at end of file diff --git a/devui/card/demo/card-demo.tsx b/devui/card/demo/card-demo.tsx deleted file mode 100644 index b7991a97c2a65ae2dd0ea4720c32296d5920f4db..0000000000000000000000000000000000000000 --- a/devui/card/demo/card-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-card-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
devui-card-demo
- } - } -}) \ No newline at end of file diff --git a/devui/card/demo/card.route.ts b/devui/card/demo/card.route.ts deleted file mode 100644 index 86ce97c259154656e7315733696230037e052a38..0000000000000000000000000000000000000000 --- a/devui/card/demo/card.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import CardDemoComponent from './card-demo' -import DevUIApiComponent from '../../shared/devui-api/devui-api' - -import ApiCn from '../doc/api-cn.md' -import ApiEn from '../doc/api-en.md' -const routes = [ - { path: '', redirectTo: 'demo' }, - { path: 'demo', component: CardDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/card/doc/api-cn.md b/devui/card/doc/api-cn.md deleted file mode 100644 index c514fc1bb71a4954af2977ce1f318e29f374368c..0000000000000000000000000000000000000000 --- a/devui/card/doc/api-cn.md +++ /dev/null @@ -1,43 +0,0 @@ -# 如何使用 - -在module中引入： - -```ts -import { CardModule } from 'ng-devui/card'; -``` - -在页面中使用： - -```xml - - - - - - - - -``` -# d-card -## d-card 区块划分 - -| 标签 | 描述 | -| :------------: | :--------------------------------------------------------------------------------------------: | -| d-card-header | 标题区域，作为概览使用，通常包含标题`d-card-title`,副标题`d-card-subtitle`,头像`dAvatar`等元素 | -| [dCardMeta] | 媒体信息区域，可放置多种媒体，包括图片、图形、视频。 | -| d-card-content | 辅助信息区，分析和支撑标题作用，可以包含摘要或者说明。 | -| d-card-actions | 决策作用，可以包含操作文本或者操作图标。 | - -## d-card-header 区块划分 - -| 标签 | 描述 | -| :-------------: | :------------------------------------: | -| d-card-title | 卡片的主要内容描述，一般定义为卡片名称 | -| [dCardAvatar] | 头像区域，用作头像等图片展示 | -| d-card-subtitle | 对标题的补充，可包含标签等信息 | - -## d-card-actions 参数 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :---: | :------: | :---: | :-------------: | --------- | -| align | `'start' \| 'end' \|'spaceBetween'` | 'start' | 可选，操作区域对齐方式，分别对应起始对齐，尾部对齐，拉伸对齐 | [基本用法](demo#card-basic) | diff --git a/devui/card/doc/api-en.md b/devui/card/doc/api-en.md deleted file mode 100644 index ecd8229048db8d5a3e28e87fa5e3c1f7cc8894bb..0000000000000000000000000000000000000000 --- a/devui/card/doc/api-en.md +++ /dev/null @@ -1,43 +0,0 @@ -# How to use - -Import into module: - -```ts -import { CardModule } from 'ng-devui/card'; -``` - -In the page: - -```xml - - - - - - - - -``` -# d-card -## d-card Block Division - -| Tag | Description | -| :------------: | :--------------------------------------------------------------------------------------------: | -| d-card-header | Title area, which is used as an overview. It usually contains elements such as title `d-card-title`, subtitle `d-card-subtitle`, and avatar `dAvatar` | -| [dCardMeta] | Media information area, which can store multiple media, including pictures, graphics, and videos | -| d-card-content | Auxiliary information area, which analyzes and supports the title function. It can contain abstracts or descriptions | -| d-card-actions | Decision-making function, which can contain operation text or operation icons | - -## d-card-header Block Division - -| Tag | Description | -| :-------------: | :------------------------------------: | -| d-card-title | Card content description, which is generally defined as the card name | -| [dCardAvatar] | Avatar area, which is used to display images such as avatars | -| d-card-subtitle | Supplement to the title, including tag information | - -## d-card-actions Parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :---: | :------: | :---: | :-------------: | --------- | -| align | `'start'\|'end'\|'spaceBetween'` | 'start' | Optional. Operation area alignment mode, which corresponds to start alignment, tail alignment, and stretch alignment | [Basic usage](demo#card-basic) | diff --git a/devui/card/src/card.scss b/devui/card/src/card.scss new file mode 100644 index 0000000000000000000000000000000000000000..87c97e53926962525096afb3036c93bfad7dbf30 --- /dev/null +++ b/devui/card/src/card.scss @@ -0,0 +1,77 @@ +@import '../../style/theme/color'; +@import '../../style/theme/shadow'; +@import '../../style/theme/corner'; +@import '../../style/core/_font'; + +$card-ele-space: var(--card-ele-space, 8px); +$card-block-space: var(--card-block-space, 16px); +$card-border-radius: $devui-border-radius-card; +$card-title-font-size: $devui-font-size-card-title; +$card-subtitle-font-size: $devui-font-size; +$card-content-font-size: $devui-font-size; + +.devui-card { + position: relative; + display: block; + padding: 16px 20px; + border-radius: $card-border-radius; + box-shadow: $devui-shadow-length-base $devui-light-shadow; +} + +.devui-card-title { + display: block; + font-size: $card-title-font-size; + font-weight: 600; + color: $devui-text; +} + +.devui-card-subtitle { + display: block; + font-size: $card-subtitle-font-size; + color: $devui-aide-text-stress; +} + +.devui-card-header { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: $card-block-space; +} + +.devui-card-avatar { + margin-right: $card-block-space; +} + +.devui-card-content { + font-size: $card-content-font-size; + color: $devui-aide-text; +} + +.devui-card-actions { + margin-top: $card-block-space; + display: flex; + justify-content: flex-start; + align-items: center; +} + +.devui-card-title + .devui-card-subtitle { + margin-top: $card-ele-space; +} + +.devui-card-actions-align-end { + justify-content: flex-end; +} + +.devui-card-actions-align-spaceBetween { + justify-content: space-between; +} + +.devui-card-meta { + width: calc(100% + 40px); + margin: 0 -20px $card-block-space -20px; + height: auto; +} + +.devui-card-meta:first-child { + margin-top: -$card-block-space; +} diff --git a/devui/card/src/card.tsx b/devui/card/src/card.tsx new file mode 100644 index 0000000000000000000000000000000000000000..249a3cc8823f6fed103c4f58bdb6c343dc69cdb2 --- /dev/null +++ b/devui/card/src/card.tsx @@ -0,0 +1,55 @@ +import { defineComponent, PropType } from 'vue'; +import './card.scss'; + +const cardProps = { + align: { + type: String as PropType<'start' | 'end' | 'spaceBetween'>, + default: 'start' + }, + src: { + type: String, + default: '' + } +} as const; + +export default defineComponent({ + name: 'DCard', + props: cardProps, + + render () { + const { + align, + src + } = this; + const alignCls = { + 'd-card-actions':true, + 'devui-card-actions': true, + [`devui-card-actions-align-${align}`]: align !== 'start', + }; + return ( +
+ {this.$slots.default?.()} +
+ { this.$slots.cardAvatar?.()?
+ {this.$slots.cardAvatar?.()} +
:'' } +
+
+ {this.$slots.cardTitle?.()} +
+
+ {this.$slots.cardSubtitle?.()} +
+
+
+ {src!==''?:''} +
+ {this.$slots.cardContent?.()} +
+
+ {this.$slots.cardActions?this.$slots.cardActions?.():''} +
+
+ ); + } +}); \ No newline at end of file diff --git a/sites/components/card/index.md b/sites/components/card/index.md new file mode 100644 index 0000000000000000000000000000000000000000..6065bbc5d9d0f09b0690f108b3bcf23c1b8a8dce --- /dev/null +++ b/sites/components/card/index.md @@ -0,0 +1,220 @@ +# Card 卡片 + +通用卡片容器。 + +### 何时使用 + +基础卡片容器，其中可包含文字，列表，图片，段落，用于概览展示时。 + + +### 基本用法 + + + + + + + + + +```html + + + + + + + +``` + +### 使用图片 + +通过align可设置d-card-actions操作区域对齐方式：起始对齐、尾部对齐、拉伸对齐。 + + + + + + + + + +```html + + + + + + + +``` + +### 自定义区域 + + +
+ +
+
+ + + + +```html + +
+ +
+
+ + + +``` + \ No newline at end of file