mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
2 lines
24 KiB
JavaScript
2 lines
24 KiB
JavaScript
/*! For license information please see 4127.ab7a37a1.js.LICENSE.txt */
|
|
(self.webpackChunk=self.webpackChunk||[]).push([["4127"],{54467:function(t,s,n){"use strict";n.r(s);var a=n("80681");let e=["innerHTML"];s.default={setup:()=>({html:""}),render:()=>((0,a.wg)(),(0,a.iD)("div",{class:"van-doc-markdown-body",innerHTML:'<h1>Toast</h1>\n<div class="van-doc-card"><h3 id="intro" tabindex="-1">Intro</h3>\n<p>Black semi-transparent pop-up hint in the middle of the page, used for message notification, loading hint, operation result hint and other scenarios.</p>\n</div><div class="van-doc-card"><h3 id="install" tabindex="-1">Install</h3>\n<p>Register component globally via <code>app.use</code>, refer to <a href="#/en-US/advanced-usage#zu-jian-zhu-ce" target="_blank">Component Registration</a> for more registration ways.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> { <span class="hljs-title class_">Toast</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-keyword">const</span> app = <span class="hljs-title function_">createApp</span>();\napp.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">Toast</span>);\n</code></pre>\n</div><div class="van-doc-card"><h3 id="function-call" tabindex="-1">Function Call</h3>\n<p>Vant provides some utility functions that can quickly evoke global <code>Toast</code> components.</p>\n<p>For example, calling the <code>showToast</code> function will render a Toast directly in the page.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { showToast } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-title function_">showToast</span>(<span class="hljs-string">'Some messages'</span>);\n</code></pre>\n</div><h2 id="usage" tabindex="-1">Usage</h2>\n<div class="van-doc-card"><h3 id="text" tabindex="-1">Text</h3>\n<p>Use the <code>showToast</code> method to display a text toast in the center of the screen.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { showToast } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-title function_">showToast</span>(<span class="hljs-string">'Some messages'</span>);\n</code></pre>\n</div><div class="van-doc-card"><h3 id="loading" tabindex="-1">Loading</h3>\n<p>Use the <code>showLoadingToast</code> method to display a loading toast. The <code>forbidClick</code> option can be used to disable background clicks.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { showLoadingToast } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-title function_">showLoadingToast</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">'Loading...'</span>,\n <span class="hljs-attr">forbidClick</span>: <span class="hljs-literal">true</span>,\n});\n</code></pre>\n</div><div class="van-doc-card"><h3 id="success-fail" tabindex="-1">Success/Fail</h3>\n<p>Use the <code>showSuccessToast</code> method to display a success message, and use the <code>showFailToast</code> method to display a failure message.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { showSuccessToast, showFailToast } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-title function_">showSuccessToast</span>(<span class="hljs-string">'Success'</span>);\n<span class="hljs-title function_">showFailToast</span>(<span class="hljs-string">'Fail'</span>);\n</code></pre>\n</div><div class="van-doc-card"><h3 id="custom-icon" tabindex="-1">Custom Icon</h3>\n<p>The <code>icon</code> option allows you to customize the icon by specifying either the icon name or an image URL, which is equivalent to the <code>name</code> attribute of the Icon component.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { showToast, showLoadingToast } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-title function_">showToast</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">'Custom Icon'</span>,\n <span class="hljs-attr">icon</span>: <span class="hljs-string">'like-o'</span>,\n});\n\n<span class="hljs-title function_">showToast</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">'Custom Image'</span>,\n <span class="hljs-attr">icon</span>: <span class="hljs-string">'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png'</span>,\n});\n</code></pre>\n<p>The <code>loadingType</code> option allows you to customize the type of loading icon.</p>\n<pre><code class="language-js"><span class="hljs-title function_">showLoadingToast</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">'Loading...'</span>,\n <span class="hljs-attr">forbidClick</span>: <span class="hljs-literal">true</span>,\n <span class="hljs-attr">loadingType</span>: <span class="hljs-string">'spinner'</span>,\n});\n</code></pre>\n</div><div class="van-doc-card"><h3 id="custom-position" tabindex="-1">Custom Position</h3>\n<p>By default, the Toast is rendered in the center of the screen. You can control the position of the Toast by using the <code>position</code> option.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { showToast } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-title function_">showToast</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">'Top'</span>,\n <span class="hljs-attr">position</span>: <span class="hljs-string">'top'</span>,\n});\n\n<span class="hljs-title function_">showToast</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">'Bottom'</span>,\n <span class="hljs-attr">position</span>: <span class="hljs-string">'bottom'</span>,\n});\n</code></pre>\n</div><div class="van-doc-card"><h3 id="word-break" tabindex="-1">Word Break</h3>\n<p>The <code>wordBreak</code> option controls how the text in the Toast is truncated when it exceeds the available space. The default value is <code>break-all</code>, and the optional values are <code>break-word</code> and <code>normal</code>.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { showToast } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-title function_">showToast</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">'This message will contain a incomprehensibilities long word.'</span>,\n <span class="hljs-attr">wordBreak</span>: <span class="hljs-string">'break-all'</span>,\n});\n\n<span class="hljs-title function_">showToast</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">'This message will contain a incomprehensibilities long word.'</span>,\n <span class="hljs-attr">wordBreak</span>: <span class="hljs-string">'break-word'</span>,\n});\n</code></pre>\n</div><div class="van-doc-card"><h3 id="update-message" tabindex="-1">Update Message</h3>\n<p>When executing the Toast method, it returns the corresponding Toast instance. You can dynamically update the message by modifying the <code>message</code> property on the instance.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { showLoadingToast, closeToast } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-keyword">const</span> toast = <span class="hljs-title function_">showLoadingToast</span>({\n <span class="hljs-attr">duration</span>: <span class="hljs-number">0</span>,\n <span class="hljs-attr">forbidClick</span>: <span class="hljs-literal">true</span>,\n <span class="hljs-attr">loadingType</span>: <span class="hljs-string">'spinner'</span>,\n <span class="hljs-attr">message</span>: <span class="hljs-string">'3 seconds'</span>,\n});\n\n<span class="hljs-keyword">let</span> second = <span class="hljs-number">3</span>;\n<span class="hljs-keyword">const</span> timer = <span class="hljs-built_in">setInterval</span>(<span class="hljs-function">() =></span> {\n second--;\n <span class="hljs-keyword">if</span> (second) {\n toast.<span class="hljs-property">message</span> = <span class="hljs-string">`<span class="hljs-subst">${second}</span> seconds`</span>;\n } <span class="hljs-keyword">else</span> {\n <span class="hljs-built_in">clearInterval</span>(timer);\n <span class="hljs-title function_">closeToast</span>();\n }\n}, <span class="hljs-number">1000</span>);\n</code></pre>\n</div><div class="van-doc-card"><h3 id="singleton" tabindex="-1">Singleton</h3>\n<p>The Toast is implemented as a singleton by default, which means that only one Toast can exist at a time. If you need to display multiple Toasts at the same time, you can refer to the following example:</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { showToast, showSuccessToast, allowMultipleToast } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-title function_">allowMultipleToast</span>();\n\n<span class="hljs-keyword">const</span> toast1 = <span class="hljs-title function_">showToast</span>(<span class="hljs-string">'First Toast'</span>);\n<span class="hljs-keyword">const</span> toast2 = <span class="hljs-title function_">showSuccessToast</span>(<span class="hljs-string">'Second Toast'</span>);\n\ntoast1.<span class="hljs-title function_">close</span>();\ntoast2.<span class="hljs-title function_">close</span>();\n</code></pre>\n</div><div class="van-doc-card"><h3 id="set-default-options" tabindex="-1">Set Default Options</h3>\n<p>You can globally modify the default configuration of the <code>showToast</code> and other methods by using the <code>setToastDefaultOptions</code> function.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { setToastDefaultOptions, resetToastDefaultOptions } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-title function_">setToastDefaultOptions</span>({ <span class="hljs-attr">duration</span>: <span class="hljs-number">2000</span> });\n\n<span class="hljs-title function_">setToastDefaultOptions</span>(<span class="hljs-string">'loading'</span>, { <span class="hljs-attr">forbidClick</span>: <span class="hljs-literal">true</span> });\n\n<span class="hljs-title function_">resetToastDefaultOptions</span>();\n\n<span class="hljs-title function_">resetToastDefaultOptions</span>(<span class="hljs-string">'loading'</span>);\n</code></pre>\n</div><div class="van-doc-card"><h3 id="use-toast-component" tabindex="-1">Use Toast Component</h3>\n<p>If you need to embed components or other custom content within the Toast, you can directly use the Toast component and customize it using the message slot. Before using it, you need to register the component using <code>app.use</code> or other methods.</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-toast</span> <span class="hljs-attr">v-model:show</span>=<span class="hljs-string">"show"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"padding: 0"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">template</span> #<span class="hljs-attr">message</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-image</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">"image"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"200"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"140"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"display: block"</span> /></span>\n <span class="hljs-tag"></<span class="hljs-name">template</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-toast</span>></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> show = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">false</span>);\n <span class="hljs-keyword">return</span> { show };\n },\n};\n</code></pre>\n</div><h2 id="api" tabindex="-1">API</h2>\n<div class="van-doc-card"><h3 id="methods" tabindex="-1">Methods</h3>\n<p>Vant exports following Toast utility functions:</p>\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n<th>Attribute</th>\n<th>Return value</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>showToast</td>\n<td>Display a text toast</td>\n<td><code>ToastOptions | string</code></td>\n<td>Toast instance</td>\n</tr>\n<tr>\n<td>showLoadingToast</td>\n<td>Display a loading toast</td>\n<td><code>ToastOptions | string</code></td>\n<td>Toast instance</td>\n</tr>\n<tr>\n<td>showSuccessToast</td>\n<td>Display a success toast</td>\n<td><code>ToastOptions | string</code></td>\n<td>Toast instance</td>\n</tr>\n<tr>\n<td>showFailToast</td>\n<td>Display a fail toast</td>\n<td><code>ToastOptions | string</code></td>\n<td>Toast instance</td>\n</tr>\n<tr>\n<td>closeToast</td>\n<td>Close the currently displayed toast</td>\n<td><code>closeAll: boolean</code></td>\n<td><code>void</code></td>\n</tr>\n<tr>\n<td>allowMultipleToast</td>\n<td>Allow multiple toasts to be displayed as the same time</td>\n<td>-</td>\n<td><code>void</code></td>\n</tr>\n<tr>\n<td>setToastDefaultOptions</td>\n<td>Modify the default configuration that affects all <code>showToast</code> calls. Specify the <code>type</code> parameter to modify the default configuration of a specific type of toast</td>\n<td><code>type | ToastOptions</code></td>\n<td><code>void</code></td>\n</tr>\n<tr>\n<td>resetToastDefaultOptions</td>\n<td>Reset the default configuration that affects all <code>showToast</code> calls. Specify the <code>type</code> parameter to reset the default configuration of a specific type of toast</td>\n<td><code>type</code></td>\n<td><code>void</code></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="toastoptions" tabindex="-1">ToastOptions</h3>\n<p>When calling the <code>showToast</code> and other related methods, the following options are supported:</p>\n<table>\n<thead>\n<tr>\n<th>Attribute</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>type</td>\n<td>Can be set to <code>loading</code> <code>success</code> <code>fail</code> <code>html</code></td>\n<td><em>ToastType</em></td>\n<td><code>text</code></td>\n</tr>\n<tr>\n<td>position</td>\n<td>Can be set to <code>top</code> <code>middle</code> <code>bottom</code></td>\n<td><em>ToastPosition</em></td>\n<td><code>middle</code></td>\n</tr>\n<tr>\n<td>message</td>\n<td>Message</td>\n<td><em>string</em></td>\n<td><code>\'\'</code></td>\n</tr>\n<tr>\n<td>wordBreak</td>\n<td>Can be set to <code>normal</code> <code>break-all</code> <code>break-word</code></td>\n<td><em>ToastWordBreak</em></td>\n<td><code>\'break-all\'</code></td>\n</tr>\n<tr>\n<td>icon</td>\n<td>Custom icon</td>\n<td><em>string</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>iconSize</td>\n<td>Custom icon size</td>\n<td><em>number | string</em></td>\n<td><code>36px</code></td>\n</tr>\n<tr>\n<td>iconPrefix</td>\n<td>Icon className prefix</td>\n<td><em>string</em></td>\n<td><code>van-icon</code></td>\n</tr>\n<tr>\n<td>overlay</td>\n<td>Whether to show overlay</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>forbidClick</td>\n<td>Whether to forbid click background</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>closeOnClick</td>\n<td>Whether to close after clicked</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>closeOnClickOverlay</td>\n<td>Whether to close when overlay is clicked</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>loadingType</td>\n<td>Loading icon type, can be set to <code>spinner</code></td>\n<td><em>string</em></td>\n<td><code>circular</code></td>\n</tr>\n<tr>\n<td>duration</td>\n<td>Toast duration(ms), won\'t disappear if value is 0</td>\n<td><em>number</em></td>\n<td><code>2000</code></td>\n</tr>\n<tr>\n<td>className</td>\n<td>Custom className</td>\n<td><em>string | Array | object</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>overlayClass</td>\n<td>Custom overlay class</td>\n<td><em>string | Array | object</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>overlayStyle</td>\n<td>Custom overlay style</td>\n<td><em>object</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>transition</td>\n<td>Transition, equivalent to <code>name</code> prop of <a href="https://vuejs.org/api/built-in-components.html#transition" target="_blank">transition</a></td>\n<td><em>string</em></td>\n<td><code>van-fade</code></td>\n</tr>\n<tr>\n<td>teleport</td>\n<td>Specifies a target element where Toast will be mounted</td>\n<td><em>string | Element</em></td>\n<td><code>body</code></td>\n</tr>\n<tr>\n<td>zIndex</td>\n<td>Set the z-index to a fixed value</td>\n<td><em>number | string</em></td>\n<td><code>2000+</code></td>\n</tr>\n<tr>\n<td>onClose</td>\n<td>Callback function after close</td>\n<td><em>Function</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onOpened</td>\n<td>Callback function after opened</td>\n<td><em>Function</em></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3>\n<p>When using <code>Toast</code> as a component, the following props are supported:</p>\n<table>\n<thead>\n<tr>\n<th>Attribute</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>v-model:show</td>\n<td>Whether to show toast</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>type</td>\n<td>Can be set to <code>loading</code> <code>success</code> <code>fail</code> <code>html</code></td>\n<td><em>ToastType</em></td>\n<td><code>text</code></td>\n</tr>\n<tr>\n<td>position</td>\n<td>Can be set to <code>top</code> <code>middle</code> <code>bottom</code></td>\n<td><em>ToastPosition</em></td>\n<td><code>middle</code></td>\n</tr>\n<tr>\n<td>message</td>\n<td>Message</td>\n<td><em>string</em></td>\n<td><code>\'\'</code></td>\n</tr>\n<tr>\n<td>word-break</td>\n<td>Can be set to <code>normal</code> <code>break-all</code> <code>break-word</code></td>\n<td><em>ToastWordBreak</em></td>\n<td><code>\'break-all\'</code></td>\n</tr>\n<tr>\n<td>icon</td>\n<td>Custom icon</td>\n<td><em>string</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>icon-size</td>\n<td>Custom icon size</td>\n<td><em>number | string</em></td>\n<td><code>36px</code></td>\n</tr>\n<tr>\n<td>icon-prefix</td>\n<td>Icon className prefix</td>\n<td><em>string</em></td>\n<td><code>van-icon</code></td>\n</tr>\n<tr>\n<td>overlay</td>\n<td>Whether to show overlay</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>forbid-click</td>\n<td>Whether to forbid click background</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>close-on-click</td>\n<td>Whether to close after clicked</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>close-on-click-overlay</td>\n<td>Whether to close when overlay is clicked</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>loading-type</td>\n<td>Loading icon type, can be set to <code>spinner</code></td>\n<td><em>string</em></td>\n<td><code>circular</code></td>\n</tr>\n<tr>\n<td>duration</td>\n<td>Toast duration(ms), won\'t disappear if value is 0</td>\n<td><em>number</em></td>\n<td><code>2000</code></td>\n</tr>\n<tr>\n<td>class-name</td>\n<td>Custom className</td>\n<td><em>string | Array | object</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>overlay-class</td>\n<td>Custom overlay class</td>\n<td><em>string | Array | object</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>overlay-style</td>\n<td>Custom overlay style</td>\n<td><em>object</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>transition</td>\n<td>Transition, equivalent to <code>name</code> prop of <a href="https://vuejs.org/api/built-in-components.html#transition" target="_blank">transition</a></td>\n<td><em>string</em></td>\n<td><code>van-fade</code></td>\n</tr>\n<tr>\n<td>teleport</td>\n<td>Specifies a target element where Toast will be mounted</td>\n<td><em>string | Element</em></td>\n<td><code>body</code></td>\n</tr>\n<tr>\n<td>z-index</td>\n<td>Set the z-index to a fixed value</td>\n<td><em>number | string</em></td>\n<td><code>2000+</code></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3>\n<p>When using <code>Toast</code> as a component, the following events are supported:</p>\n<table>\n<thead>\n<tr>\n<th>Event</th>\n<th>Description</th>\n<th>Parameters</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>close</td>\n<td>Callback function after close</td>\n<td>-</td>\n</tr>\n<tr>\n<td>opened</td>\n<td>Callback function after opened</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3>\n<p>You can use following slots when using <code>Toast</code> component:</p>\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>message</td>\n<td>Custom message</td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="types" tabindex="-1">Types</h3>\n<p>The component exports the following type definitions:</p>\n<pre><code class="language-ts"><span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> {\n <span class="hljs-title class_">ToastType</span>,\n <span class="hljs-title class_">ToastProps</span>,\n <span class="hljs-title class_">ToastOptions</span>,\n <span class="hljs-title class_">ToastPosition</span>,\n <span class="hljs-title class_">ToastWordBreak</span>,\n <span class="hljs-title class_">ToastWrapperInstance</span>,\n} <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n</code></pre>\n</div><h2 id="theming" tabindex="-1">Theming</h2>\n<div class="van-doc-card"><h3 id="css-variables" tabindex="-1">CSS Variables</h3>\n<p>The component provides the following CSS variables, which can be used to customize styles. Please refer to <a href="#/en-US/config-provider" target="_blank">ConfigProvider component</a>.</p>\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Default Value</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>--van-toast-max-width</td>\n<td><em>70%</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-toast-font-size</td>\n<td><em>var(--van-font-size-md)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-toast-text-color</td>\n<td><em>var(--van-white)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-toast-loading-icon-color</td>\n<td><em>var(--van-white)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-toast-line-height</td>\n<td><em>var(--van-line-height-md)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-toast-radius</td>\n<td><em>var(--van-radius-lg)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-toast-background</td>\n<td><em>fade(var(--van-black), 70%)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-toast-icon-size</td>\n<td><em>36px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-toast-text-min-width</td>\n<td><em>96px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-toast-text-padding</td>\n<td><em>var(--van-padding-xs) var(--van-padding-sm)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-toast-default-padding</td>\n<td><em>var(--van-padding-md)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-toast-default-width</td>\n<td><em>88px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-toast-default-min-height</td>\n<td><em>88px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-toast-position-top-distance</td>\n<td><em>20%</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-toast-position-bottom-distance</td>\n<td><em>20%</em></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div>'},null,8,e))}}}]); |