Ember Element UI

Implementation of http://element.eleme.io in Ember

Installation

ember install ember-element-ui

Demo

https://www.aalasolutions.com/ember/element-ui/

Other Applications

Small Medical Record Keeping Application

• Source Code
• Play Store Link

Elements

Basic

• Layout
  • el-row {{el-row}}
    • gutter {{el-row gutter=20}}
    • type {{el-row type="flex"}}
    • justify {{el-row justify="end"}} start/end/center/space-around/space-between
    • align {{el-row align="middle"}} top/middle/bottom
    • tag - Skipped it
  • el-col {{el-col}}
    • span {{el-col span=4}}
    • offset {{el-col offset=4}}
    • push {{el-col push=4}}
    • pull {{el-col pull=4}}
    • xs {{el-col xs=4}}
    • sm {{el-col sm=4}}
    • md {{el-col md=4}}
    • lg {{el-col lg=4}}
    • xl {{el-col xl=4}}
    • tag - Skipped it
• Layout Container
  • el-container {{el-container}}
    • direction{{el-container direction="vertical"}}
      • Auto change direction to vertical if it have header or footer
  • el-header {{el-header}}
    • height
  • el-aside {{el-aside}}
    • width
  • el-footer {{el-footer}}
    • height
• Colors
• Typography
• Icons : http://element.eleme.io/#/en-US/component/icon
• Button {{el-button}}
  • size {{el-button size="small"}} medium / small / mini
  • type: changed it to color {{el-button color="danger"}} primary / success / warning / danger / info / text
  • plain {{el-button plain=true}}
  • round {{el-button round=true}}
  • circle {{el-button circle=true}}
  • loading {{el-button loading=true}}
  • disabled {{el-button disabled=true}}
  • icon {{el-button icon="el-icon-star-on"}} You can user Font Awesome icons as well fa fa-bars
  • autofocus {{el-button autofocus=true}}
  • native-type: changed it to type

Form

• Radios
  • Radio {{el-radio}}
    • Attributes
      • label {{el-radio label="first_name"}}
      • disabled {{el-radio disabled=true}}
      • border {{el-radio border=true}}
      • size {{el-radio size="small"}}
      • name {{el-radio name="optName"}}
    • Events
      • change: changed to action {{el-radio action=(action "handleChange")}}
  • Radio Button {{el-radio-button}}
    • Attributes
      • label {{el-radio-button label="first_name"}}
      • disabled {{el-radio-button disabled=true}}
      • size {{el-radio-button size="small"}}
      • name {{el-radio-button name="optName"}}
    • Events
      • change: changed to action {{el-radio action=(action "handleChange")}}
  • Radio Group {{el-radio-group}}
    • Attributes
      • size: {{el-radio-group size="medium"}}
      • disabled: {{el-radio-group disabled=true}}
      • text-color:
      • fill:
    • Group Events
      • change:

      {{#el-radio-group model=var1 size="small" as |group|}}
        {{#group.option label="Windows" action=(action 'handleResponse')}} Windows {{/group.option}}
        {{#group.option label="XP" action=(action 'handleResponse') }} XP {{/group.option}}
        {{#group.option label="Mac" disabled=true action=(action (mut var1)) }} Mac {{/group.option}}
      {{/el-radio-group}}

• Checkboxes
  • Checkbox {{el-checkbox}}
    • Attributes
      • label skipped it
      • true-label
      • false-label
      • disabled {{el-checkbox disabled=true}}
      • border {{el-checkbox border=true}}
      • size {{el-checkbox size="small"}}
      • name {{el-checkbox name="optName"}}
      • checked: changed it to model {{el-checkbox model=varName}}
      • indeterminate:
    • Events
      • change
  • Checkbox Button {{el-checkbox-button}}
    • Attributes
      • label {{el-checkbox-button label="first_name"}}
      • true-label
      • false-label
      • disabled {{el-checkbox-button disabled=true}}
      • size {{el-checkbox-button size="small"}}
      • name {{el-checkbox-button name="optName"}}
      • checked: changed it to model {{el-checkbox-button model=varName}}
    • Events
      • change:
  • Checkbox Group {{el-checkbox-group}}
    • Attributes
      • size: {{el-checkbox-group size="medium"}}
      • disabled: {{el-checkbox-group disabled=true}}
      • min:
      • max:
      • text-color:
      • fill:
    • Group Events
      • change:

      {{#el-checkbox-group size="small" as |group|}}
        {{#group.option model=vWindows> Windows {{/group.option}}
        {{#group.option model=vXP> XP {{/group.option}}
        {{#group.option disabled=true model=vMac> Mac {{/group.option}}
      {{/el-checkbox-group}}

• Input
  • input {{el-input}}
    • type {{el-input type="password"}}
    • value {{el-input value=var_name}}
    • maxlength
    • minlength
    • placeholder {{el-input placeholder="Enter Login"}}
    • clearable {{el-input clearable=true}}
      • On hover and on Focus events
    • disabled {{el-input disabled=true}}
    • size {{el-input size="small"}}
    • prefix-icon {{el-input prefixIcon="fa fa-bars"}}
    • suffix-icon {{el-input suffixIcon="fa fa-bars"}}
    • autocomplete {{el-input autocomplete="off"}}
    • name {{el-input name="username"}}
    • readonly {{el-input readonly=true}}
    • max
    • min
    • step
    • resize
    • form
    • label
    • tabindex
    • when type is text only
      • prefix
      • suffix
      • prepend
      • append
    • input events
      • blur
      • focus
      • change
      • clear
    • input methods
      • focus
      • blur
      • select
  • input autocomplete
    • placeholder
    • disabled
    • value-key
    • icon
    • value
    • debounce
    • placement
    • fetch-suggestions
    • popper-class
    • trigger-on-focus
    • name
    • select-when-unmatched
    • label
    • prefix-icon
    • suffix-icon
    • hide-loading
    • popper-append-to-body
    • prefix
    • suffix
    • prepend
    • append
    • Events
      • select
    • Method
      • focus
  • text area {{el-input-textarea}}
    • rows
    • autosize
    • name
• InputNumber
• Select
• Cascader
• Switch
• Slider
• TimePicker
• DatePicker
• DateTimePicker
• Upload
• Rate
• ColorPicker
• Transfer
• Form

Data

• Table
• Tag {{#el-tag}}Tag #{{/el-tag}}
  • attributes
    • type {{#el-tag type='warning'}}Tag #{{/el-tag}}
    • closeable {{#el-tag closeable=true}}Tag #{{/el-tag}}
    • hit {{#el-tag hit=true}}Tag #{{/el-tag}}
    • color skipped it
    • size {{#el-tag size="medium"}}Tag #{{/el-tag}}
  • events
    • close {{#el-tag close=(action 'tagAction')}}Tag #{{/el-tag}}
• Progress {{el-progress}}
  • percentage {{el-progress percentage=50}}
  • type {{el-progress type='circle'}}
  • strokeWidth {{el-progress strokeWidth=20}}
  • textInside {{el-progress textInside=true}}
  • status {{el-progress status='success'}}
  • color {{el-progress color='rgba(145,115,200,0.5)'}}
  • width {{el-progress width='150'}} only for circle type
  • showText {{el-progress showText=true}}
• Tree
• Pagination
• Badge {{#el-badge}}
  • value {{#el-badge value="new"}}content{/el-badge}}
  • max {{#el-badge value=15 max=20}}content{/el-badge}}
  • isDot {{#el-badge isDot=true}}content{/el-badge}}
  • hidden {{#el-badge hidden=true}}content{/el-badge}}
  • type {{#el-badge type="danger"}}content{/el-badge}}

Notice

• Alert {{el-alert}}

  • Attributes
    • title {{el-alert title="Alert Title"}}
    • type {{el-alert title="Alert Title" type="warning"}}
    • description {{el-alert title="Alert Title" type="warning" description="Alert Description"}}
    • closable {{el-alert title="Alert Title" closeable=false}}
    • center {{el-alert title="Alert Title" type="warning" center=true}}
    • closeText {{el-alert title="Alert Title" type="warning" closeText="Sure"}}
    • showIcon {{el-alert title="Alert Title" type="warning" showIcon=true}}
  • Block Content
    • Custom content {{#el-alert title="Alert Title" type="warning" showIcon=true}} Custom Content {{/el-alert}}
  • Event
    • close {{#el-alert title="Hi" action=(action "handleChange") }}

• Loading

• Message : Do add {{el-notification-container}} in parent template

  • Import service message: service('message'),
  • Usage

    this.get('Message').success("Welcome Man Welcome", { // Msg.warning(); Msg.error(); Msg.info()
      duration: 3000, // Duration in MS, default 3000
      iconClass: '', // if you need custom icon
      customClass: '', // if any custom class is needed
      onClose: null, // a callback function, Message object will be returned in that function
      showClose: false, // TO show close icon or not, default is false 
      center: false, // Make text center, default is false
      autoClear: true, // should message auto remove or not, default to true
      return: {someObj: val}, // any object or value which you want in return 
    });

• MessageBox

  • Import service messageBox: service('message-box'),
  • Usage

    this.get('Message').alert("Unable to Process", "Pending...");

• Notification

Navigation

• NavMenu
  • Menu {{el-menu}}
    • Attributes
      • mode {{el-menu mode="horizontal"}}
      • collapse {{el-menu collpase=true}}
      • background-color
      • text-color
      • active-text-color
      • default-active
      • default-opened
      • unique-opened
      • menu-trigger
      • router
      • collapse transition
    • Methods
      • open
      • close
    • Events
      • select
      • open
      • close
  • Menu Item {{el-menu-item}}
    • title {{el-menu-item title="Logout"}}
    • icon {{el-menu-item title="Logout" icon='el-icon-xxxx'}}
    • disabled {{el-menu-item title="Logout" disabled=true}}
    • click: changed to action {{el-menu-item title="Logout" icon='el-icon-xxxx' action=(action "logout")}}
  • Menu Item Route {{el-menu-item-route}}
    • title {{#el-menu-item-route linkto='logout'}} Logout {{/el-menu-item-route}}
    • icon {{#el-menu-item-route linkto='logout' icon='el-icon-xxxx'}} Logout {{/el-menu-item-route}}
    • disabled {{#el-menu-item-route linkto='logout' disabled=true}} Logout {{/el-menu-item-route}}
  • Submenu {{el-submenu}}
    • icon {{el-submenu icon="el-icon-location"}}
    • title {{el-submenu icon="el-icon-location" title="Member Settings"}}
    • disabled
    • popper-class
    • show-timeout
    • hide-timeout
    • popper-append-to-body
  • Menu Groups
    • title
• Tabs
• Breadcrumb
• Dropdown
• Steps

Others

• Dialog
• Tooltip
• Popover
• Card
• Carousel
• Collapse

Contributing

Installation

• git clone <repository-url>
• cd ember-element-ui
• yarn install

Linting

• yarn lint:hbs
• yarn lint:js
• yarn lint:js --fix

Running tests

• ember test – Runs the test suite on the current Ember version
• ember test --server – Runs the test suite in "watch mode"
• ember try:each – Runs the test suite against multiple Ember versions

Running the dummy application

• ember serve
• Visit the dummy application at http://localhost:4200.

For more information on using ember-cli, visit https://ember-cli.com/.

License

This project is licensed under the MIT License.