84 lines
26 KiB
HTML
84 lines
26 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="Input | 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>Input</h1> <h2 class=subtitle>用户输入控件</h2></header> <p class=content>Mostly just wraps <code><input></code> and <code><textarea></code> so additional Bulma features can be bound easily. </p> <br> <div class="svelte-150a96u snippet"><form action=https://codesandbox.io/api/v1/sandboxes/define method=POST target=_blank><input value=N4IgZglgNgpgziAXKOBDAdgEwEYHsAeAdAMa7qQDmhAVnGUqKegC4wsMisC2ADlKqyQg4ANxhRBAX0kAaEBCwwiAC2ZcoHJq3aIQAHlXqAfAB10AAnN68mAJ6mLlq1AUBrM06cRMAXhMglVgAndFQoAFpiODh_D09zIPE_YWZbWDhlGBhmWMdPVJ4YZNZ8ZgB6KJiQOM9lRLBk1WYeOEQysoBXdB5XKlIuMuwOqC5UCujB4dHCLgUSaNz48y4YTAhUZLCoRacyh089F3R3PK9ff0CYELDI6IAmHc9EqGS4VPTM7MenAqL_EvKlW-ljqMAa_iaLTanTgMEIYDIzFQAHd4LgViR0WVnjBULC4GURABWQgAZkIAEZxgStvMqjUnCs1ht_Ftvns4npBrg7A4uYYoEYQLJ5IoiLRNIi2MwhBBeLggsxzABBHg8cxgILo8z-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwASW6HSVkg1Wq45gA5MaRqhwjwtYOzFyqzW6w5p52eN3zL9ioF_OY-KhiDBlLgoGmgskACqBRtdnIgcwc9B5kA8HeuVB-mh0O_IEBacuf0IrIQjqM4RKKgvCwCAchiEEcAQPQugUoQAAMSEQSAaYiAAIjAhSKOgxAQPAHDdFw4RBF04RbEIAB6AAslKEESqFalAUAdDw1EIRSyEUkxB6sTw46sRQCiROiXBkBKuhUQAnGShA0bxLFsYJHTCeg4ToDyMCkWiUBiNRdF3GSin8SpanhCOghSSSyGkiZyl8KpInBLCQQGUh8moTBQQiJELjUbZlL3mmOFpnhBEIJ-lklro_CsG8XlFqMQhxfAMpyAAAgiioomiKxlAiLC5XQKzhJqWQpQIaWoUMo6VfFMoirOtbMJFoBDNAmBCMx_HmJEqEZswuAdYe3V8WxfXEH1yKoeh3XkeqbyoIqiDoba3bDR0nVeT6Mq6N5Ihbh02AuMQO3Lcwq0wCIAEQD5R0nRAU3hOEc3SO9QA name=parameters type=hidden> <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><div class="svelte-nhop5 control"><input value="" class="svelte-nhop5 input" placeholder="Text input"> </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 { Input } from 'svelma-pro'
|
|
</script>
|
|
|
|
<Input type="text" placeholder="Text input" /></code></pre></figure></div> </div></div> <br> <p class="title is-4">Types and colors</p> <p class=content>Wrap with <a href=components/field><strong>Field</strong></a> for additional features</p> <div class="svelte-150a96u snippet"><form action=https://codesandbox.io/api/v1/sandboxes/define method=POST target=_blank><input value=N4IgZglgNgpgziAXKOBDAdgEwEYHsAeAdAMa7qQDmhAVnGUqKegC4wsMisC2ADlKqyQg4ANxhRBAX0kAaEBCwwiAC2ZcoHJq3aIQAHlXqAfAB10AAnN68mAJ6mLlq1AUBrM06cRMAXhMglVgAndFQoAFpiODh_D09zIPE_YWZbWDhlGBhmWMdPVJ4YZNZ8ZgB6KJiQOM9lRLBk1WYeOEQysoBXdB5XKlIuMuwOqC5UCujB4dHCLgUSaNz48y4YTAhUZLCoRacyh089F3R3PK9ff0CYELDI6IAmHc9EqGS4VPTM7MenAqL_EvKlW-ljqMAa_iaLTanTgMEIYDIzFQAHd4LgViR0WVnjBULC4GURABWQgAZkIAEZxgStvMqjUnCs1ht_Ftvns4npBrg7A4uYYoEYQLJ5IoiLRNIi2MwhBBeLggsxzABBHg8cxgILo8z-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAMQg4kwMnMAEluh0lZINVquOYAOTGkaocI8LUTy2OWBKvBdTAO1sM0IrAMTgBKEGIynMAAlUEEa3AJzIGTBRtA9zXjwABG8Mjqw667yfP5RdokiXfU4eDxOBkQVTA91hatsgpO5SWAyxJDMLkqxrOsHFQztu3MfhsCSfwADlUBWfwGz0AceCHcxfmKQJ_HMbAFCgkQwg6IpgDXLBCB3GARz4VBiBgZRcCgNMgmSAAVQJG0HHIQHMDl0C5HDxKwlS1I3fDCJAABRB9tkUuj_AgOBwkwDA_SCRiVmiVA_WSAc2JcDd71QaByJ1RxKPk2jbEKZJ3M8xTmKwRAXI4nwuNwddCGCqAR1GfBYHQChmGUZJSQABkY5TVK7dSlz0LS8NQAiXn8ABVL8-MYkz5HMuAOmIYSFkUuy0Ec6ratImBbTY6BytgLzOSomiGoSxiwtY9jOO4zBCE_K4-JHfKyi0jSSsK7Tyt0gAFMCIKCTBRp88alQa0DomO07QpYiK5uihbCGu8DIIEo7IP3GAxDCaLmCCDi1r5Dadq20qdMqkAZNKC9cTOyxfOoy6Ar-ThAnh1BbNQFK2HSzL_DubLcsU9bNrMPMQFA4hXAcuFaHoZAQC0ctmb4oRp1GcIlFIvgSzkMQgjgCAmZAClCGyyWQDkNMRAAERgQpFHQYguwQdmeC4cIgfQcItiEAA9AAWSlCCJGWQC1KAoA6HgjYlikpYpS3rdtng51tigFEidEuDICVdENgBOMlCGN12xPdz2Om9vX0B5GAdbRKAxCN027jJSObbtmO4_CadBCDkkpdJbPo74WOfeCL908l8PLZFoIREiFwjdLykqbTZW01V9WOELktdH4Vg3kbotRiEEf4BlOQXwRRUUTRFYygRFgl7oFZwk1LIp4EGfLaGGc99HmURXQ2tmA10AhmgTAhDdu3zEiS2M2YXBb_Eh-o6fyJn-RS2csH5dDnOYN4F5mCIDlraIcH8Oh30bj6GUugm4iHMNRbALhiCIIgVA36nMIDN3QR0TBR5n4WXwdIKhQA name=parameters type=hidden> <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><div class="svelte-1ccczge codeview"><figure class="svelte-1ccczge highlight is-expanded"> <pre class="svelte-1ccczge hidden"><code class="svelte-1ccczge js">// Bound values
|
|
{
|
|
"name": "Rich Harris",
|
|
"email": "rich@",
|
|
"username": "richie55",
|
|
"password": "secret123"
|
|
}</code></pre> <pre class="svelte-1ccczge hidden"><code>undefined</code></pre></figure></div> <br> <div class="svelte-ilaga4 field"><label class=label for="">Name</label> <div class="svelte-nhop5 control"><input value="Rich Harris" class="svelte-nhop5 input" placeholder="Text input"> </div> </div> <div class="svelte-ilaga4 field is-danger" message="Invalid email"><label class=label for="">Email</label> <div class="svelte-nhop5 control has-icons-right"><input value=rich@ class="svelte-nhop5 input is-danger" maxlength=30> <span class="icon icon is-right svelte-o4tq5q has-text-danger"> <i class="fas svelte-o4tq5q fa-exclamation-circle"></i></span> <small class="svelte-nhop5 counter help is-invisible">5 / 30</small></div> <p class="svelte-ilaga4 help is-danger">Invalid email</div> <div class="svelte-ilaga4 field is-success" message="Username available"><label class=label for="">Username</label> <div class="svelte-nhop5 control has-icons-right"><input value=richie55 class="svelte-nhop5 input is-success"> <span class="icon icon is-right svelte-o4tq5q has-text-success"> <i class="fas svelte-o4tq5q fa-check"></i></span> </div> <p class="svelte-ilaga4 help is-success">Username available</div> <div class="svelte-ilaga4 field"><label class=label for="">Password</label> <div class="svelte-nhop5 control has-icons-right"><input value=secret123 class="svelte-nhop5 input"> <span class="icon icon is-right svelte-o4tq5q has-text-primary is-clickable"> <i class="fas svelte-o4tq5q fa-eye"></i></span> </div> </div> <div class="svelte-ilaga4 field"><label class=label for="">Textarea</label> <div class="svelte-nhop5 control"><textarea class="svelte-nhop5 textarea" maxlength=200></textarea> <small class="svelte-nhop5 counter help is-invisible">0 / 200</small></div> </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 { Field, Input } from 'svelma-pro'
|
|
|
|
let bound = {
|
|
name: 'Rich Harris',
|
|
email: 'rich@',
|
|
username: 'richie55',
|
|
password: 'secret123',
|
|
}
|
|
</script>
|
|
|
|
<Field label="Name">
|
|
<Input type="text" bind:value={bound.name} placeholder="Text input" />
|
|
</Field>
|
|
|
|
<Field label="Email" type="is-danger" message="Invalid email">
|
|
<Input type="email" bind:value={bound.email} maxlength="30" />
|
|
</Field>
|
|
|
|
<Field label="Username" type="is-success" message="Username available">
|
|
<Input type="email" bind:value={bound.username} />
|
|
</Field>
|
|
|
|
<Field label="Password">
|
|
<Input type="password" bind:value={bound.password} passwordReveal={true} />
|
|
</Field>
|
|
|
|
<Field label="Textarea">
|
|
<Input type="textarea" maxlength="200" />
|
|
</Field></code></pre></figure></div> </div></div> <hr class=is-medium> <p class="title is-4">States, plus more styles</p> <div class="svelte-150a96u snippet"><form action=https://codesandbox.io/api/v1/sandboxes/define method=POST target=_blank><input value=N4IgZglgNgpgziAXKOBDAdgEwEYHsAeAdAMa7qQDmhAVnGUqKegC4wsMisC2ADlKqyQg4ANxhRBAX0kAaEBCwwiAC2ZcoHJq3aIQAHlXqAfAB10AAnN68mAJ6mLlq1AUBrM06cRMAXhMglVgAndFQoAFpiODh_D09zIPE_YWZbWDhlGBhmWMdPVJ4YZNZ8ZgB6KJiQOM9lRLBk1WYeOEQysoBXdB5XKlIuMuwOqC5UCujB4dHCLgUSaNz48y4YTAhUZLCoRacyh089F3R3PK9ff0CYELDI6IAmHc9EqGS4VPTM7MenAqL_EvKlW-ljqMAa_iaLTanTgMEIYDIzFQAHd4LgViR0WVnjBULC4GURABWQgAZkIAEZxgStvMqjUnCs1ht_Ftvns4npBrg7A4uYYoEYQLJ5IoiLRNIi2MwhBBeLggsxzABBHg8cxgILo8z-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAMQg4kwMnMAEluh0lZINVquOYAOTGkaocI8LUTsxcqs1usOJed7sNvQDnhD8x8VDEGDKXBQNNBZIAOVw5n42HE_nMHPQXM35_Xr_fmDvqAfL38AAlXAujTTB_G3Xd92IfhomSCA4HCLVQNWJ9D2PU9zyuZJgJQ8CQGfPkym_T89G_X9_2SAcESfX54MQhQaJAIwdUcHdByVdCTzPC8qPIXAnxfN8uw_S0vxEn97ySfwAHVUBCBQKFo2xCno8JkXk9BFIg1jLHYvdOP4DCeOw2TNO0gihOIiTSPIqSAJAAARBC_1gfCWM5KDDKPbisMvfxnLQbA3KfNYgrcwil2srcxLIiSKOkkAABlcFQNZ0CU5jPI4g8jN83j_BStKLLvVL0ooSLX2ij88xAHgj1cVA_RoOh0FLbQZWQEBQhWIRp1GcIlFQXhYBAOQxCCOAIHoXQKUIAAGBaxpANMREcmBCkUdBiC7BAuu6LgkK6cItiEAA9AAWSlCCJZatSgKAOh4c65opRaKTus9Hp4OdHooBRInRLgyAlXQzoATjJQgLs-h6nt-jp_vQcJ0B5GAkLRKAxHOq67jJWHvoRpHwmnQQwZJRbSQJ-G-ERgHglhIIcYW6HlqmoIREiFxzspylarTTa0223aOFJktdH4Vg3jZotRiESX4BlOQAAEEUVFE0RWMoERYDW6BWcJNSyeWBEV5ahhnE2pZlEUV1rZg9tAIZoEwIR7u-8xImWjNmFwZ3zzdr6ns94hPeRZbVrd471TeeTmEQVbbSHP2OhdtmfU64QIA5g8OmCiBiHTuOE5gEQ-uzkRc_z0PwnCSPpAboA name=parameters type=hidden> <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><div class="svelte-ilaga4 field"> <div class="svelte-nhop5 control"><input value="" class="svelte-nhop5 input" placeholder="No label"> </div> </div> <div class="svelte-ilaga4 field"><label class=label for="">Rounded</label> <div class="svelte-nhop5 control"><input value="" class="svelte-nhop5 input is-rounded" placeholder=Rounded> </div> </div> <div class="svelte-ilaga4 field is-info"><label class=label for="">Info</label> <div class="svelte-nhop5 control has-icons-right"><input value="" class="svelte-nhop5 input is-info" placeholder=Info> <span class="icon icon is-right svelte-o4tq5q has-text-info"> <i class="fas svelte-o4tq5q fa-info-circle"></i></span> </div> </div> <div class="svelte-ilaga4 field is-warning"><label class=label for="">Warning</label> <div class="svelte-nhop5 control has-icons-right"><input value="" class="svelte-nhop5 input is-warning" placeholder=Warning> <span class="icon icon is-right svelte-o4tq5q has-text-warning"> <i class="fas svelte-o4tq5q fa-exclamation-triangle"></i></span> </div> </div> <div class="svelte-ilaga4 field"><label class=label for="">Disabled</label> <div class="svelte-nhop5 control"><input value="" class="svelte-nhop5 input" placeholder=Disabled disabled> </div> </div> <div class="svelte-ilaga4 field"><label class=label for="">Loading</label> <div class="svelte-nhop5 control has-icons-right is-loading"><input value="" class="svelte-nhop5 input" placeholder=Loading> </div> </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 { Field, Input } from 'svelma-pro'
|
|
</script>
|
|
|
|
<Field>
|
|
<Input placeholder="No label" />
|
|
</Field>
|
|
|
|
<Field label="Rounded">
|
|
<Input class="is-rounded" placeholder="Rounded" />
|
|
</Field>
|
|
|
|
<Field label="Info" type="is-info">
|
|
<Input placeholder="Info" />
|
|
</Field>
|
|
|
|
<Field label="Warning" type="is-warning">
|
|
<Input placeholder="Warning" />
|
|
</Field>
|
|
|
|
<Field label="Disabled">
|
|
<Input placeholder="Disabled" disabled />
|
|
</Field>
|
|
|
|
<Field label="Loading">
|
|
<Input placeholder="Loading" loading />
|
|
</Field></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 value=N4IgZglgNgpgziAXKOBDAdgEwEYHsAeAdAMa7qQDmhAVnGUqKegC4wsMisC2ADlKqyQg4ANxhRBAX0kAaEBCwwiAC2ZcoHJq3aIQAHlXqAfAB10AAnN68mAJ6mLlq1AUBrM06cRMAXhMglVgAndFQoAFpiODh_D09zIPE_YWZbWDhlGBhmWMdPVJ4YZNZ8ZgB6KJiQOM9lRLBk1WYeOEQysoBXdB5XKlIuMuwOqC5UCujB4dHCLgUSaNz48y4YTAhUZLCoRacyh089F3R3PK9ff0CYELDI6IAmHc9EqGS4VPTM7MenAqL_EvKlW-ljqMAa_iaLTanTgMEIYDIzFQAHd4LgViR0WVnjBULC4GURABWQgAZkIAEZxgStvMqjUnCs1ht_Ftvns4npBrg7A4uYYoEYQLJ5IoiLRNIi2MwhBBeLggsxzABBHg8cxgILo8z-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAMQg4kwMnMAEluh0lZINVquOYAOTGkaocI8LUTsxcqs1usOJed7sNvQDnhD8x8VDEGDKXBQNNBZIAZVGUG2IHMcAgAC8_vI4OE4Lf7-YOeguZu57rv-gGYNuu77oex6nueVzJAAIummb-L-fJlKBwF6BhnIQUqUEnmeF7JAAsqsEChihT6vskEAfky5FcChf4AV2QGWiBrFgThg54fw0GEXB_gADKoL6MCUS-b60eE_BiUxaEYXmIA8EerioH6NB0OgpbaDKyAgKEKxCNOozhEoqC8LAIByGIQRPvQugUoQAAMLnWSAaYiIhhSKOgxBdgg-ndFw4RBF04RbEIAB6AAslKEES7laneHQ8NFTkUq5FJJWeUCpXOeUUAokTolwZASroUUAJxkoQMU5SlPAFR0RXoOE6A8jAoVolAYjRXFdxkg1eVNXwLXFdOgiVSSrmksN-Vja14TBLCQT9S5dXuU-QQiJELjRbNlJKWmPlpn5AUcJNJa6PwrBvFtRajEIt3wDKcgAAIIoqKJoisZQIiwP10Cs4Salkz0CK97lDDOEN3TKIorrWzCBaAQzQJgQjJSN5iRO5GbMLg6PnljuWpbjxC48i7meVj4Xqm8onMIgnm2kORMdBjW0-npwgQDtB4dNgLjENzTMszAIjGfzIiC8LECU-E4S09IqtAA name=parameters type=hidden> <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><div class="svelte-ilaga4 field"> <div class="svelte-nhop5 control"><input value="" class="svelte-nhop5 input is-small" placeholder=Small> </div> </div> <div class="svelte-ilaga4 field"> <div class="svelte-nhop5 control"><input value="" class="svelte-nhop5 input" placeholder=Default> </div> </div> <div class="svelte-ilaga4 field"> <div class="svelte-nhop5 control"><input value="" class="svelte-nhop5 input is-medium" placeholder=Medium> </div> </div> <div class="svelte-ilaga4 field"> <div class="svelte-nhop5 control"><input value="" class="svelte-nhop5 input is-large" placeholder=Large> </div> </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 { Field, Input } from 'svelma-pro'
|
|
</script>
|
|
|
|
<Field>
|
|
<Input placeholder="Small" size="is-small" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<Input placeholder="Default" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<Input placeholder="Medium" size="is-medium" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<Input placeholder="Large" size="is-large" />
|
|
</Field></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>value</code></td> <td>Binding value, optional</td> <td>String, Number</td> <td>—</td> <td>—</td> <tr><td><code>type</code></td> <td>Input type, or <code>textarea</code>, optional</td> <td>String</td> <td><code>Any native type</code>, <code><code>textarea</code></code></td> <td><code>text</code></td> <tr><td><code>size</code></td> <td>Size of input, optional</td> <td>String</td> <td><code>is-small</code>, <code>is-medium</code>, <code>is-large</code></td> <td>—</td> <tr><td><code>expanded</code></td> <td>Makes input full-width when inside a grouped or addon field</td> <td>boolean</td> <td>—</td> <td><code>false</code></td> <tr><td><code>passwordReveal</code></td> <td>Show the password reveal toggle button</td> <td>boolean</td> <td>—</td> <td><code>false</code></td> <tr><td><code>maxlength</code></td> <td>Set input maxlength and show a counter, optional</td> <td>Number</td> <td>—</td> <td>—</td> <tr><td><code>hasCounter</code></td> <td>Show the character counter when <code>maxlength<code> is set, optional</code></code></td> <td>boolean</td> <td>—</td> <td><code>true</code></td> <tr><td><code>loading</code></td> <td>Show loading indicator, optional</td> <td>boolean</td> <td>—</td> <td><code>false</code></td> <tr><td><code>icon</code></td> <td>Show this icon on left side of input, 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>disabled</code></td> <td>Input is disabled, optional</td> <td>boolean</td> <td>—</td> <td><code>false</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){return {jsdoc:[{meta:{filename:e,lineno:7,columnno:c,path:g},description:"Binding value",type:[h,l],optional:a,name:o,_isSvelteDoc:a,_svelteProps:{type:{names:[h,l]},optional:a,name:o},kind:f,longname:"module:Input~value",scope:b,memberof:d,___s:a,values:j},{meta:{filename:e,lineno:12,columnno:c,path:g},description:"Input type, or \u003Ccode\u003Etextarea\u003C\u002Fcode\u003E",type:[h],optional:a,defaultvalue:p,name:x,_isSvelteDoc:a,_svelteProps:{type:{names:[h]},optional:a,defaultvalue:p,name:x},kind:f,values:"\u003Ccode\u003EAny native type\u003C\u002Fcode\u003E, \u003Ccode\u003E\u003Ccode\u003Etextarea\u003C\u002Fcode\u003E\u003C\u002Fcode\u003E",longname:"module:Input~type",scope:b,memberof:d,___s:a},{meta:{filename:e,lineno:18,columnno:c,path:g},description:"Size of input",type:[h],optional:a,name:n,_isSvelteDoc:a,_svelteProps:{type:{names:[h]},optional:a,name:n},kind:f,values:"\u003Ccode\u003Eis-small\u003C\u002Fcode\u003E, \u003Ccode\u003Eis-medium\u003C\u002Fcode\u003E, \u003Ccode\u003Eis-large\u003C\u002Fcode\u003E",longname:"module:Input~size",scope:b,memberof:d,___s:a},{meta:{filename:e,lineno:24,columnno:c,path:g},description:"Makes input full-width when inside a grouped or addon field",type:[i],defaultvalue:k,name:q,_isSvelteDoc:a,_svelteProps:{type:{names:[i]},defaultvalue:k,name:q},kind:f,longname:"module:Input~expanded",scope:b,memberof:d,___s:a,values:j},{meta:{filename:e,lineno:29,columnno:c,path:g},description:"Show the password reveal toggle button",type:[i],defaultvalue:k,name:r,_isSvelteDoc:a,_svelteProps:{type:{names:[i]},defaultvalue:k,name:r},kind:f,longname:"module:Input~passwordReveal",scope:b,memberof:d,___s:a,values:j},{meta:{filename:e,lineno:34,columnno:c,path:g},description:"Set input maxlength and show a counter",type:[l],optional:a,name:s,_isSvelteDoc:a,_svelteProps:{type:{names:[l]},optional:a,name:s},kind:f,longname:"module:Input~maxlength",scope:b,memberof:d,___s:a,values:j},{meta:{filename:e,lineno:39,columnno:c,path:g},description:"Show the character counter when \u003Ccode\u003Emaxlength\u003Ccode\u003E is set",type:[i],optional:a,defaultvalue:a,name:t,_isSvelteDoc:a,_svelteProps:{type:{names:[i]},optional:a,defaultvalue:a,name:t},kind:f,longname:"module:Input~hasCounter",scope:b,memberof:d,___s:a,values:j},{meta:{filename:e,lineno:44,columnno:c,path:g},description:"Show loading indicator",type:[i],optional:a,defaultvalue:k,name:u,_isSvelteDoc:a,_svelteProps:{type:{names:[i]},optional:a,defaultvalue:k,name:u},kind:f,longname:"module:Input~loading",scope:b,memberof:d,___s:a,values:j},{meta:{filename:e,lineno:49,columnno:c,path:g},description:"Show this icon on left side of input",type:[h],optional:a,name:v,_isSvelteDoc:a,_svelteProps:{type:{names:[h]},optional:a,name:v},kind:f,longname:"module:Input~icon",scope:b,memberof:d,___s:a,values:j},{meta:{filename:e,lineno:54,columnno:c,path:g},description:"Fontawesome icon pack to use. By default the \u003Ccode\u003EIcon\u003C\u002Fcode\u003E component uses \u003Ccode\u003Efas\u003C\u002Fcode\u003E",type:[h],optional:a,name:w,_isSvelteDoc:a,_svelteProps:{type:{names:[h]},optional:a,name:w},kind:f,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:Input~iconPack",scope:b,memberof:d,___s:a},{meta:{filename:e,lineno:60,columnno:c,path:g},description:"Input is disabled",type:[i],optional:a,defaultvalue:k,name:m,_isSvelteDoc:a,_svelteProps:{type:{names:[i]},optional:a,defaultvalue:k,name:m},kind:f,longname:"module:Input~disabled",scope:b,memberof:d,___s:a,values:j}]}}(true,"inner",2,"module:Input","Input.svelte","prop","src\u002Fcomponents","String","boolean","",false,"Number","disabled","size","value","text","expanded","passwordReveal","maxlength","hasCounter","loading","icon","iconPack","type"))]};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> |