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.
HerrHase
4f2b1af43b
|
2 days ago | |
---|---|---|
example | 2 days ago | |
src | 2 days ago | |
.gitignore | 3 years ago | |
.npmrc | 2 days ago | |
LICENSE | 2 days ago | |
README.md | 2 years ago | |
assets-manifest.json | 2 days ago | |
bun.lockb | 2 days ago | |
bunfig.toml | 2 days ago | |
index.js | 2 days ago | |
package-lock.json | 2 days ago | |
package.json | 2 days ago | |
webpack.3.mix.js | 2 days ago | |
webpack.config.js | 2 days ago |
README.md
Tiny Components - Sidebar Form
Created with Riot.js
Handle Form in a Sidebar. Styles for Sidebar based on Plain-UI.
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,
<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".
export default () => {
return {
...sidebar, // adding basic funtion for sidebar
Add Function to handle the submit.
handleSubmit(event) {
event.preventDefault()
this.state.isLoading = true
this.update()
...
You can find a full Example in src/ and a running version under example/.