element-ui
Advanced tools
Element UI is a Vue 2.0-based component library for developers, designers, and product managers. It provides a comprehensive set of UI components to build rich and interactive web applications.
Form
Element UI provides a robust form component that includes form items, input fields, and buttons. This example demonstrates a simple login form with username and password fields.
<template>
<el-form :model="form">
<el-form-item label="Username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="Password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Submit</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
}
};
},
methods: {
onSubmit() {
console.log('Form submitted:', this.form);
}
}
};
</script>Table
The table component in Element UI allows for the display of data in a tabular format. This example shows a table with columns for date, name, and address.
<template>
<el-table :data="tableData">
<el-table-column prop="date" label="Date" width="180"></el-table-column>
<el-table-column prop="name" label="Name" width="180"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: 'John Smith',
address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-04',
name: 'Jane Doe',
address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
}]
};
}
};
</script>Dialog
Element UI's dialog component is used to create modal dialogs. This example demonstrates a simple dialog that can be opened by clicking a button.
<template>
<el-button type="text" @click="dialogVisible = true">Open Dialog</el-button>
<el-dialog title="Hello, world" :visible.sync="dialogVisible">
<p>Try Element</p>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false
};
}
};
</script>Vuetify is a Vue UI Library with beautifully handcrafted Material Components. It offers a wide range of components and customization options, making it a strong alternative to Element UI. Vuetify is known for its adherence to the Material Design specification.
Ant Design Vue is a Vue implementation of the Ant Design system. It provides a set of high-quality components and demos for building rich, interactive user interfaces. Ant Design Vue is known for its comprehensive documentation and enterprise-level features.
Bootstrap Vue provides one of the most comprehensive implementations of Bootstrap 4 components and grid system for Vue.js. It combines the power of Bootstrap with the flexibility of Vue, making it a good choice for developers familiar with Bootstrap.
Special thanks to the generous sponsorship by:
|
|
|
|
A Vue.js 2.0 UI Toolkit for Web.
npm install element-ui -S
import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element)
// or
import {
Select,
Button
// ...
} from 'element-ui'
Vue.component(Select.name, Select)
Vue.component(Button.name, Button)
For more information, please refer to Quick Start in our documentation.
Modern browsers and Internet Explorer 10+.
Skip this part if you just want to use Element.
For those who are interested in contributing to Element, please refer to our contributing guide (中文 | English | Español) to see how to run this project.
Detailed changes for each release are documented in the release notes.
We have collected some frequently asked questions. Before reporting an issue, please search if the FAQ has the answer to your problem.
Please make sure to read the contributing guide (中文 | English | Español) before making a pull request.
English documentation is brought to you by SwiftGG Translation Team:
Spanish documentation is made possible by these community developers:
If you find Element useful, you can buy us a cup of coffee
Support us with a monthly donation and help us continue our activities. [Become a backer]
Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]
FAQs
A Component Library for Vue.js.
The npm package element-ui receives a total of 153,214 weekly downloads. As such, element-ui popularity was classified as popular.
We found that element-ui demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."