From d1b636c523339d0467c1dbab905fcd4acb6f7031 Mon Sep 17 00:00:00 2001 From: wangyupei <2311595895@qq.com> Date: Wed, 9 Mar 2022 11:49:07 +0800 Subject: [PATCH] =?UTF-8?q?refactor(list):=20=E5=B0=81=E8=A3=85List?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=9F=BA=E7=A1=80=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/list/index.ts | 15 +++++++++++ .../devui-vue/devui/list/src/list-item.scss | 25 +++++++++++++++++++ .../devui-vue/devui/list/src/list-item.tsx | 9 +++++++ packages/devui-vue/devui/list/src/list.scss | 10 ++++++++ packages/devui-vue/devui/list/src/list.tsx | 9 +++++++ .../devui-vue/docs/components/list/index.md | 20 +++++++++++++++ 6 files changed, 88 insertions(+) create mode 100644 packages/devui-vue/devui/list/index.ts create mode 100644 packages/devui-vue/devui/list/src/list-item.scss create mode 100644 packages/devui-vue/devui/list/src/list-item.tsx create mode 100644 packages/devui-vue/devui/list/src/list.scss create mode 100644 packages/devui-vue/devui/list/src/list.tsx create mode 100644 packages/devui-vue/docs/components/list/index.md diff --git a/packages/devui-vue/devui/list/index.ts b/packages/devui-vue/devui/list/index.ts new file mode 100644 index 0000000000..31b46e6222 --- /dev/null +++ b/packages/devui-vue/devui/list/index.ts @@ -0,0 +1,15 @@ +import type { App } from 'vue'; +import List from './src/list'; +import ListItem from './src/list-item'; + +export { List, ListItem }; + +export default { + title: 'List 列表', + category: '数据展示', + status: '10%', + install(app: App): void { + app.component(List.name, List); + app.component(ListItem.name, ListItem); + }, +}; diff --git a/packages/devui-vue/devui/list/src/list-item.scss b/packages/devui-vue/devui/list/src/list-item.scss new file mode 100644 index 0000000000..cac82f8c07 --- /dev/null +++ b/packages/devui-vue/devui/list/src/list-item.scss @@ -0,0 +1,25 @@ +@import '../../styles-var/devui-var.scss'; + +.devui-list-item { + display: flex; + align-items: center; + width: 100%; + height: 36px; + padding: 0 8px; + color: $devui-text; + box-sizing: border-box; + cursor: pointer; + transition: + color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth, + background-color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth; + + &:hover { + color: $devui-list-item-hover-text; + background-color: $devui-list-item-hover-bg; + } + + &:active { + color: $devui-list-item-active-text; + background-color: $devui-list-item-hover-bg; + } +} diff --git a/packages/devui-vue/devui/list/src/list-item.tsx b/packages/devui-vue/devui/list/src/list-item.tsx new file mode 100644 index 0000000000..3b7a333a00 --- /dev/null +++ b/packages/devui-vue/devui/list/src/list-item.tsx @@ -0,0 +1,9 @@ +import { defineComponent } from 'vue'; +import './list-item.scss'; + +export default defineComponent({ + name: 'DListItem', + setup(props, { slots }) { + return () =>
{slots.default?.()}
; + }, +}); diff --git a/packages/devui-vue/devui/list/src/list.scss b/packages/devui-vue/devui/list/src/list.scss new file mode 100644 index 0000000000..c585631b91 --- /dev/null +++ b/packages/devui-vue/devui/list/src/list.scss @@ -0,0 +1,10 @@ +@import '../../styles-var/devui-var.scss'; + +.devui-list { + padding-bottom: 4px; + border-radius: $devui-border-radius; + box-sizing: border-box; + background-clip: padding-box; + background-color: $devui-connected-overlay-bg; + outline: none; +} diff --git a/packages/devui-vue/devui/list/src/list.tsx b/packages/devui-vue/devui/list/src/list.tsx new file mode 100644 index 0000000000..4f7c6a27bd --- /dev/null +++ b/packages/devui-vue/devui/list/src/list.tsx @@ -0,0 +1,9 @@ +import { defineComponent } from 'vue'; +import './list.scss'; + +export default defineComponent({ + name: 'DList', + setup(props, { slots }) { + return () =>
{slots.default?.()}
; + }, +}); diff --git a/packages/devui-vue/docs/components/list/index.md b/packages/devui-vue/docs/components/list/index.md new file mode 100644 index 0000000000..cd446773d7 --- /dev/null +++ b/packages/devui-vue/docs/components/list/index.md @@ -0,0 +1,20 @@ +# List 列表 + +用于展示列表形态的一组数据。 + +### 基本用法 + +:::demo + +```vue + +``` + +:::