mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-24 18:36:51 +08:00
feat(TextEllipsis): add van-text-ellipsis-line-height CSS var (#11620)
This commit is contained in:
parent
0661f1f1fa
commit
fb3142af5e
@ -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 |
|
||||||
|
@ -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_ | 文本的行高 |
|
||||||
|
@ -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>
|
||||||
|
@ -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 {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user