75 lines
24 KiB
HTML
75 lines
24 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="Tabs | 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="brand navbar-item 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>Tabs</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-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAFVQ2DgMg7XfMkg1Wq45gA5MaRqhwjwtaOzFyqzW6w5553uw29GvzPxsEl_ABlIumkANywASTg5lIuG2ji5a43W53e5AADUOjB_KfzBfzBRcDynJlA-nJPl2L7KugFDDKgQRfgyUA3k6uBASB6D3l2cBCiKPCoMQrioH6NB0OgpbaDKyAgKEKxCBOozhEoqC8LAIByGIQRwBA9C6BShAAAz8axIBpiIAAiMCFIo6DEBA8AcN0XDhEEXThFsQgAHoACyUoQRJCVqUBQB0PAabxFICRS-k3kZPDTkZFAKJE6JcGQEq6OpACcZKEJpVmGcZdkdA56DhOgPIwEpaJQGIGnaXcZJ-TZgXBeEE6CO5JICaSiUBXwQWOcEsJBLF_E-UJnFBCIkQuBpWWUnmwkSWwabSbJCCUWlJa6PwrBvOVRajEIPXwDKcgAAIIoqKJoisZQIiw010Cs4SalkQ0CCNQlDJO629TKIqLrWzDtaAQzQJgQgGTZ5iREJGbMLgZ1QBduhXcZN3EDdyJCSJl0qeqbywcwiAibaHQPU9F1yIDiq0RAlXmDwHTYC4xDlT6wO_boFUiIjyOozd4S_dIJNAA> <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 slot=preview><div class="svelte-1wu1l6d tabs-wrapper"><nav class="svelte-1wu1l6d tabs"><ul></ul></nav> <section class="svelte-1wu1l6d tab-content"><div class="svelte-yuw9hu tab" aria-hidden>Is cool </div> <div class="svelte-yuw9hu tab" aria-hidden>Is good </div> <div class="svelte-yuw9hu tab" aria-hidden>lol no </div></section></div></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 { Tabs, Tab } from 'svelma-pro'
|
|
</script>
|
|
|
|
<Tabs>
|
|
<Tab label="Svelte">
|
|
Is cool
|
|
</Tab>
|
|
<Tab label="Vue">
|
|
Is good
|
|
</Tab>
|
|
<Tab label="Angular">
|
|
lol no
|
|
</Tab>
|
|
</Tabs></code></pre></figure></div> </div></div> <hr class=is-medium> <p class="title is-4">Icons and Sizes</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-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAFVQ2DgMg7XfMkg1Wq45gA5MaRqhwjwtaOzFyqzW6w5553uw29GvzPxsEl_AAFGC4PgwfyNpjJDqwoJVIxctcbrc7vcgff8YjwM8QC_-UY8cKjEErhXOEYQ5CAd5lA-nJPl2L7tsoCgUFU55kMk4guC0EBwOEyj-JB0HoPeXZwCuRFrnA5hwBAABefzyDhTIQKG-Ewf2z4vAeR4nl-P4gFeVy3sR2CPuxcGca-76fiAqHoMkf4AagQEgWB-HCaJ2DbuJyQIUhKHfmhFxQJh1E4XhEHqfOUEkWRm4kVRtH0dh4T8L6p4QWxmkcckh7HrAvGGfx15CdZImeVpu4SW-qAfvpfEKYBwFBKBEhqaFGkRfBiHoMhAVyUZJnOeZBFdnyoWkXmIA8DFrioH6NB0OgpbaDKyAgKEKxCBOozhEoqC8LAIByGIN4QPQugUoQAAM01DSAaYiAAIjAhSKOgxAQPAHDdFw4RBF0KUaLoAB6AAslKEESc1asZHQ8EIx2TRSM0UtduC3f-fAdBQCiROiXBkBKJ0AJxkoQp1vR905QN9v3oDyMB7WiUBiA9513GSkMw59MM_eg4QToIJ0kjNpJY3d0Ow_jwTXmj03g3N1FBCIkQuA9pOUpVaarWm62bQgbWEyWuj8KwbyM0WoxCKL8AynIAACCKKiiaIrGUCIsCrdArOEmpZNLAiy3NQyTgbYsyiKi61swAugEM0CYEIN3Y-YkRzRmzC4PbUCO7ozt3a7xCu8ic0LU7B3qm8SnMIgC22h0nve47chR4qXUQMz5g8B02AuMQjM-jHYe6EzIhZzneeu-EYfSLXQA> <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 slot=preview><div class="svelte-1wu1l6d tabs-wrapper"><nav class="svelte-1wu1l6d tabs"><ul></ul></nav> <section class="svelte-1wu1l6d tab-content"><div class="svelte-yuw9hu tab" aria-hidden></div> <div class="svelte-yuw9hu tab" aria-hidden></div> <div class="svelte-yuw9hu tab" aria-hidden></div></section></div> <div class="svelte-1wu1l6d tabs-wrapper"><nav class="svelte-1wu1l6d tabs is-medium"><ul></ul></nav> <section class="svelte-1wu1l6d tab-content"><div class="svelte-yuw9hu tab" aria-hidden></div> <div class="svelte-yuw9hu tab" aria-hidden></div> <div class="svelte-yuw9hu tab" aria-hidden></div></section></div> <div class="svelte-1wu1l6d tabs-wrapper"><nav class="svelte-1wu1l6d tabs is-large"><ul></ul></nav> <section class="svelte-1wu1l6d tab-content"><div class="svelte-yuw9hu tab" aria-hidden></div> <div class="svelte-yuw9hu tab" aria-hidden></div> <div class="svelte-yuw9hu tab" aria-hidden></div></section></div></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 { Tabs, Tab } from 'svelma-pro'
|
|
</script>
|
|
|
|
<Tabs>
|
|
<Tab label="People" icon="users"></Tab>
|
|
<Tab label="Places" icon="map-marker-alt"></Tab>
|
|
<Tab label="Things" icon="ellipsis-h"></Tab>
|
|
</Tabs>
|
|
|
|
<Tabs size="is-medium">
|
|
<Tab label="People" icon="users"></Tab>
|
|
<Tab label="Places" icon="map-marker-alt"></Tab>
|
|
<Tab label="Things" icon="ellipsis-h"></Tab>
|
|
</Tabs>
|
|
|
|
<Tabs size="is-large">
|
|
<Tab label="People" icon="users"></Tab>
|
|
<Tab label="Places" icon="map-marker-alt"></Tab>
|
|
<Tab label="Things" icon="ellipsis-h"></Tab>
|
|
</Tabs></code></pre></figure></div> </div></div> <hr class=is-medium> <p class="title is-4">Position</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-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAFVQ2DgMg7XfMkg1Wq45gA5MaRqhwjwtaOzFyqzW6w5553u-Zk3AIMwIGRkhA4JFpVdVv4G3o1-Z-Ngkv4AAowXB8GD-RtMZIdWFBKpGLlr8-Xtet4gHe_DEPAr4QO-_ijDw4SjEErhXOEYQ5CAv5lP-nKAV2wHtsoCgUFUb57hcUAuC0B7hMoZ5_l2fKYV2cArugF5MRuuBbjupHyIeNYUKoZ7Yf2QEvPej7PpB0EgJ-Vw_nR2AASJuFiSBYEQSAJHoMksHwagiHIahtGMYpwnYFeKnJPhhHEVBPHiBRW6HjR6EKQxa7MXmIA8KgxCuKgfo0HQ6CltoMrICAoQrEIE6jOESioLwsAgHIYjfruIW6BShAAAy5SlIBpiIAAiMCFIo6DEBA8AcN0XDhEEXQoeRQgAHoACyUoQRIFVq5EdDwbXZRSeUUr1uD9XBfAdBQCiROiXBkBKuitQAnGShDteNk3TlAM1zegPIwA1aJQGIbWdXcZLbXtU17bN6DhBOggrSSeWkjdA27ftj3BF-F25ZtBVbkEIiRC4bXvZSXlpuVaaVdVCARc9Ja6PwrBvMDRajEI6PwDKcgAAIIoqKJoisZQIiwZN0Cs4SalkuMCPjBVDJOTMYzKIqLrWzBI6AQzQJgQh9bd5iRAVGbMLggtQMLuiiwN4vEOLyIFUVItNeqbz6cwiBFbaHTS7LwtyDrioxRAoMbh02AuMQwM-nrGu6CDIg23bUHi-EGvSH7QA> <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 slot=preview><div class="svelte-1wu1l6d tabs-wrapper"><nav class="svelte-1wu1l6d tabs is-centered"><ul></ul></nav> <section class="svelte-1wu1l6d tab-content"><div class="svelte-yuw9hu tab" aria-hidden></div> <div class="svelte-yuw9hu tab" aria-hidden></div> <div class="svelte-yuw9hu tab" aria-hidden></div></section></div> <div class="svelte-1wu1l6d tabs-wrapper"><nav class="svelte-1wu1l6d tabs is-right"><ul></ul></nav> <section class="svelte-1wu1l6d tab-content"><div class="svelte-yuw9hu tab" aria-hidden></div> <div class="svelte-yuw9hu tab" aria-hidden></div> <div class="svelte-yuw9hu tab" aria-hidden></div></section></div></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 { Tabs, Tab } from 'svelma-pro'
|
|
</script>
|
|
|
|
<Tabs position="is-centered">
|
|
<Tab label="People" icon="users"></Tab>
|
|
<Tab label="Places" icon="map-marker-alt"></Tab>
|
|
<Tab label="Things" icon="ellipsis-h"></Tab>
|
|
</Tabs>
|
|
|
|
<Tabs position="is-right">
|
|
<Tab label="People" icon="users"></Tab>
|
|
<Tab label="Places" icon="map-marker-alt"></Tab>
|
|
<Tab label="Things" icon="ellipsis-h"></Tab>
|
|
</Tabs></code></pre></figure></div> </div></div> <hr class=is-medium> <p class="title is-4">Style</p> <p class=content>Use <code>is-boxed</code>, <code>is-toggle</code>, <code>is-toggle</code> and <code>is-toggle-rounded</code>, or <code>is-fullwidth</code> to alter to style of your tabs. </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-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAFVQ2DgMg7XfMkg1Wq45gA5MaRqhwjwtaOzFyqzW6w5553u-Y3mk_vI4OE8PhVv4G3o1-Z-Ngkv4AAowXB8GD-RtMZIdWFBKpGLlr4-n8-XkBXvwxDwI-EDPv4ow8OEoxBK4VzhGEOQgJ-ZTfpyv5dv-7bKAoFBVE-ZDJOILgtBAu7KEeX5dnyqFdnAK7oCedEbu825keEzC4BQFCwEe6H9n-LzXre96geBICvlcH5UdgP4CZhQkAUBIEgAR6DJJB0GoLB8GIZRtGyfx2BngpyTYbh-FgYRFxQCRcDsRRyEyTRa70ZajGuSxW7JOxnHcbAja7n5PEwOEWpdGmmB8Y4THGYJyQ3nevGqVZ6n-JJ776WhMUYReimAagwGWeJmkwXBQQIRIWXUUZJl5WZOHoHhYnWQEtm1vZ5HVYZjEGW5CYecxm6wD5u5gMMUDIt4zCOXJcWmcJSUPil4kZdJBlzXV_4FUVLVpSApXaeVlVISh2WWLFW2KeZTXFa1xEdQ53UuXRQoijwhWuKgfo0HQ6CltoMrICAoQrEIE6jOESioLwsAgHIYjvhA9C6BShAAAwY_DIBpiIAAiMCFIo6DEBA8AcN0XBhV0lUaLoAB6AAslKEES2NarZHQ8EI9NoxSmMUuzuCc1BfAdBQCiROiXBkBKDMAJxkoQjNCyL05QOLkvoDyoWJHQUBiDzzN3GSqsa6LGsS-g4QToIDMkpjpJm1z6ua9bwRvkbGPK9j9lBCIkQuDzjuUnmOOE2waYk2TCDA7bJa6PwrBvL7RajEISfwDKcgAAIIoqKJoisZQIiwhd0Cs4SalkGcCFn2NDJOtfJzKIqLrWzCx6AQzQJgQgc-b5iRNjGacT3UB97oA9c0PxBD8i2O4_3NPqm82nMIguO2h0Y8dL3vs-kDwgQP75g8B02AuMQB_r5vMAiODJ8iGfF9X0P4RL9IX9AA> <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 slot=preview><div class="svelte-1wu1l6d tabs-wrapper"><nav class="svelte-1wu1l6d tabs is-boxed"><ul></ul></nav> <section class="svelte-1wu1l6d tab-content"><div class="svelte-yuw9hu tab" aria-hidden></div> <div class="svelte-yuw9hu tab" aria-hidden></div> <div class="svelte-yuw9hu tab" aria-hidden></div></section></div> <div class="svelte-1wu1l6d tabs-wrapper"><nav class="svelte-1wu1l6d tabs is-toggle"><ul></ul></nav> <section class="svelte-1wu1l6d tab-content"><div class="svelte-yuw9hu tab" aria-hidden></div> <div class="svelte-yuw9hu tab" aria-hidden></div> <div class="svelte-yuw9hu tab" aria-hidden></div></section></div> <div class="svelte-1wu1l6d tabs-wrapper"><nav class="svelte-1wu1l6d tabs is-toggle is-toggle-rounded"><ul></ul></nav> <section class="svelte-1wu1l6d tab-content"><div class="svelte-yuw9hu tab" aria-hidden></div> <div class="svelte-yuw9hu tab" aria-hidden></div> <div class="svelte-yuw9hu tab" aria-hidden></div></section></div> <div class="svelte-1wu1l6d tabs-wrapper"><nav class="svelte-1wu1l6d tabs is-fullwidth"><ul></ul></nav> <section class="svelte-1wu1l6d tab-content"><div class="svelte-yuw9hu tab" aria-hidden></div> <div class="svelte-yuw9hu tab" aria-hidden></div> <div class="svelte-yuw9hu tab" aria-hidden></div></section></div></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 { Tabs, Tab } from 'svelma-pro'
|
|
</script>
|
|
|
|
<Tabs style="is-boxed">
|
|
<Tab label="People" icon="users"></Tab>
|
|
<Tab label="Places" icon="map-marker-alt"></Tab>
|
|
<Tab label="Things" icon="ellipsis-h"></Tab>
|
|
</Tabs>
|
|
|
|
<Tabs style="is-toggle">
|
|
<Tab label="People" icon="users"></Tab>
|
|
<Tab label="Places" icon="map-marker-alt"></Tab>
|
|
<Tab label="Things" icon="ellipsis-h"></Tab>
|
|
</Tabs>
|
|
|
|
<Tabs style="is-toggle is-toggle-rounded">
|
|
<Tab label="People" icon="users"></Tab>
|
|
<Tab label="Places" icon="map-marker-alt"></Tab>
|
|
<Tab label="Things" icon="ellipsis-h"></Tab>
|
|
</Tabs>
|
|
|
|
<Tabs style="is-fullwidth">
|
|
<Tab label="People" icon="users"></Tab>
|
|
<Tab label="Places" icon="map-marker-alt"></Tab>
|
|
<Tab label="Things" icon="ellipsis-h"></Tab>
|
|
</Tabs></code></pre></figure></div> </div></div> <hr class=is-medium> <h2 class="title is-4 is-spaced">API</h2> <h3 class=subtitle>Tabs</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>value</code></td> <td>Index of the active tab (zero-based), optional</td> <td>Number</td> <td>—</td> <td><code>0</code></td> <tr><td><code>size</code></td> <td>Size of tabs, optional</td> <td>String</td> <td><code>is-small</code>, <code>is-medium</code>, <code>is-large</code></td> <td>—</td> <tr><td><code>position</code></td> <td>Position of tabs list, horizontally. By default they're positioned to the left, optional</td> <td>String</td> <td><code>is-centered</code>, <code>is-right</code></td> <td>—</td> <tr><td><code>style</code></td> <td>Style of tabs, optional</td> <td>String</td> <td><code>is-boxed</code>, <code>is-toggle</code>, <code>is-toggle-rounded</code>, <code>is-fullwidth</code></td> <td>—</td> </table></div></section> <section> <div class="svelte-2ae2jn table-wrapper"><table class="is-fullwidth table"><thead><tr><th>Name</th> <th>Parameters</th> <th>Description</thead> <tr><td><code>activeTabChanged</code></td> <td>序号</td> <td>切换事件</td> </table></div></section> <br> <br> <h3 class="is-spaced subtitle">Tab</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>label</code></td> <td>Label for tab</td> <td>String</td> <td>—</td> <td>—</td> <tr><td><code>icon</code></td> <td>Show this icon on left-side of the tab, optional</td> <td>String</td> <td>—</td> <td>—</td> <tr><td><code>iconPack</code></td> <td>Fontawesome icon pack to use. By default the <code>Icon</code> component uses <code>fas</code>, optional</td> <td>String</td> <td><code><code>fas</code></code>, <code><code>fab</code></code>, <code>etc...</code></td> <td>—</td> </table></div></section> </div></section></main></div> <script>__SAPPER__={baseUrl:"/svelma-pro",preloaded:[void 0,null,(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t){return {jsdocTabs:[{meta:{filename:g,lineno:9,columnno:f,path:c},description:"Index of the active tab (zero-based)",type:[r],optional:a,defaultvalue:p,name:l,_isSvelteDoc:a,_svelteProps:{type:{names:[r]},optional:a,defaultvalue:p,name:l},kind:d,longname:"module:Tabs~value",scope:e,memberof:h,___s:a,values:k},{meta:{filename:g,lineno:14,columnno:f,path:c},description:"Size of tabs",type:[b],optional:a,name:m,_isSvelteDoc:a,_svelteProps:{type:{names:[b]},optional:a,name:m},kind:d,values:"\u003Ccode\u003Eis-small\u003C\u002Fcode\u003E, \u003Ccode\u003Eis-medium\u003C\u002Fcode\u003E, \u003Ccode\u003Eis-large\u003C\u002Fcode\u003E",longname:"module:Tabs~size",scope:e,memberof:h,___s:a},{meta:{filename:g,lineno:20,columnno:f,path:c},description:"Position of tabs list, horizontally. By default they're positioned to the left",type:[b],optional:a,name:n,_isSvelteDoc:a,_svelteProps:{type:{names:[b]},optional:a,name:n},kind:d,values:"\u003Ccode\u003Eis-centered\u003C\u002Fcode\u003E, \u003Ccode\u003Eis-right\u003C\u002Fcode\u003E",longname:"module:Tabs~position",scope:e,memberof:h,___s:a},{meta:{filename:g,lineno:26,columnno:f,path:c},description:"Style of tabs",type:[b],optional:a,name:o,_isSvelteDoc:a,_svelteProps:{type:{names:[b]},optional:a,name:o},kind:d,values:"\u003Ccode\u003Eis-boxed\u003C\u002Fcode\u003E, \u003Ccode\u003Eis-toggle\u003C\u002Fcode\u003E, \u003Ccode\u003Eis-toggle-rounded\u003C\u002Fcode\u003E, \u003Ccode\u003Eis-fullwidth\u003C\u002Fcode\u003E",longname:"module:Tabs~style",scope:e,memberof:h,___s:a},{isEvent:a,description:"切换事件",name:"activeTabChanged",values:"序号"}],jsdocTab:[{meta:{filename:i,lineno:6,columnno:f,path:c},description:"Label for tab",type:[b],name:q,_isSvelteDoc:a,_svelteProps:{type:{names:[b]},name:q},kind:d,longname:"module:Tab~label",scope:e,memberof:j,___s:a,values:k},{meta:{filename:i,lineno:11,columnno:f,path:c},description:"Show this icon on left-side of the tab",type:[b],optional:a,name:s,_isSvelteDoc:a,_svelteProps:{type:{names:[b]},optional:a,name:s},kind:d,longname:"module:Tab~icon",scope:e,memberof:j,___s:a,values:k},{meta:{filename:i,lineno:16,columnno:f,path:c},description:"Fontawesome icon pack to use. By default the \u003Ccode\u003EIcon\u003C\u002Fcode\u003E component uses \u003Ccode\u003Efas\u003C\u002Fcode\u003E",type:[b],optional:a,name:t,_isSvelteDoc:a,_svelteProps:{type:{names:[b]},optional:a,name:t},kind:d,values:"\u003Ccode\u003E\u003Ccode\u003Efas\u003C\u002Fcode\u003E\u003C\u002Fcode\u003E, \u003Ccode\u003E\u003Ccode\u003Efab\u003C\u002Fcode\u003E\u003C\u002Fcode\u003E, \u003Ccode\u003Eetc...\u003C\u002Fcode\u003E",longname:"module:Tab~iconPack",scope:e,memberof:j,___s:a}]}}(true,"String","src\u002Fcomponents\u002FTabs","prop","inner",2,"Tabs.svelte","module:Tabs","Tab.svelte","module:Tab","","value","size","position","style",0,"label","Number","icon","iconPack"))]};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> |