Wot Design Snippets for Visual Studio Code
This extension adds Wot Design Code Snippets and Syntax Highlight into Visual Studio Code.
本代码片段搜集了 Wot Design 的代码片段，详细清单请参考下文列表。
Wot Design 组件
基础组件
| Prefix | Snippet Content |
|---|---|
wd-badge with type |
<wd-badge :value="|value" :max="|99" type="|[primary,warning,success,danger,info]">${TM_SELECTED_TEXT: |<wd-button size="small">评论</wd-button>}</wd-badge> |
wd-badge with bg-color |
<wd-badge :value="|value" :max="|99" bg-color="|pink">${TM_SELECTED_TEXT: |<wd-button size="small">回复</wd-button>}</wd-badge> |
wd-badge use dot |
<wd-badge is-dot> ${TM_SELECTED_TEXT: |<wd-button size="small">数据查询</wd-button>}</wd-badge> |
wd-button |
<wd-button type="|[primary,success,info,warning,error,text,icon]" size="|[small,medium,large]">${TM_SELECTED_TEXT: |按钮文字}</wd-button> |
wd-button disabled |
<wd-button disabled>${TM_SELECTED_TEXT:|按钮文字}</wd-button> |
wd-button plain |
<wd-button plain> ${TM_SELECTED_TEXT: |幽灵按钮}</wd-button> |
wd-button loading |
<wd-button loading> ${TM_SELECTED_TEXT: |加载中}</wd-button> |
wd-button text |
<wd-button type="text">${TM_SELECTED_TEXT:|按钮文字}</wd-button> |
wd-button icon |
<wd-button icon="|[arrow-thin-up,arrow-thin-down,arrow-right,arrow-down,arrow-up,arrow-left,fill-camera,clock,computer,eye-close,view,translate,download,picture,evaluation,goods,lenovo,list,note,video,warning,setting,camera,chat,delete-thin,add-circle,add,scan,translate-bold,close,search,delete,more,thin-arrow-left,filter,phone,refresh,check,phone-compute,transfer,keywords,star-on,check-bold,error-fill,warn-bold,close-outline,close-bold,check-outline,wifi-error,subscribe,detection,read,fill-arrow-down,dong,edit-outline,copy,bags,decrease,jdm,spool]">|按钮文字</wd-button> |
wd-button block |
<wd-button block>|块状按钮</wd-button> |
wd-icon |
<wd-icon size="|20px" color="|#0083ff" name="|[arrow-thin-up,arrow-thin-down,arrow-right,arrow-down,arrow-up,arrow-left,fill-camera,clock,computer,eye-close,view,translate,download,picture,evaluation,goods,lenovo,list,note,video,warning,setting,camera,chat,delete-thin,add-circle,add,scan,translate-bold,close,search,delete,more,thin-arrow-left,filter,phone,refresh,check,phone-compute,transfer,keywords,star-on,check-bold,error-fill,warn-bold,close-outline,close-bold,check-outline,wifi-error,subscribe,detection,read,fill-arrow-down,dong,edit-outline,copy,bags,decrease,jdm,spool]">|按钮文字</wd-icon> |
wd-icon with tag |
<wd-icon size="|20px" color="|#0083ff" tag="|div" name="|[arrow-thin-up,arrow-thin-down,arrow-right,arrow-down,arrow-up,arrow-left,fill-camera,clock,computer,eye-close,view,translate,download,picture,evaluation,goods,lenovo,list,note,video,warning,setting,camera,chat,delete-thin,add-circle,add,scan,translate-bold,close,search,delete,more,thin-arrow-left,filter,phone,refresh,check,phone-compute,transfer,keywords,star-on,check-bold,error-fill,warn-bold,close-outline,close-bold,check-outline,wifi-error,subscribe,detection,read,fill-arrow-down,dong,edit-outline,copy,bags,decrease,jdm,spool]">|按钮文字</wd-icon> |
wd-icon i |
<i class="|[arrow-thin-up,arrow-thin-down,arrow-right,arrow-down,arrow-up,arrow-left,fill-camera,clock,computer,eye-close,view,translate,download,picture,evaluation,goods,lenovo,list,note,video,warning,setting,camera,chat,delete-thin,add-circle,add,scan,translate-bold,close,search,delete,more,thin-arrow-left,filter,phone,refresh,check,phone-compute,transfer,keywords,star-on,check-bold,error-fill,warn-bold,close-outline,close-bold,check-outline,wifi-error,subscribe,detection,read,fill-arrow-down,dong,edit-outline,copy,bags,decrease,jdm,spool]">|按钮文字</i> |
wd-popup basic |
<wd-popup v-model="|show" :style="{ 'padding': '|30px |40px' }">${TM_SELECTED_TEXT: |内容}</wd-popup> |
wd-popup position |
<wd-popup v-model="|show" position="|[top,right,bottom,left]" :style="{ 'height': '|200px' }" |closable>${TM_SELECTED_TEXT: |内容}</wd-popup> |
导航组件
| Prefix | Snippet Content |
|---|---|
wd-action-sheet |
<wd-action-sheet /> |
表单组件
| Prefix | Snippet Content |
|---|---|
wd-checkbox |
<wd-checkbox /> |
交互组件
| Prefix | Snippet Content |
|---|---|
wd-action-sheet |
<wd-action-sheet /> |
展示组件
| Prefix | Snippet Content |
|---|---|
wd-card |
<wd-card /> |
License
MIT