mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
2 lines
6.5 KiB
JavaScript
2 lines
6.5 KiB
JavaScript
/*! For license information please see 5088.e65412bd.js.LICENSE.txt */
|
|
(self.webpackChunk=self.webpackChunk||[]).push([["5088"],{16622:function(s,a,n){"use strict";n.r(a);var t=n("80681");let e=["innerHTML"];a.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'<h1>FAQ</h1>\n<div class="van-doc-card"><h3 id="how-do-i-customize-the-style-of-vant-components" tabindex="-1">How do I customize the style of Vant components?</h3>\n<h4 id="1.-theme-customization" tabindex="-1">1. Theme customization</h4>\n<p>Vant provides the ability to customize the theme based on CSS variables, and can uniformly modify the component style. For details, see <a href="#/en-US/config-provider" target="_blank">ConfigProvider Global Configuration</a> component.</p>\n<h4 id="2.-overriding-the-default-style" tabindex="-1">2. Overriding the default style</h4>\n<p>If the theme customization does not meet your needs, you can also override the default style using a <strong>custom style class</strong>, see the following example:</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">template</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-button"</span>></span>Button<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">template</span>></span>\n\n<span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="language-css">\n <span class="hljs-comment">/** Override the style of Button's root element */</span>\n <span class="hljs-selector-class">.my-button</span> {\n <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;\n }\n\n <span class="hljs-comment">/** Override the style of Button's child elements */</span>\n <span class="hljs-selector-class">.my-button</span><span class="hljs-selector-class">.van-button__text</span> {\n <span class="hljs-attribute">color</span>: red;\n }\n</span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>\n</code></pre>\n</div><div class="van-doc-card"><h3 id="components-not-rendering-correctly-in-html" tabindex="-1">Components not rendering correctly in HTML?</h3>\n<p>When using Vant components in HTML, you may encounter situations where some sample code may not render correctly, such as the following usage:</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-cell-group</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"cell"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"content"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"cell"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"content"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-cell-group</span>></span>\n</code></pre>\n<p>This is because HTML does not support self-closing custom elements, so syntax like <code><van-cell /></code> is not recognized. Using a closing tag can work around this problem:</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-cell-group</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"cell"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"content"</span>></span><span class="hljs-tag"></<span class="hljs-name">van-cell</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"cell"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"content"</span>></span><span class="hljs-tag"></<span class="hljs-name">van-cell</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-cell-group</span>></span>\n</code></pre>\n<p>Self-closing custom elements are available in single-file components, string templates, and JSX, so this problem doesn\'t arise.</p>\n</div><div class="van-doc-card"><h3 id="can-t-trigger-the-click-feedback-on-ios" tabindex="-1">Can\'t trigger the click feedback on iOS?</h3>\n<p>This is because iOS Safari does not trigger the <code>:active</code> pseudo-class by default. The solution is to add an empty <code>ontouchstart</code> attribute to the <code>body</code> tag:</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">body</span> <span class="hljs-attr">ontouchstart</span>=<span class="hljs-string">""</span>></span>\n ...\n<span class="hljs-tag"></<span class="hljs-name">body</span>></span>\n</code></pre>\n<p>Reference link: <a href="https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari/33681490#33681490" target="_blank">stackoverflow - :active pseudo-class doesn\'t work in mobile safari</a></p>\n</div><div class="van-doc-card"><h3 id="why-is-there-no-select-component" tabindex="-1">Why is there no Select component?</h3>\n<p>Select is a widely used component on the desktop, but its interactive form is not suitable for the mobile device.</p>\n<p>On the mobile side, we recommend using the <a href="#/en-US/picker" target="_blank">Picker selector component</a> instead.</p>\n</div><div class="van-doc-card"><h3 id="is-it-supported-in-uni-app" tabindex="-1">Is it supported in uni-app?</h3>\n<p>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.</p>\n<p>If you encounter problems using Vant in uni-app, it is recommended to provide feedback to uni-app.</p>\n</div><div class="van-doc-card"><h3 id="some-components-do-not-work-on-the-desktop" tabindex="-1">Some components do not work on the desktop?</h3>\n<p>See <a href="#/en-US/advanced-usage#adapt-to-pc-browsers" target="_blank">Adapt to PC Browsers</a>.</p>\n</div><div class="van-doc-card"><h3 id="how-do-i-implement-mobile-responsive-adaptation" tabindex="-1">How do I implement mobile responsive adaptation?</h3>\n<p>See <a href="#/en-US/advanced-usage#browser-adaptation" target="_blank">Browser Adaptation</a>.</p>\n</div>'},null,8,e))}}}]); |