mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
docs: improve format
This commit is contained in:
chenjiahan
neverland
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
|
||||
// Component Colors
|
||||
@ -23,7 +23,7 @@ Css 变量 的兼容性要求可以在 [这里](https://caniuse.com/#feat=css-va
|
||||
|
||||
### 定制单个组件的主题样式
|
||||
|
||||
> 在 wxss 中为组件设置 Css 变量
|
||||
> 在 wxss 中为组件设置 CSS 变量
|
||||
|
||||
```html
|
||||
<van-button class="my-button">
|
||||
@ -38,7 +38,7 @@ Css 变量 的兼容性要求可以在 [这里](https://caniuse.com/#feat=css-va
|
||||
}
|
||||
```
|
||||
|
||||
> 或通过 style 属性来设置 Css 变量，这使你能够轻松实现主题的动态切换
|
||||
> 或通过 style 属性来设置 CSS 变量，这使你能够轻松实现主题的动态切换
|
||||
|
||||
```html
|
||||
<van-button style="{{ buttonStyle }}">
|
||||
@ -70,7 +70,7 @@ Page({
|
||||
|
||||
### 定制多个组件的主题样式
|
||||
|
||||
> 与单个组件的定制方式类似，只需用一个 container 节点包裹住需要定制的组件，并将 Css 变量 设置在 container 节点上
|
||||
> 与单个组件的定制方式类似，只需用一个 container 节点包裹住需要定制的组件，并将 CSS 变量 设置在 container 节点上
|
||||
|
||||
```html
|
||||
<view class="container">
|
||||
@ -103,7 +103,7 @@ Page({
|
||||
|
||||
### 定制全局主题样式
|
||||
|
||||
> 在 app.wxss 中，写入 Css 变量，即可对全局生效
|
||||
> 在 app.wxss 中，写入 CSS 变量，即可对全局生效
|
||||
|
||||
```less
|
||||
page {
|
||||
|
||||
@ -18,27 +18,27 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
|
||||
|
||||
当文本内容长度超过容器最大宽度时，自动省略多余的文本。
|
||||
|
||||
```html
|
||||
<view class="van-ellipsis"
|
||||
>这是一段宽度限制 250px 的文字，后面的内容会省略</view
|
||||
>
|
||||
```xml
|
||||
<view class="van-ellipsis">
|
||||
这是一段宽度限制 250px 的文字，后面的内容会省略
|
||||
</view>
|
||||
|
||||
<!-- 最多显示两行 -->
|
||||
<view class="van-multi-ellipsis--l2"
|
||||
>这是一段最多显示两行的文字，后面的内容会省略</view
|
||||
>
|
||||
<view class="van-multi-ellipsis--l2">
|
||||
这是一段最多显示两行的文字，后面的内容会省略
|
||||
</view>
|
||||
|
||||
<!-- 最多显示三行 -->
|
||||
<view class="van-multi-ellipsis--l3"
|
||||
>这是一段最多显示三行的文字，后面的内容会省略</view
|
||||
>
|
||||
<view class="van-multi-ellipsis--l3">
|
||||
这是一段最多显示三行的文字，后面的内容会省略
|
||||
</view>
|
||||
```
|
||||
|
||||
### 1px 边框
|
||||
|
||||
为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。
|
||||
|
||||
```html
|
||||
```xml
|
||||
<!-- 上边框 -->
|
||||
<view class="van-hairline--top"></view>
|
||||
|
||||
|
||||
@ -48,10 +48,12 @@
|
||||
|
||||
```html
|
||||
<van-divider contentPosition="center" textColor="#1989fa">文本颜色</van-divider>
|
||||
<van-divider contentPosition="center" borderColor="#1989fa"
|
||||
>border颜色</van-divider
|
||||
>
|
||||
<van-divider contentPosition="center" fontSize="18">字体大小</van-divider>
|
||||
<van-divider contentPosition="center" borderColor="#1989fa">
|
||||
border 颜色
|
||||
</van-divider>
|
||||
<van-divider contentPosition="center" fontSize="18">
|
||||
字体大小
|
||||
</van-divider>
|
||||
```
|
||||
|
||||
### 自定义样式
|
||||
@ -59,9 +61,10 @@
|
||||
```html
|
||||
<van-divider
|
||||
contentPosition="center"
|
||||
customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;"
|
||||
>文本</van-divider
|
||||
customStyle="color: #1989fa; border-color: #1989fa; font-size: 18px;"
|
||||
>
|
||||
文本
|
||||
</van-divider>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
@ -163,7 +163,8 @@ Page({
|
||||
|
||||
### 真机上为什么会出现聚焦时 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 等其它组件？
|
||||
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
tip="{{ true }}"
|
||||
>
|
||||
<van-tag type="primary">标签</van-tag>
|
||||
<view slot="tip"> 您的收货地址不支持同城送, <text>修改地址</text> </view>
|
||||
<view slot="tip">您的收货地址不支持同城送, <text>修改地址</text></view>
|
||||
</van-submit-bar>
|
||||
```
|
||||
|
||||
|
||||
@ -21,9 +21,8 @@
|
||||
|
||||
&--line {
|
||||
box-sizing: content-box;
|
||||
height: calc(
|
||||
100% + 15px
|
||||
); /* 15px padding to hide scrollbar in mobile safari */
|
||||
// 15px padding to hide scrollbar in mobile safari
|
||||
height: calc(100% + 15px);
|
||||
}
|
||||
|
||||
&--card {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user