Commit b8f182be authored by Laura Schlimmer's avatar Laura Schlimmer
Browse files

Merge commit '6afc4d92' 

Conflicts:
	3rdparty/libfnord/fnord-webcomponents/components/fn-tabbar.html
	3rdparty/libfnord/fnord-webcomponents/components/fn-timeinput.html
	3rdparty/libfnord/fnord-webcomponents/demo.html
parents 9f093a87 6afc4d92

fnord-webcomponents/TODO

+20 −17
Original line number Diff line number Diff line
@@ -5,47 +5,51 @@ fn-icon 
fn-loader

fn-table



-- hiermit anfangen

--needs review

fn-divier || semantic divider -> <fn-divider>, <div class="fn-divider">

fn-button semantic button -> <fn-button>, <button class="fn-button">

fn-breadcrum || semantic breadcrumb -> <fn-breadcrumb>, <ul class="fn-breadcrumb">

fn-message || semantic message -> <fn-message>, <div class="fn-message">

fn-checkbox || semantic checkbox -> <fn-checkbox>, <input type="checkbox" class="fn-checkbox">

fn-dropdown || semantic dropdown -> <fn-dropdown>, <select class="fn-dropdown">

fn-modal || semantic modal -> <fn-modal>, <div class="fn-modal">

fn-search || semantic search -> <fn-search>, <input type="search" class="fn-search">

fn-daterangepicker

fn-search

fn-splitpane

fn-form || input/form -> komplex, muessen wir drueber redeen

fn-progress

fn-tabs

fn-tooltip || semantic popup -> Fnord.tooltip

fn-breadcrum || semantic breadcrumb -> <fn-breadcrumb>, <ul class="fn-breadcrumb">

fn-wizard || semantic step

message box (http://dev.sencha.com/extjs/5.0.0/examples/kitchensink/#message-box)

fn-accordion

fn-menu || menu -> komplex, muessen wir drueber reden





-- needs review/polish

-- needs polish

fn-datepicker

fn-daterangepicker

fn-search

fn-timeinput

fn-appbar (remove?))

fn-splitpane

fn-pagination http://getbootstrap.com/components/#pagination (fix circled tooltip prev)





 

-- die werden komplex

fn-form || input/form -> komplex, muessen wir drueber redeen

fn-label || label -> <fn-label>, <span class="fn-label">

fn-menu || menu -> komplex, muessen wir drueber reden

fn-toolbar

fn-tabbar

 

-- nice to have

fn-progress

fn-rating

fn-wizard || semantic step

fn-reveal

fn-card

fn-comment

fn-feed

fn-accordion

 

-- machen wir selbst

fn-tabs

fn-video

fn-pager

fn-pagination





---

flyoout menu from toolbar  (like osx top toolbar)
@@ -67,7 +71,6 @@ switch 
removable tag (https://openui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.Tokenizer/preview)

panel (header + body like extjs)

resizable table

message box (http://dev.sencha.com/extjs/5.0.0/examples/kitchensink/#message-box)

"notification" (like growl)

vertical toolbar

multi input w/ autocomplete (like gmail TO field input)

fnord-webcomponents/components/fn-button.html

+0 −12
Original line number Diff line number Diff line
@@ -8,18 +8,6 @@ 
  copy of the GNU General Public License along with this program. If not, see

  <http://www.gnu.org/licenses/>.

-->

<style type="text/css">

  fn-button, fn-button * {

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    cursor: pointer;

  }

</style>



<script type="text/javascript">

  var ButtonComponent = function() {

    this.createdCallback = function() {

fnord-webcomponents/components/fn-datepicker.html

+139 −66
Original line number Diff line number Diff line
@@ -8,39 +8,59 @@ 
  copy of the GNU General Public License along with this program. If not, see

  <http://www.gnu.org/licenses/>.

-->

<style type='text/css'>

  fn-datepicker {

    display: block;

  }



  fn-datepicker:hover {

    cursor: pointer;

  }

</style>

<template id='fn-datepicker-base-tpl'>

  <style>

    input {

      height: 28px;

      line-height: 28px;

      padding: 0 8px;

      font-size: 12px;

      border-radius: 4px;

      border: 1px solid #b3c2d0;

      color: #545758;

      width: 200px;

  <style type='text/css'>

    fn-input {

      width: 218px;

      display:block;

    }



    input:hover {

    fn-input:hover {

      cursor: pointer;

    }



    #datepicker_widget[data-active='active'] {

      position:absolute;

      z-index: 999;

      display:inline-block;

      background: #fff;

      border: 1px solid rgb(226, 232, 237);

      border-radius: 1px;

      width: 216px;

      padding-top: 9px;

      outline: 0;

      font-family: 'Helvetica Neue',Arial,Helvetica,sans-serif;

      font-size: 14px;

      color: rgba(0,0,0,.8);

      z-index: 100;

      cursor: pointer;

      box-shadow: 0 1px 4px 0 rgba(0,0,0,.15);

      border: 1px solid rgba(39,41,43,.15);

      border-radius: 0 0 .2857rem .2857rem;

      -webkit-transition: opacity .2s ease;

      transition: opacity .2s ease;

      z-index: 11;

      will-change: transform,opacity;

    }



    fn-input-time {

      margin-left: 41px;

      margin-top: 7px;

      display:block;

    }



    table {

      margin: 9px;

      margin: 7px 9px 9px;

      width: 200px;

      border: 1px solid rgb(226, 232, 237);

      border-radius: 3px;

      border-collapse: collapse;

      font-size: 1rem;

    }



    table th {
@@ -57,7 +77,7 @@ 
      height: 20px;

      line-height: 20px;

      text-align:center;

      color: rgb(115, 134, 148);

      color: #60707f;

    }



    table td.selectable{
@@ -69,15 +89,15 @@ 
    }



    table td.highlight {

      background-color: rgb(226, 232, 237);

      background-color: #f6f8fa;

    }



    table td.highlight_border {

       border: 1px solid #444;

      border: 1px solid rgb(226, 232, 237);

    }



    .fa {

      color: #444;

      color:  #60707f;

      padding-left: 5px;

      padding-right: 5px;

    }
@@ -87,7 +107,8 @@ 
    }



  </style>

  <input type='text' readonly/>

  <fn-input data-readonly='true' data-style='small'>

  </fn-input>

  <div id="datepicker_widget">

  </div>

</template>
@@ -99,31 +120,26 @@ 
      var base = this;

      shadow.appendChild(tpl);



      var input = this.shadowRoot.querySelector("input");

      var input = this.shadowRoot.querySelector("fn-input");

      var widget = this.shadowRoot.querySelector("#datepicker_widget");



      var select_time_by = this.getAttribute("time-select");



      if (this.getAttribute('data-timestamp') != null) {

        input.value = this.createDateTimeString(this.getAttribute('data-timestamp'));

      }

      if (this.hasAttribute('data-timestamp')) {this.setTimeValues();}



      this.attributeChangedCallback();



      input.addEventListener('click', function() {

                //timeInput is optional and set bu time-select attribute

        if (!widget.hasAttribute('data-active')) {

          base.setAttribute('active', 'active');



          //timeInput is optional and set bu time-select attribute

          if (select_time_by != null) {

          //timeInput is optional and set by data-time-select attribute

          if (base.hasAttribute('data-time-select')) {

            base.renderTimeInput();

          }



          var selected_timestamp = new Date(

            parseInt(base.getAttribute('data-timestamp'), 10));

          var selected_year = selected_timestamp.getFullYear();

          var selected_month = selected_timestamp.getMonth();

          var selected_date = base.getSelectedDate();

          var selected_year = selected_date.getFullYear();

          var selected_month = selected_date.getMonth();



          base.renderCalendar(selected_year, selected_month);

        }
@@ -141,25 +157,38 @@ 


    this.attributeChangedCallback = function(attr, old_val, new_val) {

      if (attr == "data-timestamp") {

        this.shadowRoot.querySelector("input").value = 

          this.createDateTimeString(parseInt(new_val), 10);

        this.setTimeValues();

      }

    };



    this.setTimeValues = function() {

      var value = parseInt(this.getAttribute('data-timestamp'), 10);

      var str = this.createDateTimeString(value);

      this.shadowRoot.querySelector("fn-input").setAttribute(

        'data-value', str);

    }



    this.getSelectedDate = function() {

      if (this.hasAttribute('data-timestamp')) {

        return (new Date(parseInt(this.getAttribute('data-timestamp'), 10)));

      } else {

        return (new Date());

      }

    }



    this.renderTimeInput = function() {

      var widget = this.shadowRoot.querySelector("#datepicker_widget");

      var time_input = document.createElement("fn-timeinput");

      var time_input = document.createElement("fn-input-time");



      var selected_timestamp = new Date(

        parseInt(this.getAttribute('data-timestamp'), 10));

      var selected_date = this.getSelectedDate();



      time_input.setHoursValue(selected_timestamp.getHours());

      time_input.setMinutesValue(selected_timestamp.getMinutes());

      time_input.setAttribute('data-hours-value', selected_date.getHours());

      time_input.setAttribute('data-minutes-value', selected_date.getMinutes());

      widget.appendChild(time_input);



      var base = this;



      time_input.addEventListener('fn-timeinput-submit', function() {

      time_input.addEventListener('fn-input-time-submit', function() {

        base.onSelect();

      }, false);

    }
@@ -199,6 +228,20 @@ 
    };



    this.renderMonthHeader = function(year, month) {

      var human_months = [

      "January",

      "February",

      "March",

      "April",

      "May",

      "June",

      "July",

      "August",

      "September",

      "October",

      "November",

      "December"];



      var base = this;

      var table_elem = this.shadowRoot.querySelector("table");
@@ -209,7 +252,7 @@ 
      var month_title = document.createElement("b");

      month_title.className = "datepicker_title";

      month_title.innerHTML =

        FnordMetric.util.getHumanMonth(month, "long") + " " + year;

        human_months[month] + " " + year;



      /* tooltip to select previous month */

      var prev_selector = document.createElement("i");
@@ -287,23 +330,33 @@ 
    };



    this.isSelectable = function(date, month, year) {

      if (!(this.hasAttribute('data-selectable'))) {return true;}

      var now = new Date();

      var cur_year = now.getFullYear();

      var cur_month = now.getMonth();

      var cur_date = now.getDate();

      var period = this.getAttribute('data-selectable');



      if (period == "past") {

        if (month == cur_month) {

          return date <= cur_date;

        }

        return (year <= cur_year && month < cur_month);

      }



      if (period == "future") {

        if (month == cur_month) {

          return date >= cur_date;

        }

        return (year >= cur_year && month > cur_month);

      }

    };



    this.cellName = function(date, month, year) {

      var selected_timestamp = new Date(

        parseInt(this.getAttribute('data-timestamp'), 10));

      var selected_year = selected_timestamp.getFullYear();

      var selected_month = selected_timestamp.getMonth();

      var selected_date = selected_timestamp.getDate();

      var selected_date = this.getSelectedDate();

      var selected_year = selected_date.getFullYear();

      var selected_month = selected_date.getMonth();

      var selected_date = selected_date.getDate();



      var now = new Date();

      var cur_year = now.getFullYear();
@@ -331,41 +384,61 @@ 
      }, false);

    };



    this.appendLeadingZero = function(num) {

      if (typeof num == 'string') {

        return (num.length > 1)? num : "0" + num;

      }

      return (num > 9)? num : "0" + num;

    }



    this.createDateTimeString = function(timestamp) {

      var timestamp = new Date(timestamp);

      var month = timestamp.getMonth();

      var string =

          FnordMetric.util.appendLeadingZero(month + 1) +

          this.appendLeadingZero(month + 1) +

          "/" +

          FnordMetric.util.appendLeadingZero(timestamp.getDate()) + 

          this.appendLeadingZero(timestamp.getDate()) + 

          "/" + timestamp.getFullYear() + "  " + 

          FnordMetric.util.appendLeadingZero(timestamp.getHours()) +

          this.appendLeadingZero(timestamp.getHours()) +

          ":" + 

          FnordMetric.util.appendLeadingZero(timestamp.getMinutes());

          this.appendLeadingZero(timestamp.getMinutes());



      return string;

    };



    this.onSelect = function(date, month, year) {

      var input = this.shadowRoot.querySelector("input");

      var time_values = this.shadowRoot.querySelector("fn-timeinput").getValues();



      var selected_timestamp = new Date(

        parseInt(this.getAttribute('data-timestamp'), 10));

      var input = this.shadowRoot.querySelector("fn-input");

      var selected_date = this.getSelectedDate();



      var hours = "00";

      var minutes = "01";

      if (this.hasAttribute('data-time-select')) {

        var time_input = this.shadowRoot.querySelector("fn-input-time");

        hours = time_input.getAttribute('data-hours-value');

        minutes = time_input.getAttribute('data-minutes-value');

      }



      /* fallback for time inputs */

      var date = (date == undefined) ? 

        selected_timestamp.getDate() : date;

        selected_date.getDate() : date;

      var month = (month == undefined)?

        selected_timestamp.getMonth() : month;

        selected_date.getMonth() : month;

      var year = (year == undefined) ?

        selected_timestamp.getFullYear() : year;



      var hours = time_values.hours;

      var minutes = time_values.minutes;

        selected_date.getFullYear() : year;



      var ts = new Date(year, month, date, hours, minutes).getTime();

      if (ts <= Date.now() ) {



      var fireEvent;

      var selectable = this.getAttribute('data-selectable');

      if (selectable == "past") {

        fireEvent = (ts <= Date.now());

      } else if (selectable == 'future') {

        fireEvent = (ts >= Date.now());

      } else {

        fireEvent = true;

      }



      if (fireEvent) {

        this.setAttribute('data-timestamp', ts);

        this.resetDatepicker();

        this.fireSelectDateEvent();

fnord-webcomponents/components/fn-daterangepicker.html

+106 −21
Original line number Diff line number Diff line
@@ -10,26 +10,40 @@ 
  only if attribute future-selectable is set future dates are selectable

  same holds true for past-selectable

-->

<style type='text/css'>

  fn-daterangepicker {

    display:block;

  }

</style>

<template id='fn-daterangepicker-base-tpl'>

  <style type='text/css'>

    .fa-chevron-left {

    .wrapper {

      font-family: 'Helvetica Neue',Arial,Helvetica,sans-serif;

      font-size: 14px;

      height: 24px;

    }



    .fa {

      color: rgb(84, 87, 88);

      font: normal normal normal 14px/1 FontAwesome;

      font-size: inherit;

      text-rendering: auto;

      -webkit-font-smoothing: antialiased;

      -moz-osx-font-smoothing: grayscale;

      height: 22px;

      line-height: 22px;

    }



    .fa-chevron-left {

      border-right: 1px solid #ececec;

      margin-right: 5px;

      padding-right: 15px;

      height: 22px;

      line-height: 24px;

      font-size: 90%;

    }



    .fa-chevron-right {

      color: rgb(84, 87, 88);

      border-left: 1px solid #ececec;

      margin-left: 5px;

      padding-left: 15px;

      height: 22px;

      line-height: 24px;

      font-size: 90%;

    }



    .fa:hover {
@@ -38,16 +52,22 @@ 
    }



    span {

      font-size: inherit;

      color: rgba(0,0,0,.8);

      padding: 0 10px;

      font-weight: 500;

      line-height: 24px;

      display: inline-block;

    }







  </style>

  <div class="wrapper">

    <i class='fa fa-chevron-left'></i>

    <span></span>

    <i class='fa fa-chevron-right'></i>

  </div>

</template>



<script type="text/javascript">
@@ -59,11 +79,7 @@ 


      var base = this;



      if (this.getAttribute('data-endtime') != null) {

        this.updateDateTitle(this.getAttribute('data-endtime'));

      }



      this.attributeChangedCallback();

      this.init();



      this.shadowRoot.querySelector(".fa-chevron-left").addEventListener(

        'click',
@@ -81,30 +97,84 @@ 


    };



    this.init = function() {

      var timestamp = this.getAttribute('data-endtime');

      var date_range = this.getAttribute('data-daterange');



      if (timestamp == null) {

        this.setAttribute('data-endtime', Date.now());

      }



      if (date_range == null) {

        //1 hour

        this.setAttribute('data-daterange', 3600000);

      }

    };





    this.attributeChangedCallback = function(attr, old_val, new_val) {

      if (attr == "data-endtime" || attr == "data-daterange") {

        this.updateDateTitle();

      }

    };



    this.getDateTimeString = function(timestamp) {

      var timestamp = timestamp == undefined?

        new Date() : new Date(parseInt(timestamp, 10));



      var month = timestamp.getMonth();

      month = this.appendLeadingZero(month +1);

      var day = this.appendLeadingZero(timestamp.getDate());

      var hours = this.appendLeadingZero(timestamp.getHours());

      var minutes = this.appendLeadingZero(timestamp.getMinutes());

      return (

        month + "/" + day + "/" +

        timestamp.getFullYear() + "  " + hours +

        ":" + minutes);

    }



    this.appendLeadingZero = function(num) {

      var num = num;

      if (typeof num == 'string') {

        return (num.length > 1)? num : "0" + num;

      }

      return (num > 9)? num : "0" + num;

    }





    this.updateDateTitle = function() {

      var timestamp = parseInt(this.getAttribute("data-endtime"), 10);

      var timestamp = parseInt(this.getAttribute('data-endtime'), 10);

      var date_range = parseInt(this.getAttribute('data-daterange'), 10);



      var start_timestamp = timestamp - date_range;



      var title = this.shadowRoot.querySelector("span");

      title.innerHTML = 

        FnordMetric.util.getDateTimeString(start_timestamp)

        this.getDateTimeString(start_timestamp)

        + " &mdash; " +

        FnordMetric.util.getDateTimeString(timestamp);

        this.getDateTimeString(timestamp);

    };



    this.selectPreviousDateRange = function() {

      var date_range = parseInt(this.getAttribute('data-daterange'), 10);

      var end_time = parseInt(this.getAttribute('data-endtime'), 10);

      end_time = end_time - date_range;

      if (this.hasAttribute('past-selectable') || end_time >= Date.now()) {



      var fireEvent = false;

      var selectable = this.getAttribute('data-selectable');

      if (selectable == "past") {

        if (end_time <= Date.now()) {

          fireEvent = true;

        }

      } else if (selectable == "future") {

        if (end_time >= Date.now()) {

          fireEvent = true;

        }

      } else {

        fireEvent = true;

      }



      if (fireEvent) {

        this.setAttribute('data-endtime', end_time);

        this.fireSelectPreviousDateRangeEvent();

      }
@@ -114,7 +184,22 @@ 
      var date_range = parseInt(this.getAttribute('data-daterange'), 10);

      var end_time = parseInt(this.getAttribute('data-endtime'), 10);

      end_time = end_time + date_range;

      if (this.hasAttribute('future-selectable') || end_time <= Date.now()) {



      var fireEvent = false;

      var selectable = this.getAttribute('data-selectable');

      if (selectable == "past") {

        if (end_time <= Date.now()) {

          fireEvent = true;

        }

      } else if (selectable == "future") {

        if (end_time >= Date.now()) {

          fireEvent = true;

        }

      } else {

        fireEvent = true;

      }



      if (fireEvent) {

        this.setAttribute('data-endtime', end_time);

        this.fireSelectNextDateRangeEvent();

      }

fnord-webcomponents/components/fn-dropdown-demo.html

+60 −25
Original line number Diff line number Diff line
@@ -10,7 +10,8 @@ 
-->

<template id="fn-dropdown-demo-base-tpl">

  <section>

    <h1><i>Example 1 &raquo;</i> Dropdown</h1>

    <h1>Styles</h1>

    <h3><i>Example 1 &raquo;</i> Basic</h3>

    <fn-dropdown style="margin-bottom: 30px;">

      <fn-dropdown-header >Rollup</fn-dropdown-header>

      <fn-dropdown-item>Value</fn-dropdown-item>
@@ -21,38 +22,33 @@ 
      <fn-dropdown-item>Median</fn-dropdown-item>

    </fn-dropdown>



    <h1><i>Example 2 &raquo;</i> Dropdown with Static Header</h1>

    <fn-dropdown style="margin-bottom: 30px;">

      <fn-dropdown-header data-changeable='false'>Categories</fn-dropdown-header>

    <h3><i>Example 2 &raquo;</i> Input Like</h3>

    <fn-dropdown data-style="input">

      <fn-dropdown-header>Categories</fn-dropdown-header>

      <fn-dropdown-item>&#10003; Unread</fn-dropdown-item>

      <fn-dropdown-item>&#10003; Promotions</fn-dropdown-item>

      <fn-dropdown-item>&#10003; Updates</fn-dropdown-item>

    </fn-dropdown>

  </section>



  <section>

    <h1><i>Example 3 &raquo;</i> Fancy Dropdown</h1>

    <fn-dropdown data-style="fancy">

    <h3><i>Example 2 &raquo;</i> Small Input Like</h3>

    <fn-dropdown data-style="input small">

      <fn-dropdown-header>Categories</fn-dropdown-header>

      <fn-dropdown-item>&#10003; Unread</fn-dropdown-item>

      <fn-dropdown-item>&#10003; Promotions</fn-dropdown-item>

      <fn-dropdown-item>&#10003; Updates</fn-dropdown-item>

    </fn-dropdown>



  </section>

  <section>

    <h1><i>Example 4 &raquo;</i> Labeled Dropdown</h1>

    <fn-dropdown data-style="fancy labeled">

      <fn-dropdown-header>Filter</fn-dropdown-header>

      <fn-dropdown-label>Filter by Tag</fn-dropdown-label>

      <fn-dropdown-item>4 hours</fn-dropdown-item>

      <fn-dropdown-item>12 hours</fn-dropdown-item>

      <fn-dropdown-item>24 hours</fn-dropdown-item>



    <h3><i>Example 3 &raquo;</i> Compact</h3>

    <fn-dropdown data-style="input compact">

      <fn-dropdown-header>Categories</fn-dropdown-header>

      <fn-dropdown-item>&#10003; Unread</fn-dropdown-item>

      <fn-dropdown-item>&#10003; Promotions</fn-dropdown-item>

      <fn-dropdown-item>&#10003; Updates</fn-dropdown-item>

    </fn-dropdown>

  </section>



  <section>

    <h1><i>Example 4 &raquo;</i> Inline Dropdown</h1>



    <h3><i>Example 4 &raquo;</i> Inline</h3>

    <span>Show the last

      <fn-dropdown data-style="inline">

        <fn-dropdown-header>hour</fn-dropdown-header>
@@ -61,11 +57,32 @@ 
        <fn-dropdown-item>24 hours</fn-dropdown-item>

      </fn-dropdown>

    </span>

  </section>



  <section>

    <h1>Header and Label Options</h1>

    <h3><i>Example 1 &raquo;</i> Static Header</h3>

    <fn-dropdown style="margin-bottom: 30px;">

      <fn-dropdown-header data-display-selection='false'>Categories</fn-dropdown-header>

      <fn-dropdown-item>&#10003; Unread</fn-dropdown-item>

      <fn-dropdown-item>&#10003; Promotions</fn-dropdown-item>

      <fn-dropdown-item>&#10003; Updates</fn-dropdown-item>

    </fn-dropdown>



    <h3><i>Example 2 &raquo;</i> Labeled Dropdown</h3>

    <fn-dropdown data-style="input">

      <fn-dropdown-header>Filter</fn-dropdown-header>

      <fn-dropdown-label>Filter by Tag</fn-dropdown-label>

      <fn-dropdown-item>4 hours</fn-dropdown-item>

      <fn-dropdown-item>12 hours</fn-dropdown-item>

      <fn-dropdown-item>24 hours</fn-dropdown-item>

    </fn-dropdown>

  </section>





  <section>

    <h1><i>Example 4 &raquo;</i> Searchable Dropdown</h1>

    <h1>Searchable Dropdown</h1>

    <h3><i>Example 1 &raquo;</i> Full Width Input</h3>

    <fn-dropdown data-searchable data-placeholder="Select a Country">

      <fn-dropdown-item data-value="Spain">Spain</fn-dropdown-item>

      <fn-dropdown-item data-value="Italy">Italy</fn-dropdown-item>
@@ -79,20 +96,37 @@ 
      <fn-dropdown-item data-value="Austria">Austria</fn-dropdown-item>

    </fn-dropdown>



    <h3><i>Example 2 &raquo;</i> Custom Width Input</h3>

    <fn-dropdown data-searchable data-placeholder="Year" style="width:150px;">

      <fn-dropdown-item data-value="2000">2000</fn-dropdown-item>

      <fn-dropdown-item data-value="2001">2001</fn-dropdown-item>

      <fn-dropdown-item data-value="2002">2002</fn-dropdown-item>

      <fn-dropdown-item data-value="2003">2003</fn-dropdown-item>

      <fn-dropdown-item data-value="2004">2004</fn-dropdown-item>

      <fn-dropdown-item data-value="2005">2005</fn-dropdown-item>

      <fn-dropdown-item data-value="2006">2006</fn-dropdown-item>

      <fn-dropdown-item data-value="2007">2007</fn-dropdown-item>

      <fn-dropdown-item data-value="2008">2008</fn-dropdown-item>

      <fn-dropdown-item data-value="2009">2009</fn-dropdown-item>

    </fn-dropdown>



  </section>





  <section>

    <h1><i>Example 5 &raquo;</i> Disabled Dropdowns</h1>

    <h1>States</h1>

    <h3><i>Example 1 &raquo;</i> Disabled Basic Dropdown</h3>

    <fn-dropdown data-state='disabled' style="margin-bottom:30px;">

      <fn-dropdown-header>Age</fn-dropdown-header>

    </fn-dropdown>

    <fn-dropdown data-style="fancy" data-state='disabled' style="margin-bottom:30px;">



    <h3><i>Example 2 &raquo;</i> Disabled Input like Dropdown</h3>

    <fn-dropdown data-style="input" data-state='disabled' style="margin-bottom:30px;">

      <fn-dropdown-header>Age</fn-dropdown-header>

    </fn-dropdown>





    <h1><i>Example 6 &raquo;</i> Dropdowns with Error State</h1>

    <h3><i>Example 3 &raquo;</i> Basic Dropdown with Error State</h3>

    <fn-dropdown data-state="error" style="margin-bottom:30px;">

      <fn-dropdown-header>Dropdown</fn-dropdown-header>

      <fn-dropdown-item>Choice 1</fn-dropdown-item>
@@ -100,7 +134,8 @@ 
      <fn-dropdown-item>Choice 3</fn-dropdown-item>

    </fn-dropdown>



    <fn-dropdown data-state="error" data-style="fancy">

    <h3><i>Example 4 &raquo;</i> Input like Dropdown with Error State</h3>

    <fn-dropdown data-state="error" data-style="input">

      <fn-dropdown-header>Dropdown</fn-dropdown-header>

      <fn-dropdown-item>Choice 1</fn-dropdown-item>

      <fn-dropdown-item>Choice 2</fn-dropdown-item>

CRA Git | Maintained and supported by SUSTech CRA and CCSE