Zywave User Interface Snippets 0.0.2

Zywave 用户界面 (ZUI) 片段是一款专为 Visual Studio Code 设计的扩展插件，旨在帮助开发者在 Vue 文件中快速插入 zui-components 的 HTML 代码片段。即使 ZUI 本身不直接支持 Vue，您也可以通过使用事件来替代 v-model，借助这些片段快速设置组件。

使用方法：

• 基础使用： 安装后，只需在 HTML 中输入您要使用的组件前缀，如 <zui-button 或 zui-button，然后按下 TAB 或 ENTER 键，即可自动生成相应的 HTML 代码，并可能包含可应用于该组件的绑定或类。

• 大型组件： 当生成较大的包装组件时，可能会生成更多的内部组件以展示其全部功能。例如，生成 <zui-radio-group> 时会自动生成子 <zui-radio> 组件。尝试生成 <zui-shell> 以体验这一功能。

• 组件变体： 您还可以生成组件的变体，这些变体会包含某些通常不会包含的属性、绑定或组件。例如，<button:icon-left> 会生成带有左侧图标的按钮。

片段索引：

在 Vue 文件中编写 HTML 时，VSCode 会根据您输入的前缀来建议相应的片段。以下是一些常用前缀及其对应的基础组件：

• <zui-button, zui-button：生成基本的 zui-button 组件。
• <zui-button:disabled, zui-button:disabled：生成禁用的 zui-button 组件。
• <zui-button:icon-right, zui-button:icon-right：生成带有右侧图标的 zui-button 组件。
• <zui-button:icon-left, zui-button:icon-left：生成带有左侧图标的 zui-button 组件。
• <zui-button:icon-only, zui-button:icon-only：生成仅包含图标的 zui-button 组件。
• <zui-button:svg, zui-button:svg：生成仅包含 SVG 的 zui-button 组件。
• <zui-card, zui-card：生成包含头部和尾部的 zui-card 组件。
• <zui-icon, zui-icon：生成包含所有可选图标类型的 zui-icon 组件。
• <zui-checkbox, zui-checkbox：生成基本的 zui-checkbox 组件。
• <zui-checkbox:gallery, zui-checkbox:gallery：生成画廊风格的 zui-checkbox 组件。
• <zui-dialog, zui-dialog：生成包含可用类、头部、内容和尾部的 zui-dialog 组件。
• <zui-pager, zui-pager：生成基本的 zui-pager 组件。
• <zui-pages, zui-pages：生成基本的 zui-pages 组件。
• <zui-radio, zui-radio：生成基本的 zui-radio 组件。
• <zui-radio-group, zui-radio-group：生成包含单选按钮的 zui-radio-group 组件。
• <zui-radio-group:boolean, zui-radio-group:boolean：生成用于绑定布尔值的完整 zui-radio-group 组件。
• <zui-shell, zui-shell：尝试生成完整的 zui-shell 组件设置。
• <zui-shell-nav, zui-shell-nav：生成包含内部 shell 组件的 zui-shell-nav 组件。
• <zui-shell-nav-item, zui-shell-nav-item：生成基本的 zui-shell-nav-item 组件。
• <zui-shell-nav-item:subnav, zui-shell-nav-item:subnav：生成子导航菜单设置。
• <zui-search, zui-search：生成基本的 zui-search 组件。
• <zui-spinner, zui-spinner：生成基本的 zui-spinner 组件。
• <zui-spinner-overlay, zui-spinner-overlay：生成基本的 zui-spinner-overlay 组件。
• <zui-tab, zui-tab：生成基本的 zui-tab 组件。
• <zui-tabs, zui-tabs：生成包含单个标签的完整 zui-tabs 组件设置。

通过 Zywave 用户界面片段，您可以大幅提升在 Vue 项目中使用 ZUI 组件的开发效率。无论是基础组件还是复杂的组件设置，都能通过简单的前缀输入快速生成，节省您的时间和精力。