FrontUI Snippets

---

FrontUI 代码片段。

下载代码片段

• JetBrains 系列编辑器（WebStorm、IntelliJ IDEA 等） 配置文件 jar
• JetBrains 系列编辑器（WebStorm、IntelliJ IDEA 等） XML 文件
• Sublime Text

安装

• 现目前还没有添加到官方插件中使用如下：

• Sublime Text 2/3：打开 Preferences > Browse Packages，在 Browse Packages 下创建 frontui 目录，把从上面下载的 Sublime 代码片段解压得到的文件复制创建好的 frontui 目录下。

• JetBrains 系列编辑器（WebStorm 等）：

  • 方式一：下载 jar 文件（上面第一个链接），点击编辑器菜单 File -> Import Settings...，选择刚才下载的 jar，点击 OK，编辑器会提示重启，重启以后导入完成。

  • 方式二：把下载解压得到的 frontui.xml 拷贝到 IDE 配置文件 templates 目录下（如果 templates 文件夹不存在，则需要手动创建），重启编辑器：

    • Windows: %USERPROFILE%/\.<产品名称><版本号>\config\templates，例如 WebStorm 9 的模板配置目录为 %USERPROFILE%/.WebStorm9/config/templates
    • Linux: ~\.<产品名称><版本号>\config\templates
    • OS X: ~/Library/Preferences/<产品名称><版本号>/templates，例如 WebStorm 10 的模板配置目录为 ~/Library/Preferences/WebStorm10/templates； PHPStorm 9 的路径为 ~/Library/Preferences/WebIde90/templates

  • 方式三：打开 Preferences > Live Templates 增加 frontui 代码片段，把下载解压得到的 frontui.xml 拷贝到 Live Templates 你自定义的代码片段下；

CSS 代码片段目录

bower

组件	代码片段
bower 链接 (both CSS & JS)	fu-bower
bower 链接 (CSS only)	fu-bower:css
bower 链接 (JS only)	fu-bower:js

HTML

组件	代码片段
HTML5 布局模板	fu-html

Form 表单

组件	代码片段
基础表单	fu-form
灰色背景	fu-form:gray

Table 表格

组件	代码片段
基础表格	fu-table
反色表格	fu-table:inverse

Breadcrumb 面包屑导航

组件	代码片段
基础面包屑	fu-breadcrumb

Nav 导航

组件	代码片段
基本样式	fu-nav

Pagination 分页

组件	代码片段
基本样式	fu-page
居中对齐	fu-page:center
右对齐	fu-page:right
左对齐	fu-page:left

amount 可提金额

组件	代码片段
基本样式	fu-amount

bankList 个人银行列表

组件	代码片段
基本样式	fu-bankList

ebanks 支付银行列表

组件	代码片段
基本样式	fu-ebanks

chart 图表

组件	代码片段
基本样式	fu-chart
带title图表	fu-chart:title

datacount 统计数据

组件	代码片段
基本样式	fu-datacount

filter 过滤器

组件	代码片段
基本样式	fu-filter

formtable 表单内表格

组件	代码片段
基本样式	fu-formtable

input 输入框

组件	代码片段
基本样式	fu-input
带弹框icon	fu-input:modal
带日期icon	fu-input:date
带验证按钮	fu-input:verify
带可提取按钮	fu-input:draw
小按钮	fu-input:smallsize

select 下拉框

组件	代码片段
基本样式	fu-select
可输入	fu-select:input

notice 提示框

组件	代码片段
基本样式	fu-notice
成功样式	fu-notice:success
信息样式	fu-notice:info
错误样式	fu-notice:error
等待样式	fu-notice:waiting
弹层成功样式	fu-notice:modal-success
弹层信息样式	fu-notice:modal-info
弹层错误样式	fu-notice:modal-error
弹层等待样式	fu-notice:modal-waiting

pawset 密码设置表格

组件	代码片段
基本样式	fu-pwdset

step 步骤

组件	代码片段
基本样式	fu-step
第一步	fu-step:pass1
第二步	fu-step:pass2
第三步	fu-step:pass3

JS 代码片段目录

Alert 警告框

组件	代码片段
基本样式	fu-alert
颜色: success	fu-alert:success
颜色: warning	fu-alert:warning
颜色: danger	fu-alert:danger

Modal 模态窗口

组件	代码片段
基本样式	fu-modal

Tabs 选项卡

组件	代码片段
基本样式	fu-tab
带搜索框	fu-tab:search
第二种	fu-tab:type2