Skip to content

M
mui
Commit a31a2740 authored by hbcui1984's avatar hbcui1984
Browse files
Options

更新mui代码块

parent a96e939a
Show whitespace changes
Inline Side-by-side
Showing with 588 additions and 419 deletions
mui_snippets.rb 0 → 100644
View file @ a31a2740
require 'ruble'
=begin
HBuilder可使用ruby脚本来扩展代码块和增强操作命令。这是极客的神奇玩具。
本文档用于用户自定义HTML扩展命令，并非HBuilder预置命令的文档，预置的代码块不可改。查阅预置代码块，请在弹出预置代码块界面时点右下角的编辑按钮，比如div代码块。
本文档修改完毕，保存即可生效。
玩的愉快，别玩坏！
脚本开源地址 https://github.com/dcloudio/HBuilderRubyBundle
可以把你的配置共享到这里，也可以在这里获取其他网友的版本
注：如果1.9版本之前的用户修改过HTML代码块，请点右键打开本文档所在目录，找之前的snippets.rb.bak文件，把修改过的内容放置进来。
=end
with_defaults :scope => 'text.html text' do |bundle| #=====HTML标签代码块================================================================================
#如下是一个示例代码块，可以复制后再添加新代码块
snippet 'div_class' do |cmd| #div_class是显示名称，代码助手提示列表显示时可见
cmd.trigger = 'divc' #divc是激活字符，即按下divc后会触发该代码块
cmd.expansion = "<div class=\"$1\">
$0
</div>" #expansion是代码块的输出内容，其中$0、$1是光标的停留和切换位置。$1是第一个停留光标，$0是最后回车时停留的光标。
#如果输出涉及到换行和tab，也需严格在这里使用换行和tab。
#输出双引号在前面加\来转义，输出$使用\$(单引号中)或\\$(双引号中)转义
cmd.needApplyReContentAssist = true #这句话的意思是输出后同时激活代码助手，即在$1的位置直接拉出样式列表
end #div_class代码块结束
snippet 'ng-pluralize' do |cmd|
cmd.trigger = 'ngp'
cmd.expansion = "<ng-pluralize>$1</ng-pluralize>"
end
end
with_defaults :scope => 'text.html entity.other.attribute-name.html' do |bundle| #=====HTML属性代码块====================================================
#如下是一个示例代码块，可以复制后再添加新代码块
snippet 'ng-' do |s| #ng-是显示名称，代码助手提示列表显示时可见
s.trigger = 'ng-' #ng-是激活字符，即按下ng-后会触发该代码块
s.expansion='ng-${1:app/bind/bind-html/bind-template/blur/change/checked/class/class-even/class-odd/click/cloak/controller/copy/csp/cut/dblclick/disabled/focus/hide/href/if/include/init/keydown/keypress/keyup/list/model/mousedown/mouseenter/mouseleave/mousemove/mouseover/mouseup/ng-non-bindable/open/options/paste/readonly/repeat-start/repeat-end/selected/show/src/srcset/style/submit/swipe-left/swipe-right/switch/switch-default/switch-when/view}="$2"'
#expansion是代码块的输出内容，其中$0、$1是光标的停留和切换位置。
#$1是第一个停留光标，$0是最后回车时停留的光标。
#使用{}包围的内容，是提示值域。
#如果输出涉及到换行和tab，也需严格在这里使用换行和tab。
#输出双引号在前面加\来转义，输出$使用\$(单引号中)或\\$(双引号中)转义
s.locationType='HTML_ATTRIBUTE'
end #ng代码块结束
end
with_defaults :scope => 'text.html - source', :input => :none, :output => :insert_as_snippet do |bundle| #=====无显示名称的快捷命令=======================
=begin
如下示例均为系统已经预置的命令，无需重复制作
示例1 Ctrl+Enter输出<br />
command t(:quick_br) do |cmd|
cmd.key_binding = 'M2+ENTER'
cmd.output = :insert_as_snippet
cmd.input = :none
cmd.invoke { "<br />" }
end
示例2 Ctrl+9为选中文字添加包围标签
command t(:wrap_selection_in_tag_pair) do |cmd|
cmd.key_binding = "CONTROL+9"
cmd.input = :selection
cmd.invoke do |context|
selection = ENV['TM_SELECTED_TEXT'] || ''
if selection.length > 0
"<${1:p}>#{selection.gsub('/', '\/')}</${1:p}>"
else
"<${1:p}>$0</${1:p}>"
end
end
end
=end
#可复制一段命令，在下面开始制作新命令
snippet 'mBody(主体)' do |cmd|
cmd.trigger = 'mbody'
cmd.expansion = '<div class="mui-content">
$0
</div>'
end
snippet 'mCheckbox(复选框)' do |cmd|
cmd.trigger = 'mcheckbox'
cmd.expansion = "<div class=\"mui-input-row mui-checkbox \">
<label>${1:Checkbox}</label>
<input name=\"${3:Checkbox}\" type=\"checkbox\" ${2:checked}>
</div>
$0"
end
snippet 'mCheckbox(复选框居左)' do |cmd|
cmd.trigger = 'mcheckbox'
cmd.expansion = "<div class=\"mui-input-row mui-checkbox mui-left\">
<label>${1:checkbox左侧显示示例}</label>
<input name=\"${3:checkbox1}\" value=\"Item 1\" type=\"checkbox\" ${2:checked} >
</div>
$0"
end
snippet 'mCheckbox(复选框禁用选项)' do |cmd|
cmd.trigger = 'mcheckbox'
cmd.expansion = "<div class=\"mui-input-row mui-checkbox mui-left mui-disabled\">
<label>${1:disabled checkbox}</label>
<input name=\"checkbox\" type=\"checkbox\" ${2:disabled=\"disabled\"}>
</div>
$0"
end
snippet 'mHeader(标题栏)' do |cmd|
cmd.trigger = 'mheader'
cmd.expansion = '<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">${1:标题}</h1>
</header>
$0'
end
snippet 'mHeader(带返回箭头的标题栏)' do |cmd|
cmd.trigger = 'mheaderwithBack'
cmd.expansion = '<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"><\/a>
<h1 class="mui-title">${1:标题}</h1>
</header>
$0'
end
snippet 'mText(文本框)' do |cmd|
cmd.trigger = 'minputtext'
cmd.needApplyReContentAssist = true
cmd.expansion = "<div class=\"mui-input-row\">
<label>${3:Input}</label>
<input type=\"${1:text}\" placeholder=\"${2:普通输入框}\">
</div>
$0"
end
snippet 'mText_Search(搜索框)' do |cmd|
cmd.trigger = 'minputsearch'
cmd.expansion = "<div class=\"mui-input-row mui-search\">
<input type=\"search\" class=\"mui-input-clear\" placeholder=\"$1\">
</div>
$0"
end
snippet 'mText_Clear(带清除按钮的文本框)' do |cmd|
cmd.trigger = 'minputclear'
cmd.expansion = "<div class=\"mui-input-row\">
<label>Input</label>
<input type=\"text\" class=\"mui-input-clear\" placeholder=\"${1:带清除按钮的输入框}\">
</div>
$0"
end
snippet 'mText_Speech(语音输入)' do |cmd|
cmd.trigger = 'minputspeech'
cmd.expansion = "<div class=\"mui-input-row\">
<label>${2:Input}</label>
<input type=\"text\" class=\"mui-input-speech mui-input-clear\" placeholder=\"${1:语音输入}\">
</div>
$0"
end
snippet 'mForm(表单)' do |cmd|
cmd.trigger = 'mform'
cmd.needApplyReContentAssist = true
cmd.expansion = "<form class=\"mui-input-group\">
<div class=\"mui-input-row\">
<label>${3:input}</label>
<input type=\"${1:text}\" class=\"${2:mui-input-clear}\" placeholder=\"${3:请输入}\">
</div>
</form>$0"
end
snippet 'mRadio(单选框)' do |cmd|
cmd.trigger = 'mradio'
cmd.expansion = "<div class=\"mui-input-row mui-radio \">
<label>${1:Radio}</label>
<input name=\"$2\" type=\"radio\" ${3:checked}>
</div>$0"
end
snippet 'mPopover(弹出菜单)' do |cmd|
cmd.trigger = 'mpopover'
cmd.expansion = '<div class="mui-popover">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">${1:Item1}</a></li>
<li class="mui-table-view-cell"><a href="#">${2:Item2}</a></li>
<li class="mui-table-view-cell"><a href="#">${3:Item3}</a></li>
</ul>
</div>$0'
end
snippet 'mPopover(H5模式弹出菜单)' do |cmd|
cmd.trigger = 'mactionsheet'
cmd.expansion = '<div class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">${1:Item1}</a></li>
<li class="mui-table-view-cell"><a href="#">${2:Item2}</a></li>
<li class="mui-table-view-cell"><a href="#">${3:Item3}</a></li>
</ul>
</div>$0'
end
snippet 'mRange(label+输入框+滑块)' do |cmd|
cmd.trigger = 'mrangeinput'
cmd.expansion = "<h5>label+输入框+滑块：</h5>
<div class=\"mui-input-row mui-input-range field-contain\">
<div style=\"float:left\">
<label >${4:滑块：}</label>
<input type=\"text\" id=\'field-range-input\' value=\'${1:60}\'>
</div>
<div style=\"margin-left:121px;\">
<input type=\"range\" id=\'field-range\' value=\"${1:60}\" min=\"${2:0}\" max=\"${3:100}\" />
</div>
</div> $0"
end
snippet 'mRange(Label+滑块)' do |cmd|
cmd.trigger = 'mrangelabel'
cmd.expansion = "<h5>label+滑块：<span id=\'inline-range-val\'>${1:20}</span></h5>
<div class=\"mui-input-row mui-input-range\">
<label>${4:滑块：}</label>
<input type=\"range\" id='inline-range' value=\"${1:20}\" min=\"${2:0}\" max=\"${3:100}\" >
</div>$0"
end
snippet 'mRange(整行滑块)' do |cmd|
cmd.trigger = 'mrangeline'
cmd.expansion = "<h5 style=\"clear: left;\">${4:整行滑块：}<span id=\'block-range-val\'>${1:50}</span></h5>
<div class=\"mui-input-row mui-input-range\">
<input type=\"range\" id=\'block-range\' value=\"${1:50}\" min=\"${2:0}\" max=\"${3:100}\" >
</div>$0"
end
snippet 'mSwitch(开关)' do |cmd|
cmd.trigger = 'mswitch'
cmd.expansion = "<div class=\"mui-input-row\">
<label>${2:Switch}</label>
<div class=\"mui-switch${1: mui-active}\">
<div class=\"mui-switch-handle\"></div>
</div>
</div>$0"
end
snippet 'mSwitch(开关Mini)' do |cmd|
cmd.trigger = 'mswitchmini'
cmd.expansion = "<div class=\"mui-switch mui-switch-mini${1: mui-active}\">
<div class=\"mui-switch-handle\"></div>
</div>"
end
snippet 'mbadge（数字角标）' do |cmd|
cmd.trigger = 'mbadge'
cmd.expansion = "<span class=\"mui-badge ${1:mui-btn-blue/mui-btn-green/mui-btn-yellow/mui-btn-red/mui-btn-purple/mui-btn-grey}\">${2:1}</span>$0"
end
snippet 'mbadge（数字角标无底色）' do |cmd|
cmd.trigger = 'mbadge_inverted'
cmd.expansion = "<span class=\"mui-badge mui-badge-inverted ${1:mui-btn-blue/mui-btn-green/mui-btn-yellow/mui-btn-red/mui-btn-purple/mui-btn-grey}\">${2:1}</span>$0"
end
snippet 'mTab(底部选项卡)' do |cmd|
cmd.trigger = 'mtab'
cmd.expansion = "<nav class=\"mui-bar mui-bar-tab\">
<a class=\"mui-tab-item mui-active\">
<span class=\"mui-icon mui-icon-home\"></span>
<span class=\"mui-tab-label\">${1:首页}</span>
</a>
<a class=\"mui-tab-item\">
<span class=\"mui-icon mui-icon-phone\"></span>
<span class=\"mui-tab-label\">${2:电话}</span>
</a>
<a class=\"mui-tab-item\">
<span class=\"mui-icon mui-icon-email\"></span>
<span class=\"mui-tab-label\">${3:邮件}</span>
</a>
<a class=\"mui-tab-item\">
<span class=\"mui-icon mui-icon-gear\"></span>
<span class=\"mui-tab-label\">${4:设置}</span>
</a>
</nav>$0"
end
snippet 'mTabSegmented(div选项卡)' do |cmd|
cmd.trigger = 'mtabsegmented'
cmd.expansion = "<div class=\"mui-segmented-control\">
<a class=\"mui-control-item mui-active\" href=\"#item1\">${1:选项卡1}</a>
<a class=\"mui-control-item\" href=\"#item2\">${1:选项卡2}</a>
</div>$0"
end
snippet 'mTabSegmented(可左右拖动的选项卡)' do |cmd|
cmd.trigger = 'mtabviewpage'
cmd.expansion = '<div class="mui-slider">
<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#item1">${1:选项卡1}</a>
<a class="mui-control-item" href="#item2">${2:选项卡2}</a>
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
<div class="mui-slider-group">
<div id="item1" class="mui-slider-item mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell">${3:第1个选项卡子项}</li>
<li class="mui-table-view-cell">${4:第1个选项卡子项}</li>
</ul>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">${5:第2个选项卡子项}</li>
<li class="mui-table-view-cell">${6:第2个选项卡子项}</li>
</ul>
</div>
</div>
</div>$0'
end
snippet 'mPagination(分页)' do |cmd|
cmd.trigger = 'mpagination'
cmd.expansion = "<ul class=\"mui-pagination\">
<li class=\"mui-disabled\">
<span> &laquo; </span>
</li>
<li class=\"mui-active\">
<a href=\"#\">${1:1}</a>
</li>
<li>
<a href=\"#\">${2:2}</a>
</li>
<li>
<a href=\"#\">&raquo;</a>
</li>
</ul>$0"
end
snippet 'mList(列表)' do |cmd|
cmd.trigger = 'mlist'
cmd.expansion = "<div class=\"mui-card\">
<ul class=\"mui-table-view\">
<li class=\"mui-table-view-cell\">
<a class=\"mui-navigate-right\">
${1:Item 1}
</a>
</li>
<li class=\"mui-table-view-cell\">
<a class=\"mui-navigate-right\">
${2:Item 2}
</a>
</li>
<li class=\"mui-table-view-cell\">
<a class=\"mui-navigate-right\">
${3:Item 3}
</a>
</li>
</ul>
</div>$0"
end
snippet 'mListMedia(图文列表图片居左)' do |cmd|
cmd.trigger = 'mlist_Media_left'
cmd.needApplyReContentAssist = true
cmd.expansion = "<ul class=\"mui-table-view\">
<li class=\"mui-table-view-cell mui-media\">
<a href=\"javascript:;\">
<img class=\"mui-media-object mui-pull-left\" src=\"$1\">
<div class=\"mui-media-body\">
${4:幸福}
<p class=\"mui-ellipsis\">${5:能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？}</p>
</div>
</a>
</li>
<li class=\"mui-table-view-cell mui-media\">
<a href=\"javascript:;\">
<img class=\"mui-media-object mui-pull-left\" src=\"$2\">
<div class=\"mui-media-body\">
${6:木屋}
<p class=\"mui-ellipsis\">${7:想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.}</p>
</div>
</a>
</li>
<li class=\"mui-table-view-cell mui-media\">
<a href=\"javascript:;\">
<img class=\"mui-media-object mui-pull-left\" src=\"$3\">
<div class=\"mui-media-body\">
${8: CBD}
<p class=\"mui-ellipsis\">${9:烤炉模式的城，到黄昏，如同打翻的调色盘一般.}</p>
</div>
</a>
</li>
</ul>$0"
end
snippet 'mListMedia(图文列表图片居右)' do |cmd|
cmd.trigger = 'mlist_Media_right'
cmd.needApplyReContentAssist = true
cmd.expansion = "<ul class=\"mui-table-view\">
<li class=\"mui-table-view-cell mui-media\">
<a href=\"javascript:;\">
<img class=\"mui-media-object mui-pull-right\" src=\"$1\">
<div class=\"mui-media-body\">
${4:幸福}
<p class=\"mui-ellipsis\">${5:能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？}</p>
</div>
</a>
</li>
<li class=\"mui-table-view-cell mui-media\">
<a href=\"javascript:;\">
<img class=\"mui-media-object mui-pull-right\" src=\"$2\">
<div class=\"mui-media-body\">
${6:木屋}
<p class=\"mui-ellipsis\">${7:想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.}</p>
</div>
</a>
</li>
<li class=\"mui-table-view-cell mui-media\">
<a href=\"javascript:;\">
<img class=\"mui-media-object mui-pull-right\" src=\"$3\">
<div class=\"mui-media-body\">
${8: CBD}
<p class=\"mui-ellipsis\">${9:烤炉模式的城，到黄昏，如同打翻的调色盘一般.}</p>
</div>
</a>
</li>
</ul>$0"
end
snippet 'mGrid(九宫格)' do |cmd|
cmd.trigger = 'mgrid'
cmd.expansion = "<div class=\"mui-card\">
<ul class=\"mui-table-view mui-grid-view mui-grid-9\">
<li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\">
<a href=\"#\">
<span class=\"mui-icon mui-icon-home\"></span>
<div class=\"mui-media-body\">${1:Home}</div>
</a>
</li>
<li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\">
<a href=\"#\">
<span class=\"mui-icon mui-icon-email\"><span class=\"mui-badge mui-badge-red\">5</span></span>
<div class=\"mui-media-body\">${2:Email}</div>
</a>
</li>
<li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\">
<a href=\"#\">
<span class=\"mui-icon mui-icon-chatbubble\"></span>
<div class=\"mui-media-body\">${3:Chat}</div>
</a>
</li>
<li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\">
<a href=\"#\">
<span class=\"mui-icon mui-icon-location\"></span>
<div class=\"mui-media-body\">${4:Location}</div>
</a>
</li>
<li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\">
<a href=\"#\">
<span class=\"mui-icon mui-icon-search\"></span>
<div class=\"mui-media-body\">${5:Search}</div>
</a>
</li>
<li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\">
<a href=\"#\">
<span class=\"mui-icon mui-icon-phone\"></span>
<div class=\"mui-media-body\">${6:Phone}</div>
</a>
</li>
</ul>
</div>$0"
end
snippet 'mGallery-Table(图文表格)' do |cmd|
cmd.needApplyReContentAssist = true
cmd.trigger = 'mgallerytable'
cmd.expansion = "<ul class=\"mui-table-view mui-grid-view\">
<li class=\"mui-table-view-cell mui-media mui-col-xs-6\">
<a href=\"#\">
<img class=\"mui-media-object\" src=\"http://placehold.it/400x300\">
<div class=\"mui-media-body\">${1:文字说明1}</div>
</a>
</li>
<li class=\"mui-table-view-cell mui-media mui-col-xs-6\">
<a href=\"#\">
<img class=\"mui-media-object\" src=\"http://placehold.it/400x300\">
<div class=\"mui-media-body\">${2:文字说明2}</div>
</a>
</li>
</ul>$0"
end
snippet 'mGallery图片轮播' do |cmd|
cmd.needApplyReContentAssist = true
cmd.trigger = 'mgallery'
cmd.expansion = "<div class=\"mui-slider\">
<div class=\"mui-slider-group\">
<div class=\"mui-slider-item\">
<a href=\"#\">
<img src=\"$1\">
<p class=\"mui-slider-title\">${3:文字说明1}</p>
</a>
</div>
<div class=\"mui-slider-item\">
<a href=\"#\">
<img src=\"$2\">
<p class=\"mui-slider-title\">${4:文字说明2}</p>
</a>
</div>
</div>
<div class=\"mui-slider-indicator\">
<div class=\"mui-indicator mui-active\"></div>
<div class=\"mui-indicator\"></div>
</div>
</div>$0"
end
snippet 'mactionsheet（操作表）' do |cmd|
cmd.trigger = 'actionsheet'
cmd.expansion = "<div id=\"sheet1\" class=\"mui-popover mui-popover-bottom mui-popover-action \">
<!-- 可选择菜单 -->
<ul class=\"mui-table-view\">
<li class=\"mui-table-view-cell\">
<a href=\"#\">${1菜单1}</a>
</li>
<li class=\"mui-table-view-cell\">
<a href=\"#\">${2菜单2}</a>
</li>
</ul>
<!-- 取消菜单 -->
<ul class=\"mui-table-view\">
<li class=\"mui-table-view-cell\">
<a href=\"#sheet1\"><b>${3取消}</b></a>
</li>
</ul>
</div>$0"
end
snippet 'maccordion（折叠面板）' do |cmd|
cmd.trigger = 'maccordion'
cmd.expansion = '<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">${1:面板1}</a>
<div class="mui-collapse-content">
<p>${2:面板1子内容}</p>
</div>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">${3:面板}</a>
<div class="mui-collapse-content">
<p>${4:面板2子内容}</p>
</div>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">${5:面板3}</a>
<div class="mui-collapse-content">
<p>${6:面板3子内容}</p>
</div>
</li>
</ul>$0'
end
snippet 'mnumbox(数字输入框)' do |cmd|
cmd.trigger = 'mnumbox'
cmd.expansion = "<div class=\"mui-numbox\" data-numbox-step=\'${1:1}\' data-numbox-min=\'${2:0}\' data-numbox-max=\'${3:10}\'>
<button class=\"mui-btn mui-numbox-btn-minus\" type=\"button\">-</button>
<input class=\"mui-numbox-input\" type=\"number\" />
<button class=\"mui-btn mui-numbox-btn-plus\" type=\"button\">+</button>
</div>$0"
end
snippet 'mrefreshContainer(刷新容器)' do |cmd|
cmd.trigger = 'mrefresh'
cmd.expansion = "<!--下拉刷新容器-->
<div id=\"refreshContainer\" class=\"mui-content mui-scroll-wrapper\">
<div class=\"mui-scroll\">
<!--数据列表-->
<ul class=\"mui-table-view mui-table-view-chevron\">
$0
</ul>
</div>
</div>"
end
snippet 'mButton(按钮)' do |cmd|
cmd.trigger = 'mbutton'
cmd.expansion = "<button type=\"button\" class=\"mui-btn ${1:mui-btn-blue/mui-btn-green/mui-btn-yellow/mui-btn-red/mui-btn-purple/mui-btn-grey}\">${2:按钮}</button>$0"
end
snippet 'mButton(按钮无底色,有边框)' do |cmd|
cmd.trigger = 'mbutton_outline'
cmd.expansion = "<button type=\"button\" class=\"mui-btn ${1:mui-btn-blue/mui-btn-green/mui-btn-yellow/mui-btn-red/mui-btn-purple/mui-btn-grey} mui-btn-outlined\">${2:按钮}</button>$0"
end
end
\ No newline at end of file
snippets.rb deleted 100644 → 0
View file @ a96e939a
=begin
本文档是HBuilder预置的mui代码块的文件。注意不要把其他语言的设置放到mui里来。
如果用户修改此文档，HBuilder升级后会覆盖用户的修改，建议进入菜单 工具→扩展代码块 扩展相应的代码块。
若修改本文档，需要重启才能生效。修改过程中注意备份。
脚本开源地址 https://github.com/dcloudio/HBuilderRubyBundle
=end
require 'ruble'
with_defaults :scope => 'text.html text' do |bundle| #=====mui标签代码块================================================================================
=begin
snippet '<!DOCTYPE html>' do |s| #显示名称，代码助手提示列表显示时可见
s.trigger = 'doctype' #激活字符，即按下doctype后会触发该代码块
s.expansion = '<!DOCTYPE HTML>'
#expansion是代码块的输出内容，其中$0、$1是光标的停留和切换位置。$1是第一个停留光标，$0是最后回车时停留的光标。
#如果输出涉及到换行和tab，也需严格在这里使用换行和tab。
#输出双引号在前面加\来转义，输出$使用\$(单引号中)或\\$(双引号中)转义
end
=end
snippet 'mBody' do |cmd|
cmd.trigger = 'mbody'
cmd.expansion = '<div class="mui-content">
$1
</div>'
end
snippet 'mButton' do |cmd|
cmd.trigger = 'mbutton'
cmd.expansion = "<button type=\"button\" class=\"mui-btn\">按钮$1</button>"
end
snippet 'mButton-blue' do |cmd|
cmd.trigger = 'mbuttonblue'
cmd.expansion = "<button type=\"button\" class=\"mui-btn mui-btn-blue\">按钮$1</button>"
end
snippet 'mButton-green' do |cmd|
cmd.trigger = 'mbuttongreen'
cmd.expansion = "<button type=\"button\" class=\"mui-btn mui-btn-green\">按钮$1</button>"
end
snippet 'mButton-yellow' do |cmd|
cmd.trigger = 'mbuttonyellow'
cmd.expansion = "<button type=\"button\" class=\"mui-btn mui-btn-yellow\">按钮$1</button>"
end
snippet 'mButton-red' do |cmd|
cmd.trigger = 'mbuttonred'
cmd.expansion = "<button type=\"button\" class=\"mui-btn mui-btn-red\">按钮$1</button>"
end
snippet 'mButton-purple' do |cmd|
cmd.trigger = 'mbuttonred'
cmd.expansion = "<button type=\"button\" class=\"mui-btn mui-btn-purple\">按钮$1</button>"
end
snippet 'mCheckbox' do |cmd|
cmd.trigger = 'mcheckbox'
cmd.expansion = "<div class=\"mui-input-row mui-checkbox \">
<label>${1:Checkbox}</label>
<input name=\"$2\" type=\"checkbox\">
</div>"
end
snippet 'mCheckbox_checked' do |cmd|
cmd.trigger = 'mcheckboxchecked'
cmd.expansion = "<div class=\"mui-input-row mui-checkbox \">
<label>${1:Checkbox}</label>
<input name=\"$2\" type=\"checkbox\" checked>
</div>"
end
snippet 'mHeader' do |cmd|
cmd.trigger = 'mheader'
cmd.expansion = '<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">标题$1</h1>
</header>'
end
snippet 'mHeader_withoutBack' do |cmd|
cmd.trigger = 'mheaderwithoutback'
cmd.expansion = '<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">标题$1</h1>
</header>'
end
snippet 'mText' do |cmd|
cmd.trigger = 'mtext'
cmd.expansion = "<input type=\"text\" class=\"mui-input-clear mui-input-speech\" placeholder=\"$1\">"
end
snippet 'mSearch' do |cmd|
cmd.trigger = 'msearch'
cmd.expansion = "<input type=\"search\" class=\"mui-input-clear mui-input-speech\" placeholder=\"$1\">"
end
snippet 'mForm' do |cmd|
cmd.trigger = 'mform'
cmd.expansion = "<form class=\"mui-input-group\">
<div class=\"mui-input-row\">
<label>input</label>
<input type=\"text\" class=\"mui-input-clear\" placeholder=\"${1:请输入}\">
</div>
</form>"
end
snippet 'mRadio' do |cmd|
cmd.trigger = 'mradio'
cmd.expansion = "<div class=\"mui-input-row mui-radio \">
<label>${1:Radio}</label>
<input name=\"$2\" type=\"radio\">
</div>"
end
snippet 'mRadio_checked' do |cmd|
cmd.trigger = 'mradiochecked'
cmd.expansion = "<div class=\"mui-input-row mui-radio \">
<label>${1:Radio}</label>
<input name=\"$2\" type=\"radio\" checked>
</div>"
end
snippet 'mPopover' do |cmd|
cmd.trigger = 'mpopover'
cmd.expansion = '<div class="mui-popover">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">Item1$1</a></li>
<li class="mui-table-view-cell"><a href="#">Item2</a></li>
<li class="mui-table-view-cell"><a href="#">Item3</a></li>
</ul>
</div>'
end
snippet 'mPopover-action-bottom' do |cmd|
cmd.trigger = 'mpopoveractionbottom'
cmd.expansion = '<div class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">Item1$1</a></li>
<li class="mui-table-view-cell"><a href="#">Item2</a></li>
<li class="mui-table-view-cell"><a href="#">Item3</a></li>
</ul>
</div>'
end
snippet 'mRange' do |cmd|
cmd.trigger = 'mrange'
cmd.expansion = "<div class=\"mui-input-row mui-input-range\">
<label>Range</label>
<input type=\"range\" min=\"0\" max=\"100\">
</div>"
end
snippet 'mSwitch' do |cmd|
cmd.trigger = 'mswitch'
cmd.expansion = "<div class=\"mui-input-row\">
<label>Switch</label>
<div class=\"mui-switch\">
<div class=\"mui-switch-handle\"></div>
</div>
</div>"
end
snippet 'mSwitch_active' do |cmd|
cmd.trigger = 'mswitchactive'
cmd.expansion = "<div class=\"mui-input-row\">
<label>Switch</label>
<div class=\"mui-switch mui-active\">
<div class=\"mui-switch-handle\"></div>
</div>
</div>"
end
snippet 'mSpeech' do |cmd|
cmd.trigger = 'mspecch'
cmd.expansion = "<div class=\"mui-input-row\">
<label>${1:Input}</label>
<input type=\"text\" class=\"mui-input-clear mui-input-speech\" placeholder=\"请输入\">
</div>"
end
snippet 'mBadge' do |cmd|
cmd.trigger = 'mbadge'
cmd.expansion = "<span class=\"mui-badge mui-badge-negative\">${1:1}</span>"
end
snippet 'mTab' do |cmd|
cmd.trigger = 'mtab'
cmd.expansion = "<nav class=\"mui-bar mui-bar-tab\">
<a class=\"mui-tab-item mui-active\">
<span class=\"mui-icon mui-icon-home\"></span>
<span class=\"mui-tab-label\">${1:首页}</span>
</a>
<a class=\"mui-tab-item\">
<span class=\"mui-icon mui-icon-phone\"></span>
<span class=\"mui-tab-label\">电话</span>
</a>
<a class=\"mui-tab-item\">
<span class=\"mui-icon mui-icon-email\"></span>
<span class=\"mui-tab-label\">邮件</span>
</a>
<a class=\"mui-tab-item\">
<span class=\"mui-icon mui-icon-gear\"></span>
<span class=\"mui-tab-label\">设置</span>
</a>
</nav>"
end
snippet 'mAccordion' do |cmd|
cmd.trigger = 'maccordion'
cmd.expansion = '<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板1$1</a>
<div class="mui-collapse-content">
<p>面板1子内容</p>
</div>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板2</a>
<div class="mui-collapse-content">
<p>面板2子内容</p>
</div>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板3</a>
<div class="mui-collapse-content">
<p>面板3子内容</p>
</div>
</li>
</ul>'
end
snippet 'mTabSegmented' do |cmd|
cmd.trigger = 'mtabsegmented'
cmd.expansion = "<div class=\"mui-segmented-control\">
<a class=\"mui-control-item mui-active\" href=\"#item1\">${1:选项卡1}</a>
<a class=\"mui-control-item\" href=\"#item2\">选项卡2</a>
</div>"
end
snippet 'mTabSegmented-ViewPageIndicator' do |cmd|
cmd.trigger = 'mtabsegmentedviewpage'
cmd.expansion = '<div class="mui-slider">
<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#item1">选项卡1</a>
<a class="mui-control-item" href="#item2">选项卡2</a>
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
<div class="mui-slider-group">
<div id="item1" class="mui-slider-item mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第1个选项卡子项</li>
<li class="mui-table-view-cell">第1个选项卡子项</li>
</ul>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第2个选项卡子项</li>
<li class="mui-table-view-cell">第2个选项卡子项</li>
</ul>
</div>
</div>
</div>'
end
snippet 'mPagination' do |cmd|
cmd.trigger = 'mpagination'
cmd.expansion = "<ul class=\"mui-pagination\">
<li class=\"mui-disabled\">
<span> &laquo; </span>
</li>
<li class=\"mui-active\">
<a href=\"#\">${1:1}</a>
</li>
<li>
<a href=\"#\">2</a>
</li>
<li>
<a href=\"#\">&raquo;</a>
</li>
</ul>"
end
snippet 'mList' do |cmd|
cmd.trigger = 'mlist'
cmd.expansion = "<div class=\"mui-card\">
<ul class=\"mui-table-view\">
<li class=\"mui-table-view-cell\">
<a class=\"mui-navigate-right\">
${1:Item 1}
</a>
</li>
<li class=\"mui-table-view-cell\">
<a class=\"mui-navigate-right\">
Item 2
</a>
</li>
<li class=\"mui-table-view-cell\">
<a class=\"mui-navigate-right\">
Item 3
</a>
</li>
</ul>
</div>"
end
snippet 'mList-Media' do |cmd|
cmd.trigger = 'mlist-Media'
cmd.expansion = "<ul class=\"mui-table-view\">
<li class=\"mui-table-view-cell\">
<a class=\"mui-navigate-right\">
<img class=\"mui-media-object mui-pull-left\" src=\"img/hbuilder.png\">
<div class=\"mui-media-body\">
主标题
<p class='mui-ellipsis'>这里是摘要</p>
</div>
</a>
</li>
<li class=\"mui-table-view-cell\">
<a class=\"mui-navigate-right\">
<img class=\"mui-media-object mui-pull-left\" src=\"img/hbuilder.png\">
<div class=\"mui-media-body\">
主标题
<p class='mui-ellipsis'>这里是摘要</p>
</div>
</a>
</li>
</ul>"
end
snippet 'mGrid' do |cmd|
cmd.trigger = 'mgrid'
cmd.expansion = "<div class=\"mui-card\">
<ul class=\"mui-table-view mui-grid-view mui-grid-9\">
<li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\">
<a href=\"#\">
<span class=\"mui-icon mui-icon-home\"></span>
<div class=\"mui-media-body\">Home</div>
</a>
</li>
<li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\">
<a href=\"#\">
<span class=\"mui-icon mui-icon-email\"><span class=\"mui-badge mui-badge-red\">5</span></span>
<div class=\"mui-media-body\">Email</div>
</a>
</li>
<li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\">
<a href=\"#\">
<span class=\"mui-icon mui-icon-chatbubble\"></span>
<div class=\"mui-media-body\">Chat</div>
</a>
</li>
<li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\">
<a href=\"#\">
<span class=\"mui-icon mui-icon-location\"></span>
<div class=\"mui-media-body\">Location</div>
</a>
</li>
<li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\">
<a href=\"#\">
<span class=\"mui-icon mui-icon-search\"></span>
<div class=\"mui-media-body\">Search</div>
</a>
</li>
<li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\">
<a href=\"#\">
<span class=\"mui-icon mui-icon-phone\"></span>
<div class=\"mui-media-body\">Phone</div>
</a>
</li>
</ul>
</div>"
end
snippet 'mGallery-Table' do |cmd|
cmd.trigger = 'mgallerytable'
cmd.expansion = "<ul class=\"mui-table-view mui-grid-view\">
<li class=\"mui-table-view-cell mui-media mui-col-xs-6\">
<a href=\"#\">
<img class=\"mui-media-object\" src=\"http://placehold.it/400x300\">
<div class=\"mui-media-body\">文字说明1</div>
</a>
</li>
<li class=\"mui-table-view-cell mui-media mui-col-xs-6\">
<a href=\"#\">
<img class=\"mui-media-object\" src=\"http://placehold.it/400x300\">
<div class=\"mui-media-body\">文字说明2</div>
</a>
</li>
</ul>"
end
snippet 'mGallery' do |cmd|
cmd.trigger = 'mgallery'
cmd.expansion = "<div class=\"mui-slider\">
<div class=\"mui-slider-group\">
<div class=\"mui-slider-item\">
<a href=\"#\">
<img src=\"http://placehold.it/200x100\">
<p class=\"mui-slider-title\">文字说明1</p>
</a>
</div>
<div class=\"mui-slider-item\">
<a href=\"#\">
<img src=\"http://placehold.it/200x100\">
<p class=\"mui-slider-title\">文字说明2</p>
</a>
</div>
</div>
<div class=\"mui-slider-indicator\">
<div class=\"mui-indicator mui-active\"></div>
<div class=\"mui-indicator\"></div>
</div>
</div>"
end
end
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment