42 lines
18 KiB
HTML
42 lines
18 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="Dialog | 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>Dialog</h1> <h2 class=subtitle>用户警报，提示和确认对话框</h2></header> <p class="title is-4">Alert and Dialog</p> <p class=content>Use <code>Dialog.alert()</code> and <code>Dialog.confirm()</code> to create these kinds of dialogs. The methods return a promise that is resolved when the user cancels or confirms the alert. If the use closes/cancels the value will be <code>false</code>. If the user clicks the confirm button the value will be <code>true</code>. The first argument can either be an object of options or a string to use as the message.</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-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAIQ6zGYZBk5gAIusoLgKH2ACq4PFKyQarVccwAcmNI1Q4R4WoXlscYC6xGYEDIttgivdMdbDMHYRHhDCV2Y7oXyqg6UbNooXYXMbiki3lmtSuYTJ0AACQwTBjwdBJ4EzB0jHMCcpxIRIBBgd0AAMAE1cA6cwABJgESOAYIAfkXJhICCJkF3MAMF2IDBiHEVYF0kNCvwTbdd33Q9yIgSj3V-M8vVOOBkQgZhiGUATbEKISGT_PEYDIjo3nRBdEHkpxEmYDoQgHIdr14_jhKWTwVmiVA_VosdlAgOBX1tcwQ1U-cjNGbiLHMtA_QXGRNPycTYADfwAEkF3nVBzH3ZhYAAQn8PzTiWX5aLs8JMAwP0gl8_yvCYWj93MyI-OIWBNySpxY1ywhALYASgNArBj3YpY0zADMJA0irLEvYc-jICiuAfABlZQtnMVFAwYmBiM_aravQeq2Ea8CrhayrvzMLkqxrOsHC2ztu0PX5kjS9c5VQIIoxAcwyEQUqIGIVwfGAU9YKPO9T0kIxepHLlDp7dA-QB46ZL-eQ4HCBQEX8W70Hulwnpet6fDgtyvqMABhAa-K4f6u0B4GCdBwpTshjL0Cy2G7oepHXrPVGnJx_i6JUnsuE_b7sfIXHzHdZz2ZjfGjqBsw8xAHhUCeyy4VoehkBALRywV0IViEZdRnCJRUF4WAQDkMQgjgA90CEClCAABkt_WQDTER-xgQpFHQYgIHgDhui4cIgi6cItiEAA9AAWSlCCJG2tWfDoeED82KStikI9wKOeDXKAOgoBRInRLgyAlXQA4ATjJQgg6TlO04zrP0B5GBvbRKAxEDkO7jJcv09Tvgq_QcJl0EAuSSt0l2-jyvM574JYSCZvLdLm3jaCERIhcQOh8pcW0ydtMXbdhAFb7ktdH4Vg3nnotRiEY_4BlOQAAEEUVFE0RWMoERYJ-6BWcJNSyS-UNPuQQwVx_xPjKEUO1azMD3qAIY0BMBCEjh3cwkQbYZh7LAqA8DdCIOjsg4gyDkQ2ztgg326o3iXWYIgO2touy4AwfAuQ5DFTqz4iIcwPAOjYERvPH0lDiG6AXmwjhXDHrIPSjAEQwppDSCAA> <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><button class="button is-primary" type=button> <span> Dialog</span> </button> <button class="button is-info" type=button> <span> Confirm</span> </button> <button class="button is-danger" type=button> <span> Confirm (custom)</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, Dialog, Toast } from 'svelma-pro'
|
|
|
|
function alert() {
|
|
Dialog.alert('Alles ist gut')
|
|
}
|
|
|
|
const thenHandler = result => Toast.create(`You ${result ? 'confirmed' : 'canceled'}`)
|
|
|
|
function confirm(type) {
|
|
switch(type) {
|
|
case 'custom':
|
|
return Dialog.confirm({
|
|
message: 'This is a custom confirmation message',
|
|
title: "I'm a title!",
|
|
type: 'is-danger',
|
|
icon: 'times-circle'
|
|
})
|
|
.then(thenHandler)
|
|
default:
|
|
Dialog.confirm('Shall we dance?')
|
|
.then(thenHandler)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<Button type="is-primary" on:click={() => alert()}>Dialog</Button>
|
|
<Button type="is-info" on:click={() => confirm()}>Confirm</Button>
|
|
<Button type="is-danger" on:click={() => confirm('custom')}>Confirm (custom)</Button></code></pre></figure></div> </div></div> <hr class=is-medium> <p class="title is-4">Prompt</p> <p class=content>Use <code>Dialog.prompt()</code> to programmatically create prompts for user input. By default the dialog will be created with a required text input. You can control the props (attributes) on the prompt with the <code>inputProps</code> prop. <code>prompt()</code> returns a promise that will be resolved with the prompt input value if the user confirms, or null if they cancel/close.</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-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAIQ6zGYZBk5gAIusoLgKH2ACq4PFKyQarVccwAcmNI1Q4R4WoXlscYC6xGYEDI5nX6Lr7twdbgMdbDMHYRHhGPvGYnoZlhW0VQfoD_gA6soBI2cDmLYuAdEE5gAI4dPAzAAPz-DIr7mIQKHnswMSnLGDKEMwmToO6j51g6RjmBOU4kIkAgwO6AAGACaoHgRgcCouByJ4gGC4ACTAIRzCSAuNExjGcSSGYXJVjWdYOOJnbdoevzJBAcBrjWoxBFGIDmGQiDEC4xCuD4wDulePgkXxJmSEYAAKc51lyck9ugfKOQptiFEpKlHO4Wk6XpEAGUZJnEUednPm275oF-i5_gFyiBlRsELn2Cg8F2tnnq0rbmL8nGYFRC7mNIMZWf2VHmBlT4OV2TlCiKPCoAZn5wrQ9DICAWjlu1oQrEIy6jOESioLwsAgHIYhBHAB7oEIFKEAADAtY0gGmIj9jAhSKOgxAQPAHDdFw4RBF04RbEIAB6AAslKEESy1alAUAdDwF1zRSi0UvduCPc9a5PRQCiROiXBkBKujnQAnGShCXV9P08H9HQA-g4ToDyMBHWiUBiBd113GScNPQjfBI4Dy6CODJKLaShO_STyPhMEsJBLjC0w8tU1BCIkQuBd1OUnmK0bWwabbbtCDteTJa6PwrBvBzRajEIsswctAACCKKiiaIrGUCIsNrdArOEmpZMrVHy3IQwrubcsyiKkm1uhHBDNAmBCA9RPmJEy0Zj2rtQO7uie893vEN7yLLatHsneqbyoIqiCrbaXa4AH7tyPHip9RAXNHh02D6RzPrMEnMAiDnedpYXAXe-E0fSI3QA> <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><button class="button is-primary" type=button> <span> Prompt</span> </button> <button class="button is-link" type=button> <span> Date Prompt</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, Dialog, Toast } from 'svelma-pro'
|
|
|
|
function prompt(opts) {
|
|
Dialog.prompt({
|
|
message: "What is your quest?",
|
|
...opts
|
|
})
|
|
.then(prompt => Toast.create(`Your answer was: '${prompt}'`))
|
|
}
|
|
</script>
|
|
|
|
<Button type="is-primary" on:click={() => prompt()}>Prompt</Button>
|
|
<Button type="is-link" on:click={() => prompt({ message: 'Which date?', inputProps: { type: 'date' }})}>Date Prompt</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>title</code></td> <td>Show a header on the dialog with this text, optional</td> <td>String</td> <td>—</td> <td>—</td> <tr><td><code>message</code></td> <td>Text or html message for this dialog</td> <td>String</td> <td>—</td> <td>—</td> <tr><td><code>confirmText</code></td> <td>Text to show on the confirmation button, optional</td> <td>String</td> <td>—</td> <td><code>OK</code></td> <tr><td><code>cancelText</code></td> <td>Text to show on the cancel button, optional</td> <td>String</td> <td>—</td> <td><code>Cancel</code></td> <tr><td><code>focusOn</code></td> <td>Focus on confirm or cancel button when dialog opens, optional</td> <td>String</td> <td><code><code>confirm</code></code>, <code><code>cancel</code></code></td> <td><code>confirm</code></td> <tr><td><code>icon</code></td> <td>Show this icon on left-side of dialog. It will use the color from <code>type</code>, 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> <tr><td><code>hasInput</code></td> <td>Show an input field, optional</td> <td>Boolean</td> <td>—</td> <td><code>false</code></td> <tr><td><code>showCancel</code></td> <td>Show the cancel button. True for <code>confirm()</code>, optional</td> <td>Boolean</td> <td>—</td> <td><code>false</code></td> <tr><td><code>size</code></td> <td>Dialog's size, optional</td> <td>String</td> <td><code>is-small</code>, <code>is-medium</code>, <code>is-large</code></td> <td>—</td> <tr><td><code>type</code></td> <td>Type (color) to use on confirm button and icon, 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><code>is-primary</code></td> <tr><td><code>animation</code></td> <td>Animation to use when showing dialog, optional</td> <td>String, function</td> <td><code>Any transition name that ships with Svelte</code>, <code>or a custom function</code></td> <td><code>scale</code></td> <tr><td><code>animProps</code></td> <td>Props to pass to animation function, optional</td> <td>Object</td> <td>—</td> <td><code>{ start: 1.2 }</code></td> <tr><td><code>inputProps</code></td> <td>Props (attributes) to use to on prompt input element, optional</td> <td>Object</td> <td>—</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){return {jsdoc:[{description:"Show a header on the dialog with this text",type:[b],optional:a,name:"title",values:c},{description:"Text or html message for this dialog",type:[b],name:"message",values:c},{description:"Text to show on the confirmation button",type:[b],optional:a,defaultvalue:"OK",name:"confirmText",values:c},{description:"Text to show on the cancel button",type:[b],optional:a,defaultvalue:"Cancel",name:"cancelText",values:c},{description:"Focus on confirm or cancel button when dialog opens",type:[b],optional:a,defaultvalue:"confirm",name:"focusOn",values:"\u003Ccode\u003E\u003Ccode\u003Econfirm\u003C\u002Fcode\u003E\u003C\u002Fcode\u003E, \u003Ccode\u003E\u003Ccode\u003Ecancel\u003C\u002Fcode\u003E\u003C\u002Fcode\u003E"},{description:"Show this icon on left-side of dialog. It will use the color from \u003Ccode\u003Etype\u003C\u002Fcode\u003E",type:[b],optional:a,name:"icon",values: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:"iconPack",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"},{description:"Show an input field",type:[d],optional:a,defaultvalue:e,name:"hasInput",values:c},{description:"Show the cancel button. True for \u003Ccode\u003Econfirm()\u003C\u002Fcode\u003E",type:[d],optional:a,defaultvalue:e,name:"showCancel",values:c},{description:"Dialog's size",type:[b],optional:a,name:"size",values:"\u003Ccode\u003Eis-small\u003C\u002Fcode\u003E, \u003Ccode\u003Eis-medium\u003C\u002Fcode\u003E, \u003Ccode\u003Eis-large\u003C\u002Fcode\u003E"},{description:"Type (color) to use on confirm button and icon",type:[b],optional:a,defaultvalue:"is-primary",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:"Animation to use when showing dialog",type:[b,"function"],optional:a,defaultvalue:"scale",name:"animation",values:"\u003Ccode\u003EAny transition name that ships with Svelte\u003C\u002Fcode\u003E, \u003Ccode\u003Eor a custom function\u003C\u002Fcode\u003E"},{description:"Props to pass to animation function",type:[f],optional:a,defaultvalue:"{ start: 1.2 }",name:"animProps",values:c},{description:"Props (attributes) to use to on prompt input element",type:[f],optional:a,name:"inputProps",values:c}]}}(true,"String","","Boolean",false,"Object"))]};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> |