vue-el-element

Vue components for design elements with custom style guides

Installation

npm install --save vue-el-element

Import

Globalize all components

import Vue from 'vue'
import VueElElements from 'vue-el-element'

Vue.use(VueElElements)

Import selected components

import { ElButton, ElTooltip } from 'vue-el-element'

Elements

el-button

<el-button
  :disabled="Boolean"
  :secondary="Boolean"
  :danger="Boolean"
  :link="Boolean"
  :margin-right="Boolean"
  :margin-top="Boolean"
  :tooltip="String"
  @click="method"
  >
  Button label
</el-button>

Boolean props can also be activated as:

<el-button>
  Primary action
</el-button>

<el-button secondary>
  Secondary action
</el-button>

<el-button secondary danger>
  Close
</el-button>

<el-button danger>
  Delete
</el-button>

el-modal

<el-modal
  v-if="isOpen"
  @close="isOpen = false"
  :pause-body-scroll="true"
  :top="true"
  close-button-align="right"
  >

  Content...

  <!-- Optional: Footer example -->
  <el-inline
    slot="footer"
    >

    <el-button>Previous</el-button>
    <el-button>Next</el-button>
  </el-inline>
</el-modal>

el-dropdown

<el-dropdown
  :options="[{
    value: 'key1',
    label: 'Item 1'
  }, {
    value: 'key2',
    label: 'Item 2'
  }]"
  v-model="key1"
  />

el-checkbox

Note that the model is an array

<el-checkbox
  :options="[{
    value: 'key1',
    label: 'Item 1'
  }, {
    value: 'key2',
    label: 'Item 2'
  }]"
  v-model="[]"
  />

el-radio-button

<el-radio-button
  :options="[{
    value: 'key1',
    label: 'Item 1'
  }, {
    value: 'key2',
    label: 'Item 2'
  }]"
  v-model="key1"
  />

el-multi-switch

<el-multi-switch
  :options="[{
    value: 'key1',
    label: 'Item 1'
  }, {
    value: 'key2',
    label: 'Item 2'
  }]"
  v-model="key1"
  />

el-tooltip

Place the tooltip within the item you want to describe. It will place itself at the center of that element. Note that you need the parent element not to have static positioning.

<div style="{ position: relative }">

  Content...

  <el-tooltip :delay="Boolean">
    Description
  </el-content>
</div>

el-message

<el-message
  :success="Boolean"
  :info="Boolean"
  :warning="Boolean"
  :danger="Boolean"
  :margin-right="Boolean"
  :margin-top="Boolean"
  >
  Message content
</el-message>

el-input

<el-input
  :success="Boolean"
  :warning="Boolean"
  v-model="value"
  />

el-textarea

<el-textarea
  :success="Boolean"
  :warning="Boolean"
  v-model="value"
  />

el-tag

<el-tag
  :success="Boolean"
  :info="Boolean"
  :warning="Boolean"
  :danger="Boolean"
  :margin-right="Boolean"
  :margin-top="Boolean"
  >
  Tag content
</el-tag>

el-menu & el-menu-item

<el-menu
  align="right"
  >
  <el-menu-item title="Chapter 1">
    Content for chapter 1...
  </el-menu-item>
  <el-menu-item title="Chapter 2">
    Content for chapter 2...
  </el-menu-item>

  <!-- Categorize with sections -->
  <el-menu-section title="Section 1" />

  <!-- Clickable sections -->
  <el-menu-section title="Section 2">
    Content for section 2
  </el-menu-section>
</el-menu>

el-tab & el-tab-item

Horisonal navigation

<el-tab>
  <el-tab-item title="Tab 1">
    Content for tab 1...
  </el-tab-item>
  <el-tab-item title="Tab 2">
    Content for tab 2...
  </el-tab-item>
</el-tab>

el-inline

<el-inline
  :stretch="Boolean"
  :space-between="Boolean"
  :wrap="Boolean"
  :margin-top="Boolean"
  >
  Content...
</el-inline>

el-column

<el-column>
  <el-column-item
    :grow="Number"
    :wrap="Boolean"
    >
    Content for column 1...
  </el-column-item>
  <el-column-item
    :grow="Number"
    :wrap="Boolean"
    >
    Content for column 2...
  </el-column-item>
</el-column>

el-loader

<el-loader
  :margin-top="Boolean"
  />

el-sticky-header & el-sticky-footer

<el-sticky-header>
  content...
</el-sticky-header>

<el-sticky-footer>
  content...
</el-sticky-footer>

Change style guide

The elements' css classes follow the BEM naming scheematics.

Rounded button

.el-button {
  height: 30px;
  border-radius: 15px;
}

Change danger color of button

.el-button--danger {
  background-color: #FA3E44;
}

.el-button--danger:hover {
  background-color: #CB3837;
}

Change modal styling

.el-modal__body {
  border-radius: 0px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.18);
}

.el-modal__body--wide {
  max-width: 1200px;
}

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run serve

Rollup upgrade

|Size|Comment| |-|-| |498|Vue-cli build| |176|Rollup|