d-comp-palette

Pack of DerbyJS components based on Twitter Bootstrap, jQuery, Select2 etc.

These components are based on the several well-known JS libraries.

For quick start look at example d-comp-palette-example

Documentation

Twitter Bootstrap markup is used in all components. Each component has a predefined set of attributes. Many of them are used in almost all components.

Common attributes

• hr - if exists the Bootstrap Horizontal form markup will be used
• label - the content of a label;
• id - specifies the value of HTML id attribute;
• name - specifies the value of HTML name attribute;
• idname - specifies the values of both id and name HTML attributes;
• placeholder - just placeholder
• colLg / col-lg - the width of the component
• offsetLg / offset-lg - the left label offset for horizontal forms;
• lang - the reference to localization resources;
• value - the value;
• content - the Derby specific attribute; it's a content between open and close component's tags;
• len - the value of maxlength HTML attribute;
• readonly - if exists the component will be disabled;

Breadcrumbs attributes

• items - the collection of breadcrumbs' items;

item properties:

{
  label or content - is a link text;
  url - is a link Url;
} 

Examples:

 <breadcrumbs>
    <item label='Google' url='http://google.com'><item/> <!-- `label` attr. is used -->
    <item url='http://myhome.com'>Home Page<item/>       <!-- standard Derby `content` attribute is used -->
 <breadcrumbs/>

 <breadcrumbs items='{{your model path}}' />

d-pikaday attributes

• format - the date format, default is 'YYYY-MM-DD';
• mask - the mask input format, default is 'yyyy-mm-dd';
• minDate, maxDate, firstDay, yearRangeDate - see Pikaday Configuration

d-rating attributes

The star images must be in the your public dir + /rating/images/

• max - the maximium score value;

d-select2 attributes

• value - could be: an object or a primitive type, an array of the objects or the array of the primitive types
• obj - if 'obj' attribute exists it means the target propety is a object;
• key - if 'key' attribute exists it means the items is a list of objects;
• text - the name of the displayed property;
• single - one item could be choosed only;
• fixed - don't allow to add new items;
• items - the array of the pre-defined items;

t-area attributes

• rows - the number of rows (default is 3);

t-checkbox attributes

• table - the special attribute to centralize the checkbox in the table's cell;

t-combo attributes

to be continued...