From fb3142af5e3da7a9f72dcfeba5f682861059ec79 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 26 Feb 2023 10:34:02 +0800 Subject: [PATCH] feat(TextEllipsis): add van-text-ellipsis-line-height CSS var (#11620) --- packages/vant/src/text-ellipsis/README.md | 12 ++++++++---- packages/vant/src/text-ellipsis/README.zh-CN.md | 12 ++++++++---- packages/vant/src/text-ellipsis/demo/index.vue | 9 +++++++-- packages/vant/src/text-ellipsis/index.less | 3 ++- 4 files changed, 25 insertions(+), 11 deletions(-) diff --git a/packages/vant/src/text-ellipsis/README.md b/packages/vant/src/text-ellipsis/README.md index 639a0860e..41815e8ad 100644 --- a/packages/vant/src/text-ellipsis/README.md +++ b/packages/vant/src/text-ellipsis/README.md @@ -2,7 +2,7 @@ ### Intro -Show ellipsis for long text and support for Expand/Collapse. +Display ellipsis for long text and support for expanding or collapsing text. ### Install @@ -31,6 +31,7 @@ export default { setup() { const text = 'Vant is a lightweight, customizable mobile component library that was open sourced in 2017. Currently Vant officially provides Vue 2 version, Vue 3 version and WeChat applet version, and the community team maintains React version and Alipay applet version.'; + return { text }; }, }; ``` @@ -52,6 +53,7 @@ export default { setup() { const text = 'Vant is a lightweight, customizable mobile component library that was open sourced in 2017. Currently Vant officially provides Vue 2 version, Vue 3 version and WeChat applet version, and the community team maintains React version and Alipay applet version.'; + return { text }; }, }; ``` @@ -74,6 +76,7 @@ export default { setup() { const text = 'Vant is a lightweight, customizable mobile component library that was open sourced in 2017. Currently Vant officially provides Vue 2 version, Vue 3 version and WeChat applet version, and the community team maintains React version and Alipay applet version.'; + return { text }; }, }; ``` @@ -109,6 +112,7 @@ import type { TextEllipsisProps, TextEllipsisThemeVars } from 'vant'; The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). -| Name | Default Value | Description | -| -------------------------------- | ----------------- | ----------- | -| --van-text-ellipsis-action-color | _var(--van-blue)_ | - | +| Name | Default Value | Description | +| -------------------------------- | ----------------- | -------------------- | +| --van-text-ellipsis-action-color | _var(--van-blue)_ | Color of action text | +| --van-text-ellipsis-line-height | _1.6_ | Line height of text | diff --git a/packages/vant/src/text-ellipsis/README.zh-CN.md b/packages/vant/src/text-ellipsis/README.zh-CN.md index f0f09e4d5..968cbe53d 100644 --- a/packages/vant/src/text-ellipsis/README.zh-CN.md +++ b/packages/vant/src/text-ellipsis/README.zh-CN.md @@ -20,7 +20,7 @@ app.use(TextEllipsis); ### 基础用法 -默认展示`1`行，超过`1`行显示省略号。 +默认展示 `1` 行，超过 `1` 行显示省略号。 ```html @@ -31,6 +31,7 @@ export default { setup() { const text = 'Vant 是一个轻量、可定制的移动端组件库，于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。'; + return { text }; }, }; ``` @@ -48,6 +49,7 @@ export default { setup() { const text = 'Vant 是一个轻量、可定制的移动端组件库，于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。'; + return { text }; }, }; ``` @@ -70,6 +72,7 @@ export default { setup() { const text = 'Vant 是一个轻量、可定制的移动端组件库，于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。'; + return { text }; }, }; ``` @@ -105,6 +108,7 @@ import type { TextEllipsisProps, TextEllipsisThemeVars } from 'vant'; 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| -------------------------------- | ----------------- | ---- | -| --van-text-ellipsis-action-color | _var(--van-blue)_ | - | +| 名称 | 默认值 | 描述 | +| -------------------------------- | ----------------- | -------------- | +| --van-text-ellipsis-action-color | _var(--van-blue)_ | 操作按钮的颜色 | +| --van-text-ellipsis-line-height | _1.6_ | 文本的行高 | diff --git a/packages/vant/src/text-ellipsis/demo/index.vue b/packages/vant/src/text-ellipsis/demo/index.vue index 89d8040c3..b90cd574d 100644 --- a/packages/vant/src/text-ellipsis/demo/index.vue +++ b/packages/vant/src/text-ellipsis/demo/index.vue @@ -49,7 +49,12 @@ const t = useTranslate({ diff --git a/packages/vant/src/text-ellipsis/index.less b/packages/vant/src/text-ellipsis/index.less index 9a5a8004f..d529c1e15 100644 --- a/packages/vant/src/text-ellipsis/index.less +++ b/packages/vant/src/text-ellipsis/index.less @@ -1,9 +1,10 @@ :root { + --van-text-ellipsis-line-height: 1.6; --van-text-ellipsis-action-color: var(--van-blue); } .van-text-ellipsis { - line-height: 1.5; + line-height: var(--van-text-ellipsis-line-height); white-space: pre-wrap; &__action {