diff options
Diffstat (limited to 'docs/src/contents/forms.pug')
| -rw-r--r-- | docs/src/contents/forms.pug | 697 |
1 files changed, 0 insertions, 697 deletions
diff --git a/docs/src/contents/forms.pug b/docs/src/contents/forms.pug deleted file mode 100644 index e812aef..0000000 --- a/docs/src/contents/forms.pug +++ /dev/null @@ -1,697 +0,0 @@ -p - | Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. - -.docs-demo.columns - .column.col-6.col-xs-12 - .form-group - label.form-label(for="input-example-1") Name - input#input-example-1.form-input(type="text" placeholder="Name") - .form-group - label.form-label(for="input-example-2") Email - input#input-example-2.form-input(type="email" placeholder="Email") - -pre.code(data-lang='HTML') - code - :highlight(lang="html") - <!-- form input control --> - <div class="form-group"> - <label class="form-label" for="input-example-1">Name</label> - <input class="form-input" type="text" id="input-example-1" placeholder="Name"> - </div> - -.docs-demo.columns - .column.col-6.col-xs-12 - .form-group - label.form-label(for="input-example-3") Message - textarea#input-example-3.form-input(placeholder="Textarea" rows="3") - -pre.code(data-lang='HTML') - code - :highlight(lang="html") - <!-- form textarea control --> - <div class="form-group"> - <label class="form-label" for="input-example-3">Message</label> - <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea> - </div> - -.docs-demo.columns - .column.col-6.col-xs-12 - .form-group - select.form-select - option Choose an option - option Slack - option Skype - option Hipchat - .form-group - select.form-select(multiple="") - option Choose an option - option Slack - option Skype - option Hipchat - -pre.code(data-lang='HTML') - code - :highlight(lang="html") - <!-- form select control --> - <div class="form-group"> - <select class="form-select"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </div> - -.docs-demo.columns - .column.col-6.col-xs-12 - form - .form-group - label.form-label Gender - label.form-radio - input(type="radio" name="gender" checked="") - i.form-icon - | Male - label.form-radio - input(type="radio" name="gender") - i.form-icon - | Female - -pre.code(data-lang='HTML') - code - :highlight(lang="html") - <!-- form radio control --> - <div class="form-group"> - <label class="form-label">Gender</label> - <label class="form-radio"> - <input type="radio" name="gender" checked> - <i class="form-icon"></i> Male - </label> - <label class="form-radio"> - <input type="radio" name="gender"> - <i class="form-icon"></i> Female - </label> - </div> - -.docs-demo.columns - .column.col-6.col-xs-12 - .form-group - label.form-switch - input(type="checkbox") - i.form-icon - | Send me emails with news and tips - .form-group - label.form-switch - input(type="checkbox" checked="") - i.form-icon - | Send me emails with news and tips - -pre.code(data-lang='HTML') - code - :highlight(lang="html") - <!-- form switch control --> - <div class="form-group"> - <label class="form-switch"> - <input type="checkbox"> - <i class="form-icon"></i> Send me emails with news and tips - </label> - </div> - -.docs-demo.columns - .column.col-6.col-xs-12 - .form-group - label.form-checkbox - input(type="checkbox") - i.form-icon - | Remember me - .form-group - label.form-checkbox - input(type="checkbox" checked="") - i.form-icon - | Remember me - -pre.code(data-lang='HTML') - code - :highlight(lang="html") - <!-- form checkbox control --> - <div class="form-group"> - <label class="form-checkbox"> - <input type="checkbox"> - <i class="form-icon"></i> Remember me - </label> - </div> - -.docs-demo.columns - .column - .form-group - label.form-checkbox - input#docs-demo-checkbox(type="checkbox") - i.form-icon - | Select all - -script. - document.getElementById("docs-demo-checkbox").indeterminate = true; - -p - | You can change checkbox to indeterminate state by setting the #[code indeterminate] property of input checkboxes to #[code true]. - -+docs-subheading('forms-inline', 'Inline forms') - -.docs-demo.columns - .column.col-6.col-xs-12 - form - .form-group - label.form-radio.form-inline - input(type="radio" name="gender" checked="") - i.form-icon - | Male - label.form-radio.form-inline - input(type="radio" name="gender") - i.form-icon - | Female - .form-group - label.form-checkbox.form-inline - input(type="checkbox") - i.form-icon - | Checkbox 1 - label.form-checkbox.form-inline - input(type="checkbox" checked="") - i.form-icon - | Checkbox 2 - -p - | You can add the #[code form-inline] class to the form components to make them inline in one row. - -pre.code(data-lang='HTML') - code - :highlight(lang="html") - <div class="form-group"> - <label class="form-radio form-inline"> - <input type="radio" name="gender" checked=""><i class="form-icon"></i> Male - </label> - <label class="form-radio form-inline"> - <input type="radio" name="gender"><i class="form-icon"></i> Female - </label> - </div> - - <div class="form-group"> - <label class="form-checkbox form-inline"> - <input type="checkbox"><i class="form-icon"></i> Checkbox 1 - </label> - <label class="form-checkbox form-inline"> - <input type="checkbox" checked=""><i class="form-icon"></i> Checkbox 2 - </label> - </div> - -+docs-subheading('forms-horizontal', 'Horizontal forms') - -p - | If you want to have a horizontal form, add the #[code form-horizontal] class to the #{'<form>'} container. - | And add the #[code col-<1-12>] and #[code col-xs/sm/lg/xl-<1-12>] class to the child elements for responsive form row layout. - -.docs-demo.columns - .column.col-9.col-sm-12 - form.form-horizontal(action="#forms") - .form-group - .col-3.col-sm-12 - label.form-label(for="input-example-4") Name - .col-9.col-sm-12 - input#input-example-4.form-input(type="text" placeholder="Name") - .form-group - .col-3.col-sm-12 - label.form-label(for="input-example-5") Email - .col-9.col-sm-12 - input#input-example-5.form-input(type="email" placeholder="Email") - .form-group - .col-3.col-sm-12 - label.form-label Gender - .col-9.col-sm-12 - label.form-radio - input(type="radio" name="gender") - i.form-icon - | Male - label.form-radio - input(type="radio" name="gender" checked="") - i.form-icon - | Female - .form-group - .col-3.col-sm-12 - label.form-label Source - .col-9.col-sm-12 - select.form-select(multiple="") - option Slack - option Skype - option Hipchat - .form-group - .col-9.col-sm-12.col-ml-auto - label.form-switch - input(type="checkbox") - i.form-icon - | Send me emails with news and tips - .form-group - .col-3.col-sm-12 - label.form-label(for="input-example-6") Message - .col-9.col-sm-12 - textarea#input-example-6.form-input(placeholder="Textarea" rows="3") - .form-group - .col-9.col-sm-12.col-ml-auto - label.form-checkbox - input(type="checkbox") - i.form-icon - | Remember me - -pre.code(data-lang='HTML') - code - :highlight(lang="html") - <form class="form-horizontal"> - <div class="form-group"> - <div class="col-3 col-sm-12"> - <label class="form-label" for="input-example-1">Name</label> - </div> - <div class="col-9 col-sm-12"> - <input class="form-input" type="text" id="input-example-1" placeholder="Name"> - </div> - </div> - <!-- form structure --> - </form> - -+docs-subheading('forms-sizes', 'Form sizes') - -p - | For smaller or larger input and select controls, you could add the #[code input-sm]/#[code input-lg], #[code select-sm]/#[code select-lg] and #[code label-sm]/#[code label-lg] classes to the elements. - -.docs-demo.columns - .column.col-4.col-xs-12 - label.form-label.label-sm Label - .column.col-4.col-xs-12 - input.form-input.input-sm(type="text" placeholder="Name") - .column.col-4.col-xs-12 - select.form-select.select-sm - option Choose an option - option Slack - option Skype - option Hipchat - .column.col-4.col-xs-12 - label.form-label.label-lg Label - .column.col-4.col-xs-12 - input.form-input.input-lg(type="text" placeholder="Name") - .column.col-4.col-xs-12 - select.form-select.select-lg - option Choose an option - option Slack - option Skype - option Hipchat - -p - | You can add the #[code input-sm]/#[code input-lg] classes to the input-checkbox, input-radio and input-switch to have different sizes. - -+docs-subheading('forms-icons', 'Form icons') - -p - | Spectre Form components has - a(href="#icons") Spectre Icons - | support. -p - | Add a wrapper with the #[code has-icon-left]/#[code has-icon-right] class to #{'<input>'} element. - | And add the icon with #[code form-icon] class next to the #{'<input>'}. - -.docs-demo.columns - .column.col-4.col-xs-12 - .has-icon-left - input.form-input.input-sm(type="text" placeholder="Name") - i.form-icon.icon.icon-arrow-right - .column.col-4.col-xs-12 - .has-icon-left.tooltip(data-tooltip="Lorem ipsum dolor sit amet") - input.form-input(type="text" placeholder="Name") - i.form-icon.icon.icon-arrow-right - .column.col-4.col-xs-12 - .has-icon-left - input.form-input.input-lg(type="text" placeholder="Name") - i.form-icon.icon.icon-arrow-right - .column.col-4.col-xs-12 - .has-icon-right - input.form-input.input-sm(type="text" placeholder="Name") - i.form-icon.icon.icon-check - .column.col-4.col-xs-12 - .has-icon-right - input.form-input(type="text" placeholder="Name") - i.form-icon.icon.icon-check - .column.col-4.col-xs-12 - .has-icon-right - input.form-input.input-lg(type="text" placeholder="Name") - i.form-icon.icon.icon-check - -pre.code(data-lang='HTML') - code - :highlight(lang="html") - <!-- form input with Spectre icon --> - <div class="has-icon-left"> - <input type="text" class="form-input" placeholder="..."> - <i class="form-icon icon icon-check"></i> - </div> - -p - | You can use the #[code loading] class for loading or posting state. - -.docs-demo.columns - .column.col-4.col-xs-12 - .has-icon-right - input.form-input.input-sm(type="text" placeholder="Name") - i.form-icon.loading - .column.col-4.col-xs-12 - .has-icon-right - input.form-input(type="text" placeholder="Name") - i.form-icon.loading - .column.col-4.col-xs-12 - .has-icon-right - input.form-input.input-lg(type="text" placeholder="Name") - i.form-icon.loading - -pre.code(data-lang='HTML') - code - :highlight(lang="html") - <!-- form input with loading icon --> - <div class="has-icon-right"> - <input type="text" class="form-input" placeholder="..."> - <i class="form-icon loading"></i> - </div> - -+docs-subheading('forms-input', 'Input types') - -.docs-demo.columns - .column.col-9.col-sm-12 - form.form-horizontal(action="#forms") - .form-group - .col-3 - label.form-label(for="input-example-8") Email - .col-9 - input#input-example-8.form-input(type="email" placeholder="Email" value="spectre@example.com" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$") - .form-group - .col-3 - label.form-label(for="input-example-9") URL - .col-9 - input#input-example-9.form-input(type="url" placeholder="URL" value="https://github.com/picturepan2/spectre") - .form-group - .col-3 - label.form-label(for="input-example-10") Search - .col-9 - input#input-example-10.form-input(type="search" placeholder="Search") - .form-group - .col-3 - label.form-label(for="input-example-11") Tel - .col-9 - input#input-example-11.form-input(type="tel" placeholder="Tel" value="1-(888)-888-8888") - .form-group - .col-3 - label.form-label(for="input-example-12") Password - .col-9 - input#input-example-12.form-input(type="password" placeholder="Password" value="123456789") - .form-group - .col-3 - label.form-label(for="input-example-13") Number - .col-9 - input#input-example-13.form-input(type="number" placeholder="00" value="66") - .form-group - .col-3 - label.form-label(for="input-example-14") Date - .col-9 - input#input-example-14.form-input(type="date" value="2016-12-31") - .form-group - .col-3 - label.form-label(for="input-example-15") Color - .col-9 - input#input-example-15.form-input(type="color" value="#5755d9") - .form-group - .col-3 - label.form-label(for="input-example-16") File - .col-9 - input#input-example-16.form-input(type="file") - -+docs-subheading('forms-input-groups', 'Input groups') - -.docs-demo.columns - .column.col-6.col-xs-12 - .input-group - input.form-input.input-sm(type="text" placeholder="username") - select.form-select.select-sm - option Slack - option Skype - option Hipchat - .column.col-6.col-xs-12 - .input-group - span.input-group-addon.addon-sm slack.com/ - input.form-input.input-sm(type="text" placeholder="site name") - button.btn.btn-primary.input-group-btn.btn-sm Submit - .column.col-6.col-xs-12 - .input-group - input.form-input(type="text" placeholder="username") - select.form-select - option Slack - option Skype - option Hipchat - .column.col-6.col-xs-12 - .input-group - span.input-group-addon slack.com/ - input.form-input(type="text" placeholder="site name") - button.btn.btn-primary.input-group-btn Submit - .column.col-6.col-xs-12 - .input-group - label.form-switch - input(type="checkbox") - i.form-icon - input.form-input(type="text" placeholder="name") - .column.col-6.col-xs-12 - .input-group - label.form-checkbox - input(type="checkbox") - i.form-icon - input.form-input(type="text" placeholder="name") - .column.col-6.col-xs-12 - .input-group - input.form-input.input-lg(type="text" placeholder="username") - select.form-select.select-lg - option Slack - option Skype - option Hipchat - .column.col-6.col-xs-12 - .input-group - span.input-group-addon.addon-lg slack.com/ - input.form-input.input-lg(type="text" placeholder="site name") - button.btn.btn-primary.input-group-btn.btn-lg Submit - -p - | If you want to attach text and button along with an input, add the #[code input-group] class to the input container. - | And add the #[code input-group-addon] class to the text element and #[code input-group-btn] to the button element. - -pre.code(data-lang='HTML') - code - :highlight(lang="html") - <!-- normal input group --> - <div class="input-group"> - <span class="input-group-addon">...</span> - <input type="text" class="form-input" placeholder="..."> - </div> - - <!-- large input group --> - <div class="input-group"> - <span class="input-group-addon addon-lg">...</span> - <input type="text" class="form-input input-lg" placeholder="..."> - </div> - - <!-- normal input group with button --> - <div class="input-group"> - <span class="input-group-addon">...</span> - <input type="text" class="form-input" placeholder="..."> - <button class="btn btn-primary input-group-btn">Submit</button> - </div> - -+docs-subheading('forms-validation', 'Form validation styles') - -.docs-demo.columns - .column.col-9.col-sm-12 - fieldset - legend Input - .form-group - label.form-label(for="input-example-17") Name - input#input-example-17.form-input.is-success(type="text" placeholder="Name") - p.form-input-hint The name is valid. - .form-group.has-error - label.form-label(for="input-example-18") Password - input#input-example-18.form-input(type="password" placeholder="Password") - p.form-input-hint Passwords must have at least 8 characters. - fieldset - legend Select - .form-group - select.form-select.is-error - option Choose an option - option Slack - option Skype - option Hipchat - p.form-input-hint The option is invalid. - .form-group.has-success - select.form-select - option Choose an option - option Slack - option Skype - option Hipchat - p.form-input-hint The option is available. - fieldset - legend Checkbox, Radio and Switch (Error state only) - .form-group - label.form-checkbox.is-error - input(type="checkbox" checked="") - i.form-icon - | I'm not a robot. - .form-group.has-error - label.form-radio - input(type="radio" name="gender" checked="") - i.form-icon - | Male - label.form-radio - input(type="radio" name="gender") - i.form-icon - | Female - .form-group - label.form-switch.is-error - input(type="checkbox" checked="") - i.form-icon - | Send me emails with news and tips - -p - | To use form validation styles, you can either add #[code is-success] or #[code is-error] class to the controls or add #[code has-success] or #[code has-error] class to parent elements. - | Use the #[code form-input-hint] class to provide form validation success and error messages. - -pre.code(data-lang='HTML') - code - :highlight(lang="html") - <form> - <!-- form validation class: has-success --> - <div class="form-group has-success"> - <label class="form-label" for="input-example-1">Name</label> - <input class="form-input" type="text" id="input-example-1" placeholder="..."> - <p class="form-input-hint">The name is invalid.</p> - </div> - - <!-- form validation class: is-success --> - <div class="form-group"> - <label class="form-label" for="input-example-1">Name</label> - <input class="form-input is-success" type="text" id="input-example-1" placeholder="..."> - <p class="form-input-hint">The name is invalid.</p> - </div> - - <!-- form validation example for checkbox, radio and switch --> - <div class="form-group"> - <label class="form-checkbox is-error"> - <input type="checkbox"> - <i class="form-icon"></i> Remember me - </label> - </div> - </form> - -.docs-demo.columns - .column.col-9.col-sm-12 - .form-group - label.form-label(for="input-example-21") Email - input#input-example-21.form-input(type="text" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,14}$") - .form-group - label.form-label(for="input-example-22") Password - input#input-example-22.form-input(type="password" placeholder="Password" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$") - -p - | You can use input #[code pattern] attribute to validate the value as well. - -pre.code(data-lang='HTML') - code - :highlight(lang="html") - <!-- pattern validation example for Email --> - <input class="form-input" type="email" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,14}$"> - - <!-- pattern validation example for password (8 or more characters that are of at least one number, and one uppercase and lowercase letter) --> - <input class="form-input" type="password" placeholder="Password" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$"> - -+docs-subheading('forms-disabled', 'Form disabled styles') - -p - | Add the #[code disabled] attribute to the element or #{'<fieldset>'} for a disabled form components style. - -.docs-demo.columns - .column.col-6.col-xs-12 - form(action="#forms") - fieldset(disabled="") - .form-group - label.form-label(for="input-example-19") Name - input#input-example-19.form-input(type="text" placeholder="Name") - .form-group - label.form-label Gender - label.form-radio - input(type="radio" name="gender" disabled="") - i.form-icon - | Male - label.form-radio - input(type="radio" name="gender" disabled="") - i.form-icon - | Female - .form-group - select.form-select(disabled="") - option Choose an option - option Slack - option Skype - option Hipchat - .form-group - label.form-switch - input(type="checkbox" disabled="") - i.form-icon - | Send me emails with news and tips - .form-group - label.form-label(for="input-example-20") Message - textarea#input-example-20.form-input(placeholder="Textarea" rows="3" disabled="") - .form-group - label.form-checkbox - input(type="checkbox" disabled="") - i.form-icon - | Remember me - -pre.code(data-lang='HTML') - code - :highlight(lang="html") - <form action="#forms"> - <fieldset disabled> - <div class="form-group"> - <label class="form-label" for="input-example-19">Name</label> - <input class="form-input" type="text" id="input-example-19" placeholder="Name"> - </div> - <div class="form-group"> - <label class="form-label">Gender</label> - <label class="form-radio"> - <input type="radio" name="gender" disabled> - <i class="form-icon"></i> Male - </label> - <label class="form-radio"> - <input type="radio" name="gender" disabled> - <i class="form-icon"></i> Female - </label> - </div> - <div class="form-group"> - <select class="form-select" disabled> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </div> - <div class="form-group"> - <label class="form-switch"> - <input type="checkbox" disabled> - <i class="form-icon"></i> Send me emails with news and tips - </label> - </div> - <div class="form-group"> - <label class="form-label" for="input-example-20">Message</label> - <textarea class="form-input" id="input-example-20" placeholder="Textarea" rows="3" disabled></textarea> - </div> - <div class="form-group"> - <label class="form-checkbox"> - <input type="checkbox" disabled> - <i class="form-icon"></i> Remember me - </label> - </div> - </fieldset>
\ No newline at end of file |