style: update descriptions style (#5025)

* style: update descriptions style * style: update * style: update demo * style: update * style: update * style: update * style: update * style: update * feat: update
2024-12-03 03:38:41 +08:00 · 2021-12-30 17:46:33 +08:00 · 2021-12-30 17:46:33 +08:00 · 10e231168a
commit 10e231168a
parent d4b8199618
7 changed files with 256 additions and 69 deletions
--- a/docs/examples/descriptions/sizes.vue
+++ b/docs/examples/descriptions/sizes.vue
@ -13,40 +13,60 @@
    border
  >
    <template #extra>
-      <el-button type="primary" size="small">Operation</el-button>
+      <el-button type="primary">Operation</el-button>
    </template>
    <el-descriptions-item>
      <template #label>
-        <el-icon><user /></el-icon>
-        Username
+        <div class="cell-item">
+          <el-icon :style="iconStyle">
+            <user />
+          </el-icon>
+          Username
+        </div>
      </template>
      kooriookami
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
-        <el-icon><iphone /></el-icon>
-        Telephone
+        <div class="cell-item">
+          <el-icon :style="iconStyle">
+            <iphone />
+          </el-icon>
+          Telephone
+        </div>
      </template>
      18100000000
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
-        <el-icon><location /></el-icon>
-        Place
+        <div class="cell-item">
+          <el-icon :style="iconStyle">
+            <location />
+          </el-icon>
+          Place
+        </div>
      </template>
      Suzhou
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
-        <el-icon><tickets /></el-icon>
-        Remarks
+        <div class="cell-item">
+          <el-icon :style="iconStyle">
+            <tickets />
+          </el-icon>
+          Remarks
+        </div>
      </template>
      <el-tag size="small">School</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
-        <el-icon><office-building /></el-icon>
-        Address
+        <div class="cell-item">
+          <el-icon :style="iconStyle">
+            <office-building />
+          </el-icon>
+          Address
+        </div>
      </template>
      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
    </el-descriptions-item>
@ -57,9 +77,10 @@
    title="Without border"
    :column="3"
    :size="size"
+    :style="blockMargin"
  >
    <template #extra>
-      <el-button type="primary" size="small">Operation</el-button>
+      <el-button type="primary">Operation</el-button>
    </template>
    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
@ -68,14 +89,13 @@
      <el-tag size="small">School</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="Address"
-      >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
-      Province</el-descriptions-item
-    >
+      >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
+    </el-descriptions-item>
  </el-descriptions>
 </template>

 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import {
  User,
  Iphone,
@ -85,4 +105,35 @@ import {
 } from '@element-plus/icons-vue'

 const size = ref('')
+const iconStyle = computed(() => {
+  const marginMap = {
+    large: '8px',
+    default: '6px',
+    small: '4px',
+  }
+  return {
+    marginRight: marginMap[size.value] || marginMap.default,
+  }
+})
+const blockMargin = computed(() => {
+  const marginMap = {
+    large: '32px',
+    default: '28px',
+    small: '24px',
+  }
+  return {
+    marginTop: marginMap[size.value] || marginMap.default,
+  }
+})
 </script>
+
+<style scoped>
+.el-descriptions {
+  margin-top: 20px;
+}
+
+.cell-item {
+  display: flex;
+  align-items: center;
+}
+</style>
--- a/docs/examples/descriptions/vertical-list.vue
+++ b/docs/examples/descriptions/vertical-list.vue
@ -1,8 +1,15 @@
 <template>
+  <el-radio-group v-model="size">
+    <el-radio label="large">Large</el-radio>
+    <el-radio>Default</el-radio>
+    <el-radio label="small">Small</el-radio>
+  </el-radio-group>
+
  <el-descriptions
    title="Vertical list with border"
    direction="vertical"
    :column="4"
+    :size="size"
    border
  >
    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
@ -12,16 +19,16 @@
      <el-tag size="small">School</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="Address"
-      >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
-      Province</el-descriptions-item
-    >
+      >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
+    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions
-    class="margin-top"
    title="Vertical list without border"
    :column="4"
+    :size="size"
    direction="vertical"
+    :style="blockMargin"
  >
    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
@ -30,8 +37,29 @@
      <el-tag size="small">School</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="Address"
-      >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
-      Province</el-descriptions-item
-    >
+      >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
+    </el-descriptions-item>
  </el-descriptions>
 </template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+const size = ref('')
+const blockMargin = computed(() => {
+  const marginMap = {
+    large: '32px',
+    default: '28px',
+    small: '24px',
+  }
+  return {
+    marginTop: marginMap[size.value] || marginMap.default,
+  }
+})
+</script>
+
+<style scoped>
+.el-descriptions {
+  margin-top: 20px;
+}
+</style>
--- a/packages/components/descriptions/src/descriptions-cell.ts
+++ b/packages/components/descriptions/src/descriptions-cell.ts
@ -34,6 +34,8 @@ export default defineComponent({
      this.cell as VNode
    ) as IDescriptionsItemInject

+    const { border, direction } = this.descriptions
+    const isVertical = direction === 'vertical'
    const label = this.cell?.children?.label?.() || item.label
    const content = this.cell?.children?.default?.()
    const span = item.span
@ -55,11 +57,14 @@ export default defineComponent({
            class: [
              'el-descriptions__cell',
              'el-descriptions__label',
-              { 'is-bordered-label': this.descriptions.border },
+              {
+                'is-bordered-label': border,
+                'is-vertical-label': isVertical,
+              },
              labelAlign,
              labelClassName,
            ],
-            colSpan: this.descriptions.direction === 'vertical' ? span : 1,
+            colSpan: isVertical ? span : 1,
          },
          label
        )
@ -71,11 +76,14 @@ export default defineComponent({
            class: [
              'el-descriptions__cell',
              'el-descriptions__content',
+              {
+                'is-bordered-content': border,
+                'is-vertical-content': isVertical,
+              },
              align,
              className,
            ],
-            colSpan:
-              this.descriptions.direction === 'vertical' ? span : span * 2 - 1,
+            colSpan: isVertical ? span : span * 2 - 1,
          },
          content
        )
--- a/packages/components/descriptions/src/index.vue
+++ b/packages/components/descriptions/src/index.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="el-descriptions">
+  <div :class="descriptionKls">
    <div
      v-if="title || extra || $slots.title || $slots.extra"
      class="el-descriptions__header"
@ -13,13 +13,7 @@
    </div>

    <div class="el-descriptions__body">
-      <table
-        :class="[
-          'el-descriptions__table',
-          { 'is-bordered': border },
-          descriptionsSize ? `el-descriptions--${descriptionsSize}` : '',
-        ]"
-      >
+      <table :class="['el-descriptions__table', { 'is-bordered': border }]">
        <tbody>
          <template v-for="(row, index) in getRows()" :key="index">
            <el-descriptions-row :row="row" />
@ -31,7 +25,7 @@
 </template>

 <script lang="ts">
-import { defineComponent, provide } from 'vue'
+import { computed, defineComponent, provide } from 'vue'
 import { isValidComponentSize } from '@element-plus/utils/validators'
 import { useSize } from '@element-plus/hooks'
 import DescriptionsRow from './descriptions-row.vue'
@ -76,6 +70,12 @@ export default defineComponent({

    const descriptionsSize = useSize()

+    const prefix = 'el-descriptions'
+    const descriptionKls = computed(() => [
+      prefix,
+      descriptionsSize.value ? `${prefix}--${descriptionsSize.value}` : '',
+    ])
+
    const flattedChildren = (children) => {
      const temp = Array.isArray(children) ? children : [children]
      const res = []
@ -142,7 +142,7 @@ export default defineComponent({
    }

    return {
-      descriptionsSize,
+      descriptionKls,
      getRows,
    }
  },
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@ -1170,10 +1170,8 @@ $empty: map.merge(
 $descriptions: () !default;
 $descriptions: map.merge(
  (
-    'header-margin-bottom': 20px,
-    'title-font-size': 16px,
    'table-border': 1px solid var(--el-border-color-lighter),
-    'item-bordered-label-background': #fafafa,
+    'item-bordered-label-background': #f5f7fa,
  ),
  $descriptions
 );
--- a/packages/theme-chalk/src/descriptions-item.scss
+++ b/packages/theme-chalk/src/descriptions-item.scss
@ -1,19 +1,73 @@
+@use 'sass:map';
+
@use 'mixins/mixins' as *;
@use 'common/var' as *;

+$descriptions-item-label-margin-right: () !default;
+$descriptions-item-label-margin-right: map.merge(
+  (
+    'large': 16px,
+    'default': 16px,
+    'small': 12px,
+  ),
+  $descriptions-item-label-margin-right
+);
+
+$descriptions-item-vertical-label-padding-bottom: () !default;
+$descriptions-item-vertical-label-padding-bottom: map.merge(
+  (
+    'large': 8px,
+    'default': 6px,
+    'small': 4px,
+  ),
+  $descriptions-item-vertical-label-padding-bottom
+);
+
@include b(descriptions) {
  @include e(label) {
    &.#{$namespace}-descriptions__cell.is-bordered-label {
      font-weight: bold;
-      color: var(--el-text-color-secondary);
+      color: var(--el-text-color-regular);
      background: var(--el-descriptions-item-bordered-label-background);
    }

    &:not(.is-bordered-label) {
-      margin-right: 10px;
+      color: var(--el-text-color-primary);
+      margin-right: map.get($descriptions-item-label-margin-right, 'default');
+    }
+
+    &.#{$namespace}-descriptions__cell:not(.is-bordered-label).is-vertical-label {
+      padding-bottom: map.get(
+        $descriptions-item-vertical-label-padding-bottom,
+        'default'
+      );
    }
  }

  @include e(content) {
+    &.#{$namespace}-descriptions__cell.is-bordered-content {
+      color: var(--el-text-color-primary);
+    }
+
+    &:not(.is-bordered-label) {
+      color: var(--el-text-color-regular);
+    }
+  }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      @include e(label) {
+        &:not(.is-bordered-label) {
+          margin-right: map.get($descriptions-item-label-margin-right, $size);
+        }
+
+        &.#{$namespace}-descriptions__cell:not(.is-bordered-label).is-vertical-label {
+          padding-bottom: map.get(
+            $descriptions-item-vertical-label-padding-bottom,
+            $size
+          );
+        }
+      }
+    }
  }
 }
--- a/packages/theme-chalk/src/descriptions.scss
+++ b/packages/theme-chalk/src/descriptions.scss
@ -4,12 +4,32 @@
@use 'mixins/var' as *;
@use 'common/var' as *;

+$descriptions-header-margin-bottom: () !default;
+$descriptions-header-margin-bottom: map.merge(
+  (
+    'large': 20px,
+    'default': 16px,
+    'small': 12px,
+  ),
+  $descriptions-header-margin-bottom
+);
+
+$descriptions-title-font-size: () !default;
+$descriptions-title-font-size: map.merge(
+  (
+    'large': 16px,
+    'default': 16px,
+    'small': 14px,
+  ),
+  $descriptions-title-font-size
+);
+
 $descriptions-cell-padding-bottom: () !default;
 $descriptions-cell-padding-bottom: map.merge(
  (
-    'large': 10px,
-    'default': 8px,
-    'small': 6px,
+    'large': 16px,
+    'default': 12px,
+    'small': 8px,
  ),
  $descriptions-cell-padding-bottom
 );
@ -17,13 +37,23 @@ $descriptions-cell-padding-bottom: map.merge(
 $descriptions-bordered-cell-padding: () !default;
 $descriptions-bordered-cell-padding: map.merge(
  (
-    'large': 10px,
-    'default': 8px 10px,
-    'small': 6px 10px,
+    'large': 12px 15px,
+    'default': 8px 11px,
+    'small': 4px 7px,
  ),
  $descriptions-bordered-cell-padding
 );

+$descriptions-cell-font-size: () !default;
+$descriptions-cell-font-size: map.merge(
+  (
+    'large': 14px,
+    'default': 14px,
+    'small': 12px,
+  ),
+  $descriptions-cell-font-size
+);
+
@include b(descriptions) {
  @include set-component-css-var('descriptions', $descriptions);

@ -35,16 +65,16 @@ $descriptions-bordered-cell-padding: map.merge(
    display: flex;
    justify-content: space-between;
    align-items: center;
-    margin-bottom: var(--el-descriptions-header-margin-bottom);
+    margin-bottom: map.get($descriptions-header-margin-bottom, 'default');

    @include e(title) {
-      font-size: var(--el-descriptions-title-font-size);
+      color: var(--el-text-color-primary);
+      font-size: map.get($descriptions-title-font-size, 'default');
      font-weight: bold;
    }
  }

  @include e(body) {
-    color: var(--el-text-color-regular);
    background-color: $color-white;

    .#{$namespace}-descriptions__table {
@ -55,7 +85,8 @@ $descriptions-bordered-cell-padding: map.merge(
        box-sizing: border-box;
        text-align: left;
        font-weight: normal;
-        line-height: 1.5;
+        line-height: 23px;
+        font-size: map.get($descriptions-cell-font-size, 'default');

        @include when(left) {
          text-align: left;
@ -69,34 +100,51 @@ $descriptions-bordered-cell-padding: map.merge(
          text-align: right;
        }
      }
-    }
-  }

-  .is-bordered {
-    .#{$namespace}-descriptions__cell {
-      border: var(--el-descriptions-table-border);
-      padding: map.get($descriptions-bordered-cell-padding, 'default');
-    }
-  }
+      &.is-bordered {
+        .#{$namespace}-descriptions__cell {
+          border: var(--el-descriptions-table-border);
+          padding: map.get($descriptions-bordered-cell-padding, 'default');
+        }
+      }

-  :not(.is-bordered) {
-    .#{$namespace}-descriptions__cell {
-      padding-bottom: map.get($descriptions-cell-padding-bottom, 'default');
+      &:not(.is-bordered) {
+        .#{$namespace}-descriptions__cell {
+          padding-bottom: map.get($descriptions-cell-padding-bottom, 'default');
+        }
+      }
    }
  }

  @each $size in (large, small) {
    @include m($size) {
      font-size: map.get($input-font-size, $size);
-      &.is-bordered {
-        .#{$namespace}-descriptions__cell {
-          padding: map.get($descriptions-bordered-cell-padding, $size);
+
+      @include e(header) {
+        margin-bottom: map.get($descriptions-header-margin-bottom, $size);
+
+        @include e(title) {
+          font-size: map.get($descriptions-title-font-size, $size);
        }
      }

-      &:not(.is-bordered) {
-        .#{$namespace}-descriptions__cell {
-          padding-bottom: map.get($descriptions-cell-padding-bottom, $size);
+      @include e(body) {
+        .#{$namespace}-descriptions__table {
+          .#{$namespace}-descriptions__cell {
+            font-size: map.get($descriptions-cell-font-size, $size);
+          }
+
+          &.is-bordered {
+            .#{$namespace}-descriptions__cell {
+              padding: map.get($descriptions-bordered-cell-padding, $size);
+            }
+          }
+
+          &:not(.is-bordered) {
+            .#{$namespace}-descriptions__cell {
+              padding-bottom: map.get($descriptions-cell-padding-bottom, $size);
+            }
+          }
        }
      }
    }