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.
 
 
 
 
 
Go to file
HerrHase 5b9d7246e2
bugfix for header, adding store
8 months ago
example change handling with store 10 months ago
src bugfix for header, adding store 8 months ago
.gitignore Initial commit 3 years ago
.npmrc change handling with store 10 months ago
LICENSE change handling with store 10 months ago
README.md add typo 3 years ago
assets-manifest.json change handling with store 10 months ago
bun.lockb change handling with store 10 months ago
bunfig.toml change handling with store 10 months ago
index.js adding small bugfix for import 10 months ago
package-lock.json change handling with store 10 months ago
package.json bugfix for header, adding store 8 months ago
webpack.config.js change handling with store 10 months 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/.