Pill

nav

Navigation pill

Example
HTML code 
<UL class="nav-pills">
    <LI class="nav-pills__pill" id="pill" value="pill">
        <A href="ui/element/pills?tabActive=pill">
            <I class="fa fa-app-preferences">
            </I>
            <H4>Pill</H4>
        </A>
    </LI>
    <LI class="nav-pills__pill is-active" id="active" value="active">
        <A href="ui/element/pills?tabActive=active">
            <H4>Active</H4>
        </A>
    </LI>
</UL>
Type molecule
Group nav
Elements icon
Todo
Poista arguments example
sizes, shapes?
select multiple?
open subpills (menu)
More examples

Only icon

Pills with just icon

Colors

Pill color

Edit mode

Show that pills are in edit mode: state=editable
Documentation

States: is-editable Pill: is-active

PHP

Wrapper to use element through PHP

Extends eUiElementTabs
Render html
Create arguments name, value
Methods
Method name Description
addPill(title, id, url) Add new pill
addPills(array) Add multiple pills
isActive(pillId) Return true, if pill is active.
Code example

Basic use

Only Url and pills title texts

$Pills = $this->get('ui', 'pills', 'tyopoyta/uutiset')
  ->addPill('First pill')
  ->addPill('Second pill');

// Sets default parameter: &pillActive=pill_1
if ( $Pills->isOpen('pill_1') ){
    // pill_1 is currently active pill
}

Parameters as arguments

$Pills = $this->get('ui', 'pills', 'tyopoyta/uutiset', 'argName', $argName, 'pill_2')
  ->addPill('First pill')
  ->addPill('Second pill');

Parameters as array

$Pills = $this->get('ui', 'pills', Array(
    'url'        => 'tyopoyta/uutiset',
    'name'       => 'pillActive',
    // 'value'      => $pillActive,  luetaan oletuksena name mukaan..
    // 'default'    => 'pill_1',      oletuksena ensimmäinen
    'pills'       => Array(
        Array(
            'id'    => 'first',
            'title' => 'Title',
            'url'   => 'urlForThisPill'
        ),
        Array(
            'title' => 'Title'
            // 'id'  Oletuksena 'pill_' + index
            // 'url' Uses parent url
        )
    )
));

Javascript

Wrapper to use element through Javascript

Methods
Method name Description
newPill(data) Add new pill and return it.
addPill(data) Add new pill and return pills.
getPill(name) Return the pill element by given name.
getPills() Return all pill elements.
openPill(value) Open pill with given value.
isOpen(name) Return TRUE, if given pill is open
getValues() Get selected valus in list
Code example

Basic example

var Pills  = cms.get('ui', 'pills',{
  pills: [{
    icon: 'app-info',
    title: 'Pill',
    content: 'Pill content'
  }]
});

Pills.addPill({
  icon: 'app-info',
  title: 'Link',
  link: gotoThisURl
});

Pills.addPill({
  icon: 'app-info',
  title: 'Onclick action',
  onclick: function(){
    // Do something
  }
});

All parameters

var Pills  = cms.get('ui', 'pills', {
    value: 'pill_value'
});

Pills.addPill({
  value: 'pill_value',
  open: false, // IS taken from pills.value, if given
  icon: 'app-info',
  title: 'Info',
  tooltip: 'Tooltip text',
  link: '', // Url to goto when clicked
  onclick: function (){} // Run when pill is clicked
  onopen: function(){}   // Run when pill is opened
  onclose: function(){}  // Run when pill is closed
});

Pill item methods

All method of pill item

var Pill  = Pills.getPill('ab_name);

Pill.isOpen(); // Returns TRUE, if currently open.
Pill.open(); // Set open
Pill.close(); // Close

Styles

Elements Css style