diff --git a/docs/component/divider.md b/docs/component/divider.md index b44379539..60b3b4b6e 100644 --- a/docs/component/divider.md +++ b/docs/component/divider.md @@ -1,14 +1,53 @@ -# Divider 分割线 +# Divider 分割线 +:::danger 请注意 +`hairline`、`dashed`、`content-position`、`vertical`属性为 $LOWEST_VERSION$ 版本新增支持，在此之前仅支持默认插槽显示文本和自定义`color`。 +::: ## 基本使用 -使用默认插槽设置内容。 +默认渲染一条水平分割线。 ```html -这是分割线 + +``` + +## 展示文本 + +使用默认插槽在分割线中间插入内容。 + +```html +展示文本 +``` + +## 自定义渲染内容 + +使用默认插槽在分割线中间插入自定义内容。 + +```html + + + +``` + +## 内容位置 + +通过 `content-position` 指定内容所在位置。 + +```html +中间 +左侧 +右侧 +``` + +## 虚线 + +添加 `dashed` 属性使分割线渲染为虚线。 + +```html +虚线分割 ``` ## 自定义颜色 @@ -19,20 +58,48 @@ 自定义颜色 ``` +## 垂直分割线 + +添加 `vertical` 属性使分割线渲染为垂直分割线。 + +```html + + 文本 + + 文本 + + 文本 + + 文本 + + 文本 + +``` + +```css +.content { + padding: 12rpx 15px; +} +``` + ## Attributes -| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | -|-----|------|-----|-------|-------|--------| -| color | 自定义颜色，所有颜色的写法 | string | - | - | - | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +| ---------------- | ------------------------------ | ------- | ----------------------- | -------- | ---------------- | +| color | 自定义颜色，支持所有颜色的写法 | string | - | - | - | +| hairline | 是否显示边框 | boolean | - | true | $LOWEST_VERSION$ | +| dashed | 是否显示为虚线 | boolean | - | false | $LOWEST_VERSION$ | +| content-position | 内容位置 | string | `left`/`center`/`right` | `center` | $LOWEST_VERSION$ | +| vertical | 是否显示为垂直分割线 | boolean | - | false | $LOWEST_VERSION$ | ## Slot -| name | 说明 | 最低版本 | -|------|-----|---------| -| default | 内容 | - | +| name | 说明 | 最低版本 | +| ------- | ---- | -------- | +| default | 内容，仅在 `vertical` 为 `false` 时生效 | - | ## 外部样式类 -| 类名 | 说明 | 最低版本 | -|-----|-----|---------| -| custom-class | 根节点样式 | - | +| 类名 | 说明 | 最低版本 | +| ------------ | ---------- | -------- | +| custom-class | 根节点样式 | - | diff --git a/src/pages/divider/Index.vue b/src/pages/divider/Index.vue index bef32532b..f6149f506 100644 --- a/src/pages/divider/Index.vue +++ b/src/pages/divider/Index.vue @@ -1,21 +1,51 @@ - - + diff --git a/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss b/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss index db0bb1aa6..521cffa37 100644 --- a/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss +++ b/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss @@ -268,9 +268,21 @@ $-collapse-more-color: var(--wot-collapse-more-color, $-color-theme) !default; / /* divider */ $-divider-padding: var(--wot-divider-padding, 0 $-size-side-padding) !default; // 两边间距 +$-divider-margin: var(--wot-divider-margin, 16px 0) !default; // 上下间距 $-divider-color: var(--wot-divider-color, rgba(0, 0, 0, 0.45)) !default; // 字体颜色 -$-divider-line-color: var(--wot-divider-line-color, rgba(0, 0, 0, 0.15)) !default; // 线条颜色 +$-divider-line-color: var(--wot-divider-line-color, currentColor) !default; // 线条颜色 +$-divider-line-height: var(--wot-divider-line-height, 1px) !default; // 线条高度 $-divider-fs: var(--wot-divider-fs, 14px) !default; // 字体大小 +$-divider-content-left-width: var(--wot-divider-content-left-width, 10%) !default; // 左侧内容宽度 +$-divider-content-left-margin: var(--wot-divider-content-left-margin, 12px) !default; // 左侧内容距离线距离 +$-divider-content-right-margin: var(--wot-divider-content-right-margin, 12px) !default; // 右侧内容距离线距离 +$-divider-content-right-width: var(--wot-divider-content-right-width, 10%) !default; // 右侧内容宽度 +$-divider-vertical-height: var(--wot-divider-vertical-height, 16px) !default; // 垂直分割线高度 +$-divider-vertical-content-margin: var(--wot-divider-vertical-content-margin, 0 8px) !default; // 垂直分割线内容间距 +$-divider-vertical-line-width: var(--wot-divider-vertical-line-width, 1px) !default; // 线条高度 + + + /* drop-menu */ $-drop-menu-height: var(--wot-drop-menu-height, 48px) !default; // 展示选中项的高度 diff --git a/src/uni_modules/wot-design-uni/components/wd-divider/index.scss b/src/uni_modules/wot-design-uni/components/wd-divider/index.scss index 3bb29c9cc..c67d10650 100644 --- a/src/uni_modules/wot-design-uni/components/wd-divider/index.scss +++ b/src/uni_modules/wot-design-uni/components/wd-divider/index.scss @@ -15,18 +15,86 @@ position: relative; display: flex; padding: $-divider-padding; + margin: $-divider-margin; align-items: center; color: $-divider-color; font-size: $-divider-fs; - @include e(line) { - display: block; + &::after, + &::before { flex: 1; - height: 1px; - transform: scaleY(0.5); - background: $-divider-line-color; + display: block; + box-sizing: border-box; + border-style: solid; + border-color: $-divider-line-color; + border-width: $-divider-line-height 0 0; } - @include e(content) { - padding: 0 12px; + + &::before { + content: ''; } -} + + @include m(center, left, right) { + &::after { + content: ''; + margin-left: $-divider-content-left-margin; + } + + &::before { + margin-right: $-divider-content-right-margin; + } + } + + @include m(left) { + &::before { + max-width: $-divider-content-left-width; + } + } + + @include m(right) { + &::after { + max-width: $-divider-content-right-width; + } + } + + @include when(hairline) { + + &::before, + &::after { + transform: scaleY(0.5); + } + } + + @include when(dashed) { + + &::before, + &::after { + border-style: dashed; + } + } + + @include m(vertical) { + display: inline-block; + width: $-divider-vertical-line-width; + height: $-divider-vertical-height; + margin: $-divider-vertical-content-margin; + padding: 0; + vertical-align: middle; + + &::before { + height: 100%; + border-width: 0 0 0 $-divider-vertical-line-width; + } + + &::after { + display: none; + } + + @include when(hairline) { + &::before { + transform: scaleX(0.5); + } + } + } + +} \ No newline at end of file diff --git a/src/uni_modules/wot-design-uni/components/wd-divider/types.ts b/src/uni_modules/wot-design-uni/components/wd-divider/types.ts index 80a114b61..df9e31322 100644 --- a/src/uni_modules/wot-design-uni/components/wd-divider/types.ts +++ b/src/uni_modules/wot-design-uni/components/wd-divider/types.ts @@ -1,12 +1,35 @@ import type { ExtractPropTypes } from 'vue' -import { baseProps, makeStringProp } from '../common/props' +import { baseProps, makeBooleanProp, makeStringProp } from '../common/props' + +export type DividerPosition = 'center' | 'left' | 'right' +export type DividerDirection = 'horizontal' | 'vertical' export const dividerProps = { ...baseProps, /** - * 自定义颜色，所有颜色的写法 + * 自定义颜色 + */ + color: makeStringProp(''), + /** + * 内容位置，可选值为 `left` `right` `center` + * 默认值：`center` + */ + contentPosition: makeStringProp('center'), + /** + * 是否显示为虚线 + * 默认值：`false` + */ + dashed: Boolean, + /** + * 是否为垂直分割线 + * 默认值：`false` + */ + vertical: makeBooleanProp(false), + /** + * 是否显示为 0.5px 的线 + * 默认值：`true` */ - color: makeStringProp('') + hairline: makeBooleanProp(true) } export type DividerProps = ExtractPropTypes diff --git a/src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue b/src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue index 4e47bad02..4211cd9b1 100644 --- a/src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue +++ b/src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue @@ -1,10 +1,6 @@