29 lines
14 KiB
HTML
29 lines
14 KiB
HTML
<!DOCTYPE html> <head> <meta charset=utf-8> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content=#333333 name=theme-color> <base href=/svelma-pro/ > <link href=global.css rel=stylesheet> <link href=manifest.json rel=manifest> <link href=favicon.ico rel=icon type=image/png> <link href=./all.css rel=stylesheet> <link href=client/main.1916252291.css rel=stylesheet><link href=client/chunk.f5a3f321.css rel=stylesheet><link href=client/chunk.b01e898f.css rel=stylesheet><link href=client/chunk.fb378401.css rel=stylesheet><link href=client/chunk.94a6e723.css rel=stylesheet> <noscript id=sapper-head-start></noscript><title>svelma-pro</title><meta content=Svelma property=og:site_name><meta content=https://c0bra.github.io/svelma-pro/svelma-pro-logo.png property=og:image><meta content=200 property=og:image:width><meta content=200 property=og:image:height><meta property=og:url><meta content=article property=og:type><meta content="Nav | Svelma" property=og:title><meta content=导航 property=og:description><noscript id=sapper-head-end></noscript> </head> <body> <div id=sapper> <nav class="is-spaced has-shadow navbar" id=navbar><div class=container style=height:50px;min-height:50px><div class=navbar-brand><a href=/ class="navbar-item brand svelte-19nr2rz"> svelma-pro </a></div></div></nav> <main><section class="svelte-1ib6y6h docs"><div class="svelte-h7woek sidebar-bg"></div> <aside class="svelte-h7woek sidebar"><p class="svelte-h7woek sidebar-label">Installation</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=install>Start</a></ul> <p class="svelte-h7woek sidebar-label">Bulma Elements</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=bulma/intro>Intro</a></li> <li class=svelte-h7woek><a href=bulma/hero>Hero</a> <li class=svelte-h7woek><a href=bulma/media>Media</a> <li class=svelte-h7woek><a href=bulma/table>Table</a> <li class=svelte-h7woek><a href=bulma/tiles>Tiles</a> </ul> <p class="svelte-h7woek sidebar-label">Svelma Components</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=components/button>Button </a> <li class=svelte-h7woek><a href=components/carousel>Carousel </a> <li class=svelte-h7woek><a href=components/collapse>Collapse </a> <li class=svelte-h7woek><a href=components/colorpicker>ColorPicker <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/datepicker>Datepicker <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/dialog>Dialog </a> <li class=svelte-h7woek><a href=components/district>District <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><p>Form</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=components/field>Field </a> <li class=svelte-h7woek><a href=components/input>Input </a> <li class=svelte-h7woek><a href=components/switch>Switch </a> </li> </ul> <li class=svelte-h7woek><a href=components/icon>Icon </a> <li class=svelte-h7woek><a href=components/layout>Layout <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/message>Message </a> <li class=svelte-h7woek><a href=components/modal>Modal </a> <li class=svelte-h7woek><a href=components/nav>Nav <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/notification>Notification </a> <li class=svelte-h7woek><a href=components/pagination>Pagination </a> <li class=svelte-h7woek><a href=components/progress>Progress </a> <li class=svelte-h7woek><a href=components/select>Select <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/slider>Slider <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/snackbar>Snackbar </a> <li class=svelte-h7woek><a href=components/stable>Stable <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/table>Table </a> <li class=svelte-h7woek><a href=components/tabs>Tabs </a> <li class=svelte-h7woek><a href=components/timepicker>Timepicker <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/tip>Tip <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/toast>Toast </a> </li> </ul></aside> <div class="svelte-1ib6y6h docs-main"> <header class=header><h1 class=title>Nav</h1> <h2 class=subtitle>导航</h2></header> <div class="svelte-150a96u snippet"><form action=https://codesandbox.io/api/v1/sandboxes/define method=POST target=_blank><input name=parameters type=hidden value=N4IgZglgNgpgziAXKOBDAdgEwEYHsAeAdAMa7qQDmhAVnGUqKegC4wsMisC2ADlKqyQg4ANxhRBAX0kAaEBCwwiAC2ZcoHJq3aIQAHlXqAfAB10AAnN68mAJ6mLlq1AUBrM06cRMAXhMglVgAndFQoAFpiODh_D09zIPE_YWZbWDhlGBhmWMdPVJ4YZNZ8ZgB6KJiQOM9lRLBk1WYeOEQysoBXdB5XKlIuMuwOqC5UCujB4dHCLgUSaNz48y4YTAhUZLCoRacyh089F3R3PK9ff0CYELDI6IAmHc9EqGS4VPTM7MenAqL_EvKlW-ljqMAa_iaLTanTgMEIYDIzFQAHd4LgViR0WVnjBULC4GURABWQgAZkIAEZxgStvMqjUnCs1ht_Ftvns4npBrg7A4uYYoEYQLJ5IoiLRNIi2MwhBBeLggsxzABBHg8cxgILo8z-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAOVQIhkHa7AEluD3OyIADKoWy4DpKyQarVccwAcmNI1Q4R4WoXZi5VZrdYcnOH5iguAouD7XAoyTKx9P4QpAE47oQeOgKP4G5Y9MOxxOp06uwACrgcAQMwEBkMkxDSlc74Mp-w4DjAXBGIAhd6AGAugCnuoA7opcgh3Afk4X79vhgAA-oAi8qACKxgAJdrhxFIQRtGjuOk71gyRFMb-SqhCIQEgWBEEXFgsGnPBdHIXBhEAEJTswZDmL8yQQHA4RHO4IBGIA3m6AKr6XLScwsnoARn5lHh9FsSZXY_ixDaMQ4eYgDwqDEK4qB-jQdDoKW2gysgIChCsQjLqM4RKKgvCwCAchiEEIH0LoFKEAADElkUgGmIgACIwIUijoMQEDwBw3RcOEQRdOEWxCAAegALJShBEqlWpQFAHQ8NVCUUslFJNbgLVtWurUUAokTolwZASroVX3mShA1b1_U8INHTDeg4ToDyMClWiUBiNVdVPqSC2tUtfArSNy6CFNJLJUdcjNSdy2reEwSwkE-1JXNqUgUEIiRC41W3ZS9lpjlaZ5QVCC-ZdJa6PwrBvN9RajEI8PwDKcgAAIIoqKJoisZQIiweN0Cs4SalkqMCOjqVDCuVMIzKIo7rWzBQ6AQzQJgQgPW15iRKlGayZzUDc7ovPqpE_PIql6U8-V6pvKgiqIOltpTrgIvc3ISuKoFEC_eYPAdNgLjEN9PrMKrMAiPrhvG6bEDEPz4Ry9I7tAA> <div class="slot-wrap svelte-7fflr3"><div class="svelte-150a96u codepen-button">Codesandbox <i class="is-small fa-external-link-alt fas icon"></i></div></div></form> <div class="svelte-150a96u preview"><div style=position:relative slot=preview><nav class="svelte-281iif navbar" style=height:auto;background:#f2f2f2><div class=navbar-brand><a href=/ class=navbar-item><img alt=logo class="svelte-281iif navbar-img" src=/logo-192.png style=width:40px;height:auto></a></div> <div class=navbar-menu id=navMenubd-example><div class="svelte-i6yb6m navbar-center navbar-start" style="right:calc(.75rem + (40px /2))"><div class=navbar-item>管理工具</div> <div class=navbar-item>开发资源</div></div> <div class="svelte-i6yb6m navbar-end"><div class=navbar-item><button class="button is-link" type=button> <span> 登录</span> </button></div></div></div></nav></div></div> <div class="svelte-150a96u code"> <div class="svelte-1ccczge codeview"><figure class="svelte-1ccczge highlight is-expanded"><div class="svelte-1ccczge button-container"><button class="is-small button copy-code is-text">Copy</button></div> <pre class="svelte-1ccczge hidden"><code class="svelte-1ccczge xml"></code></pre> <pre class="svelte-1ccczge hidden"><code><script>
|
|
import { Nav, NavItem, NavLayout } from 'svelma-pro'
|
|
</script>
|
|
|
|
<Nav logoImg="/logo-192.png">
|
|
<NavLayout navPosition="center">
|
|
<NavItem>管理工具</NavItem>
|
|
<NavItem>开发资源</NavItem>
|
|
</NavLayout>
|
|
<NavLayout navPosition="end">
|
|
<NavItem>
|
|
<Button type="is-link">登录</Button>
|
|
</NavItem>
|
|
</NavLayout>
|
|
</Nav></code></pre></figure></div> </div></div> <hr class=is-medium> <p class="title is-4">下拉列表</p> <div class="svelte-150a96u snippet"><form action=https://codesandbox.io/api/v1/sandboxes/define method=POST target=_blank><input name=parameters type=hidden value=N4IgZglgNgpgziAXKOBDAdgEwEYHsAeAdAMa7qQDmhAVnGUqKegC4wsMisC2ADlKqyQg4ANxhRBAX0kAaEBCwwiAC2ZcoHJq3aIQAHlXqAfAB10AAnN68mAJ6mLlq1AUBrM06cRMAXhMglVgAndFQoAFpiODh_D09zIPE_YWZbWDhlGBhmWMdPVJ4YZNZ8ZgB6KJiQOM9lRLBk1WYeOEQysoBXdB5XKlIuMuwOqC5UCujB4dHCLgUSaNz48y4YTAhUZLCoRacyh089F3R3PK9ff0CYELDI6IAmHc9EqGS4VPTM7MenAqL_EvKlW-ljqMAa_iaLTanTgMEIYDIzFQAHd4LgViR0WVnjBULC4GURABWQgAZkIAEZxgStvMqjUnCs1ht_Ftvns4npBrg7A4uYYoEYQLJ5IoiLRNIi2MwhBBeLggsxzABBHg8cxgILo8z-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAOVQIhkHa7AEluD3OyIADKoWy4DpKyQarVccwAcmNI1Q4R4WoXZi5VZrdYcnOH5iguAouD7XAoyTKx9P4QpAE47oQeOgKP5zNhUMRelquucQL6n7ugADDIoHATG_gNgcw4DjA84QHAAASuBiEEPjAMwQQdDAkjQfElY8Bg5hvGkfwgKQx5BIgADEYD0VBgCF3oAYC6AKe6gDuituRHoPhBxrCIJHHswjSoVcUEMkseiwdwRiAAD6gCLyoAIrGAAl2XLSfBvEEepXByUpqllNpmkwf2MkKSpakmRpElOFy_GaRZIhwTp1lSZZOmEcRpGwMklEKrR9FgFBZn6XA3FGA5Tn4Q5Dh5iARHfqgfo0HQ6CltoMrICAoQrEIy6jOESioLwsAgHIaFwBA9C6BShDAbVpUgGmIgACIwIUijoMQEDwBw3RcOE2HoOEWxCAAegALJShBEg1WpQFAHQ8GNNUUnVFKzbg82LWuC0UAokTolwZASroo33mShDjRtW08DtHR7UN6A8jAA1olAYhjZNT6ktdC23Xw937cuginSSdU_XIc1_XdD3hMEsJBJ9tWXQ1FVBCIkQuGN4OUrFabtWmnXdQgmXAyWuj8Kwbyo0WoxCJT8AynIAACCKKiiaIrGUCIsBzdArOEmpZPTAiMw1QwriLVMyiKO61swJOgEM0CYEIUOLeYkQNRmzC4MrUCq7o6vqpEmvIg1TVq10a4kT6zCIE1tpTnrHQq6jdu5RA6PmDwHTYC4xDu6gioOzAIie97vv-xAxCa-ElvSInQA> <div class="slot-wrap svelte-7fflr3"><div class="svelte-150a96u codepen-button">Codesandbox <i class="is-small fa-external-link-alt fas icon"></i></div></div></form> <div class="svelte-150a96u preview"><div style=position:relative slot=preview><nav class="svelte-281iif navbar" style=height:auto;background:rgba(0,0,0)><div class=navbar-brand><a href=/ class=navbar-item><img alt=logo class="svelte-281iif navbar-img" src=/logo-192.png style=width:40px;height:auto></a></div> <div class=navbar-menu id=navMenubd-example><div class="navbar-item has-dropdown is-hoverable svelte-u1lcey"><div class="svelte-u1lcey navbar-link"><span style=color:#fff>管理工具</span> </div> <div class=navbar-dropdown id=moreDropdown><div slot=hover><div class=navbar-item>开发资源</div> <div class=navbar-item>开发资源</div> <div class=navbar-item>开发资源</div></div></div></div> <div class=navbar-item><span style=color:#fff>开发资源</span></div></div></nav></div></div> <div class="svelte-150a96u code"> <div class="svelte-1ccczge codeview"><figure class="svelte-1ccczge highlight is-expanded"><div class="svelte-1ccczge button-container"><button class="is-small button copy-code is-text">Copy</button></div> <pre class="svelte-1ccczge hidden"><code class="svelte-1ccczge xml"></code></pre> <pre class="svelte-1ccczge hidden"><code><script>
|
|
import { Nav, NavItem, NavLayout } from 'svelma-pro'
|
|
</script>
|
|
|
|
<Nav logoImg="/logo-192.png" background="rgba(0,0,0)">
|
|
<NavItem isHover={true}>
|
|
<span style="color:#fff">管理工具</span>
|
|
<div slot="hover">
|
|
<NavItem>开发资源</NavItem>
|
|
<NavItem>开发资源</NavItem>
|
|
<NavItem>开发资源</NavItem>
|
|
</div>
|
|
</NavItem>
|
|
<NavItem><span style="color:#fff">开发资源</span></NavItem>
|
|
</Nav></code></pre></figure></div> </div></div> <hr class=is-medium> <h2 class="is-spaced is-4 title">API</h2> <h3 class=subtitle>Nav</h3> <section> <div class="svelte-2ae2jn table-wrapper"><table class="is-fullwidth table"><thead><tr><th>Name</th> <th>Description</th> <th>Type</th> <th>Values</th> <th>Default</thead> <tr><td><code>height</code></td> <td>高度</td> <td>String</td> <td>—</td> <td><code>auto</code></td> <tr><td><code>logoImg</code></td> <td>logo地址</td> <td>String</td> <td>—</td> <td><code>/logo.png</code></td> <tr><td><code>logoUrl</code></td> <td>logo点击跳转地址</td> <td>String</td> <td>—</td> <td><code>/</code></td> <tr><td><code>logoH</code></td> <td>logo高度</td> <td>String</td> <td>—</td> <td><code>auto</code></td> <tr><td><code>logoW</code></td> <td>logo宽度</td> <td>String</td> <td>—</td> <td><code>40px</code></td> <tr><td><code>background</code></td> <td>背景</td> <td>String</td> <td>—</td> <td><code>rgb(242, 242, 242)</code></td> </table></div></section> <br> <br> <h3 class="is-spaced subtitle">NavItem</h3> <section> <div class="svelte-2ae2jn table-wrapper"><table class="is-fullwidth table"><thead><tr><th>Name</th> <th>Description</th> <th>Type</th> <th>Values</th> <th>Default</thead> <tr><td><code>isHover</code></td> <td>是否开启下拉列表</td> <td>Boolean</td> <td>—</td> <td><code>false</code></td> <tr><td><code>slot</code></td> <td>开启下拉列表情况下,slot='hover'插入下拉列表内容</td> <td>slot</td> <td>hover,''</td> <td><code>''</code></td> </table></div></section> <br> <br> <h3 class="is-spaced subtitle">NavLayout</h3> <section> <div class="svelte-2ae2jn table-wrapper"><table class="is-fullwidth table"><thead><tr><th>Name</th> <th>Description</th> <th>Type</th> <th>Values</th> <th>Default</thead> <tr><td><code>navPosition</code></td> <td>NavItem布局</td> <td>String</td> <td>center,start,end</td> <td><code>center</code></td> </table></div></section> </div></section></main></div> <script>__SAPPER__={baseUrl:"/svelma-pro",preloaded:[void 0,null,(function(a,b,c,d){return {jsdoc:[{description:"高度",type:[a],defaultvalue:c,name:"height",values:b},{description:"logo地址",type:[a],defaultvalue:"\u002Flogo.png",name:"logoImg",values:b},{description:"logo点击跳转地址",type:[a],defaultvalue:"\u002F",name:"logoUrl",values:b},{description:"logo高度",type:[a],defaultvalue:c,name:"logoH",values:b},{description:"logo宽度",type:[a],defaultvalue:"40px",name:"logoW",values:b},{description:"背景",type:[a],defaultvalue:"rgb(242, 242, 242)",name:"background",values:b}],jsdocItem:[{description:"是否开启下拉列表",type:["Boolean"],defaultvalue:"false",name:"isHover",values:b},{description:"开启下拉列表情况下,slot='hover'插入下拉列表内容",type:[d],defaultvalue:"''",name:d,values:"hover,''"}],jsdocLayout:[{description:"NavItem布局",type:[a],defaultvalue:"center",name:"navPosition",values:"center,start,end"}]}}("String","","auto","slot"))]};if('serviceWorker' in navigator)navigator.serviceWorker.register('/svelma-pro/service-worker.js');var s=document.createElement("script");try{new Function("if(0)import('')")();s.src="/svelma-pro/client/client.3704696d.js";s.type="module";s.crossOrigin="use-credentials";}catch(e){s.src="/svelma-pro/client/shimport@1.0.1.js";s.setAttribute("data-main","/svelma-pro/client/client.3704696d.js")}document.head.appendChild(s)</script> |