ofs-ui-snippets
这是VS Code的Ofs UI的代码段
安裝
通过VSCode扩展
- 官网：打开 Visual Studio代码 市场，并搜索“Ofs UI代码段”，然后单击安装按钮。
- 编辑器：单击扩展侧边栏，搜索“Ofs UI Snippets”，然后单击安装按钮.
代码段列表
基础部分（基础元素、UI规范颜色）
| No. |
Trigger Key |
Element Tag |
| 1. |
ofsrow |
<ofs-row> |
| 2. |
ofscol |
<ofs-col> |
| 3. |
ofshc |
hidden-xs-only,hidden-sm-only,etc |
| 4. |
ofscon |
<ofs-container> |
| 5. |
ofsas |
<ofs-aside> |
| 6. |
ofshe |
<ofs-header> |
| 7. |
ofsma |
<ofs-main> |
| 8. |
ofsfo |
<ofs-footer> |
| 9. |
ofscp |
#4576FF |
| 10. |
ofscs |
#52B967 |
| 11. |
ofscw |
#FF8429 |
| 12. |
ofscd |
#FF3939 |
| 13. |
ofscn |
#3DA1FF |
| 14. |
ofscpt |
#303133 |
| 15. |
ofscrt |
#606266 |
| 16. |
ofscst |
#909399 |
| 17. |
ofscht |
#C0C4CC |
| 18. |
ofscbb |
#DCDFE6 |
| 19. |
ofsclb |
#E4E7ED |
| 20. |
ofsclrb |
#EBEEF5 |
| 21. |
ofselb |
#DCDFE6 |
| 22. |
ofstypo |
font-family: "Source Han Sans SC; |
| 23. |
ofsbbs |
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) |
| 24. |
ofsbls |
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) |
| 25. |
ofsb |
ofs-button |
| 26. |
ofsbg |
ofs-button-group |
| 27. |
ofsl |
ofs-link |
| 28. |
ofsic |
ofs-icon |
| 29. |
ofsem |
ofs-empty |
| 30. |
ofspr |
ofs-price |
表单部分
| No. |
Trigger Key |
Element Tag |
| 1. |
ofsr |
<ofs-radio> |
| 2. |
ofsrg |
<ofs-radio-group> |
| 3. |
ofsrbg |
<ofs-radio-group> with <el-radio-button> |
| 4. |
ofsrb |
<ofs-radio-button> |
| 5. |
ofsc |
<ofs-checkbox> |
| 6. |
ofscg |
<ofs-checkbox-group> |
| 7. |
ofscbg |
<ofs-checkbox-group> with <el-checkbox-button> |
| 8. |
ofscbt |
<ofs-checkbox-button> |
| 9. |
ofsi |
<ofs-input> |
| 10. |
ofsit |
<ofs-input type="textarea"> |
| 11. |
ofsa |
<ofs-autocomplete> |
| 12. |
ofsis |
<template slot=''> |
| 13. |
ofsin |
<ofs-input-number> |
| 14. |
ofssel |
<ofs-select> |
| 15. |
ofsselr |
<ofs-select remote> |
| 16. |
ofsop |
<ofs-option> |
| 17. |
ofsopg |
<ofs-option-group> |
| 18. |
ofsca |
<ofs-cascader> |
| 19. |
ofscap |
<ofs-cascader-panel> |
| 20. |
ofssw |
<ofs-swtich> |
| 21. |
ofssl |
<ofs-slider> |
| 22. |
ofstp |
<ofs-time-picker> |
| 23. |
ofsts |
<ofs-time-select> |
| 24. |
ofstsr |
<ofs-time-select> * 2 |
| 25. |
ofstpr |
<ofs-time-picker is-range> |
| 26. |
ofsdp |
<ofs-date-picker> |
| 27. |
ofsdpr |
<ofs-date-picker type="daterange,monthrange"> |
| 28. |
ofsdtp |
<ofs-date-picker type="datetime"> |
| 29. |
ofsdtpr |
<ofs-date-picker type="datetimerange"> |
| 30. |
ofsu |
<ofs-upload> |
| 31. |
ofsra |
<ofs-rate> |
| 32. |
ofscp |
<ofs-color-picker> |
| 33. |
ofstr |
<ofs-transfer> |
| 34. |
ofsf |
<ofs-form> |
| 35. |
ofsfi |
<ofs-form-item> |
数据部分
| No. |
Trigger Key |
Element Tag |
| 1. |
ofst |
<ofs-table> |
| 2. |
ofstc |
<ofs-table-column> |
| 3. |
ofsta |
<ofs-tag> |
| 4. |
ofspr |
<ofs-progress> |
| 5. |
ofstree |
<ofs-tree> |
| 6. |
ofsp |
<ofs-pagination> |
| 7. |
ofsba |
<ofs-badge> |
| 8. |
ofsav |
<ofs-avatar> |
通知部分
| No. |
Trigger Key |
Element Tag |
| 1. |
ofsal |
<ofs-alert> |
| 2. |
ofsloads |
ofsement-loading-* |
| 3. |
ofsme |
this.$message({}) |
| 4. |
ofsmebox |
this.$msgbox({}) |
| 5. |
ofsmeal |
this.$alert({}) |
| 6. |
ofsmecon |
this.$confirm({}) |
| 7. |
ofsmepro |
this.$prompt({}) |
| 8. |
ofsno |
this.$notify({}) |
| 9. |
ofsnot |
this.$notify.type({}) |
导航部分
| No. |
Trigger Key |
Element Tag |
| 1. |
ofsmen |
<ofs-menu> |
| 2. |
ofssubmen |
<ofs-submenu> |
| 3. |
ofsmeni |
<ofs-menu-item> |
| 4. |
ofstabs |
<ofs-tabs> |
| 5. |
ofstabp |
<ofs-tab-pane> |
| 6. |
ofsbr |
<ofs-breadcrumb> |
| 7. |
ofsbri |
<ofs-breadcrumb-item> |
| 8. |
ofspa |
<ofs-page-header> |
| 9. |
ofsdr |
<ofs-dropdown> |
| 10. |
ofsdri |
<ofs-dropdown-item> |
| 11. |
ofssts |
<ofs-steps> |
| 12. |
ofsst |
<ofs-step> |
其他部分
| No. |
Trigger Key |
Element Tag |
| 1. |
ofsdi |
<ofs-dialog> |
| 2. |
ofsto |
<ofs-tooltip> |
| 3. |
ofspo |
<ofs-popover> |
| 4. |
ofspoco |
<ofs-popconfirm> |
| 5. |
ofscard |
<ofs-card> |
| 6. |
ofscaro |
<ofs-carousel> |
| 7. |
ofscaroi |
<ofs-carousel-item> |
| 8. |
ofscolla |
<ofs-collapse> |
| 9. |
ofscollai |
<ofs-collapse-item> |
| 10. |
ofsti |
<ofs-timeline> |
| 11. |
ofstii |
<ofs-timeline-item> |
| 12. |
ofsd |
<ofs-divider> |
| 13. |
ofscal |
<ofs-calendar> |
| 14. |
ofsim |
<ofs-image> |
| 15. |
ofsback |
<ofs-backtop> |
| 16. |
ofsinfi |
v-infinite-scroll |
| 17. |
ofsdra |
<ofs-drawer> |
| 18. |
ofssea |
<ofs-search> |
| 19. |
ofsed |
<ofs-editor> |
| 20. |
ofsexc |
<ofs-excel-import> |
| |
