GithubHelp home page GithubHelp logo

aurelia-widgets's Introduction

Aurelia-Widgets

A widget library for the Aurelia Javascript Framework. It is bootstrap-oriented, in that these widgets have the layout and class necessary for bootstrap styling.

Widgets Available:

  • Autocomplete
  • Checkbox
  • Combo Box
  • Currency Input
  • Radio Button
  • Text Display
  • Text Input
  • Toggle Button
  • Date Picker
  • DateTime Picker

All the input widgets (except the Toggle Button) have a grab-focus attribute which, when set to true, will focus the main input of the widget.

Autocomplete

Should have a lookup bound to an object that has a search(inputText) function. This will return a Promise that resolves to an object of the form:

{
    suggestions: [ { value: "Text for the input", data: { } }, { value: "...", data: {...} }, ... ]
}

Radio Button

Each radio button must have:

  • a non-empty, unique (within the group) label
  • a group-name

Optionally, it can also have a function bound to onselecting, e.g. <radio-button onselecting.call="someFunction()"></radio-button> This should return true to allow the selection to go ahead, or false to leave the button group in the previously selected state. By default, this action is always allowed.

Checkbox

Can optionally have a function bound to ontoggle, e.g. <checkbox ontoggle.call="someFunction()"></checkbox> which is called whenever the widget is checked or unchecked.

Currency Input

This will allow all characters to be entered (to more easily not penalise power users using Home, Tab, etc) but if the input can't be parsed as a number, then the value will be reset and the value will be left as NaN

Text Display

This is intended to be a limited text area, which will then add a tooltip to show the full text. It works best when white-space is set to nowrap on the .text-display class.

Toggle Button

This is a switch, with a checkbox underneath (hence "checked" as an attribute). Bindable attributes are:

  • on-text : When the switch is "checked" this text will be displayed
  • off-text : When the switch is "unchecked" this text will be displayed
  • width : the width of the toggle in pixels (should be an integer), default is null which should be 'auto' but doesn't work as well as it should
  • checked : whether the switch is "checked"
  • disabled : whether the toggle is able to be operated

Text Widget

Binadable attributes are:

  • multiline : Whether to use an <input type="text"> or a <textarea>
  • text-value : The text value for the widget
  • disabled : whether the control is disabled
  • readonly : The multi-line expanding will still function (unlike disabled) but the text is not editable

The multi-line Text input animates expanding and collapsing from the original size (as calculated from style properties) to the "optimal" size (meaning all text will be displayed without scroll bars). It also automatically exapands to fit the text added to it as it happens.

Known Issues:

  • The Checkboxes don't have their text vertically centered in Firefox. This is because flex layout is not supported in buttons in Firefox

aurelia-widgets's People

Contributors

codelabnz avatar simonfox avatar michaelmalonenz avatar wildhart avatar

Watchers

James Cloos avatar  avatar

Forkers

wildhart

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.