88 lines
32 KiB
HTML
88 lines
32 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="Notification | 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>Notification</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-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAIQ6zGYZBk5gAcrhmBBIMQBBAyOZJBqtVxzAByY0jVDhHha-fxuKwJUQOAAeUKFkdzCCHRgZi5VZrdYcF873cnxH40WS2CgwfcIHMZEQT4gxFcHxgHdGMHSMcx3V3A82AdcwAEIoMPGNJCMAAVXAKAoWAuXvHt0D5Qdh1HcdJ2wBRMEQVBiGHMQgMQtgULiAAZBUYDnWs4FDQNcHfIJzDgCAsxWZg-2tGBqOyDo-NQNYeF3YgFAocxxEEwhzAAMQ6KsYEbTANSuMNmC4gBHDpUC4NSAAUtQUfjUAoQThzgPt0AgbBlF0uJMiwRIax3XgrjWbI-xUpU0DkmD-FY7JlJcHJ0C5QiR3_Ej8LzEAeCo1x7LhWh6GQEAtHLArQhWIQl1GcIlHMvgSzkMQggE_KQApQgAAZ2pAOQ0xEAARGBDzTdAFPgDhui4cJT3QcItiEAA9AAWSlCCJLqQC1KAoA6Hh5taikOopNaNq2nhVy2hzpv6LgyAlXQ5oATjJQgFqOniTrOjoLvCdAeRgSa0SgMR5qWu4yVezbto-r6l0EO6SQ60lwfevhPoUcJglhIJgfa561oEoIREiFx5oRyl0rTQa2BGhACphktdH4Vg3jxotRiERn4BlOQAAEEUVFE0RWMoERYAW6BWcJNSydmBE5tahmXGWmZlEUr1rZgadAIZoEwIRju28xIjWjMe21qBdd0fX1UiQ3kTWnq9a6Vd-J9ZhEB620u1wM3dbkN5UEVcqIAJ8weA6N9_zx133ZgEQg5DsOI-IQ3wgd6R06AA> <div class="slot-wrap svelte-7fflr3"><div class="svelte-150a96u codepen-button">Codesandbox <i class="icon fa-external-link-alt fas is-small"></i></div></div></form> <div class="svelte-150a96u preview"><div slot=preview><button class="button block" type=button> <span> Toggle</span> </button> <article class="svelte-pee90k notification"><button class=delete aria-label=""></button> <div class="svelte-pee90k media"> <div class=media-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit </div></div></article></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 copy-code is-small 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 { Button, Notification } from 'svelma-pro';
|
|
|
|
let isOpen = true
|
|
</script>
|
|
|
|
<Button class="block" on:click={() => (isOpen = !isOpen)}>Toggle</Button>
|
|
<Notification bind:active={isOpen}>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
|
|
hendrerit imperdiet, elit sapien laoreet elit
|
|
</Notification></code></pre></figure></div> </div></div> <hr class=is-medium> <p class="title is-4">Types</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-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAOVwzAgkGIAggZHMkg1Wq45gA5MaRqhwjwteP41yqzW6w4zHpO93e_2yA2ADIKmBj2twUOB3BQBXmOAQLMrZgyczWmDEVjMDpBW1rHgQKsKCjmOIt6EOYABiHRVjAjaYBqVxhu-Y4AI4dKgXAgQAClqCjXqgFC3t2cCPugEDYMo0FxJkWCJDWSpNlcazZI-QFKmgP5sOY_CHtkgEuDk6BcpuPYQH23a7pa_GCduokWL8yS_uECgIv4-6HseLRnkGl6fjed6MU-ZCwq-2Qfl-ta_sQ_48cBYEQcQUHeLBQTwWeyGoRhWEWGgeHMARREkWR3gUWwmDUbeja8PREB6cxOFsRYnGJNxzHrmUknCTu6BrhJXZCSJA4ybYhRyXA4SnsQdkLCAKmJGpp5jppV46ba96Ps-Rnvp-qDfuZlnMSB4GQdBjnOUhKFoeYmG4NhXn4b-fmkeRjiUSFVxhXRQQMQ-VksXaUXxagXFKsl_GpTlUn5VlG5nel0nmLJ_jyciqAhP-ylxAeNWNup9UXo1YWoXpbVviZXVmX-6AAX1NmDQ5YBwdKLlje5U2ebhs2EU6_mLSCwWhbREUbVFW0xaxe0cQdiVHbxKVpXlYkJtlW43fld2FX88glZgGB-kEb2OB9R5fXV55ade_0tfp6CGcDnXdeDkO8f1tn2TBcNOQjo1uRNHk4d5vmYwtgVLbjq344UhPRbxsVkwlWRU7eNPXXTmV5iAPCoMQri4XCtD0MgIBaOW_uhCsQhTqM4RKKhfAlnIYhBDefsgBShAAAxpyAchpiIAAiMCFIo6AWfAHDdFw4RBF04RbEIAB6AAslKEESmcgFqUBQB0PB1ynFLpxSrft53PCzp3eHoJE6JcGQEq6LXACcZKEPXg8XsPo8dOP4ToDyMAV2iUBiHXjd3GSq8d13G9b1OghzyS6ekuf698JvCjhMEsJBMfafL63N5BCISILg64P0pK7NMBc0xFyiggf2N8Sy6H4KwN4f8iyjCEEg-AMo5AAAEESKhRGiFYZQEQsEIXQFY4RNRZAwQILBrchjTlocgmUIply1mYLA0AQxoCYCEEPLu5hIitwzMwXAPCoB8N0AI9UkQhHIlbtnfhVd1RvGeswRA2dbQdDERIvhcg1GKjDhAAB5geAdGwC4Ygf8fQaKUbof-IgzEWKsUI8ISjpCeKAA> <div class="slot-wrap svelte-7fflr3"><div class="svelte-150a96u codepen-button">Codesandbox <i class="icon fa-external-link-alt fas is-small"></i></div></div></form> <div class="svelte-150a96u preview"><div slot=preview><article class="svelte-pee90k notification"><button class=delete aria-label=""></button> <div class="svelte-pee90k media"> <div class=media-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit </div></div></article> <article class="svelte-pee90k notification is-info"><button class=delete aria-label=""></button> <div class="svelte-pee90k media"> <div class=media-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit </div></div></article> <article class="svelte-pee90k notification is-success"><button class=delete aria-label=""></button> <div class="svelte-pee90k media"> <div class=media-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit </div></div></article> <article class="svelte-pee90k notification is-warning"><button class=delete aria-label=""></button> <div class="svelte-pee90k media"> <div class=media-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit </div></div></article> <article class="svelte-pee90k notification is-danger"><button class=delete aria-label=""></button> <div class="svelte-pee90k media"> <div class=media-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit </div></div></article></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 copy-code is-small 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 { Notification } from 'svelma-pro';
|
|
</script>
|
|
|
|
<Notification>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
|
|
hendrerit imperdiet, elit sapien laoreet elit
|
|
</Notification>
|
|
|
|
<Notification type="is-info">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
|
|
hendrerit imperdiet, elit sapien laoreet elit
|
|
</Notification>
|
|
|
|
<Notification type="is-success">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
|
|
hendrerit imperdiet, elit sapien laoreet elit
|
|
</Notification>
|
|
|
|
<Notification type="is-warning">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
|
|
hendrerit imperdiet, elit sapien laoreet elit
|
|
</Notification>
|
|
|
|
<Notification type="is-danger">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
|
|
hendrerit imperdiet, elit sapien laoreet elit
|
|
</Notification></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-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAOVwzAgkGIAggZHMkg1Wq45gA5MaRqhwjwteP41yqzW6w4zHpO93e_3BxAmMkAI4deDdsiRCBBYiwfwNgAyCpgY9rcFDgdwUAV5jgECzK2YMnMa0YGIVhmA6IJbTWHgICrBQKHMcQf0IcwADEOirGBG0wDUrjDMCxyPVAuGQgAFLUFC_VAKB_bs4AA9AIGwZQsLiTIsESGslSbK41myADEKVNBoLYcx-AfbIEJcHJ0C5Tcez3Hd0DXGS5O3U8LF-ZIYPCBQEX8Rt92AZggmPSQ7wfJ8WlfIMPwg79fz4wCyFhEDsnAyDaxg4g4MkpDUPQ4hMO8HCgjw19COI8wyNwCi0Go5haPoxjmO8Vi2EwDif0bXgeIgRyBMo4SLDExIJIE9cylUhT1OUjcu3kvt1PMTT_G0l9iEChYQAMsgfCMkyYDMuJ70SSyXzHGzP3s20_wAoDXLAiDUCgryfIE5C0IwrCQrCgiOiI0jyIsOKaJgpKmJYxw2Iyq4su4oJeP_XzBLtPLitQcSlXKmTKvqtSByUy0VL-6qAea2xCi0uBwmRVAQjg_S916_rTPM0bGysib3ymrKiMc-bQPc5bPNg9B4PW_ytuCsBcOlcL9si6LYqo066KdZLLpBdLMq4nKHryp6CqEt7RI-0qvqkiqqsagHaulxTwch1rocwDA_SCRHDOM1HhosjHxrfWyv1x2anPQFzCaWlbSfJqSNoCoLsJp0K6b2g6oqOyj4sS9mLtSq7udu3nCn5_KpMKkWSqyCWfylkGZbIIURR4VBiFcKi4VoehkBALRyxz0IViEKdRnCJQiL4Es5DEIJv2zkAKUIAAGZuQDkNMRAAERgQpFHQbz4A4bouHCEz0HCLYhAAPQAFkpQgiTbkAtSgKAOh4afG4pFuKSXle154Wc1-o8f-i4MgJV0KeAE4yUIGe9_fA-j46E_wnQHkYFHtEoDEae57uGSR-q914vzflOQQV8SQt1JMA5-fBX4KHCMEWEQR_7N3vkvb8QQRCRBcNPGBlI8wgDTL3NM_c8oIBzhAksuh-CsDeFgosowhD0JPEvAAAgiRUKI0QrDKAiFgvC6ArHCJqLIrCBDsLkEMackiGEyhFMuWszAqGgCGNATAQh97r3MJEJeGZmC4A0VALRugdHqkiHo5ES8O7aK6LOL8PpmCIA7raDoRiTFaLkG8OGMpdDYJEOYHgHRsAuGIFg5xriYAiGLheIJISwl7j0eEOx0h0lAA> <div class="slot-wrap svelte-7fflr3"><div class="svelte-150a96u codepen-button">Codesandbox <i class="icon fa-external-link-alt fas is-small"></i></div></div></form> <div class="svelte-150a96u preview"><div slot=preview><article class="svelte-pee90k notification"><button class=delete aria-label=""></button> <div class="svelte-pee90k media"><div class=media-left><span class="icon icon is-large svelte-o4tq5q"> <i class="fa fa-2x svelte-o4tq5q fa-question-circle"></i></span></div> <div class=media-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit </div></div></article> <article class="svelte-pee90k notification is-info"><button class=delete aria-label=""></button> <div class="svelte-pee90k media"><div class=media-left><span class="icon icon is-large svelte-o4tq5q"> <i class="fa fa-2x svelte-o4tq5q fa-info-circle"></i></span></div> <div class=media-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit </div></div></article> <article class="svelte-pee90k notification is-success"><button class=delete aria-label=""></button> <div class="svelte-pee90k media"><div class=media-left><span class="icon icon is-large svelte-o4tq5q"> <i class="fa fa-2x svelte-o4tq5q fa-check-circle"></i></span></div> <div class=media-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit </div></div></article> <article class="svelte-pee90k notification is-warning"><button class=delete aria-label=""></button> <div class="svelte-pee90k media"><div class=media-left><span class="icon icon is-large svelte-o4tq5q"> <i class="fa fa-2x svelte-o4tq5q fa-exclamation-triangle"></i></span></div> <div class=media-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit </div></div></article> <article class="svelte-pee90k notification is-danger"><button class=delete aria-label=""></button> <div class="svelte-pee90k media"><div class=media-left><span class="icon icon is-large svelte-o4tq5q"> <i class="fa fa-2x svelte-o4tq5q fa-exclamation-circle"></i></span></div> <div class=media-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit </div></div></article></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 copy-code is-small 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 { Notification } from 'svelma-pro';
|
|
</script>
|
|
|
|
<Notification icon="question-circle">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
|
|
hendrerit imperdiet, elit sapien laoreet elit
|
|
</Notification>
|
|
|
|
<Notification type="is-info" icon={true}>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
|
|
hendrerit imperdiet, elit sapien laoreet elit
|
|
</Notification>
|
|
|
|
<Notification type="is-success" icon={true}>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
|
|
hendrerit imperdiet, elit sapien laoreet elit
|
|
</Notification>
|
|
|
|
<Notification type="is-warning" icon={true}>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
|
|
hendrerit imperdiet, elit sapien laoreet elit
|
|
</Notification>
|
|
|
|
<Notification type="is-danger" icon={true}>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
|
|
hendrerit imperdiet, elit sapien laoreet elit
|
|
</Notification></code></pre></figure></div> </div></div> <hr class=is-medium> <p class="title is-4">Auto-close</p> <p>Notification will close automatically after <code>duration</code> . </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-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAIQ6zGYZBk5gAcrhmBBIMQBBAyOZJBqtVxzAByY0jVDhHha-fxuKwLNd3AASTgAHlChZHWAwrCzFyqzW6w4r53u5PiPxoslsFBg-4QOYyIgXxAxCuD4wDujGDpGOY7oZj2B7HmwDrmMwQQdDAMaSEYADKyi4MiXKPj26B8oOw6juOk7YAomCIKgxDDmIIEwfuR4ntOTEAMKfrCIHIahGFxAAMgqMBzrWcChoGuCfkE5hwBAWYrMwfbWjAdHZB0MmoGsPAQFWCgUOY4jyYQ5gAGIdFWMCNpgGpXGGzASQAjh0qBcCZAAKWoKLJqAUPJw5wH26AQNgyjWXEmRYIkNZKk2VxrNkfZGUqaA6Qh_DCdkhkuDk6BciRI6AeRRF5iAPC0a4vlwrQ9DICAWjlnVoQrEIS6jOESiuXwJZyGIQRybVIAUoQAAMo0gHIaYiAAIjAJ5pugxAQPAHDdFw4Qoeg4RbEIAB6AAslKEESE0gFqUBQB0PB7cNFJjRSp3nZdPCrpdflbf0XBkBKui7QAnGShD7Y9UnPa9HTveE6A8jAG1olAYh7YddxkiDF1XeDkNLoIv0kmNpJo2DfAQwo4TBLCQRI6NQOnXJQQiJELh7fjlKlWm81sEtK11djJa6PwrBvLTRajEIAvwDKcgAAIIoqKJoisZQIiw8t0Cs4SalkYsCBLp1DMu2uCzKIo3rWzAIHVQzQJgQhPVd5iRKdTFW1ANu6Hb6qRA7yKnVNttdKusk-swiBTbau4uzbchvKgiqtRA9PmDwHQfoBtPB6HMAiPHifJ6nxAO-EfvSCXQA> <div class="slot-wrap svelte-7fflr3"><div class="svelte-150a96u codepen-button">Codesandbox <i class="icon fa-external-link-alt fas is-small"></i></div></div></form> <div class="svelte-150a96u preview"><div slot=preview><button class="button block" type=button> <span> Show</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 copy-code is-small 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 { Button, Notification } from 'svelma-pro';
|
|
|
|
let autoIsOpen = false
|
|
</script>
|
|
|
|
<Button class="block" on:click={() => (autoIsOpen = true)}>Show</Button>
|
|
<Notification bind:active={autoIsOpen} autoClose={true}>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
|
|
hendrerit imperdiet, elit sapien laoreet elit
|
|
</Notification></code></pre></figure></div> </div></div> <hr class=is-medium> <p class="title is-4">Opening with code</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-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAIQ6zGYZBk5gAcrhmBBIMQBBAyOZJBqtVxzAByY0jVDhHha-fxuJgLrEYeTjK4ZGD4ej8dkd1r3AtGOthnHkcQMd79AkRICGCehmWFbRVB-gPzgAmrgHTmFebCrOYzDKBAcDmJeFBBKgXCjMOY5QFAtgAITzjIX7mIQhGXi0DKxnEkhmFyVY1nWDiUZ23aTsQ_DRMk2BQMG7ggGB6CIMxj6uD4wDujePhGOYB5HkOD5PhO6AiZIRgAMrKIeA7Saez5cgxPboHyOlMSxcBsRxxBcVBtiFMksHhHAHTEMQ8BVDxfEuGZQkiQ64mSfemlyZ6FmFABNl2Q5TnzlOMaKSpam-Y-Z4WO6oWOdEMbaV2un6Rlhl4sZ_jsZx_iBX88hwOEmAYH6QRFWQrkCR5oneapUknvFz4Bb8wVlRV6BVbh8G4HAEDPl14R4IxXDhDWFCqP1j61VBQQdDAkXRc16mtbJk7uj1VVpWUBl6XmIA8KgZl_nCtD0MgIBaOWN2hCsQhLqM4RKMhfAlnIYhBEN10gBShAAAzAyAchpiIAAiMCFIo6DEBA8AcN0k1Leg4RbEIAB6AAslKEESYMgFqGEdDw2OAxSIMUkTJNQGTq70xQCiROiXBkBKuhYwAnGShA47TuCkzwjMdMz6PoDyMBTWiUBiNjeN3GSgvC6L4u2UWghcySIOkir9Mi3wYss8EsJBArwP80TQ1BCIkQuNjuuUsdaaw2m8OIwgN1LlrID8KwbzW0WoxCP78AynIAACCKKiiaIrGUCIsHHdArOEmpZKH76B3IQzLlnAcyiK1G1swXugEM0CYEIdNk-YkRExmPaV1A1e6LX6qRPXyJExDNddKuEk-swiAQ7aXa4C31dyG8qCKs9EC2_BHTsY-1vD6PMAiAvS88Cvbn1-VW_CtI0hAA> <div class="slot-wrap svelte-7fflr3"><div class="svelte-150a96u codepen-button">Codesandbox <i class="icon fa-external-link-alt fas is-small"></i></div></div></form> <div class="svelte-150a96u preview"><div slot=preview><button class="button block" type=button> <span> Show Notification</span> </button> <button class="button block is-success" type=button> <span> Show Notification (success)</span> </button> <button class="button block is-danger" type=button> <span> Show Notification (danger)</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 copy-code is-small 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 { Button, Notification } from 'svelma-pro';
|
|
|
|
function showNotification(props) {
|
|
Notification.create({
|
|
message: 'You opened this programmatically!',
|
|
...props
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<Button class="block" on:click={() => showNotification()}>Show Notification</Button>
|
|
<Button class="block" type="is-success" on:click={() => showNotification({ type: 'is-success' })}>Show Notification (success)</Button>
|
|
<Button class="block" type="is-danger" on:click={() => showNotification({ type: 'is-danger', position: 'is-bottom-right', icon: true })}>Show Notification (danger)</Button></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>type</code></td> <td>Type (color), 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>active</code></td> <td>Whether the notification is visible or not</td> <td>boolean</td> <td>—</td> <td><code>true</code></td> <tr><td><code>showClose</code></td> <td>Display an X button that closes the notification</td> <td>boolean</td> <td>—</td> <td><code>true</code></td> <tr><td><code>autoClose</code></td> <td>Automatically close the notification after <code>duration</code>. Doesn't apply when opening programmatically</td> <td>boolean</td> <td>—</td> <td><code>false</code></td> <tr><td><code>duration</code></td> <td>Duration notification will remain on screen, optional</td> <td>Number</td> <td>—</td> <td><code>2000</code></td> <tr><td><code>icon</code></td> <td>Show icon on left-side of the notification. If set to <code>true</code>, icon will be determined from <code>type</code> property., optional</td> <td>String, Boolean</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> <tr><td><code>ariaCloseLabel</code></td> <td>Label for the close button, to be read by accessibility screenreaders, optional</td> <td>String</td> <td>—</td> <td>—</td> <tr><td><code>message</code></td> <td>Text for notification, when used programmatically</td> <td>String</td> <td>—</td> <td>—</td> <tr><td><code>position</code></td> <td>Where the notification will show on the screen when used programmatically, optional</td> <td>String</td> <td><code><code>is-top</code></code>, <code><code>is-bottom</code></code>, <code><code>is-top-left</code></code>, <code><code>is-top-right</code></code>, <code><code>is-bottom-left</code></code>, <code><code>is-bottom-right</code></code></td> <td><code>is-top-right</code></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,u,v,w,x,y){return {jsdoc:[{meta:{filename:c,lineno:9,columnno:h,path:d},description:"Type (color)",type:[b],optional:a,name:m,_isSvelteDoc:a,_svelteProps:{type:{names:[b]},optional:a,name:m},kind:e,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",longname:"module:Notification~type",scope:f,memberof:g,___s:a},{meta:{filename:c,lineno:15,columnno:h,path:d},description:"Whether the notification is visible or not",type:[j],defaultvalue:a,name:k,_isSvelteDoc:a,_svelteProps:{type:{names:[j]},defaultvalue:a,name:k},kind:e,longname:"module:Notification~active",scope:f,memberof:g,___s:a,values:i},{meta:{filename:c,lineno:20,columnno:h,path:d},description:"Display an X button that closes the notification",type:[j],defaultvalue:a,name:y,_isSvelteDoc:a,_svelteProps:{type:{names:[j]},defaultvalue:a,name:y},kind:e,longname:"module:Notification~showClose",scope:f,memberof:g,___s:a,values:i},{meta:{filename:c,lineno:25,columnno:h,path:d},description:"Automatically close the notification after \u003Ccode\u003Eduration\u003C\u002Fcode\u003E. Doesn't apply when opening programmatically",type:[j],defaultvalue:n,name:o,_isSvelteDoc:a,_svelteProps:{type:{names:[j]},defaultvalue:n,name:o},kind:e,longname:"module:Notification~autoClose",scope:f,memberof:g,___s:a,values:i},{meta:{filename:c,lineno:30,columnno:h,path:d},description:"Duration notification will remain on screen",type:[p],optional:a,defaultvalue:q,name:r,_isSvelteDoc:a,_svelteProps:{type:{names:[p]},optional:a,defaultvalue:q,name:r},kind:e,longname:"module:Notification~duration",scope:f,memberof:g,___s:a,values:i},{meta:{filename:c,lineno:35,columnno:h,path:d},description:"Show icon on left-side of the notification. If set to \u003Ccode\u003Etrue\u003C\u002Fcode\u003E, icon will be determined from \u003Ccode\u003Etype\u003C\u002Fcode\u003E property.",type:[b,s],optional:a,name:t,_isSvelteDoc:a,_svelteProps:{type:{names:[b,s]},optional:a,name:t},kind:e,longname:"module:Notification~icon",scope:f,memberof:g,___s:a,values:i},{meta:{filename:c,lineno:40,columnno:h,path:d},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:u,_isSvelteDoc:a,_svelteProps:{type:{names:[b]},optional:a,name:u},kind:e,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:Notification~iconPack",scope:f,memberof:g,___s:a},{meta:{filename:c,lineno:46,columnno:h,path:d},description:"Label for the close button, to be read by accessibility screenreaders",type:[b],optional:a,name:v,_isSvelteDoc:a,_svelteProps:{type:{names:[b]},optional:a,name:v},kind:e,longname:"module:Notification~ariaCloseLabel",scope:f,memberof:g,___s:a,values:i},{meta:{filename:c,lineno:51,columnno:h,path:d},description:"Text for notification, when used programmatically",type:[b],name:w,_isSvelteDoc:a,_svelteProps:{type:{names:[b]},name:w},kind:e,longname:"module:Notification~message",scope:f,memberof:g,___s:a,values:i},{meta:{filename:c,lineno:55,columnno:h,path:d},description:"Where the notification will show on the screen when used programmatically",type:[b],optional:a,defaultvalue:x,name:l,_isSvelteDoc:a,_svelteProps:{type:{names:[b]},optional:a,defaultvalue:x,name:l},kind:e,values:"\u003Ccode\u003E\u003Ccode\u003Eis-top\u003C\u002Fcode\u003E\u003C\u002Fcode\u003E, \u003Ccode\u003E\u003Ccode\u003Eis-bottom\u003C\u002Fcode\u003E\u003C\u002Fcode\u003E, \u003Ccode\u003E\u003Ccode\u003Eis-top-left\u003C\u002Fcode\u003E\u003C\u002Fcode\u003E, \u003Ccode\u003E\u003Ccode\u003Eis-top-right\u003C\u002Fcode\u003E\u003C\u002Fcode\u003E, \u003Ccode\u003E\u003Ccode\u003Eis-bottom-left\u003C\u002Fcode\u003E\u003C\u002Fcode\u003E, \u003Ccode\u003E\u003Ccode\u003Eis-bottom-right\u003C\u002Fcode\u003E\u003C\u002Fcode\u003E",longname:"module:Notification~position",scope:f,memberof:g,___s:a}]}}(true,"String","Notification.svelte","src\u002Fcomponents\u002FNotification","prop","inner","module:Notification",2,"","boolean","active","position","type",false,"autoClose","Number",2000,"duration","Boolean","icon","iconPack","ariaCloseLabel","message","is-top-right","showClose"))]};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> |