Halo ToolBench 使用示例

1 标题居中

<tool-mtitle title="居中标题"></tool-mtitle>

<tool-mtitle title="居中标题"></tool-mtitle>

2 折叠块

<tool-expand title="折叠块" expand=true>这是折叠内容</tool-expand>

<tool-expand title="折叠块" expand=true>这是折叠内容</tool-expand>

3 进度条

<tool-progress percentage="50%" color="#6ce766"></tool-progress>

<tool-progress percentage="50%" color="#6ce766"></tool-progress>

4 彩色分割线

<tool-dotted></tool-dotted>

<tool-dotted begin="#1772e8" end="#4cd327"></tool-dotted>

<!-- 不填写begin与end的话将使用默认值 -->
<tool-dotted></tool-dotted>
<tool-dotted begin="#1772e8" end="#4cd327"></tool-dotted>

5 分栏内容

<tool-tabs>

<div class="_tpl">

{tabs-pane iOS}这里是 iOS 内容{/tabs-pane}

{tabs-pane Android}这里是 Android 内容{/tabs-pane}

</div>

</tool-tabs>

<tool-tabs>
  <div class="_tpl">
    {tabs-pane iOS}这里是 iOS 内容{/tabs-pane}
    {tabs-pane Android}这里是 Android 内容{/tabs-pane}
  </div>
</tool-tabs>

6 时间轴

<tool-timeline>

<div class="_tpl">

{timeline-item 2020}10元{/timeline-item}

{timeline-item 2021}20元{/timeline-item}

{timeline-item 2022}100元{/timeline-item}

</div>

</tool-timeline>

<!-- {time-line-item xxxx}表示时间轴前的年份 -->
<tool-timeline>
 <div class="_tpl">
   {timeline-item 2020}10元{/timeline-item}
   {timeline-item 2021}20元{/timeline-item}
   {timeline-item 2022}100元{/timeline-item}
 </div>
</tool-timeline>

7 提示信息

<tool-msg type="success">成功消息</tool-msg>

<tool-msg type="info">普通消息</tool-msg>

<tool-msg type="warning">警告消息</tool-msg>

<tool-msg type="error">错误消息</tool-msg>

<!-- 标签内支持其他dom元素 -->
<tool-msg type="success">成功消息</tool-msg>
<tool-msg type="info">普通消息</tool-msg>
<tool-msg type="warning">警告消息</tool-msg>
<tool-msg type="error">错误消息</tool-msg>

8 BiliBili视频

<<tool-bilibili bvid="BV1Yk4y1K7Az" page="1" width="100%" height="${<820?(cwidth*25)/41:500}"></tool-bilibili>

<!-- 其中bvid为必填，width默认为100%，height默认为500 -->
<tool-bilibili bvid="BV1Yk4y1K7Az" width="750" height="500"></tool-bilibili>
<tool-bilibili bvid="BV1Yk4y1K7Az" page="1" width="100%" height="${<820?(cwidth*25)/41:500}"></tool-bilibili>

9 PDF阅读器

<!-- 其中src为必填，width默认为100%，height默认为500 -->
<tool-pdf src="..." width="750" height="500"></tool-pdf>
<tool-pdf src="..." width="100%" height="${<820?(cwidth*25)/41:500}"></tool-pdf>

参考链接

Halo ToolBench 使用 | L's Blog (liuocean.com)