Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/snowffer/Element-UI-Snippets-ST
Code snippets of element-ui for sublime text
https://github.com/snowffer/Element-UI-Snippets-ST
Last synced: 11 days ago
JSON representation
Code snippets of element-ui for sublime text
- Host: GitHub
- URL: https://github.com/snowffer/Element-UI-Snippets-ST
- Owner: snowffer
- Created: 2017-12-25T02:38:58.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-29T04:23:24.000Z (almost 6 years ago)
- Last Synced: 2024-08-02T06:12:41.897Z (3 months ago)
- Size: 57.6 KB
- Stars: 23
- Watchers: 2
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
- awesome-element - Element-UI-Snippets-ST - UI (Tools)
README
### Install
#### Manual Install
Copy the folder element-ui-snippets to the path directly:
+ **Mac**: /Users/*< your-user-name >*/Library/Application Support/Sublime Text 3/Packages/User/
+ **Windows**: *< your-installed-driver >* :\Users\ *< your-user-name >* \AppData\Roaming\Sublime Text 3\Packages\User\
#### Through Package Control
1. Install Package Control
2. Open Command Palette
3. Type: Package Control: Install Package, and hit Enter
4. Type: Element UI Snippets, and hit Enter
### Special Instruction：
1. For the components like `el-table` which need children components to be content, use `v-for` to loop to generate the children components.
2. By default, there would be no auto-complete hints in .html file or the template part in .vue file. If you want it to be shown, you should change the sublime text settings by yourself. Here are the steps (Mac version for example):
1. Select menu: Sublime Text -> Preferences -> Settings
2. Make sure the value of the option `auto_complete` is `true`
3. In Preferences.sublime-settings--Users file, add this key-value:
````
"auto_complete_triggers": [
{
"selector": "text.html",
"characters": "l"
}
],
````
**Warning: this setting would trigger all sinppets which contain letter 'l' even they are not defined in Element UI Snippets.**
### Snippets List
1. All the Element UI tags below, ignore the closure and more detailed information. Such as `elr` to ``, actually that represents `$3`
2. The sinppets' order follows the order of the components of Guide on Element UI official website basically. Supply extra General and Options parts.
3. Totally 104 snippets. 9 of them are not implemented yet.
4. **Only work in .html or .vue file.**
#### Basic Part
|No.|Trigger Key|Element Tag|
|:------:|:--------------:|:--------|
|1. | `elrow` | `` |
|2. | `elcol` | `` |
|3. | `elcon` | `` |
|4. | `elas` | `` |
|5. | `elhe` | `` |
|6. | `elma` | `` |
|7. | `elfo` | `` |
|8. | `elcb` | `#409EFF` |
|9. | `elcs` | `#67C23A` |
|10. | `elcw` | `#E6A23C` |
|11. | `elcd` | `#F56C6C` |
|12. | `elci` | `#909399` |
|13. | TBD | `#303133` |
|14. | TBD | `#606266` |
|15. | TBD | `#909399` |
|16. | TBD | `#C0C4CC` |
|17. | TBD | `#DCDFE6` |
|18. | TBD | `#E4E7ED` |
|19. | TBD | `#EBEEF5` |
|20. | TBD | `#F2F6FC` |
|21. | `eltypo` | `font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;` |
|22. | `elb` | `el-button` |
#### Form Part
No. | Trigger Key | Element Tag
|:------:|:--------------:|:--------|
|1. | `elr` | `` |
|2. | `elrg` | `` |
|3. | `elc` | `` |
|4. | `elcg` | `` |
|5. | `eli` | `` |
|6. | `elit` | `` |
|7. | `elin` | `` |
|8. | `elsel` | `` |
|9. | `elop` | `` |
|10. | `elca` | `` |
|11. | `elsw` | `` |
|12. | `elsl` | `` |
|13. | `eltp` | `` |
|14. | `elts` | `` |
|15. | `eldp` | `` |
|16. | `eldtp` | `` |
|17. | `elu` | `` |
|18. | `elra` | `` |
|19. | `elcp` | `` |
|20. | `eltr` | `` |
|21. | `elf` | `` |
|22. | `elfi` | `` |
#### Data Part
No. | Trigger Key | Element Tag
|:------:|:--------------:|:--------|
|1. | `elta` | `` |
|2. | `eltac` | `` |
|3. | `eltag` | `` |
|4. | `eltags` | `` |
|5. | `eltagi` | `` |
|6. | `eltagw` | `` |
|7. | `eltagd` | `` |
|8. | `elpr` | `` |
|9. | `elprc` | `` |
|10. | `eltree` | `` |
|11. | `elpa` | `` |
|12. | `elba` | `` |
#### Notice Part
No. | Trigger Key | Element Tag
|:------:|:--------------:|:--------|
|1. | `elal` | `` |
|2. | `elals` | `` |
|3. | `elali` | `` |
|4. | `elalw` | `` |
|5. | `elale` | `` |
|6. | `elloads` | `element-loading-*` |
|7. | `elme` | `this.$message({})` |
|8. | `elmes` | `this.$message({type: 'success'})` |
|9. | `elmew` | `this.$message({type: 'warning'})` |
|10. | `elmee` | `this.$message({type: 'error'})` |
|11. | `elmei` | `this.$message({type: 'info'})` |
|12. | `elmebox` | `this.$msgbox({})` |
|13. | `elmeal` | `this.$alert({})` |
|14. | `elmecon` | `this.$confirm({})` |
|15. | `elmecons` | `this.$confirm({type: 'success'})` |
|16. | `elmeconw` | `this.$confirm({type: 'warning'})` |
|17. | `elmecone` | `this.$confirm({type: 'error'})` |
|18. | `elmeconi` | `this.$confirm({type: 'info'})` |
|19. | `elmepro` | `this.$prompt({})` |
|20. | `elnoti` | `this.$notify({})` |
|21. | `elnotis` | `this.$notify({type: 'success'})` |
|22. | `elnotiw` | `this.$notify({type: 'warning'})` |
|23. | `elnotie` | `this.$notify({type: 'error'})` |
|24. | `elnotii` | `this.$notify({type: 'info'})` |
|25. |TODO |VNode for Message|
#### Navigation Part
No. | Trigger Key | Element Tag
|:------:|:--------------:|:--------|
|1. | `elmen` | `` |
|2. | `elsubmen` | `` |
|3. | `elmeni` | `` |
|4. | `eltabs` | `` |
|5. | `eltabp` | `` |
|6. | `elbr` | `` |
|7. | `elbri` | `` |
|8. | `eldr` | `` |
|9. | `eldri` | `` |
|10. | `elsts` | `` |
|11. | `elst` | `` |
#### Others Part
No. | Trigger Key | Element Tag
|:------:|:--------------:|:--------|
|1. | `eldi` | `` |
|2. | `elto` | `` |
|3. | `elpop` | `` |
|4. | `elcard` | `` |
|5. | `elcaro` | `` |
|6. | `elcaroi` | `` |
|7. | `elcolla` | `` |
|8. | `elcollai` | `` |
#### General Part
No. | Trigger Key | Element Tag
|:------:|:--------------:|:--------|
|1. | `el` | `` |
|2. | `elic` | `` |
#### Options Part
No. | Trigger Key | Element Tag
|:------:|:--------------:|:--------|
|1. | `elpos` | positions |
|2. | `elanims` | animation types |