wot-design-uni/assets/component_divider.md.R4TdmO8i.js

import{_ as h,E as e,c as l,o as n,aR as d,I as a,a as i,w as t}from"./chunks/framework.C7RrxATG.js";const v=JSON.parse('{"title":"Divider 分割线","description":"","frontmatter":{},"headers":[],"relativePath":"component/divider.md","filePath":"component/divider.md","lastUpdated":1762249100000}'),p={name:"component/divider.md"},k=d(`<h1 id="divider-分割线" tabindex="-1">Divider 分割线 <a class="header-anchor" href="#divider-分割线" aria-label="Permalink to &quot;Divider 分割线&quot;">​</a></h1><p>用于将内容分隔为多个区域。</p><div class="danger custom-block"><p class="custom-block-title">请注意</p><p><code>hairline</code>、<code>dashed</code>、<code>content-position</code>、<code>vertical</code>属性为 1.5.0 版本新增支持，在此之前仅支持默认插槽显示文本和自定义<code>color</code>。</p></div><h2 id="基本使用" tabindex="-1">基本使用 <a class="header-anchor" href="#基本使用" aria-label="Permalink to &quot;基本使用&quot;">​</a></h2><p>默认渲染一条水平分割线。</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;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="展示文本" tabindex="-1">展示文本 <a class="header-anchor" href="#展示文本" aria-label="Permalink to &quot;展示文本&quot;">​</a></h2><p>使用默认插槽在分割线中间插入内容。</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;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;展示文本&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="自定义渲染内容" tabindex="-1">自定义渲染内容 <a class="header-anchor" href="#自定义渲染内容" aria-label="Permalink to &quot;自定义渲染内容&quot;">​</a></h2><p>使用默认插槽在分割线中间插入自定义内容。</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;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-icon</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;arrow-down&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;20&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;#1989fa&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="内容位置" tabindex="-1">内容位置 <a class="header-anchor" href="#内容位置" aria-label="Permalink to &quot;内容位置&quot;">​</a></h2><p>通过 <code>content-position</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;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;中间&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> content-position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;left&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;左侧&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> content-position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;right&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;右侧&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="虚线" tabindex="-1">虚线 <a class="header-anchor" href="#虚线" aria-label="Permalink to &quot;虚线&quot;">​</a></h2><p>添加 <code>dashed</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;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> dashed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;虚线分割&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="自定义颜色" tabindex="-1">自定义颜色 <a class="header-anchor" href="#自定义颜色" aria-label="Permalink to &quot;自定义颜色&quot;">​</a></h2><p>设置 <code>color</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;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;#4D80F0&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;自定义颜色&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="垂直分割线" tabindex="-1">垂直分割线 <a class="header-anchor" href="#垂直分割线" aria-label="Permalink to &quot;垂直分割线&quot;">​</a></h2><p>添加 <code>vertical</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;">&lt;</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;content&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  文本</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> vertical</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  文本</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> vertical</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> dashed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  文本</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> vertical</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :hairline</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  文本</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-divider</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> vertical</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;#1989fa&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  文本</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">12</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">rpx </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">15</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><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 &quot;Attributes&quot;">​</a></h2><table tabindex="0"><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th><th>最低版本</th></tr></thead><tbody><tr><td>color</td><td>自定义颜色，支持所有颜色的写法</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>hairline</td><td>是否显示边框</td><td>boolean</td><td>-</td><td>true</td><td>1.5.0</td></tr><tr><td>dashed</td><td>是否显示为虚线</td><td>boolean</td><td>-</td><td>false</td><td>1.5.0</td></tr><tr><td>content-position</td><td>内容位置</td><td>string</td><td><code>left</code>/<code>center</code>/<code>right</code></td><td><code>center</code></td><td>1.5.0</td></tr><tr><td>vertical</td><td>是否显示为垂直分割线</td><td>boolean</td><td>-</td><td>false</td><td>1.5.0</td></tr></tbody></table><h2 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h2><table tabindex="0"><thead><tr><th>name</th><th>说明</th><th>最低版本</th></tr></thead><tbody><tr><td>default</td><td>内容，仅在 <code>vertical</code> 为 <code>false</code> 时生效</td><td>-</td></tr></tbody></table><h2 id="外部样式类" tabindex="-1">外部样式类 <a class="header-anchor" href="#外部样式类" aria-label="Permalink to &quot;外部样式类&quot;">​</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 &quot;源代码&quot;">​</a></h2>`,32);function r(E,o,c,g,y,u){const s=e("ExternalLink");return n(),l("div",null,[k,a(s,{href:"https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/subPages/divider"},{default:t(()=>[i("文档")]),_:1}),i(" • "),a(s,{href:"https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/uni_modules/wot-design-uni/components/wd-divider"},{default:t(()=>[i("组件")]),_:1})])}const F=h(p,[["render",r]]);export{v as __pageData,F as default};