This is Code Snippets of kingsun UI for VS Code.
Vue
| No. |
Trigger Key |
Purpose |
| 1. |
ksbase-ts |
Single file component base with Typescript |
Basic Part
| No. |
Trigger Key |
Element Tag |
| 1. |
ksrow |
<ks-row> |
| 2. |
kscol |
<ks-col> |
| 3. |
kshc |
hidden-xs-only,hidden-sm-only,etc |
| 4. |
kscon |
<ks-container> |
| 5. |
ksas |
<ks-aside> |
| 6. |
kshe |
<ks-header> |
| 7. |
ksma |
<ks-main> |
| 8. |
ksfo |
<ks-footer> |
| 9. |
kscb |
#409EFF |
| 10. |
kscs |
#67C23A |
| 11. |
kscw |
#E6A23C |
| 12. |
kscd |
#F56C6C |
| 13. |
ksci |
#909399 |
| 14. |
kscpt |
#303133 |
| 15. |
kscrt |
#606266 |
| 16. |
kscst |
#909399 |
| 17. |
kscht |
#C0C4CC |
| 18. |
kscbb |
#DCDFE6 |
| 19. |
ksclb |
#E4E7ED |
| 20. |
ksclrb |
#EBEEF5 |
| 21. |
kselb |
#DCDFE6 |
| 22. |
kstypo |
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; |
| 23. |
ksbbs |
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) |
| 24. |
ksbls |
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) |
| 25. |
ksb |
ks-button |
| 26. |
ksbg |
ks-button-group |
| 27. |
ksl |
ks-link |
| No. |
Trigger Key |
Element Tag |
| 1. |
ksr |
<ks-radio> |
| 2. |
ksrg |
<ks-radio-group> |
| 3. |
ksrbg |
<ks-radio-group> with <ks-radio-button> |
| 4. |
ksrb |
<ks-radio-button> |
| 5. |
ksc |
<ks-checkbox> |
| 6. |
kscg |
<ks-checkbox-group> |
| 7. |
kscbg |
<ks-checkbox-group> with <ks-checkbox-button> |
| 8. |
kscbt |
<ks-checkbox-button> |
| 9. |
ksi |
<ks-input> |
| 10. |
ksit |
<ks-input type="textarea"> |
| 11. |
ksa |
<ks-autocomplete> |
| 12. |
ksis |
<template slot=''> |
| 13. |
ksin |
<ks-input-number> |
| 14. |
kssel |
<ks-select> |
| 15. |
ksselr |
<ks-select remote> |
| 16. |
ksop |
<ks-option> |
| 17. |
ksopg |
<ks-option-group> |
| 18. |
ksca |
<ks-cascader> |
| 19. |
kscap |
<ks-cascader-panel> |
| 20. |
kssw |
<ks-swtich> |
| 21. |
kssl |
<ks-slider> |
| 22. |
kstp |
<ks-time-picker> |
| 23. |
ksts |
<ks-time-select> |
| 24. |
kstsr |
<ks-time-select> * 2 |
| 25. |
kstpr |
<ks-time-picker is-range> |
| 26. |
ksdp |
<ks-date-picker> |
| 27. |
ksdpr |
<ks-date-picker type="daterange,monthrange"> |
| 28. |
ksdtp |
<ks-date-picker type="datetime"> |
| 29. |
ksdtpr |
<ks-date-picker type="datetimerange"> |
| 30. |
ksu |
<ks-upload> |
| 31. |
ksra |
<ks-rate> |
| 32. |
kscp |
<ks-color-picker> |
| 33. |
kstr |
<ks-transfer> |
| 34. |
ksf |
<ks-form> |
| 35. |
ksfi |
<ks-form-item> |
Data Part
| No. |
Trigger Key |
Element Tag |
| 1. |
kst |
<ks-table> |
| 2. |
kscrud |
<ks-crud> |
| 2. |
kstc |
<ks-table-column> |
| 3. |
ksta |
<ks-tag> |
| 4. |
kspr |
<ks-progress> |
| 5. |
kstree |
<ks-tree> |
| 6. |
ksp |
<ks-pagination> |
| 7. |
ksba |
<ks-badge> |
| 8. |
ksav |
<ks-avatar> |
Notice Part
| No. |
Trigger Key |
Element Tag |
| 1. |
ksal |
<ks-alert> |
| 2. |
ksloads |
kingsun-loading-* |
| 3. |
ksme |
this.$message({}) |
| 4. |
ksmebox |
this.$msgbox({}) |
| 5. |
ksmeal |
this.$alert({}) |
| 6. |
ksmecon |
this.$confirm({}) |
| 7. |
ksmepro |
this.$prompt({}) |
| 8. |
ksno |
this.$notify({}) |
| 9. |
ksnot |
this.$notify.type({}) |
Navigation Part
| No. |
Trigger Key |
Element Tag |
| 1. |
ksmen |
<ks-menu> |
| 2. |
kssubmen |
<ks-submenu> |
| 3. |
ksmeni |
<ks-menu-item> |
| 4. |
kstabs |
<ks-tabs> |
| 5. |
kstabp |
<ks-tab-pane> |
| 6. |
ksbr |
<ks-breadcrumb> |
| 7. |
ksbri |
<ks-breadcrumb-item> |
| 8. |
kspa |
<ks-page-header> |
| 9. |
ksdr |
<ks-dropdown> |
| 10. |
ksdri |
<ks-dropdown-item> |
| 11. |
kssts |
<ks-steps> |
| 12. |
ksst |
<ks-step> |
Others Part
| No. |
Trigger Key |
Element Tag |
| 1. |
ksdi |
<ks-dialog> |
| 2. |
ksto |
<ks-tooltip> |
| 3. |
kspo |
<ks-popover> |
| 4. |
kspoco |
<ks-popconfirm> |
| 5. |
kscard |
<ks-card> |
| 6. |
kscaro |
<ks-carousel> |
| 7. |
kscaroi |
<ks-carousks-item> |
| 8. |
kscolla |
<ks-collapse> |
| 9. |
kscollai |
<ks-collapse-item> |
| 10. |
ksti |
<ks-timeline> |
| 11. |
kstii |
<ks-timeline-item> |
| 12. |
ksd |
<ks-divider> |
| 13. |
kscal |
<ks-calendar> |
| 14. |
ksim |
<ks-image> |
| 15. |
ksback |
<ks-backtop> |
| 16. |
ksinfi |
v-infinite-scroll |
| 17. |
ksdra |
<ks-drawer> |
| |
