mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
docs: improve format
This commit is contained in:
parent
44fc8b065c
commit
942ea6b635
@ -2,13 +2,13 @@
|
|||||||
|
|
||||||
### 背景知识
|
### 背景知识
|
||||||
|
|
||||||
小程序基于 [Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=zh-cn) 来实现自定义组件,所以 Vant Weapp 使用与之配套的 [Css 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 来实现定制主题。链接中的内容可以帮助你对这两个概念有基本的认识,避免许多不必要的困扰。
|
小程序基于 [Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=zh-cn) 来实现自定义组件,所以 Vant Weapp 使用与之配套的 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 来实现定制主题。链接中的内容可以帮助你对这两个概念有基本的认识,避免许多不必要的困扰。
|
||||||
|
|
||||||
Css 变量 的兼容性要求可以在 [这里](https://caniuse.com/#feat=css-variables) 查看。对于不支持 Css 变量 的设备,定制主题将不会生效,不过不必担心,默认样式仍会生效。
|
CSS 变量 的兼容性要求可以在 [这里](https://caniuse.com/#feat=css-variables) 查看。对于不支持 CSS 变量 的设备,定制主题将不会生效,不过不必担心,默认样式仍会生效。
|
||||||
|
|
||||||
### 样式变量
|
### 样式变量
|
||||||
|
|
||||||
定制使用的 Css 变量 与 Less 变量 同名,下面是一些基本的样式变量,所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less)。
|
定制使用的 CSS 变量 与 Less 变量 同名,下面是一些基本的样式变量,所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less)。
|
||||||
|
|
||||||
```less
|
```less
|
||||||
// Component Colors
|
// Component Colors
|
||||||
@ -23,7 +23,7 @@ Css 变量 的兼容性要求可以在 [这里](https://caniuse.com/#feat=css-va
|
|||||||
|
|
||||||
### 定制单个组件的主题样式
|
### 定制单个组件的主题样式
|
||||||
|
|
||||||
> 在 wxss 中为组件设置 Css 变量
|
> 在 wxss 中为组件设置 CSS 变量
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-button class="my-button">
|
<van-button class="my-button">
|
||||||
@ -38,7 +38,7 @@ Css 变量 的兼容性要求可以在 [这里](https://caniuse.com/#feat=css-va
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
> 或通过 style 属性来设置 Css 变量,这使你能够轻松实现主题的动态切换
|
> 或通过 style 属性来设置 CSS 变量,这使你能够轻松实现主题的动态切换
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-button style="{{ buttonStyle }}">
|
<van-button style="{{ buttonStyle }}">
|
||||||
@ -70,7 +70,7 @@ Page({
|
|||||||
|
|
||||||
### 定制多个组件的主题样式
|
### 定制多个组件的主题样式
|
||||||
|
|
||||||
> 与单个组件的定制方式类似,只需用一个 container 节点包裹住需要定制的组件,并将 Css 变量 设置在 container 节点上
|
> 与单个组件的定制方式类似,只需用一个 container 节点包裹住需要定制的组件,并将 CSS 变量 设置在 container 节点上
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<view class="container">
|
<view class="container">
|
||||||
@ -103,7 +103,7 @@ Page({
|
|||||||
|
|
||||||
### 定制全局主题样式
|
### 定制全局主题样式
|
||||||
|
|
||||||
> 在 app.wxss 中,写入 Css 变量,即可对全局生效
|
> 在 app.wxss 中,写入 CSS 变量,即可对全局生效
|
||||||
|
|
||||||
```less
|
```less
|
||||||
page {
|
page {
|
||||||
|
@ -18,27 +18,27 @@ Vant 中默认包含了一些常用样式,可以直接通过 className 的方
|
|||||||
|
|
||||||
当文本内容长度超过容器最大宽度时,自动省略多余的文本。
|
当文本内容长度超过容器最大宽度时,自动省略多余的文本。
|
||||||
|
|
||||||
```html
|
```xml
|
||||||
<view class="van-ellipsis"
|
<view class="van-ellipsis">
|
||||||
>这是一段宽度限制 250px 的文字,后面的内容会省略</view
|
这是一段宽度限制 250px 的文字,后面的内容会省略
|
||||||
>
|
</view>
|
||||||
|
|
||||||
<!-- 最多显示两行 -->
|
<!-- 最多显示两行 -->
|
||||||
<view class="van-multi-ellipsis--l2"
|
<view class="van-multi-ellipsis--l2">
|
||||||
>这是一段最多显示两行的文字,后面的内容会省略</view
|
这是一段最多显示两行的文字,后面的内容会省略
|
||||||
>
|
</view>
|
||||||
|
|
||||||
<!-- 最多显示三行 -->
|
<!-- 最多显示三行 -->
|
||||||
<view class="van-multi-ellipsis--l3"
|
<view class="van-multi-ellipsis--l3">
|
||||||
>这是一段最多显示三行的文字,后面的内容会省略</view
|
这是一段最多显示三行的文字,后面的内容会省略
|
||||||
>
|
</view>
|
||||||
```
|
```
|
||||||
|
|
||||||
### 1px 边框
|
### 1px 边框
|
||||||
|
|
||||||
为元素添加 Retina 屏幕下的 1px 边框(即 hairline),基于伪类 transform 实现。
|
为元素添加 Retina 屏幕下的 1px 边框(即 hairline),基于伪类 transform 实现。
|
||||||
|
|
||||||
```html
|
```xml
|
||||||
<!-- 上边框 -->
|
<!-- 上边框 -->
|
||||||
<view class="van-hairline--top"></view>
|
<view class="van-hairline--top"></view>
|
||||||
|
|
||||||
|
@ -48,10 +48,12 @@
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<van-divider contentPosition="center" textColor="#1989fa">文本颜色</van-divider>
|
<van-divider contentPosition="center" textColor="#1989fa">文本颜色</van-divider>
|
||||||
<van-divider contentPosition="center" borderColor="#1989fa"
|
<van-divider contentPosition="center" borderColor="#1989fa">
|
||||||
>border颜色</van-divider
|
border 颜色
|
||||||
>
|
</van-divider>
|
||||||
<van-divider contentPosition="center" fontSize="18">字体大小</van-divider>
|
<van-divider contentPosition="center" fontSize="18">
|
||||||
|
字体大小
|
||||||
|
</van-divider>
|
||||||
```
|
```
|
||||||
|
|
||||||
### 自定义样式
|
### 自定义样式
|
||||||
@ -60,8 +62,9 @@
|
|||||||
<van-divider
|
<van-divider
|
||||||
contentPosition="center"
|
contentPosition="center"
|
||||||
customStyle="color: #1989fa; border-color: #1989fa; font-size: 18px;"
|
customStyle="color: #1989fa; border-color: #1989fa; font-size: 18px;"
|
||||||
>文本</van-divider
|
|
||||||
>
|
>
|
||||||
|
文本
|
||||||
|
</van-divider>
|
||||||
```
|
```
|
||||||
|
|
||||||
## API
|
## API
|
||||||
|
@ -163,7 +163,8 @@ Page({
|
|||||||
|
|
||||||
### 真机上为什么会出现聚焦时 placeholder 加粗、闪烁的现象?
|
### 真机上为什么会出现聚焦时 placeholder 加粗、闪烁的现象?
|
||||||
|
|
||||||
由于微信小程序的 input 组件和 textarea 组件是原生组件,聚焦时会将原生的输入框覆盖在对应位置上,导致了这个现象的产生。相关的讨论可以查看[微信开放社区](https://developers.weixin.qq.com/community/search?query=placeholder%20%E9%97%AA%E7%83%81%20%E5%8A%A0%E7%B2%97)
|
- 由于微信小程序的 input 组件和 textarea 组件是原生组件,聚焦时会将原生的输入框覆盖在对应位置上,导致了这个现象的产生。
|
||||||
|
- 相关的讨论可以查看[微信开放社区](https://developers.weixin.qq.com/community/search?query=placeholder%20%E9%97%AA%E7%83%81%20%E5%8A%A0%E7%B2%97)
|
||||||
|
|
||||||
### 真机上 placeholder 为什么会盖过 popup 等其它组件?
|
### 真机上 placeholder 为什么会盖过 popup 等其它组件?
|
||||||
|
|
||||||
|
@ -21,9 +21,8 @@
|
|||||||
|
|
||||||
&--line {
|
&--line {
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
height: calc(
|
// 15px padding to hide scrollbar in mobile safari
|
||||||
100% + 15px
|
height: calc(100% + 15px);
|
||||||
); /* 15px padding to hide scrollbar in mobile safari */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&--card {
|
&--card {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user