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 title="|卡片标题">
${TM_SELECTED_TEXT:|卡片内容}
</wd-card>
|
wd-card rectangle |
<wd-card type="rectangle">
${TM_SELECTED_TEXT:|卡片内容}
</wd-card>
|
wd-collapse |
<wd-collapse v-model="|value">
<wd-collapse-item title="|折叠栏的标题" name="|折叠栏的标识符">
${TM_SELECTED_TEXT:|折叠栏内容}
</wd-collapse-item>
</wd-collapse>
|
wd-collapse accordion |
<wd-collapse v-model="|value" accordion>
<wd-collapse-item title="|折叠栏的标题" name="|折叠栏的标识符">
${TM_SELECTED_TEXT:|折叠栏内容}
</wd-collapse-item>
</wd-collapse>
|
wd-collapse disabled |
<wd-collapse v-model="|value">
<wd-collapse-item title="|折叠栏的标题" name="|折叠栏的标识符" disabled>
${TM_SELECTED_TEXT:|折叠栏内容}
</wd-collapse-item>
</wd-collapse>
|
wd-collapse viewmore |
<wd-collapse viewmore v-model="|value">
${TM_SELECTED_TEXT:|折叠栏内容}
</wd-collapse>
|
wd-curtain |
<wd-curtain v-model="|true" src="|" to="|"></wd-curtain>
|
wd-curtain width |
<wd-curtain v-model="|true" src="|" to="|" width="|280px"></wd-curtain>
|
wd-curtain close-position |
<wd-curtain v-model="|true" src="|" to="|" close-position="|[inset, top, bottom, bottom, top-left, top-right, bottom-left, bottom-right]"></wd-curtain>
|
wd-curtain close-on-click-modal |
<wd-curtain v-model="|true" src="|" to="|" close-position="|[true, false]"></wd-curtain>
|
wd-divider |
<wd-divider></wd-divider>
|
wd-img |
<wd-img width="|100" height="|100" src="|"/>
|
wd-img fit |
<wd-img width="|100" height="|100" src="|" fit="|[contain, cover, fill, none, scale-down]"/>
|
wd-img round |
<wd-img width="|100" height="|100" src="|" round/>
|
wd-img lazy |
<wd-img v-lazy="|"/>
|
wd-img-preview |
<wd-img-preview v-model="|true" :urls="|" @open="|" @close="|" :on-long-tap="|" ></wd-img-preview>
|
wd-notice-bar |
<wd-notice-bar text="${TM_SELECTED_TEXT:|提示消息内容}" prefix="|[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-notice-bar>
|
wd-notice-bar type |
<wd-notice-bar text="${TM_SELECTED_TEXT:|提示消息内容}" prefix="|[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]" type="|[info, warning, danger]"></wd-notice-bar>
|
wd-notice-bar scrollable |
<wd-notice-bar text="${TM_SELECTED_TEXT:|提示消息内容}" :scrollable="|[false,true]"></wd-notice-bar>
|
wd-notice-bar slot |
<wd-notice-bar>
<div slot="prefix">|前置插槽</div>
|提示消息内容
<div slot="suffix">|后置插槽</div>
</wd-notice-bar>
|
wd-notice-bar closable |
<wd-notice-bar text="${TM_SELECTED_TEXT:|提示消息内容}" closable></wd-notice-bar>
|
wd-notice-bar color |
<wd-notice-bar text="${TM_SELECTED_TEXT:|提示消息内容}" color="|#34D19D" background-color="|#f0f9eb" ></wd-notice-bar>
|
wd-popover |
<wd-popover content="${TM_SELECTED_TEXT:|气泡消息内容}">
<wd-button>|点击展示</wd-button>
</wd-popover>
|
wd-popover mode |
<wd-popover mode="|[normal, menu]" :content="|" @menu-click="|">
<wd-button>|点击展示</wd-button>
</wd-popover>
|
wd-progress |
<wd-progress :percentage="|30"></wd-progress>
|
wd-progress hide-text |
<wd-progress :percentage="|30" hide-text></wd-progress>
|
wd-progress status |
<wd-progress :percentage="|30" hide-text status="|[success,danger]"></wd-progress>
|
wd-progress color |
<wd-progress :percentage="|30" color="|#00c740"></wd-progress>
|
wd-status-tip |
<wd-status-tip type="|[search, network, content, collect, comment, halo, message]" tip="${TM_SELECTED_TEXT:|提示文案}"/>
|
wd-sort-button |
<wd-sort-button v-model="|value" title="|排序按钮展示文案"/>
|
wd-sort-button allow-reset |
<wd-sort-button v-model="|value" title="|排序按钮展示文案" allow-reset/>
|
wd-sort-button desc-first |
<wd-sort-button v-model="|value" title="|排序按钮展示文案" desc-first/>
|
wd-steps |
<wd-steps :active="|0">
<wd-step></wd-step>
<wd-step></wd-step>
<wd-step></wd-step>
</wd-steps>
|
wd-steps align-center |
<wd-steps :active="|0" align-center>
<wd-step></wd-step>
<wd-step></wd-step>
<wd-step></wd-step>
</wd-steps>
|
wd-steps title description |
<wd-steps :active="|0" align-center>
<wd-step title="|步骤标题" description="|描述信息"></wd-step>
</wd-steps>
|
wd-steps icon |
<wd-steps :active="|0" align-center>
<wd-step icon="wd-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]" type="|[info, warning, danger]}"></wd-step>
</wd-steps>
|
wd-steps vertical |
<wd-steps :active="|0" vertical>
<wd-step description="|描述信息"></wd-step>
</wd-steps>
|
wd-steps dot |
<wd-steps :active="|0" align-center dot>
<wd-step description="|描述信息"></wd-step>
</wd-steps>
|
wd-steps status |
<wd-steps :active="|0" align-center>
<wd-step title="|步骤标题" status="|[finished, process, error]"></wd-step>
</wd-steps>
|
Sticky |
<Sticky>
<p>${TM_SELECTED_TEXT:|内容}</p>
</Sticky>
|
Sticky offset-top |
<Sticky :offset-top="|44">
<p>${TM_SELECTED_TEXT:|内容}</p>
</Sticky>
|
wd-tag |
<wd-tag>${TM_SELECTED_TEXT:|标签内容}</wd-tag>
|
wd-tag type |
<wd-tag type="|[primary, danger, warning, success]">${TM_SELECTED_TEXT:|标签内容}</wd-tag>
|
wd-tag plain |
<wd-tag plain>${TM_SELECTED_TEXT:|标签内容}</wd-tag>
|
wd-tag mark |
<wd-tag mark>${TM_SELECTED_TEXT:|标签内容}</wd-tag>
|
wd-tag round |
<wd-tag round>${TM_SELECTED_TEXT:|标签内容}</wd-tag>
|
wd-tag icon |
<wd-tag icon="wd-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]" type="|[info, warning, danger]" mark>${TM_SELECTED_TEXT:|标签内容}</wd-tag>
|
wd-tag color |
<wd-tag color="|#0083ff" bg-color="|#d0e8ff">${TM_SELECTED_TEXT:|标签内容}</wd-tag>
|
wd-tag closable |
<wd-tag v-if=="|true" closable round @close="|">${TM_SELECTED_TEXT:|标签内容}</wd-tag>
|
wd-tag dynamic |
<wd-tag dynamic round></wd-tag>
|
wd-tooltip |
<wd-tooltip placement="|[top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end]" content="|提示内容">
<wd-button>|top</wd-button>
</wd-tooltip>
|
wd-tooltip show-close |
<wd-tooltip content="|提示内容" show-close>
<wd-button>|关闭</wd-button>
</wd-tooltip>
|
wd-tooltip content |
<wd-tooltip placement="|[top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end]">
<div slot="content">
<div>|多行文本</div>
</div>
<wd-button>|多行文本</wd-button>
</wd-tooltip>
|
License
MIT
| |
