You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
1.8 KiB
76 lines
1.8 KiB
# Tiny Components - Sidebar Form
|
|
|
|
Created with [Riot.js](https://riot.js.org)
|
|
|
|
Handle Form in a Sidebar. Styles for Sidebar based on [Plain-UI](https://plain-ui.com).
|
|
|
|
## Changelog
|
|
|
|
0.1.0 Init
|
|
1.0.0 Remove "SidebarForm" and build a more basic Solution, that is also easier to adept
|
|
|
|
## Install
|
|
|
|
```
|
|
npm install @tiny-components\sidebar-form --save
|
|
```
|
|
|
|
## How to use
|
|
|
|
Create your own Component and add sidebarHeader & sidebarFooter,
|
|
|
|
```js
|
|
<div class={ getCssClasses() }>
|
|
|
|
<div class="sidebar__inner">
|
|
|
|
<!-- header -->
|
|
<tiny-sidebar-form-header title="{ !state.current.note ? 'New' : 'Edit' }" close={ (event) => { handleClose(event) }}></tiny-sidebar-form-header>
|
|
|
|
<div class="sidebar__form">
|
|
<form class="form" novalidate method="post" onsubmit={ (event) => { handleSubmit(event) } }>
|
|
|
|
<!-- body -->
|
|
<div class="sidebar__body">
|
|
<div class="field-group">
|
|
<label class="field-label">
|
|
Note
|
|
<textarea class="field-text" name="note"></textarea>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- loading -->
|
|
<tiny-loading active={ state.isLoading }></tiny-loading>
|
|
</div>
|
|
|
|
<!-- footer -->
|
|
<tiny-sidebar-form-footer active={ state.isLoading }></tiny-sidebar-form-footer>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
You have to add the Mixin "sidebarFormMixin.js".
|
|
|
|
```js
|
|
export default () => {
|
|
return {
|
|
|
|
...sidebar, // adding basic funtion for sidebar
|
|
```
|
|
|
|
Add Function to handle the submit.
|
|
|
|
```js
|
|
handleSubmit(event) {
|
|
event.preventDefault()
|
|
|
|
this.state.isLoading = true
|
|
this.update()
|
|
...
|
|
```
|
|
|
|
You can find a full Example in src/ and a running version under example/.
|