diff --git a/packages/vant/docs/markdown/faq.en-US.md b/packages/vant/docs/markdown/faq.en-US.md new file mode 100644 index 000000000..e83071159 --- /dev/null +++ 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 + + + +``` + +### 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 + + + + +``` + +This is because HTML does not support self-closing custom elements, so syntax like `` is not recognized. Using a closing tag can work around this problem: + +```html + + + + +``` + +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 + + ... + +``` + +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). diff --git a/packages/vant/docs/markdown/faq.zh-CN.md b/packages/vant/docs/markdown/faq.zh-CN.md index 18ea3fc33..6c8a79c9c 100644 --- 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` 属性: diff --git a/packages/vant/vant.config.mjs b/packages/vant/vant.config.mjs index ad362930e..b02e596c8 100644 --- 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',