docs: add en FAQ (#11512)

2025-04-06 03:57:59 +08:00 · 2023-01-23 21:29:08 +08:00 · 2023-01-23 21:29:08 +08:00 · 467a6a7cd3
commit 467a6a7cd3
parent c2b20176d2
3 changed files with 88 additions and 1 deletions
--- a/packages/vant/docs/markdown/faq.en-US.md
+++ b/packages/vant/docs/markdown/faq.en-US.md
@ -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).
--- a/packages/vant/docs/markdown/faq.zh-CN.md
+++ b/packages/vant/docs/markdown/faq.zh-CN.md
@ -50,7 +50,7 @@ Vant 基于 CSS 变量提供了主题定制的能力，可以对组件样式进

 在单文件组件、字符串模板和 JSX 中可以使用自闭合的自定义元素，因此不会出现这个问题。

-### 在 iOS 上点击组件时，无法触发点击反馈效果？
+### 在 iOS 上无法触发组件的点击反馈效果？

 这是因为 iOS Safari 默认不会触发 `:active` 伪类，解决方法是在 `body` 标签上添加一个空的 `ontouchstart` 属性：

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