56 lines
23 KiB
HTML
56 lines
23 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/button.c40b2c4d.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="Buttons | Svelma" property=og:title><meta content=可点击按钮 property=og:description><noscript id=sapper-head-end></noscript> </head> <body> <div id=sapper> <nav class="has-shadow is-spaced 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>Buttons</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-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPQAIQ6zGYZHMv2SEDg4R4QTlqCCUZA5jIiGILmIrh8wHdMYdRnMpC6wQA1LPJPtzABhQeuACEAeA07LQUkZi51drZCFIp4qCHqD9NDo6FL2hlyBAoRWQmNI1Q4SUqF4sBAcjEII4AgehdApQgAAZIP_EA0xEAARGBCkUdBiAgeAOG6LhwiCLpwi2IQAD0ABZKUIIkYK1KAoA6HgiPAikoIpSjcGo2jWxoigFEidEuDICVdEIgBOMlCGIli2J4DiOi49BwnQHkYBwtEoDEIjSLuMkJJoqS-Bk7j30EQSSSg0ltPYvTZPCYJYSCdTILEmDgKCERIhcIjTMpPNYKQtg01Q9CECfQyS10fhWDeJyi1GIRwvgGU5AAAQRRUUTRFYygRFg0roFZwk1LJYoEeKYKGD8ioimURTgYh2x4ZggtAIZoEwIQqJ08xIhgjM62aqBWt0draM64hOuRGC4LavD1TeTtmEQODbRrXA-tauRZsVN8IBc8weA6bBBycn15sm3RnJEXb9sHTrwkm6R7qAA> <div class="slot-wrap svelte-7fflr3"><div class="svelte-150a96u codepen-button">Codesandbox <i class="icon is-small fa-external-link-alt fas"></i></div></div></form> <div class="svelte-150a96u preview"><div slot=preview><button class="button is-primary" type=button> <span> Click!: 0</span> </button></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="button is-small 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><Button type="is-primary" on:click={() => counter++}>
|
|
Click!: {counter}
|
|
</Button></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-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRrETmYj8aLJIbMZhkKr7KwAIQ6TbI5l-yQgcHCPCCctQQSjICMAAUR6Nx1zO930G29IvmxY-_4B-E4B1iMR4K2AMp7g_RBdd9crtc9zfyQeYDB-oL-IwAESfVwvS-vl9vtkKftB2RMd0AUChXwAdVA8DvyvTkbw3AC_nvcIFARV8AElyFwOCyF_Jde2QoDwiOdxJwAGTcPDlwQv8kMArdBxcChVFfKjWOYGiCPXIjGNQx8gnI98x1cbi6MIu9twBV8ABVAnE9AuSrPkqxrOs4AbejWwk3i1jQbBYEwd8B1QQzVkUyxV3oviUO3YdR3HfxzCgXBUDWdAKCMCi3I8ihLI7GypMHXd90PZytS6NNjIAJVwKKLLKRCeP_fjt3Q3BnPi5gjhgIwAHku1yzBFOUiARFU8r1LxTT_EbdcdMcSsqtrGrknQXBmAgSBiAECAe3s2cxwnNsrMQ2ySIcucJ3MBQxEVVYjGw-bWBKpL6NGwLJOIpihyGpyQFm9AVtWcxsuKpbjquJVCpyhREuSzkyhUswyoq161Na-s6u019dNSuzBym4bnNCLqxFknbhA6bBZhyScT1hiAuPWn9_oYwG9scmawfKmBIf4xJYXhowYvgbJSue8qhRFHhUGIVxUD9Gg6HQUttBlZAQFCFYhGNEZUHCJRUF4WAQDkea4H6tndApQgAAYFfFkA0xEN8YEKRR0GICB4A4bouHCIIunCLYhAAPQAFkpQgiWVrUoCgDoeAtuWKUVil7dwR3naHJ2KAUSJ0S4MgJV0c2AE4yUIS2vZ9ng_Y6AP0HCDq0yNtEoDEC3rbuMk46dhO-CTwP-cEcOSUV0kC994vk_CYJYSCHOFZj5WpaCERIhcC2q8pPMVY1tg0213WEC5suS10fhWDedui1GIQZ_gGU5AAAQRRUUTRFYygRFht7oFZwk1LIl4EFflaGAXz9nmURTgYgRx4Zhx9AIZoEwIQHcL8xImVjMzYP5QC_roH-zs_7ED_siZWqtv4m3VG8MczBECq1tF2XAwCv5yCQYqPmEBO7mB4DDFwxB24-hQXA3QHdqzEMMhAKB4RwhwOkKwoAA> <div class="slot-wrap svelte-7fflr3"><div class="svelte-150a96u codepen-button">Codesandbox <i class="icon is-small fa-external-link-alt fas"></i></div></div></form> <div class="svelte-150a96u preview"><div slot=preview><div class="buttons svelte-1uf8rcq"><button class="button is-primary" type=button> <span> Primary</span> </button> <button class="button is-success" type=button> <span> Success</span> </button> <button class="button is-danger" type=button> <span> Danger</span> </button> <button class="button is-warning" type=button> <span> Warning</span> </button> <button class="button is-info" type=button> <span> Info</span> </button> <button class="button is-link" type=button> <span> Link</span> </button> <button class="button is-light" type=button> <span> Light</span> </button> <button class="button is-dark" type=button> <span> Dark</span> </button> <button class="button is-text" type=button> <span> Text</span> </button></div> <div class="buttons svelte-1uf8rcq"><button class=button type=button disabled> <span> Disabled</span> </button> <button class="button is-primary is-loading" type=button> <span> Loading</span> </button> <button class="button is-success is-rounded" type=button> <span> Rounded</span> </button> <button class="button is-info" type=button outline> <span> Outlined</span> </button></div> <div class="buttons svelte-1uf8rcq"><div class="is-primary notification"><button class="button is-primary is-inverted" type=button> <span> Inverted</span> </button> <button class="button is-primary is-inverted is-outlined" type=button> <span> Invert Outlined</span> </button></div></div> <div class="buttons svelte-1uf8rcq"><button class="button is-primary" type=submit> <span> Submit</span> </button> <button class="button is-primary" type=reset> <span> Reset</span> </button></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="button is-small 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><div class="buttons">
|
|
<Button type="is-primary">Primary</Button>
|
|
<Button type="is-success">Success</Button>
|
|
<Button type="is-danger">Danger</Button>
|
|
<Button type="is-warning">Warning</Button>
|
|
<Button type="is-info">Info</Button>
|
|
<Button type="is-link">Link</Button>
|
|
<Button type="is-light">Light</Button>
|
|
<Button type="is-dark">Dark</Button>
|
|
<Button type="is-text">Text</Button>
|
|
</div>
|
|
<div class="buttons">
|
|
<Button disabled>Disabled</Button>
|
|
<Button type="is-primary" loading>Loading</Button>
|
|
<Button type="is-success" rounded>Rounded</Button>
|
|
<Button type="is-info" outline>Outlined</Button>
|
|
</div>
|
|
<div class="buttons">
|
|
<div class="notification is-primary">
|
|
<Button type="is-primary" inverted>Inverted</Button>
|
|
<Button type="is-primary" inverted outlined>Invert Outlined</Button>
|
|
</div>
|
|
</div>
|
|
<div class="buttons">
|
|
<Button type="is-primary" nativeType="submit">Submit</Button>
|
|
<Button type="is-primary" nativeType="reset">Reset</Button>
|
|
</div></code></pre></figure></div> </div></div> <hr class=is-medium> <p class="title is-4">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-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRrETmYj8aLJIbMZhkKr7KwAIQ6TbI5jgEAAXn95HBwnBRlBtiAjABlcdQLmd7voNt6RfN5cAEXTmYXXfXK7XPb7g-SEBHTIgof8RgAsqtL1xd0uD3ujwOh2fwvxfTBrwAZVAfyffczC5KshRFHhUGIVxUD9Gg6HQUttBlZAQFCFYhGNEZUHCJRUF4WAQDkMQgj7ehdApQgAAYaOIkA0xELdCkUdBiAgeAOG6LhwiCLpwi2IQAD0ABZKUIIl6K1CcOh4YSqIpWiKSk3AZJ4cI-A6CgFEidEuDICVdCEgBOMlCBElS1I0qAtJ09AeRgXi0SgMRhLEu4yUsmz1M07T0FHItBCMklaNJLzZOs2z_OCWEgjcmjzPovsghESIXGE0LKTzBiYBYtM2I4hA0OwoKQH4Vg3iSotRiEcr4BlOQAAEEUVFE0RWMoERYNq6BWcJNSyWqBHq-ihhwoaKplEU4GIIIIB4ZgitAIZoEwIRpO88xInojNmxWqA1t0DbZK24gtuRejGPW_j1TeQDmEQRjbS7XB9rWuQ7sVLCIBS8weA6bAXGIJKfQeq7dGS6t_sBiAzvCcIrukJGgA> <div class="slot-wrap svelte-7fflr3"><div class="svelte-150a96u codepen-button">Codesandbox <i class="icon is-small fa-external-link-alt fas"></i></div></div></form> <div class="svelte-150a96u preview"><div slot=preview><div class="buttons svelte-1uf8rcq"><button class="button is-small" type=button size=is-small> <span> Small</span> </button> <button class=button type=button> <span> Default</span> </button> <button class="button is-medium" type=button size=is-medium> <span> Medium</span> </button> <button class="button is-large" type=button size=is-large> <span> Large</span> </button></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="button is-small 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><div class="buttons">
|
|
<Button size="is-small">Small</Button>
|
|
<Button>Default</Button>
|
|
<Button size="is-medium">Medium</Button>
|
|
<Button size="is-large">Large</Button>
|
|
</div></code></pre></figure></div> </div></div> <hr class=is-medium> <p class="title is-4">Icons</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-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRrETmYj8aLJIbMZhkKr7KwAIQ6TbIbcsegAkkxzBAmA3cFBMP5zBzHFzO930G29PPm4uGQOhyOyMkummgkcYFOZ32yiue5yz2vThuyMPR_4IEiXMQj0vT13V3yylW-VWa3W4AbD8W38JdLzvMgAAVUGIVxkjAVBsCnLd0AAGTBZhkgoR9lA6JCQCMABxR8AAk8LnYCrz7cDfmSCA4HCHggjlVAgijEAIPQaDYPgxDkKYdCwEw_5kUfYJQIAFVEpsrgohcwMo8xaIfBi4A6YhiHgKpOO4uD_AQ_iyEE4SQGITJYNAgBlVAxDkz8L0U5T5AYzAMD9IIp1wLsDx0mC9PAVBDPQAAlCAKFUYo5XgUCABFxGyGA7PPdAuR_MxKwgatazxQD_EbVdWwchdzDgCAAC8_mc8I4FGKBtg4lDdN4_DOOMrCcLw0DiOYMjsCSqiO0UlC2v8bDmFwlrGr85qutI8j33korVxK8rKvo8ImQgUMgqa_S-IagSMPa8bOoI7rev6hTitKiq6IY_hfUPA6oOmvbJsOoTjom2aevmy8vx_PMQB4PzUD9Gg6HQUttBlZAQFCFYhGNEZUHCJRUF4WAQDkMQglK-hdApQgAAYSexkA0xEOLCkUdBiAgeAOG6LhwiCLpwi2IQAD0ABZKUIIlya1OqOh4bmiYpUmKSF8coFFxi5ew9BInRLgyAlXQuYATjJQgeZlkWeAVjolfCdAeRgVm0SgMRub5u4yQNuWjb4E2FGqotBE1klSdJJ35dd03glhII7ZJvXydKoIREiFxud9ykgbTGm0zphmEDh5GvZAfhWDeSOi1GIRc_gGU5AAAQRRUUTRFYygRFga7oFZwk1LJi4EUvyaGFGO7zmURTgYhmJ4ZgM9AIZoEwIRhed8xInJjNm0nicZ9l0X5-IefkXJymZ_Z9U3lY5hEEp20u1wFfp7kI_FSRiBo_MHg8OfSOfRPvfdCj6tn-wZ95_CHvaQwCgA> <div class="slot-wrap svelte-7fflr3"><div class="svelte-150a96u codepen-button">Codesandbox <i class="icon is-small fa-external-link-alt fas"></i></div></div></form> <div class="svelte-150a96u preview"><div slot=preview><div class="buttons svelte-1uf8rcq"><button class=button type=button> <span> <span class="icon icon svelte-o4tq5q"> <i class="fa svelte-o4tq5q fa-bold"></i></span></span> </button> <button class=button type=button> <span> <span class="icon icon svelte-o4tq5q"> <i class="fa svelte-o4tq5q fa-underline"></i></span></span> </button> <button class=button type=button> <span> <span class="icon icon svelte-o4tq5q"> <i class="fa svelte-o4tq5q fa-italic"></i></span></span> </button></div> <div class="buttons svelte-1uf8rcq"><button class=button type=button iconpack=fab iconleft=github><span class="icon icon svelte-o4tq5q is-small"> <i class="fab svelte-o4tq5q fa-github"></i></span> <span> GitHub</span> </button> <button class="button is-primary" type=button iconpack=fab iconleft=twitter><span class="icon icon svelte-o4tq5q is-small"> <i class="fab svelte-o4tq5q fa-twitter"></i></span> <span> Twitter</span> </button> <button class="button is-success" type=button iconpack=fa iconleft=check><span class="icon icon svelte-o4tq5q is-small"> <i class="fa svelte-o4tq5q fa-check"></i></span> <span> Save</span> </button> <button class="button is-danger" type=button iconpack=fa iconright=times outline> <span> Delete</span> <span class="icon icon svelte-o4tq5q is-small"> <i class="fa svelte-o4tq5q fa-times"></i></span></button></div> <div class="buttons svelte-1uf8rcq"><button class="button is-small" type=button iconpack=fab iconleft=github size=is-small><span class="icon icon svelte-o4tq5q is-small"> <i class="fab svelte-o4tq5q fa-github"></i></span> <span> GitHub</span> </button> <button class=button type=button iconpack=fab iconleft=github><span class="icon icon svelte-o4tq5q is-small"> <i class="fab svelte-o4tq5q fa-github"></i></span> <span> GitHub</span> </button> <button class="button is-medium" type=button iconpack=fab iconleft=github size=is-medium><span class="icon icon svelte-o4tq5q is-small"> <i class="fab svelte-o4tq5q fa-github"></i></span> <span> GitHub</span> </button> <button class="button is-large" type=button iconpack=fab iconleft=github size=is-large><span class="icon icon svelte-o4tq5q is-medium"> <i class="fab svelte-o4tq5q fa-github fa-lg"></i></span> <span> GitHub</span> </button></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="button is-small 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><div class="buttons">
|
|
<Button>
|
|
<Icon icon="bold" />
|
|
</Button>
|
|
<Button>
|
|
<Icon icon="underline" />
|
|
</Button>
|
|
<Button>
|
|
<Icon icon="italic" />
|
|
</Button>
|
|
</div>
|
|
<div class="buttons">
|
|
<Button iconPack="fab" iconLeft="github">GitHub</Button>
|
|
<Button type="is-primary" iconPack="fab" iconLeft="twitter">Twitter</Button>
|
|
<Button type="is-success" iconPack="fa" iconLeft="check">Save</Button>
|
|
<Button type="is-danger" outline iconPack="fa" iconRight="times">Delete</Button>
|
|
</div>
|
|
<div class="buttons">
|
|
<Button size="is-small" iconPack="fab" iconLeft="github">GitHub</Button>
|
|
<Button iconLeft="github" iconPack="fab">GitHub</Button>
|
|
<Button size="is-medium" iconPack="fab" iconLeft="github">GitHub</Button>
|
|
<Button size="is-large" iconPack="fab" iconLeft="github">GitHub</Button>
|
|
</div></code></pre></figure></div> </div></div> <hr class=is-medium> <section><h2 class="title is-4">API</h2> <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>tag</code></td> <td>用于按钮的html标记 (选择 'a' or 'button')</td> <td>String</td> <td><code><code>button</code></code>, <code><code>a</code></code></td> <td><code>button</code></td> <tr><td><code>type</code></td> <td>Type (color of control), optional</td> <td>String</td> <td><code>is-white</code>, <code>is-black</code>, <code>is-light</code>, <code>is-dark</code>, <code>is-primary</code>, <code>is-info</code>, <code>is-success</code>, <code>is-warning</code>, <code>is-danger</code></td> <td>—</td> <tr><td><code>size</code></td> <td>按钮大小, optional</td> <td>String</td> <td><code>is-small</code>, <code>is-medium</code>, <code>is-large</code></td> <td>—</td> <tr><td><code>href</code></td> <td>当tag为'a'时使用, optional</td> <td>String</td> <td>—</td> <td>—</td> <tr><td><code>nativeType</code></td> <td>原生按钮类型, optional</td> <td>String</td> <td><code>任何原生按钮类型 (button</code>, <code>submit</code>, <code>reset)</code></td> <td>—</td> </table></div></section> </div></section></main></div> <script>__SAPPER__={baseUrl:"/svelma-pro",preloaded:[void 0,null,(function(a,b){return {jsdoc:[{description:"用于按钮的html标记 (选择 'a' or 'button')",type:[a],defaultvalue:"button",name:"tag",values:"\u003Ccode\u003E\u003Ccode\u003Ebutton\u003C\u002Fcode\u003E\u003C\u002Fcode\u003E, \u003Ccode\u003E\u003Ccode\u003Ea\u003C\u002Fcode\u003E\u003C\u002Fcode\u003E"},{description:"Type (color of control)",type:[a],optional:b,name:"type",values:"\u003Ccode\u003Eis-white\u003C\u002Fcode\u003E, \u003Ccode\u003Eis-black\u003C\u002Fcode\u003E, \u003Ccode\u003Eis-light\u003C\u002Fcode\u003E, \u003Ccode\u003Eis-dark\u003C\u002Fcode\u003E, \u003Ccode\u003Eis-primary\u003C\u002Fcode\u003E, \u003Ccode\u003Eis-info\u003C\u002Fcode\u003E, \u003Ccode\u003Eis-success\u003C\u002Fcode\u003E, \u003Ccode\u003Eis-warning\u003C\u002Fcode\u003E, \u003Ccode\u003Eis-danger\u003C\u002Fcode\u003E"},{description:"按钮大小",type:[a],optional:b,name:"size",values:"\u003Ccode\u003Eis-small\u003C\u002Fcode\u003E, \u003Ccode\u003Eis-medium\u003C\u002Fcode\u003E, \u003Ccode\u003Eis-large\u003C\u002Fcode\u003E"},{description:"当tag为'a'时使用",type:[a],optional:b,name:"href",values:""},{meta:{filename:"Button.svelte",lineno:30,columnno:2,path:"src\u002Fcomponents"},description:"原生按钮类型",type:[a],optional:b,name:"nativeType",values:"\u003Ccode\u003E任何原生按钮类型 (button\u003C\u002Fcode\u003E, \u003Ccode\u003Esubmit\u003C\u002Fcode\u003E, \u003Ccode\u003Ereset)\u003C\u002Fcode\u003E"}]}}("String",true))]};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> |