nutui/3.1.9/doc.3ee5c531.js

import{e as a,o as n,G as t}from"./vendor.bd251973.js";const l={class:"markdown-body"},p=t(`<h1>Navbar \u5934\u90E8\u5BFC\u822A</h1><h3>\u4ECB\u7ECD</h3><p>\u63D0\u4F9B\u5BFC\u822A\u529F\u80FD\u3002</p><h3>\u5B89\u88C5</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>;
<span class="hljs-comment">// vue</span>
<span class="hljs-keyword">import</span> { Navbar,Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;
<span class="hljs-comment">// taro</span>
<span class="hljs-keyword">import</span> { Navbar,Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui-taro&#39;</span>;

<span class="hljs-keyword">const</span> app = createApp();
app.use(Navbar);
app.use(Icon);

</code></pre><h1></h1><h3>\u57FA\u672C\u7528\u6CD5</h3><pre><code class="language-html">  <span class="hljs-tag">&lt;<span class="hljs-name">nut-navbar</span>  @<span class="hljs-attr">on-click-back</span>=<span class="hljs-string">&quot;back&quot;</span> @<span class="hljs-attr">on-click-title</span>=<span class="hljs-string">&quot;title&quot;</span> @<span class="hljs-attr">on-click-send</span>=<span class="hljs-string">&quot;send&quot;</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u8BA2\u5355\u8BE6\u60C5&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;share&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-navbar</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">nut-navbar</span> @<span class="hljs-attr">on-click-back</span>=<span class="hljs-string">&quot;back&quot;</span> @<span class="hljs-attr">on-click-title</span>=<span class="hljs-string">&quot;title&quot;</span> @<span class="hljs-attr">on-click-clear</span>=<span class="hljs-string">&quot;clear&quot;</span>  <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6D4F\u89C8\u8BB0\u5F55&quot;</span> <span class="hljs-attr">desc</span>=<span class="hljs-string">&quot;\u6E05\u7A7A&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-navbar</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">nut-navbar</span> <span class="hljs-attr">:left-show</span>=<span class="hljs-string">&quot;false&quot;</span> @<span class="hljs-attr">on-click-title</span>=<span class="hljs-string">&quot;title&quot;</span> @<span class="hljs-attr">on-click-icon</span>=<span class="hljs-string">&quot;icon&quot;</span> @<span class="hljs-attr">on-click-clear</span>=<span class="hljs-string">&quot;edit&quot;</span>  @<span class="hljs-attr">on-click-send</span>=<span class="hljs-string">&quot;more&quot;</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u8D2D\u7269\u8F66&quot;</span> <span class="hljs-attr">titIcon</span>=<span class="hljs-string">&quot;locationg3&quot;</span> <span class="hljs-attr">desc</span>=<span class="hljs-string">&quot;\u7F16\u8F91&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;more&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-navbar</span>&gt;</span>

</code></pre><h3>\u8BBE\u7F6Eslot:tabs\u53EF\u4EE5\u589E\u52A0tab</h3><pre><code class="language-html">    <span class="hljs-tag">&lt;<span class="hljs-name">nut-navbar</span> @<span class="hljs-attr">on-click-back</span>=<span class="hljs-string">&quot;back&quot;</span> @<span class="hljs-attr">on-click-title</span>=<span class="hljs-string">&quot;title&quot;</span> @<span class="hljs-attr">on-click-clear</span>=<span class="hljs-string">&quot;edit&quot;</span> @<span class="hljs-attr">on-click-send</span>=<span class="hljs-string">&quot;list&quot;</span> <span class="hljs-attr">desc</span>=<span class="hljs-string">&quot;\u7F16\u8F91&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;horizontal&quot;</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:tabs</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">nut-tab</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;\u5546\u54C1&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;content&quot;</span>&gt;</span>\u8FD9\u91CC\u662F\u9875\u7B7E\u5168\u90E8\u5185\u5BB9<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tab-panel</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;\u5E97\u94FA&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;content&quot;</span>&gt;</span>\u8FD9\u91CC\u662F\u9875\u7B7E\u5F85\u4ED8\u6B3E\u5185\u5BB9<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tab-panel</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">nut-tab</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">nut-navbar</span>&gt;</span>
</code></pre><h3>\u591Atab\u5207\u6362\u5BFC\u822A\u53CA\u589E\u52A0\u53F3\u4FA7\u6309\u94AE</h3><pre><code class="language-html">    <span class="hljs-tag">&lt;<span class="hljs-name">nut-navbar</span> @<span class="hljs-attr">on-click-back</span>=<span class="hljs-string">&quot;back&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;share&quot;</span> @<span class="hljs-attr">on-click-send</span>=<span class="hljs-string">&quot;send&quot;</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:tabs</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">nut-tab</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;\u5546\u54C1&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;content&quot;</span>&gt;</span>\u8FD9\u91CC\u662F\u9875\u7B7E\u5168\u90E8\u5185\u5BB9<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tab-panel</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;\u8BC4\u4EF7&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;content&quot;</span>&gt;</span>\u8FD9\u91CC\u662F\u9875\u7B7E\u5F85\u4ED8\u6B3E\u5185\u5BB9<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tab-panel</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;\u8BE6\u60C5&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;content&quot;</span>&gt;</span>\u8FD9\u91CC\u662F\u9875\u7B7E\u5F85\u4ED8\u6B3E\u5185\u5BB9<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tab-panel</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;\u63A8\u8350&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;content&quot;</span>&gt;</span>\u8FD9\u91CC\u662F\u9875\u7B7E\u5F85\u4ED8\u6B3E\u5185\u5BB9<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tab-panel</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">nut-tab</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> #<span class="hljs-attr">icons</span> &gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">nut-icon</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;more&quot;</span> @<span class="hljs-attr">on-click-slot-send</span>=<span class="hljs-string">&quot;morelist&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-icon</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">nut-navbar</span>&gt;</span>
</code></pre><h3>Prop</h3><table><thead><tr><th>\u5B57\u6BB5</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>title</td><td>\u6807\u9898\u540D\u79F0</td><td>String</td><td>-</td></tr><tr><td>desc</td><td>\u53F3\u4FA7\u63CF\u8FF0</td><td>String</td><td>-</td></tr><tr><td>left-show</td><td>\u662F\u5426\u5C55\u793A\u5DE6\u4FA7\u7BAD\u5934</td><td>Boolean</td><td>false</td></tr><tr><td>icon</td><td>\u5DE6\u4FA7 <a href="#/icon">\u56FE\u6807\u540D\u79F0</a> \u6216\u56FE\u7247\u94FE\u63A5</td><td>String</td><td>-</td></tr><tr><td>tit-icon</td><td>\u6807\u9898\u5E26icon</td><td>String</td><td>-</td></tr></tbody></table><h3>Event</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>title</td><td>\u70B9\u51FB\u9875\u9762\u6807\u9898\u4E8B\u4EF6</td><td>event:Event</td></tr><tr><td>right</td><td>\u70B9\u51FB\u53F3\u4FA7\u6309\u94AE\u4E8B\u4EF6</td><td>event:Event</td></tr><tr><td>back</td><td>\u70B9\u51FB\u8FD4\u56DE\u4E0A\u4E00\u9875\u4E8B\u4EF6</td><td>event:Event</td></tr></tbody></table>`,16),c=[p],g={setup(h,{expose:s}){return s({frontmatter:{}}),(o,j)=>(n(),a("div",l,c))}};export{g as default};