element-ui for ember
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon
app
blueprints/ember-element-ui
config
tests
vendor
.editorconfig
.ember-cli
.eslintignore
.eslintrc.js
.gitignore
.npmignore
.template-lintrc.js
.travis.yml
.watchmanconfig
LICENSE.md
README.md
ember-cli-build.js
index.js
package-lock.json
package.json
testem.js
yarn.lock

README.md

Ember Element UI

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

Build Status Latest NPM release Test Coverage Ember Observer Score Dependencies

Installation

ember install ember-element-ui

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

  • 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

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

License

This project is licensed under the MIT License.