feat(TextEllipsis): add van-text-ellipsis-line-height CSS var (#11620)

This commit is contained in:
neverland 2023-02-26 10:34:02 +08:00 committed by GitHub
parent 0661f1f1fa
commit fb3142af5e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 25 additions and 11 deletions

View File

@ -2,7 +2,7 @@
### Intro ### Intro
Show ellipsis for long text and support for Expand/Collapse. Display ellipsis for long text and support for expanding or collapsing text.
### Install ### Install
@ -31,6 +31,7 @@ export default {
setup() { setup() {
const text = 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.'; '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() { setup() {
const text = 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.'; '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() { setup() {
const text = 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.'; '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 };
}, },
}; };
``` ```
@ -110,5 +113,6 @@ 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). 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 | | Name | Default Value | Description |
| -------------------------------- | ----------------- | ----------- | | -------------------------------- | ----------------- | -------------------- |
| --van-text-ellipsis-action-color | _var(--van-blue)_ | - | | --van-text-ellipsis-action-color | _var(--van-blue)_ | Color of action text |
| --van-text-ellipsis-line-height | _1.6_ | Line height of text |

View File

@ -31,6 +31,7 @@ export default {
setup() { setup() {
const text = const text =
'Vant 是一个轻量、可定制的移动端组件库,于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。'; 'Vant 是一个轻量、可定制的移动端组件库,于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。';
return { text };
}, },
}; };
``` ```
@ -48,6 +49,7 @@ export default {
setup() { setup() {
const text = const text =
'Vant 是一个轻量、可定制的移动端组件库,于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。'; 'Vant 是一个轻量、可定制的移动端组件库,于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。';
return { text };
}, },
}; };
``` ```
@ -70,6 +72,7 @@ export default {
setup() { setup() {
const text = const text =
'Vant 是一个轻量、可定制的移动端组件库,于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。'; 'Vant 是一个轻量、可定制的移动端组件库,于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。';
return { text };
}, },
}; };
``` ```
@ -106,5 +109,6 @@ import type { TextEllipsisProps, TextEllipsisThemeVars } from 'vant';
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 组件提供了下列 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_ | 文本的行高 |

View File

@ -49,7 +49,12 @@ const t = useTranslate({
</template> </template>
<style lang="less"> <style lang="less">
.demo-text-ellipsis {
font-size: 15px;
background-color: var(--van-background-2);
.van-text-ellipsis { .van-text-ellipsis {
padding: 0 20px; padding: 0 20px;
} }
}
</style> </style>

View File

@ -1,9 +1,10 @@
:root { :root {
--van-text-ellipsis-line-height: 1.6;
--van-text-ellipsis-action-color: var(--van-blue); --van-text-ellipsis-action-color: var(--van-blue);
} }
.van-text-ellipsis { .van-text-ellipsis {
line-height: 1.5; line-height: var(--van-text-ellipsis-line-height);
white-space: pre-wrap; white-space: pre-wrap;
&__action { &__action {