Home Explore Help
Sign In
githab
/
nutui
3
0
Fork 0
Files
Tree: fd0e987e90
Branches Tags
nutui
/
3.1.5
/
doc.45005cef.js

doc.45005cef.js 3.3 KB
History Raw

1 
  1. import{e as s,o as a,G as t}from"./vendor.92dabd7f.js";const n={class:"markdown-body"},p=[t('<h1>Divider 分割线</h1><h3>介绍</h3><p>用于将内容分隔为多个区域。</p><h3>安装</h3><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;\n<span class="hljs-comment">// vue</span>\n<span class="hljs-keyword">import</span> { Divider } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;\n<span class="hljs-comment">// taro</span>\n<span class="hljs-keyword">import</span> { Divider } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui-taro&#39;</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(Divider);\n</code></pre><h2>代码演示</h2><h3>基础用法</h3><p>默认渲染一条水平分割线。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-divider</span> /&gt;</span>\n</code></pre><h3>展示文本</h3><p>通过插槽在可以分割线中间插入内容。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-divider</span>&gt;</span>文本<span class="hljs-tag">&lt;/<span class="hljs-name">nut-divider</span>&gt;</span>\n</code></pre><h3>内容位置</h3><p>通过 content-position 指定内容所在位置。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-divider</span> <span class="hljs-attr">content-position</span>=<span class="hljs-string">&quot;left&quot;</span>&gt;</span>文本<span class="hljs-tag">&lt;/<span class="hljs-name">nut-divider</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">nut-divider</span> <span class="hljs-attr">content-position</span>=<span class="hljs-string">&quot;right&quot;</span>&gt;</span>文本<span class="hljs-tag">&lt;/<span class="hljs-name">nut-divider</span>&gt;</span>\n</code></pre><h3>虚线</h3><p>添加 dashed 属性使分割线渲染为虚线。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-divider</span> <span class="hljs-attr">dashed</span> /&gt;</span>\n</code></pre><h3>自定义样式</h3><p>可以直接通过 style 属性设置分割线的样式。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-divider</span> <span class="hljs-attr">:style</span>=<span class="hljs-string">&quot;{ color: &#39;#1989fa&#39;, borderColor: &#39;#1989fa&#39;, padding: &#39;0 16px&#39; }&quot;</span>&gt;</span>文本<span class="hljs-tag">&lt;/<span class="hljs-name">nut-divider</span>&gt;</span>\n</code></pre><h2>API</h2><h3>Props</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>dashed</td><td>是否使用虚线</td><td>Boolean</td><td>false</td></tr><tr><td>hairline</td><td>是否使用 0.5px 线</td><td>Boolean</td><td>true</td></tr><tr><td>content-position</td><td>内容位置，可选值为left right</td><td>String</td><td>center</td></tr></tbody></table><h3>Slots</h3><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>default</td><td>内容</td></tr></tbody></table>',26)],l={setup:(t,{expose:l})=>(l({frontmatter:{}}),(t,l)=>(a(),s("div",n,p)))};export{l as default};
    2.