blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs: add en FAQ (#11512)

Browse Source
This commit is contained in:
neverland 2023-01-23 21:29:08 +08:00 committed by GitHub
parent c2b20176d2
commit 467a6a7cd3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 88 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
packages/vant/docs/markdown/faq.en-US.md Normal file
View File

@ -0,0 +1,83 @@
# FAQ
### How do I customize the style of Vant components?
#### 1. Theme customization
Vant provides the ability to customize the theme based on CSS variables, and can uniformly modify the component style. For details, see [ConfigProvider Global Configuration](#/en-US/config-provider) component.
#### 2. Overriding the default style
If the theme customization does not meet your needs, you can also override the default style using a **custom style class**, see the following example:
```html
<template>
<van-button class="my-button">Button</van-button>
</template>
<style>
/** Override the style of Button's root element */
.my-button {
width: 200px;
}
/** Override the style of Button's child elements */
.my-button.van-button__text {
color: red;
}
</style>
```
### Components not rendering correctly in HTML?
When using Vant components in HTML, you may encounter situations where some sample code may not render correctly, such as the following usage:
```html
<van-cell-group>
<van-cell title="cell" value="content" />
<van-cell title="cell" value="content" />
</van-cell-group>
```
This is because HTML does not support self-closing custom elements, so syntax like `<van-cell />` is not recognized. Using a closing tag can work around this problem:
```html
<van-cell-group>
<van-cell title="cell" value="content"></van-cell>
<van-cell title="cell" value="content"></van-cell>
</van-cell-group>
```
Self-closing custom elements are available in single-file components, string templates, and JSX, so this problem doesn't arise.
### Can't trigger the click feedback on iOS?
This is because iOS Safari does not trigger the `:active` pseudo-class by default. The solution is to add an empty `ontouchstart` attribute to the `body` tag:
```html
<body ontouchstart="">
...
</body>
```
Reference link: [stackoverflow - :active pseudo-class doesn't work in mobile safari](https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari/33681490#33681490)
### Why is there no Select component?
Select is a widely used component on the desktop, but its interactive form is not suitable for the mobile device.
On the mobile side, we recommend using the [Picker selector component](#/en-US/picker) instead.
### Is it supported in uni-app?
All components of Vant are implemented based on the Vue framework and are not adapted to uni-app, so the availability of each component under uni-app is not guaranteed.
If you encounter problems using Vant in uni-app, it is recommended to provide feedback to uni-app.
### Some components do not work on the desktop?
See [Adapt to PC Browsers](#/en-US/advanced-usage#adapt-to-pc-browsers).
### How do I implement mobile responsive adaptation?
See [Browser Adaptation](#/en-US/advanced-usage#browser-adaptation).

2
packages/vant/docs/markdown/faq.zh-CN.md
View File

@ -50,7 +50,7 @@ Vant 基于 CSS 变量提供了主题定制的能力，可以对组件样式进
在单文件组件、字符串模板和 JSX 中可以使用自闭合的自定义元素，因此不会出现这个问题。 在单文件组件、字符串模板和 JSX 中可以使用自闭合的自定义元素，因此不会出现这个问题。
### 在 iOS 上点击组件时，无法触发点击反馈效果？ ### 在 iOS 上无法触发组件的点击反馈效果？
这是因为 iOS Safari 默认不会触发 `:active` 伪类，解决方法是在 `body` 标签上添加一个空的 `ontouchstart` 属性： 这是因为 iOS Safari 默认不会触发 `:active` 伪类，解决方法是在 `body` 标签上添加一个空的 `ontouchstart` 属性：

4
packages/vant/vant.config.mjs
View File

@ -507,6 +507,10 @@ location.href = location.href.replace('youzan.github.io', 'vant-ui.github.io');
path: 'advanced-usage', path: 'advanced-usage',
title: 'Advanced Usage', title: 'Advanced Usage',
}, },
{
path: 'faq',
title: 'FAQ',
},
{ {
path: 'changelog', path: 'changelog',
title: 'Changelog', title: 'Changelog',