From 07a4a915865e47f407bc6b893779d18d2a16050a Mon Sep 17 00:00:00 2001 From: unknown Date: Sun, 8 Aug 2021 01:59:53 +0800 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Ecard=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/card/demo/basic-component.scss | 33 +++++ devui/card/demo/card-demo.tsx | 37 +++-- devui/card/demo/demo-basic.tsx | 35 +++++ devui/card/demo/demo-custom.tsx | 34 +++++ devui/card/demo/demo-image.tsx | 35 +++++ devui/card/src/card.scss | 77 ++++++++++ devui/card/src/card.tsx | 55 +++++++ devui/vue-devui.ts | 5 +- pre-commit | 0 sites/.vitepress/config/sidebar.ts | 1 + sites/components/card/index.md | 212 +++++++++++++++++++++++++++ 11 files changed, 514 insertions(+), 10 deletions(-) create mode 100644 devui/card/demo/basic-component.scss create mode 100644 devui/card/demo/demo-basic.tsx create mode 100644 devui/card/demo/demo-custom.tsx create mode 100644 devui/card/demo/demo-image.tsx create mode 100644 devui/card/src/card.scss create mode 100644 devui/card/src/card.tsx create mode 100644 pre-commit create mode 100644 sites/components/card/index.md diff --git a/devui/card/demo/basic-component.scss b/devui/card/demo/basic-component.scss new file mode 100644 index 00000000..94b5bdd3 --- /dev/null +++ b/devui/card/demo/basic-component.scss @@ -0,0 +1,33 @@ +// @import '~ng-devui/styles-var/devui-var.scss'; +@import '../src/card.scss'; + +.card-icon { + cursor: pointer; + font-size: 16px; + margin-right: 8px; + vertical-align: middle; +} + +.card-icon + span { + vertical-align: middle; +} + +.card-block { + margin-right: 16px; +} + +.d-card { + cursor: pointer; + transition: + box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), + transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + + &:hover { + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1); + transform: translateY(-5px); + } +} + +.card-container { + width: 350px; +} diff --git a/devui/card/demo/card-demo.tsx b/devui/card/demo/card-demo.tsx index b7991a97..e355fd12 100644 --- a/devui/card/demo/card-demo.tsx +++ b/devui/card/demo/card-demo.tsx @@ -1,12 +1,31 @@ import { defineComponent } from 'vue' - +import { useDemo } from 'hooks/use-demo'; +import DemoBasic from './demo-basic'; +import DemoBasicCode from './demo-basic?raw'; +import DemoImage from './demo-image'; +import DemoImageCode from './demo-image?raw'; +import DemoCustom from './demo-custom'; +import DemoCustomCode from './demo-custom?raw'; export default defineComponent({ - name: 'd-card-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
devui-card-demo
- } + name: 'DCardDemo', + render () { + return useDemo([ + { + id: 'demo-basic', + title: '基本用法', + code: DemoBasicCode, + content: + },{ + id: 'demo-basic', + title: '使用图片', + code: DemoImageCode, + content: + }, { + id: 'demo-custom', + title: '自定义', + code: DemoCustomCode, + content: + } + ]); } -}) \ No newline at end of file +}); \ No newline at end of file diff --git a/devui/card/demo/demo-basic.tsx b/devui/card/demo/demo-basic.tsx new file mode 100644 index 00000000..95d04574 --- /dev/null +++ b/devui/card/demo/demo-basic.tsx @@ -0,0 +1,35 @@ +import { defineComponent } from 'vue'; +import DCard from '../src/card'; +import './basic-component.scss'; +import DevuiAvatar from '../../avatar/avatar'; +import DIcon from '../../icon/src/icon'; +export default defineComponent({ + name: 'DemoBasic', + + setup () { + const cardAvatar= + const cardTitle='DEVUI Course' + const cardSubtitle=<>DevUI + const cardActions=<> +
+ 12 +
+
+ 8 +
+
+ 8 +
+ const slots = { + cardAvatar:()=>cardAvatar, + cardTitle:()=>cardTitle, + cardSubtitle:()=>cardSubtitle, + cardContent: () =>'DEVUI is a free open-source and common solution for the front end of enterprise mid- and back-end products. Its design values are basedon...', + cardActions: ()=>cardActions + }; + return () => { + return ( + ); + }; + } +}); diff --git a/devui/card/demo/demo-custom.tsx b/devui/card/demo/demo-custom.tsx new file mode 100644 index 00000000..b181035d --- /dev/null +++ b/devui/card/demo/demo-custom.tsx @@ -0,0 +1,34 @@ +import { defineComponent } from 'vue'; +import DCard from '../src/card'; +import './basic.component.scss'; +import DevuiAvatar from '../../avatar/avatar'; +export default defineComponent({ + name: 'DemoBasic', + + setup () { + const cardAvatar= + const cardTitle='DEVUI Course' + const cardSubtitle=<>DevUI + const cardActions=<> +
+ 12 +
+
+ 8 +
+
+ 8 +
+ const slots = { + cardAvatar:()=>cardAvatar, + cardTitle:()=>cardTitle, + cardSubtitle:()=>cardSubtitle, + cardContent: () =>'DEVUI is a free open-source and common solution for the front end of enterprise mid- and back-end products. Its design values are basedon...', + cardActions: ()=>cardActions + }; + return () => { + return ( + ); + }; + } +}); diff --git a/devui/card/demo/demo-image.tsx b/devui/card/demo/demo-image.tsx new file mode 100644 index 00000000..1dd4b16c --- /dev/null +++ b/devui/card/demo/demo-image.tsx @@ -0,0 +1,35 @@ +import { defineComponent} from 'vue'; +import DCard from '../src/card'; +import './basic.component.scss'; +import DevuiAvatar from '../../avatar/avatar'; +import DIcon from '../../icon/src/icon'; +export default defineComponent({ + name: 'DemoBasic', + + setup () { + const cardAvatar= + const cardTitle='DEVUI Course' + const cardSubtitle=<>DevUI + const cardActions=<> +
+ 12 +
+
+ 8 +
+
+ 8 +
+ const slots = { + cardAvatar:()=>cardAvatar, + cardTitle:()=>cardTitle, + cardSubtitle:()=>cardSubtitle, + cardContent: () =>'DEVUI is a free open-source and common solution for the front end of enterprise mid- and back-end products. Its design values are basedon...', + cardActions: ()=>cardActions + }; + return () => { + return ( + ); + }; + } +}); diff --git a/devui/card/src/card.scss b/devui/card/src/card.scss new file mode 100644 index 00000000..87c97e53 --- /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 00000000..249a3cc8 --- /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/devui/vue-devui.ts b/devui/vue-devui.ts index 5dfe708b..e1a84361 100644 --- a/devui/vue-devui.ts +++ b/devui/vue-devui.ts @@ -20,14 +20,16 @@ import TextInput from './text-input/src/text-input'; // 数据展示 import Avatar from './avatar/avatar'; +import Card from './card/src/card'; -function install(app: App) { +function install(app: App):any { const packages = [ Button, Icon, Panel, Tabs, Alert, Checkbox, Radio, Switch, TagsInput, TextInput, Avatar, + Card ]; packages.forEach((item:any) => { if (item.install) { @@ -44,6 +46,7 @@ export { Alert, Checkbox, Radio, Switch, TagsInput, TextInput, Avatar, + Card }; export default { install, version: '0.0.1' }; diff --git a/pre-commit b/pre-commit new file mode 100644 index 00000000..e69de29b diff --git a/sites/.vitepress/config/sidebar.ts b/sites/.vitepress/config/sidebar.ts index 5dc1723d..42aaa6a1 100644 --- a/sites/.vitepress/config/sidebar.ts +++ b/sites/.vitepress/config/sidebar.ts @@ -35,6 +35,7 @@ const sidebar = { text: '数据展示', children: [ { text: 'Avatar 头像', link: '/components/avatar/' }, + { text: 'Card 卡片', link: '/components/card/' }, ] } ], diff --git a/sites/components/card/index.md b/sites/components/card/index.md new file mode 100644 index 00000000..92524820 --- /dev/null +++ b/sites/components/card/index.md @@ -0,0 +1,212 @@ +# Card 卡片 + + +### 主要按钮 + + + + + + + + + +```html + + + + + + + +``` + +### 使用图片 + + + + + + + + + +```html + + + + + + + +``` + +### 自定义 + + +
+ +
+
+ + + + +```html + +
+ +
+
+ + + +``` + \ No newline at end of file -- Gitee From 48bcbe025f5e8bd4990db4110dbc3976fb5b6d66 Mon Sep 17 00:00:00 2001 From: vergil <821006222@qq.com> Date: Sun, 8 Aug 2021 10:16:09 +0800 Subject: [PATCH 2/6] =?UTF-8?q?style:=20=E5=88=A0=E9=99=A4=E5=A4=9A?= =?UTF-8?q?=E4=BD=99=E7=9A=84demo/doc/pre-commit=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/card/card.tsx | 12 -------- devui/card/demo/basic-component.scss | 33 --------------------- devui/card/demo/card-demo.tsx | 31 -------------------- devui/card/demo/card.route.ts | 15 ---------- devui/card/demo/demo-basic.tsx | 35 ---------------------- devui/card/demo/demo-custom.tsx | 34 ---------------------- devui/card/demo/demo-image.tsx | 35 ---------------------- devui/card/doc/api-cn.md | 43 ---------------------------- devui/card/doc/api-en.md | 43 ---------------------------- pre-commit | 0 10 files changed, 281 deletions(-) delete mode 100644 devui/card/card.tsx delete mode 100644 devui/card/demo/basic-component.scss delete mode 100644 devui/card/demo/card-demo.tsx delete mode 100644 devui/card/demo/card.route.ts delete mode 100644 devui/card/demo/demo-basic.tsx delete mode 100644 devui/card/demo/demo-custom.tsx delete mode 100644 devui/card/demo/demo-image.tsx delete mode 100644 devui/card/doc/api-cn.md delete mode 100644 devui/card/doc/api-en.md delete mode 100644 pre-commit diff --git a/devui/card/card.tsx b/devui/card/card.tsx deleted file mode 100644 index 2c415e66..00000000 --- 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/basic-component.scss b/devui/card/demo/basic-component.scss deleted file mode 100644 index 94b5bdd3..00000000 --- a/devui/card/demo/basic-component.scss +++ /dev/null @@ -1,33 +0,0 @@ -// @import '~ng-devui/styles-var/devui-var.scss'; -@import '../src/card.scss'; - -.card-icon { - cursor: pointer; - font-size: 16px; - margin-right: 8px; - vertical-align: middle; -} - -.card-icon + span { - vertical-align: middle; -} - -.card-block { - margin-right: 16px; -} - -.d-card { - cursor: pointer; - transition: - box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), - transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); - - &:hover { - box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1); - transform: translateY(-5px); - } -} - -.card-container { - width: 350px; -} diff --git a/devui/card/demo/card-demo.tsx b/devui/card/demo/card-demo.tsx deleted file mode 100644 index e355fd12..00000000 --- a/devui/card/demo/card-demo.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { defineComponent } from 'vue' -import { useDemo } from 'hooks/use-demo'; -import DemoBasic from './demo-basic'; -import DemoBasicCode from './demo-basic?raw'; -import DemoImage from './demo-image'; -import DemoImageCode from './demo-image?raw'; -import DemoCustom from './demo-custom'; -import DemoCustomCode from './demo-custom?raw'; -export default defineComponent({ - name: 'DCardDemo', - render () { - return useDemo([ - { - id: 'demo-basic', - title: '基本用法', - code: DemoBasicCode, - content: - },{ - id: 'demo-basic', - title: '使用图片', - code: DemoImageCode, - content: - }, { - id: 'demo-custom', - title: '自定义', - code: DemoCustomCode, - content: - } - ]); - } -}); \ 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 86ce97c2..00000000 --- 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/demo/demo-basic.tsx b/devui/card/demo/demo-basic.tsx deleted file mode 100644 index 95d04574..00000000 --- a/devui/card/demo/demo-basic.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { defineComponent } from 'vue'; -import DCard from '../src/card'; -import './basic-component.scss'; -import DevuiAvatar from '../../avatar/avatar'; -import DIcon from '../../icon/src/icon'; -export default defineComponent({ - name: 'DemoBasic', - - setup () { - const cardAvatar= - const cardTitle='DEVUI Course' - const cardSubtitle=<>DevUI - const cardActions=<> -
- 12 -
-
- 8 -
-
- 8 -
- const slots = { - cardAvatar:()=>cardAvatar, - cardTitle:()=>cardTitle, - cardSubtitle:()=>cardSubtitle, - cardContent: () =>'DEVUI is a free open-source and common solution for the front end of enterprise mid- and back-end products. Its design values are basedon...', - cardActions: ()=>cardActions - }; - return () => { - return ( - ); - }; - } -}); diff --git a/devui/card/demo/demo-custom.tsx b/devui/card/demo/demo-custom.tsx deleted file mode 100644 index b181035d..00000000 --- a/devui/card/demo/demo-custom.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { defineComponent } from 'vue'; -import DCard from '../src/card'; -import './basic.component.scss'; -import DevuiAvatar from '../../avatar/avatar'; -export default defineComponent({ - name: 'DemoBasic', - - setup () { - const cardAvatar= - const cardTitle='DEVUI Course' - const cardSubtitle=<>DevUI - const cardActions=<> -
- 12 -
-
- 8 -
-
- 8 -
- const slots = { - cardAvatar:()=>cardAvatar, - cardTitle:()=>cardTitle, - cardSubtitle:()=>cardSubtitle, - cardContent: () =>'DEVUI is a free open-source and common solution for the front end of enterprise mid- and back-end products. Its design values are basedon...', - cardActions: ()=>cardActions - }; - return () => { - return ( - ); - }; - } -}); diff --git a/devui/card/demo/demo-image.tsx b/devui/card/demo/demo-image.tsx deleted file mode 100644 index 1dd4b16c..00000000 --- a/devui/card/demo/demo-image.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { defineComponent} from 'vue'; -import DCard from '../src/card'; -import './basic.component.scss'; -import DevuiAvatar from '../../avatar/avatar'; -import DIcon from '../../icon/src/icon'; -export default defineComponent({ - name: 'DemoBasic', - - setup () { - const cardAvatar= - const cardTitle='DEVUI Course' - const cardSubtitle=<>DevUI - const cardActions=<> -
- 12 -
-
- 8 -
-
- 8 -
- const slots = { - cardAvatar:()=>cardAvatar, - cardTitle:()=>cardTitle, - cardSubtitle:()=>cardSubtitle, - cardContent: () =>'DEVUI is a free open-source and common solution for the front end of enterprise mid- and back-end products. Its design values are basedon...', - cardActions: ()=>cardActions - }; - return () => { - return ( - ); - }; - } -}); diff --git a/devui/card/doc/api-cn.md b/devui/card/doc/api-cn.md deleted file mode 100644 index c514fc1b..00000000 --- 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 ecd82290..00000000 --- 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/pre-commit b/pre-commit deleted file mode 100644 index e69de29b..00000000 -- Gitee From 4f8582e98cd806e3298bcbcf4beecb220ac059e5 Mon Sep 17 00:00:00 2001 From: vergil <821006222@qq.com> Date: Sun, 8 Aug 2021 18:59:26 +0800 Subject: [PATCH 3/6] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9md=E6=96=87?= =?UTF-8?q?=E4=BB=B6=E6=8F=8F=E8=BF=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sites/components/card/index.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/sites/components/card/index.md b/sites/components/card/index.md index 92524820..6065bbc5 100644 --- a/sites/components/card/index.md +++ b/sites/components/card/index.md @@ -1,7 +1,13 @@ # Card 卡片 +通用卡片容器。 -### 主要按钮 +### 何时使用 + +基础卡片容器，其中可包含文字，列表，图片，段落，用于概览展示时。 + + +### 基本用法