mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
2 lines
7.4 KiB
JavaScript
2 lines
7.4 KiB
JavaScript
/*! For license information please see 8507.3bc5d2dd.js.LICENSE.txt */
|
|
(self.webpackChunk=self.webpackChunk||[]).push([["8507"],{74434:function(s,n,a){"use strict";a.r(n);var t=a("80681");let e=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'<h1>Sticky</h1>\n<div class="van-doc-card"><h3 id="intro" tabindex="-1">Intro</h3>\n<p>The sticky component is consistent with the effect achieved by the <code>position: sticky</code> property in CSS, in that when the component is within screen range, it will follow the normal layout arrangement, and when the component rolls out of screen range, it will always be fixed at the top of the screen.</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_">Sticky</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_">Sticky</span>);\n</code></pre>\n</div><h2 id="usage" tabindex="-1">Usage</h2>\n<div class="van-doc-card"><h3 id="basic-usage" tabindex="-1">Basic Usage</h3>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-sticky</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>></span>Basic Usage<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-sticky</span>></span>\n</code></pre>\n</div><div class="van-doc-card"><h3 id="offset-top" tabindex="-1">Offset Top</h3>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-sticky</span> <span class="hljs-attr">:offset-top</span>=<span class="hljs-string">"50"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>></span>Offset Top<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-sticky</span>></span>\n</code></pre>\n</div><div class="van-doc-card"><h3 id="set-container" tabindex="-1">Set Container</h3>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"container"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 150px;"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-sticky</span> <span class="hljs-attr">:container</span>=<span class="hljs-string">"container"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"warning"</span>></span>Set Container<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">van-sticky</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n</code></pre>\n<pre><code class="language-js"><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> container = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">null</span>);\n <span class="hljs-keyword">return</span> { container };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="offset-bottom" tabindex="-1">Offset Bottom</h3>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-sticky</span> <span class="hljs-attr">:offset-bottom</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">position</span>=<span class="hljs-string">"bottom"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>></span>Offset Bottom<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-sticky</span>></span>\n</code></pre>\n</div><h2 id="api" tabindex="-1">API</h2>\n<div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3>\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>position</td>\n<td>Offset position, can be set to <code>bottom</code></td>\n<td><em>string</em></td>\n<td><code>top</code></td>\n</tr>\n<tr>\n<td>offset-top</td>\n<td>Offset top, supports <code>px</code> <code>vw</code> <code>vh</code> <code>rem</code> unit, default <code>px</code></td>\n<td><em>number | string</em></td>\n<td><code>0</code></td>\n</tr>\n<tr>\n<td>offset-bottom</td>\n<td>Offset bottom, supports <code>px</code> <code>vw</code> <code>vh</code> <code>rem</code> unit, default <code>px</code></td>\n<td><em>number | string</em></td>\n<td><code>0</code></td>\n</tr>\n<tr>\n<td>z-index</td>\n<td>z-index when sticky</td>\n<td><em>number | string</em></td>\n<td><code>99</code></td>\n</tr>\n<tr>\n<td>container</td>\n<td>Container DOM</td>\n<td><em>Element</em></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3>\n<table>\n<thead>\n<tr>\n<th>Event</th>\n<th>Description</th>\n<th>Arguments</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>change</td>\n<td>Emitted when sticky status changed</td>\n<td><em>isFixed: boolean</em></td>\n</tr>\n<tr>\n<td>scroll</td>\n<td>Emitted when scrolling</td>\n<td><em>{ scrollTop: number, isFixed: boolean }</em></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> { <span class="hljs-title class_">StickyProps</span>, <span class="hljs-title class_">StickyPosition</span> } <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-sticky-z-index</td>\n<td><em>99</em></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div>'},null,8,e))}}}]); |