| 1 |
- import{e as s,o as a,G as n}from"./vendor.9cc7b6f2.js";const t={class:"markdown-body"},l=[n('<h1>Navbar 头部导航</h1><h3>介绍</h3><p>提供导航功能。</p><h3>安装</h3><pre><code class="language-javascript">\n<span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-comment">// vue</span>\n<span class="hljs-keyword">import</span> { Navbar,Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui'</span>;\n<span class="hljs-comment">// taro</span>\n<span class="hljs-keyword">import</span> { Navbar,Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui-taro'</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(Navbar);\napp.use(Icon);\n\n</code></pre><h1></h1><h3>基本用法</h3><pre><code class="language-html"> <span class="hljs-tag"><<span class="hljs-name">nut-navbar</span> @<span class="hljs-attr">on-click-back</span>=<span class="hljs-string">"back"</span> @<span class="hljs-attr">on-click-title</span>=<span class="hljs-string">"title"</span> @<span class="hljs-attr">on-click-send</span>=<span class="hljs-string">"send"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"订单详情"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"share"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-navbar</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-navbar</span> @<span class="hljs-attr">on-click-back</span>=<span class="hljs-string">"back"</span> @<span class="hljs-attr">on-click-title</span>=<span class="hljs-string">"title"</span> @<span class="hljs-attr">on-click-clear</span>=<span class="hljs-string">"clear"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"浏览记录"</span> <span class="hljs-attr">desc</span>=<span class="hljs-string">"清空"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-navbar</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-navbar</span> <span class="hljs-attr">:left-show</span>=<span class="hljs-string">"false"</span> @<span class="hljs-attr">on-click-title</span>=<span class="hljs-string">"title"</span> @<span class="hljs-attr">on-click-icon</span>=<span class="hljs-string">"icon"</span> @<span class="hljs-attr">on-click-clear</span>=<span class="hljs-string">"edit"</span> @<span class="hljs-attr">on-click-send</span>=<span class="hljs-string">"more"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"购物车"</span> <span class="hljs-attr">titIcon</span>=<span class="hljs-string">"locationg3"</span> <span class="hljs-attr">desc</span>=<span class="hljs-string">"编辑"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"more"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-navbar</span>></span>\n\n</code></pre><h3>设置slot:tabs可以增加tab</h3><pre><code class="language-html"> <span class="hljs-tag"><<span class="hljs-name">nut-navbar</span> @<span class="hljs-attr">on-click-back</span>=<span class="hljs-string">"back"</span> @<span class="hljs-attr">on-click-title</span>=<span class="hljs-string">"title"</span> @<span class="hljs-attr">on-click-clear</span>=<span class="hljs-string">"edit"</span> @<span class="hljs-attr">on-click-send</span>=<span class="hljs-string">"list"</span> <span class="hljs-attr">desc</span>=<span class="hljs-string">"编辑"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"horizontal"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:tabs</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"商品"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content"</span>></span>这里是页签全部内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"店铺"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content"</span>></span>这里是页签待付款内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">template</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-navbar</span>></span>\n</code></pre><h3>多tab切换导航及增加右侧按钮</h3><pre><code class="language-html"> <span class="hljs-tag"><<span class="hljs-name">nut-navbar</span> @<span class="hljs-attr">on-click-back</span>=<span class="hljs-string">"back"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"share"</span> @<span class="hljs-attr">on-click-send</span>=<span class="hljs-string">"send"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:tabs</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"商品"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content"</span>></span>这里是页签全部内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"评价"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content"</span>></span>这里是页签待付款内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"详情"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content"</span>></span>这里是页签待付款内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"推荐"</span>></span><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content"</span>></span>这里是页签待付款内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">template</span>></span>\n\n <span class="hljs-tag"><<span class="hljs-name">template</span> #<span class="hljs-attr">icons</span> ></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-icon</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"more"</span> @<span class="hljs-attr">on-click-slot-send</span>=<span class="hljs-string">"morelist"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-icon</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">template</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-navbar</span>></span>\n</code></pre><h3>Prop</h3><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>title</td><td>标题名称</td><td>String</td><td>-</td></tr><tr><td>desc</td><td>右侧描述</td><td>String</td><td>-</td></tr><tr><td>left-show</td><td>是否展示左侧箭头</td><td>Boolean</td><td>false</td></tr><tr><td>icon</td><td>左侧 <a href="#/icon">图标名称</a> 或图片链接</td><td>String</td><td>-</td></tr><tr><td>tit-icon</td><td>标题带icon</td><td>String</td><td>-</td></tr></tbody></table><h3>Event</h3><table><thead><tr><th>名称</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>title</td><td>点击页面标题事件</td><td>event:Event</td></tr><tr><td>right</td><td>点击右侧按钮事件</td><td>event:Event</td></tr><tr><td>back</td><td>点击返回上一页事件</td><td>event:Event</td></tr></tbody></table>',16)],p={setup:(n,{expose:p})=>(p({frontmatter:{}}),(n,p)=>(a(),s("div",t,l)))};export{p as default};
|
