28 lines
11 KiB
HTML
28 lines
11 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/tip.277ff470.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> <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="Tip | 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>Tip</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-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAFVr5kkGq1XHMAHJjSNUOEeFqB2YuVWa3WHFPO-qtNLkoADeUAvpr-IxcxcOPMgHioYiuVB-mh0dCl7Qy5AgUIrITD0bhJSoXiwEByMRBOAQei6ClCAABmAz8QDTEQABEYEKRR0GICB4A4bouHCIIunCLYhAAPQAFkpQgiTArUoCgDoeBwwCKRAiliNwUjyLHMiKAUSJ0S4MgJV0bCAE4yUIXC6IYngmI6Fj0HCdAeRgNC0SgMQcPwu4ySEsiRL4MTWOHQRuJJEDSVUxiNPE8JglhIJFOAgSwN_IIREiFwcP0yl9zTWC03gxCEFvbSS10fhWDeGyi1GIQAvgGU5AAAQRRUUTRFYygRFh4roFZwk1LIwoECKwKGEdssCmURRnWtmG80AhmgTAhBItTzEiMCM2YXAqqgGrdDq8iGuIBrkTAiDaow9U3lQRVEAg20OhatqarkUbFUfCA7PMHgOmwFxiBsn1mAmmARCWla1o2iBevCcJBukK6gA> <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 style=display:inline-block><button class="button is-link" type=button> <span> Link</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 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 { Tip } from 'svelma-pro'
|
|
</script>
|
|
|
|
<Tip content="你好"></Tip></code></pre></figure></div> </div></div> <hr class=is-medium> <p class="title is-4">自定义设置</p> <p class=content>更多配置请参考<a href=https://atomiks.github.io/tippyjs/ >tippy</a>.</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-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8ZgOOXJxXmYDmAAqtfMkg1Wq45gA5MaRqhwjwtf3LehYEqmJQHS2GVppQH-3o1iJzMR-NFirhcBJa_4jABld6rczMPcH9UArnroz9mQMra4ZEACTbAFkADIB5hBDoYCfU5_wgCg_SCFctwgYhXEfBkyGPZRXwDMAumIZgIDId0FDeDBiBgGMF1OTxrX3OEoFwCgcPQPD0AIuNozMLkqxrOsHGYt40hgfZzEQChKOwMJ3UIS990wngiK9U5SEoyDzAVDA_XjTwERYcJUTA1QAzwKBMBUn5AnCf8MDgBEgi4AMOjVK5iDxGADMkScygAKgAYnMOgOiCAjP2zBQKAAVQAJW_HxMAEVBEGzFw7MwsgyloMgzSE2EADYABYZBgWwACk7gALQADVygAvVAAHUAE4OgASWoXBSu_ABhMrsFJAA1WwAE07g60r6p4bBavQAA5HrbCq2x2o6gAGYrPxEXqquYYgAHEaoKiqiVm4hJtm1AiuVDpiFJAqoGwN9gqgWqoFmuBaq4IllGwCr-sG7AiuPZEIFegAxZF1qgDoCtJT8IAAeQgWqAHZgsCv6ABFgrbZhcoARUC0a_u_Na_oAIXRiqAFEYePBHEe6iB8B4dHXAJ1BAth8mkdQVxathQLcsJoqoGaiHZo6wnStG5raogH6CvUOACuPWq0pG8busm6bOvmorFuW1aNpB7bdv2w7jtO87Luu8WfuIO4qopYguFGqBiFm0aRGwdBrtd9HIagOAICKtaMooWrEZ4dBsA2iBuoq5FcG_N2XbufADqOnharfVbsAgZVA-a_HqGwBORGIBqKHa3KXq4TAoAhil8Dq5qs9qtaCpd9B0eYTA-p4Aq7mUWaofx36E9cava9q-vA6u2A3zbzA3zL13Rq4UvmH7m233xh27eUS3Aphv2A9Tm2M9yzAwHRnxHRcsoWLPDj0D0Dt1VnMDkmAZ-KCckBeKsfGOmYS8LC_GSBAOA4QjjuC_t-NwXJf7_zIHyMoj8HB5hADwVAsFUB-hoHQdApZtAymQCAUIKwhBDlGOEJQqBeCwBAHIMQQQfb0F0BSQgs1WG0JAGmEQiMYCFEUPRCA8AODdC4OEAC6BwhbCEAAPQypSQgRIOFaigMDHgMiWEUjYRSJR-5VGjmBhQBQkR0RcDIBKXQ0iqpkkIBlHRKjrL6I6IYiR6AeQwDEWiKAYgZFyLuGSOxei-BOKMUOQQFiSRsNJAEhxQTnHGSuLCIIPjWE2I4T7IIIhIguBkZEykKC0x8LTAIoRhDQkll0PwVgbw0lFlGEISp8AZRyAAALmSRKiOgKwyhqXaWiFY4RNRZHqQIRpHChjDmGVUmUIpWK1mYAgQhQxoCYCEMo1R5hIgcIzJeJZelVm6Oshs4gGzkQcK4asroo5PI-mYIgLhto_64F2SsuQeFFSkIgBk8wPAOjYFimkm5dyYAiA-V8n5fyYIbPCOc6QsKgA> <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 style=display:inline-block><button class="button is-link" type=button> <span> Link</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 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 { Tip } from 'svelma-pro'
|
|
|
|
let config = {
|
|
content: '<div class="tooltip">Styled tooltip text</div>',
|
|
allowHTML: true,
|
|
trigger: 'click',
|
|
onShow: function(instance) {
|
|
console.log(instance);
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
:global(.tooltip) {
|
|
color: orange;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9yb3V0ZXMvY29tcG9uZW50cy90aXAuc3ZlbHRlIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7RUFDRTtJQUNFLGFBQWE7SUFDYixpQkFBaUI7SUFDakIseUJBQXlCO0VBQzNCIiwiZmlsZSI6InNyYy9yb3V0ZXMvY29tcG9uZW50cy90aXAuc3ZlbHRlIiwic291cmNlc0NvbnRlbnQiOlsiXG4gIDpnbG9iYWwoLnRvb2x0aXApIHtcbiAgICBjb2xvcjogb3JhbmdlO1xuICAgIGZvbnQtd2VpZ2h0OiBib2xkO1xuICAgIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG4gIH1cbiJdfQ== */</style>
|
|
|
|
<Tip config="{config}">
|
|
<Button type="is-link">Link</Button>
|
|
</Tip></code></pre></figure></div> </div></div></div></section></main></div> <script>__SAPPER__={baseUrl:"/svelma-pro",preloaded:[void 0,null,{}]};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> |