UNPKG

sw-ui-controls

Version:
79 lines (68 loc) 4.05 kB
# sw-ui-controls > SW UI controls for rapid development [![NPM](https://img.shields.io/npm/v/sw-ui-controls.svg)](https://www.npmjs.com/package/sw-ui-controls) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) ## Install ```bash npm install --save sw-ui-controls ``` ## Usage ```jsx import React, { Component } from 'react' import { Button, Input } from 'sw-ui-controls' import 'sw-ui-controls/dist/index.css' import 'sw-ui-controls/dist/style.css' const UserForm = () => { const [name, setName] = useState('') const handleSubmit = () => {} return ( <div> <form onSubmit={handleSubmit}> <Input value={name} label='Name' onChange={(e) => setName(e.target.value)} ref={ref} pattern='[a-z]+' required min={4} max={10} minLength={5} maxLength={10} type='password' /> <Button type='submit'>Submit</Button> </form> </div> ) } ``` <div class="markdown-heading"><h2 class="heading-element">Documentation</h2><a id="user-content-documentation" class="anchor" aria-label="Permalink: Documentation" href="#documentation"><svg aria-hidden="true" role="img" class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:middle"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a></div> <ul> <li>Learn how to integrate UI controls <a href="https://sw-ui-controls.web.app/" target="_blank">Complete samples</a> <li> <a href="https://sw-ui-controls.web.app/#/Input" target="_blank">Input</a></li> <li> <a href="https://sw-ui-controls.web.app/#/Button" target="_blank">Button</a></li> <li> <a href="https://sw-ui-controls.web.app/#/CheckBox" target="_blank">CheckBox</a></li> <li> <a href="https://sw-ui-controls.web.app/#/Card" target="_blank">Card</a></li> <li> <a href="https://sw-ui-controls.web.app/#/RadioButton" target="_blank">RadioButton</a></li> <li> <a href="https://sw-ui-controls.web.app/#/Stepper" target="_blank">Stepper</a></li> <li> <a href="https://sw-ui-controls.web.app/#/Tabs" target="_blank">Tabs</a></li> <li> <a href="https://sw-ui-controls.web.app/#/Forms" target="_blank">Forms</a></li> <li> <a href="https://sw-ui-controls.web.app/#/LoginForm" target="_blank">LoginForm</a></li> <li> <a href="https://sw-ui-controls.web.app/#/RegistraionForm" target="_blank">RegistraionForm</a></li> <li> <a href="https://sw-ui-controls.web.app/#/Table" target="_blank">Table</a></li> <li> <a href="https://sw-ui-controls.web.app/#/Caraousel" target="_blank">Caraousel</a></li> <li> <a href="https://sw-ui-controls.web.app/#/Calender" target="_blank">Calender</a></li> <li> <a href="https://sw-ui-controls.web.app/#/ExpansionPanel" target="_blank">ExpansionPanel</a></li> <li> <a href="https://sw-ui-controls.web.app/#/Counter" target="_blank">Counter</a></li> <li> <a href="https://sw-ui-controls.web.app/#/StarRating" target="_blank">StarRating</a></li> <li> <a href="https://sw-ui-controls.web.app/#/LoadingSpinner" target="_blank">LoadingSpinner</a></li> <li> <a href="https://sw-ui-controls.web.app/#/Chips" target="_blank">Chips</a></li> <li> <a href="https://sw-ui-controls.web.app/#/HtmlEditor" target="_blank">Html Editor</a></li> <li> <a href="https://sw-ui-controls.web.app/#/Modal" target="_blank">Modal</a></li> <li> <a href="https://sw-ui-controls.web.app/#/Tree" target="_blank">Tree</a></li> <li> <a href="https://sw-ui-controls.web.app/#/FileUploader" target="_blank">File Uplader</a></li> <ul> <li> </ul> ## License MIT © [ssw1994](https://github.com/ssw1994)