mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 09:08:51 +08:00
2 lines
6.4 KiB
JavaScript
2 lines
6.4 KiB
JavaScript
import{_ as e,E as h,c as n,o as d,aR as l,I as s,a as t,w as i}from"./chunks/framework.C7RrxATG.js";const y=JSON.parse('{"title":"Gap 间隔槽","description":"","frontmatter":{},"headers":[],"relativePath":"component/gap.md","filePath":"component/gap.md","lastUpdated":1762249100000}'),p={name:"component/gap.md"},r=l('<h1 id="gap-间隔槽" tabindex="-1">Gap 间隔槽 <a class="header-anchor" href="#gap-间隔槽" aria-label="Permalink to "Gap 间隔槽""></a></h1><p>一般用于页面布局时代替margin或者padding;或者充当（底部）占位元素。</p><h2 id="基本使用" tabindex="-1">基本使用 <a class="header-anchor" href="#基本使用" aria-label="Permalink to "基本使用""></a></h2><p>通过 <code>height</code> 属性设置高度 <code>background</code> 属性设置背景色。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-gap</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> bg-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"#FFFFFF"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-gap</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="自定义背景色" tabindex="-1">自定义背景色 <a class="header-anchor" href="#自定义背景色" aria-label="Permalink to "自定义背景色""></a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-gap</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> bg-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"#4D80F0"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-gap</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="自定义高度" tabindex="-1">自定义高度 <a class="header-anchor" href="#自定义高度" aria-label="Permalink to "自定义高度""></a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-gap</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> bg-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"#4D80F0"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"120rpx"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-gap</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="底部安全区" tabindex="-1">底部安全区 <a class="header-anchor" href="#底部安全区" aria-label="Permalink to "底部安全区""></a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-gap</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> safe-area-bottom</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"0"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-gap</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="attributes" tabindex="-1">Attributes <a class="header-anchor" href="#attributes" aria-label="Permalink to "Attributes""></a></h2><table tabindex="0"><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th><th>最低版本</th></tr></thead><tbody><tr><td>height</td><td>高度</td><td><code>string</code>/<code>number</code></td><td>-</td><td>15</td><td>-</td></tr><tr><td>bgColor</td><td>背景颜色</td><td>string</td><td></td><td>transparent</td><td>-</td></tr><tr><td>safeAreaBottom</td><td>开启底部安全区</td><td>boolean</td><td>true/false</td><td>false</td><td>-</td></tr></tbody></table><h2 id="外部样式类" tabindex="-1">外部样式类 <a class="header-anchor" href="#外部样式类" aria-label="Permalink to "外部样式类""></a></h2><table tabindex="0"><thead><tr><th>类名</th><th>说明</th><th>最低版本</th></tr></thead><tbody><tr><td>custom-class</td><td>自定义样式</td><td>-</td></tr></tbody></table><h2 id="源代码" tabindex="-1">源代码 <a class="header-anchor" href="#源代码" aria-label="Permalink to "源代码""></a></h2>',16);function o(k,g,c,E,u,b){const a=h("ExternalLink");return d(),n("div",null,[r,s(a,{href:"https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/subPages/gap"},{default:i(()=>[t("文档")]),_:1}),t(" • "),s(a,{href:"https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/uni_modules/wot-design-uni/components/wd-gap"},{default:i(()=>[t("组件")]),_:1})])}const F=e(p,[["render",o]]);export{y as __pageData,F as default};
|