README.md
July 16, 2021 · View on GitHub
This is Code Snippets of Naive UI for VS Code.
English | 中文
Install
Manual Install
Go to the git and download the snippets folder, then copy the files in the folder to the path directly:
- Mac: /Users/< your-user-name >/Library/Application Support/Code/User/snippets/
- Windows: < your-installed-driver > :\Users\ < your-user-name > \AppData\Roaming\Code\User\snippets\
Through VS Code Extensions
- From website: Go to Visual Studio Code Marketplace, and search 'Naive UI Snippets', then click the install button.
- From VS Code: click extensions sidebar, and search 'NaiveUISnippets', then click the install button.
Special Instruction
- For the components like
n-tablewhich need children components to be its content, usev-forto loop to generate the children components.
Snippets List
- All the Naive UI tags below, ignore the closure and more detailed information. Such as
nrto<n-radio>, actually that represents<n-radio v-model="${1}" label="${2}">\$3</n-radio> - The sinppets' order follows the order of the components of Guide on Naive UI official website basically.
- Totally 78 snippets. Will add more if necessary.
- Only work in .vue file for now.
Basic Part
| No. | Trigger Key | Naive Tag |
|---|---|---|
| 1. | nava | <n-avatar> |
| 2. | nb | <n-button> |
| 3. | nbg | <n-button-group> |
| 4. | ncard | <n-card> |
| 5. | ncolla | <n-collapse> |
| 6. | ncollai | <n-collapse-item> |
| 7. | ndiv | <n-divider> |
| 8. | ndro | <n-dropdown> |
| 9. | nel | <n-ellipsis> |
| 10. | ngt | <n-ellipsis> |
| 11. | nic | <n-icon> |
| 12. | nta | <n-tag> |
| 13. | nau | <n-auto-complete> |
| 14. | ncas | <n-cascader> |
| 15. | ncp | <n-color-picker> |
| 16. | nc | <n-checkbox> |
| 17. | ncg | <n-checkbox-group> |
| 18. | ndp | <n-date-picker> |
| 19. | ndyi | <n-dynamic-input> |
| 20. | ndyt | <n-dynamic-tags> |
| 21. | nf | <n-form> |
| 22. | nipt | <n-input> |
| 23. | niptn | <n-input-number> |
| 24. | nmen | <n-mention> |
| 25. | nr | <n-radio> |
| 26. | nrg | <n-radio-group> |
| 27. | nra | <n-rate> |
| 28. | nsel | <n-select> |
| 29. | nsl | <n-slider> |
| 30. | nsw | <n-switch> |
| 31. | ntp | <n-time-picker> |
| 32. | ntr | <n-transfer> |
| 33. | nup | <n-upload> |
| 34. | ncal | <n-calendar> |
| 35. | ndt | <n-data-table> |
| 36. | ndes | <n-descriptions> |
| 37. | nemp | <n-empty> |
| 38. | nim | <n-image> |
| 39. | nimg | <n-image-group> |
| 40. | nl | <n-list> |
| 41. | nli | <n-list-item> |
| 42. | nsta | <n-statistic> |
| 43. | nt | <n-table> |
| 44. | nth | <n-thing> |
| 45. | ntim | <n-time> |
| 46. | ntl | <n-timeline> |
| 47. | ntli | <n-timeline-item> |
| 48. | ntree | <n-tree> |
| 49. | naf | <n-affix> |
| 50. | nan | <n-anchor> |
| 51. | nbt | <n-back-top> |
| 52. | nbr | <n-breadcrumb> |
| 53. | nm | <n-menu> |
| 54. | np | <n-pagination> |
| 55. | nst | <n-steps> |
| 56. | ntabs | <n-tabs> |
| 57. | ntabp | <n-tab-pane> |
| 58. | nal | <n-alert> |
| 59. | nba | <n-badge> |
| 60. | ndr | <n-drawer> |
| 61. | nmo | <n-modal> |
| 62. | npopc | <n-popconfirm> |
| 63. | npopo | <n-popover> |
| 64. | npops | <n-popselect> |
| 65. | npro | <n-progress> |
| 66. | nres | <n-result> |
| 67. | nsk | <n-skeleton> |
| 68. | nsp | <n-spin> |
| 69. | nto | <n-tooltip> |
| 70. | nla | <n-layout> |
| 71. | ngr | <n-grid> |
| 72. | ngri | <n-grid-item> |
| 73. | ns | <n-space> |
| 74. | nload | <n-loading-bar-provider> |
| 75. | ndi | <n-dialog-provider> |
| 76. | nmes | <n-message-provider> |
| 77. | nno | <n-nofitication-provider> |
| 78. | nco | <n-config-provider> |