halo-theme-hao 主题标签记录

本文最后更新于 2024-06-19，文章内容可能已经过时。

段落文本

<p class="p 样式参数(参数以空格划分)">文本内容</p>

字体: logo, code
颜色: red,yellow,green,cyan,blue,gray
大小: small, h4, h3, h2, h1, large, huge, ultra
对齐方向: left, center, right

彩色文字

在一段话中方便插入各种颜色的标签，包括：

红色
、
黄色
、
绿色
、
青色
、
蓝色
、
灰色
。
超大号文字

文档「开始」页面中的标题部分就是超大号文字。

Volantis

A Wonderful Theme for hao

- 彩色文字
      在一段话中方便插入各种颜色的标签，包括：<p class="p red">红色</p>、<p class="p yellow">黄色</p>、<p class="p green">绿色</p>、<p class="p cyan">青色</p>、<p class="p blue">蓝色</p>、<p class="p gray">灰色</p>。
    - 超大号文字
      文档「开始」页面中的标题部分就是超大号文字。
      <p class="p center logo large">Volantis</p><p class="p center small">A Wonderful Theme for hao</p>

行内文本 span

<span class="p 样式参数(参数以空格划分)">文本内容</span>

字体: logo, code
颜色: red,yellow,green,cyan,blue,gray
大小: small, h4, h3, h2, h1, large, huge, ultra
对齐方向: left, center, right

彩色文字

在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。
超大号文字

文档「开始」页面中的标题部分就是超大号文字。

Volantis A Wonderful Theme for hao

- 彩色文字
      在一段话中方便插入各种颜色的标签，包括：<span class="p red">红色</span>、<span class="p yellow">黄色</span>、<span class="p green">绿色</span>、<span class="p cyan">青色</span>、<span class="p blue">蓝色</span>、<span class="p gray">灰色</span>。
    - 超大号文字
      文档「开始」页面中的标题部分就是超大号文字。
      <span class="p center logo large">Volantis</span><span class="p center small">A Wonderful Theme for hao</span>

行内文本样式 text

<u>文本内容</u><emp>文本内容</emp><wavy>文本内容</wavy><del>文本内容</del><kbd>文本内容</kbd><psw>文本内容</psw>

带下划线的文本
带着重号的文本
带波浪线的文本
带 ~~删除线~~ 的文本
键盘样式的文本 command + D
密码样式的文本：这里没有验证码

1. 带 <u>下划线</u> 的文本
    2. 带 <emp>着重号</emp>的文本
    3. 带 <wavy>波浪线</wavy>的文本
    4. 带 <del>删除线</del> 的文本
    5. 键盘样式的文本 <kbd>command</kbd> + <kbd>D</kbd>
    6. 密码样式的文本：<psw>这里没有验证码</psw>

分栏 tab

<hao-tabs id="选项卡块标签的唯一名称" index="选择第几个标签">
        <div class="_tpl" >
            {tabs-item 标题}内容{/tabs-item}
            {tabs-item 标题}内容{/tabs-item}
        </div></hao-tabs>

Unique name :
- 选项卡块标签的唯一名称，不带逗号。
- 将在#id 中用作每个标签及其索引号的前缀。
- 不要设置空格
- 仅当前帖子/页面的 URL 必须是唯一的！
[index]:
- 活动选项卡的索引号。
- 如果未指定，将选择第一个标签（1）。
- 如果 index 为-1，则不会选择任何选项卡。

Demo1 - 预设选择第一个【默认】

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo2 - 预设选择 tabs

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo3 - 没有预设值

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo1 - 预设选择第一个【默认】

<hao-tabs id="Demo1">
        <div class="_tpl" >
            {tabs-item test1 1}<p><strong>This is Tab 1.</strong></p>{/tabs-item}
            {tabs-item test1 2}<p><strong>This is Tab 2.</strong></p>{/tabs-item}
            {tabs-item test1 3}<p><strong>This is Tab 3.</strong></p>{/tabs-item}
        </div></hao-tabs>

Demo2 - 预设选择 tabs

<hao-tabs id="Demo2" index="2">
        <div class="_tpl" >
            {tabs-item test2 1}<p><strong>This is Tab 1.</strong></p>{/tabs-item}
            {tabs-item test2 2}<p><strong>This is Tab 2.</strong></p>{/tabs-item}
            {tabs-item test2 3}<p><strong>This is Tab 3.</strong></p>{/tabs-item}
        </div></hao-tabs>

Demo3 - 没有预设值

<hao-tabs id="Demo3" index="-1">
        <div class="_tpl" >
            {tabs-item test3 1}<p><strong>This is Tab 1.</strong></p>{/tabs-item}
            {tabs-item test3 2}<p><strong>This is Tab 2.</strong></p>{/tabs-item}
            {tabs-item test3 3}<p><strong>This is Tab 3.</strong></p>{/tabs-item}
        </div></hao-tabs>

按钮 btns

<hao-btns class="样式" style="布局" grid="列数" >
         <div class="_tpl" >
           {标题, 链接, 图片或者图标}
           {标题, 链接, 图片或者图标}
         </div></hao-btns>
    
    <hao-btns class="样式" style="布局" grid="列数">
         <div class="_tpl" >
           {标题, 描述, 链接, 图片, 图标}
           {标题, 描述, 链接, 图片, 图标}
         </div></hao-btns>

圆角样式class：rounded, circle
布局方式style：wide, fill, center,around 默认为自动宽度，适合视野内只有一两个的情况。
列数grid: grid2, grid3, grid4, grid5

参数	含义
wide	宽一点的按钮
fill	填充布局，自动铺满至少一行，多了会换行
center	居中，按钮之间是固定间距
around	居中分散
grid2	等宽最多 2 列，屏幕变窄会适当减少列数
grid3	等宽最多 4 列，屏幕变窄会适当减少列数
grid4	等宽最多 4 列，屏幕变窄会适当减少列数
grid5	等宽最多 5 列，屏幕变窄会适当减少列数

如果需要显示类似「团队成员」之类的一组含有头像的链接：

xaoxuu

或者含有图标的按钮：

查看文档查看文档

圆形图标 + 标题 + 描述 + 图片 + 网格 5 列 + 居中

心率管

专业版

心率管

专业版

如果需要显示类似「团队成员」之类的一组含有头像的链接：

<hao-btns class="circle" grid="grid5">
         <div class="_tpl" >
           {xaoxuu, https://xaoxuu.com/, https://bu.dusays.com/2023/06/01/64787e6a5816d.png}
           {xaoxuu, https://xaoxuu.com/, https://bu.dusays.com/2023/06/01/64787e6a5816d.png}
         </div></hao-btns>

或者含有图标的按钮：

<hao-btns class="rounded" grid="grid2">
         <div class="_tpl" >
           {查看文档, /, haofont hao-icon-book}
           {查看文档, /, haofont hao-icon-book}
         </div></hao-btns>

圆形图标 + 标题 + 描述 + 图片 + 网格 5 列 + 居中

<hao-btns class="circle" style="center" grid="grid5">
         <div class="_tpl" >
           {心率管,专业版,https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1,https://cdn1.tianli0.top/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png,haofont hao-icon-heartbeat1}
           {心率管,专业版,https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1,https://cdn1.tianli0.top/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png,haofont hao-icon-heartbeat1}
         </div></hao-btns>

timeline

<hao-timeline title="标题/时间线" color="颜色">
         <div class="_tpl">
           {timeline-item 时间}内容{/timeline-item}
           {timeline-item 时间}内容{/timeline-item}
         </div></hao-timeline>

参数	含义
title	标题/时间线
color	timeline 颜色，default(留空) / blue / pink / red / purple / orange / green

默认颜色

2022

01-02

这是测试页面

01-03

这是测试页面

blue

2022

01-02

这是测试页面

01-03

这是测试页面

pink

2022

01-02

这是测试页面

01-03

这是测试页面

2022

01-02

这是测试页面

01-03

这是测试页面

purple

2022

01-02

这是测试页面

01-03

这是测试页面

orange

2022

01-02

这是测试页面

01-03

这是测试页面

green

2022

01-02

这是测试页面

01-03

这是测试页面

默认颜色

<hao-timeline title="2022">
         <div class="_tpl" >
           {timeline-item 01-02}这是测试页面{/timeline-item}
           {timeline-item 01-03}这是测试页面{/timeline-item}
         </div></hao-timeline>

blue

<hao-timeline title="2022" color="blue">
         <div class="_tpl" >
           {timeline-item 01-02}这是测试页面{/timeline-item}
           {timeline-item 01-03}这是测试页面{/timeline-item}
         </div></hao-timeline>

pink

<hao-timeline title="2022" color="pink">
         <div class="_tpl" >
           {timeline-item 01-02}这是测试页面{/timeline-item}
           {timeline-item 01-03}这是测试页面{/timeline-item}
         </div></hao-timeline>

<hao-timeline title="2022" color="red">
         <div class="_tpl" >
           {timeline-item 01-02}这是测试页面{/timeline-item}
           {timeline-item 01-03}这是测试页面{/timeline-item}
         </div></hao-timeline>

purple

<hao-timeline title="2022" color="purple">
         <div class="_tpl" >
           {timeline-item 01-02}这是测试页面{/timeline-item}
           {timeline-item 01-03}这是测试页面{/timeline-item}
         </div></hao-timeline>

orange

<hao-timeline title="2022" color="orange">
         <div class="_tpl" >
           {timeline-item 01-02}这是测试页面{/timeline-item}
           {timeline-item 01-03}这是测试页面{/timeline-item}
         </div></hao-timeline>

green

<hao-timeline title="2022" color="green">
         <div class="_tpl" >
           {timeline-item 01-02}这是测试页面{/timeline-item}
           {timeline-item 01-03}这是测试页面{/timeline-item}
         </div></hao-timeline>

flink 友链标签

可在页面加入类似友情链接列表效果，可以当做导航栏用

美化

<hao-flink name='标题' desc='描述' style='beautify'>
        <div class="_tpl" >
            {网站名称,网站地址,Logo,描述,背景}
            {网站名称,网站地址,Logo,描述,背景}
        </div></hao-flink>

默认

<hao-flink name='标题' desc='描述' style='default'>
        <div class="_tpl" >
            {网站名称,网站地址,Logo,描述}
            {网站名称,网站地址,Logo,描述}
        </div></hao-flink>

参数	含义
name	标题
desc	描述
style	样式：default beautify

美化

推荐博客

描述

困困鱼喜欢捣鼓的博主

默认

小伙伴

描述

美化

<hao-flink name='推荐博客' desc='描述' style='beautify'>
       <div class="_tpl" >
            {困困鱼,https://kunkunyu.com/,https://kunkunyu.com/upload/645fac04e203a.jpeg,喜欢捣鼓的博主,https://img.cdn.yyds.pink/i/img/64c381a44896b.png}
            {困困鱼,https://kunkunyu.com/,https://kunkunyu.com/upload/645fac04e203a.jpeg,喜欢捣鼓的博主,https://img.cdn.yyds.pink/i/img/64c381a44896b.png}
        </div></hao-flink>

默认

<hao-flink name='小伙伴' desc='描述' style='default'>
        <div class="_tpl" >
            {困困鱼,https://kunkunyu.com/,https://kunkunyu.com/upload/645fac04e203a.jpeg,喜欢捣鼓的博主}
            {困困鱼,https://kunkunyu.com/,https://kunkunyu.com/upload/645fac04e203a.jpeg,喜欢捣鼓的博主}
        </div></hao-flink>

复选列表 checkbox

<hao-checkbox class ='样式' colour='颜色' status='选中状态'>内容</hao-checkbox>

样式(class): plus, minus, times
颜色(colour): red, yellow, green, cyan, blue, gray
选中状态(status): checked

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

<hao-checkbox>纯文本测试</hao-checkbox><hao-checkbox status='checked'>支持简单的 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://guides.github.com/features/mastering-markdown/">markdown</a> 语法</hao-checkbox><hao-checkbox colour='red'>支持自定义颜色</hao-checkbox><hao-checkbox colour='green' status='checked'>绿色 + 默认选中</hao-checkbox><hao-checkbox colour='yellow' status='checked'>黄色 + 默认选中</hao-checkbox><hao-checkbox colour='cyan' status='checked'>青色 + 默认选中</hao-checkbox><hao-checkbox colour='blue' status='checked'>蓝色 + 默认选中</hao-checkbox><hao-checkbox class='plus' colour='green' status='checked'>增加</hao-checkbox><hao-checkbox class='minus' colour='yellow' status='checked'>减少</hao-checkbox><hao-checkbox class='times' colour='red' status='checked'>叉</hao-checkbox>

折叠框 folding

<hao-folding title="标题" color="颜色" type="状态">
        <div class="_tpl">
            内容
        </div></hao-folding>

参数	含义
title	标题
color	颜色：blue, cyan, green, yellow, red
type	状态填写 open 代表默认打开。

查看图片测试

查看默认打开的折叠框

这是一个默认打开的折叠框。

查看代码测试

![4cacd3fee178fc75b9d5bf0915d1609.webp](/upload/4cacd3fee178fc75b9d5bf0915d1609.webp)

查看列表测试

内容

查看嵌套测试

查看嵌套测试2

查看嵌套测试3

哈哈哈

<hao-folding title="查看图片测试">
        <div class="_tpl">
    ![Halo-Theme-TimePlus](https://kunkunyu.com/upload/8cf77aed27831f70fa76085710a00b17.png)
        </div></hao-folding>

<hao-folding title="查看默认打开的折叠框" color="blue" type="open">
        <div class="_tpl">
            <p>这是一个默认打开的折叠框。</p>
        </div></hao-folding>

<hao-folding title="查看代码测试" color="green" >
        <div class="_tpl">
    
        ```html
    ![Halo-Theme-TimePlus](https://kunkunyu.com/upload/8cf77aed27831f70fa76085710a00b17.png)
        ```
        </div></hao-folding>

<hao-folding title="查看列表测试" color="yellow">
        <div class="_tpl">
            内容
        </div></hao-folding>

<hao-folding title="查看嵌套测试" color="red">
        <div class="_tpl">
            <hao-folding title="查看嵌套测试2" >
                <div class="_tpl">
                     <hao-folding title="查看嵌套测试3" >
                        <div class="_tpl">
                            哈哈哈
                        </div>
                    </hao-folding>
                </div>
            </hao-folding>
        </div></hao-folding>

Gallery 相册图库

gallerygroup 相册图库

<hao-gallery-group>
         <div class="_tpl" >
           {名字, 描述, 链接, 图库封面}
           {名字, 描述, 链接, 图库封面}
         </div></hao-gallery-group>

gallery 相册

<hao-gallery-group>
         <div class="_tpl" >
    {图片图片, 图片图片, 图片图片, 图片图片}
         </div></hao-gallery-group>

gallerygroup 相册图库

gallery 相册

gallerygroup 相册图库

<hao-gallery-group>
         <div class="_tpl" >
           {收藏的壁纸, 喜欢的一些壁纸, https://kunkunyu.com/photos?photo_group_name=photo-group-GQvtX, https://img.cdn.yyds.pink/i/img/64bf7c80bac67.jpg}
           {收藏的壁纸, 喜欢的一些壁纸, https://kunkunyu.com/photos?photo_group_name=photo-group-GQvtX, https://img.cdn.yyds.pink/i/img/64bf7c80bac67.jpg}
         </div></hao-gallery-group>

gallery 相册

<hao-gallery-group>
         <div class="_tpl" >
    {https://kunkunyu.com/upload/8cf77aed27831f70fa76085710a00b17.png,https://kunkunyu.com/upload/4cacd3fee178fc75b9d5bf0915d1609.webp}
         </div></hao-gallery-group>

tag-hide

如果你想把一些文字、内容隐藏起来，并提供按钮让用户点击显示。可以使用这个标签外挂。
请注意，tag-hide内的标签外挂content内都不建议有h1 - h6 等标题。因为Toc会把隐藏内容标题也显示出来，而且当滚动屏幕时，如果隐藏内容没有显示出来，会导致Toc的滚动出现异常。

<hao-tag-hide display='按钮显示的文字' bg='按钮的背景颜色' color='按钮文字的颜色'>内容</hao-tag-hide>

display: 按钮显示的文字
bg: 按钮的背景颜色
color: 按钮文字的颜色

哪个英文字母最酷？因为西装裤(C装酷)

门里站着一个人? 闪

哪个英文字母最酷？<hao-tag-hide display='查看答案' bg='#ff7242' color='#fff'>因为西装裤(C装酷)</hao-tag-hide>
    
    门里站着一个人?<hao-tag-hide display='Click'>闪</hao-tag-hide>

卡片式外链标签引入

携带跳转链接的卡片

必填项link，img，tip

<hao-introduction-card
        link="链接"
        img="图片"
        tip="标签"
        cardTitle= "卡片标题"
        logo ="logo"
        title="标题"
        subTitle="副标题" ></hao-introduction-card>

不携带跳转链接的卡片

不填写logo title subTitle

<hao-introduction-card
        link="链接"
        img="图片"
        tip="标签"
        cardTitle= "卡片标题"></hao-introduction-card>

参数	含义
link	链接
img	图片
tip	标签
cardTitle	卡片标题
logo	logo
title	标题
subTitle	副标题

携带跳转链接的卡片

前往

不携带跳转链接的卡片

携带跳转链接的卡片

<hao-introduction-card
        link="https://kunkunyu.com?preview-theme=theme-timeplus"
        img="https://kunkunyu.com/upload/8cf77aed27831f70fa76085710a00b17.png"
        tip="新品主题"
        cardTitle= "时光相册主题"
        logo ="https://kunkunyu.com/upload/cf44650dc27ca55b28bb0f8d3e48a93.png"
        title="Halo-Theme-TimePlus"
        subTitle="困困鱼" ></hao-introduction-card>

不携带跳转链接的卡片

<hao-introduction-card
        link="https://kunkunyu.com?preview-theme=theme-timeplus"
        img="https://kunkunyu.com/upload/8cf77aed27831f70fa76085710a00b17.png"
        tip="新品主题"
        cardTitle= "时光相册主题"></hao-introduction-card>

链接卡片 link

<hao-tag-link link="链接" logo="logo" title="标题" described="描述"></hao-tag-link>

参数	含义
link	链接
logo	logo
title	标题
described	描述

引用站外地址

时光相册主题-Halo-Theme-TimePlus

困困鱼

<hao-tag-linklink="https://halo.run/store/apps/app-ihpQC" logo="https://kunkunyu.com/upload/cf44650dc27ca55b28bb0f8d3e48a93.png"title="时光相册主题-Halo-Theme-TimePlus"described="困困鱼"></hao-tag-link>

上标标签 tip

<hao-tip class="样式" color="自定义图标">内容</hao-tip>

参数	含义
class	样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell
noIcon	自定义图标

default

info

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义 font awesome 图标

<hao-tip class=""><p>default</p></hao-tip><hao-tip class="info"><p>info</p></hao-tip><hao-tip class="success"><p>success</p></hao-tip><hao-tip class="error"><p>error</p></hao-tip><hao-tip class="warning"><p>warning</p></hao-tip><hao-tip class="bolt" content='bolt'><p>bolt</p></hao-tip><hao-tip class="ban" content='ban'><p>ban</p></hao-tip><hao-tip class="home" content='home'><p>home</p></hao-tip><hao-tip class="sync" content='sync'><p>sync</p></hao-tip><hao-tip class="cogs" content='cogs'><p>cogs</p></hao-tip><hao-tip class="key" content='key'><p>key</p></hao-tip><hao-tip class="bell" content='bell'><p>bell</p></hao-tip><hao-tip class="fa-atom font awesome" noIcon="haofont hao-icon-sanmingzhi"><p>自定义 font awesome 图标</p></hao-tip>

Note (Bootstrap Callout)

<hao-note  class="标识" noIcon="选择icon" style="配置style">内容</hao-note>

方法一

参数	含义
class	【可选】标识，不同的标识有不同的配色（ default / primary / success / info / warning / danger ）
noIcon	【可选】不显示 icon
style	【可选】可以覆盖配置中的 style （simple/modern/flat/disabled）

方法二

参数	含义
class	【可选】标识，不同的标识有不同的配色（ default / blue / pink / red / purple / orange / green ）
noIcon	【可选】可配置自定义 icon (支持内置的阿里图标,也可以配置 no-icon )
style	【可选】可以覆盖配置中的 style （simple/modern/flat/disabled）

方法一

simple样式

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

modern样式

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

flat样式

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

disabled样式

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

no-icon样式

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

方法二

图标支持 自己引入图标 和 主题内置的阿里图标

simple 样式

你是刷 Visa 还是 UnionPay

2023 年了….

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

讨厌前端

modern 样式

你是刷 Visa 还是 UnionPay

2023 年了….

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

讨厌前端

flat 样式

你是刷 Visa 还是 UnionPay

2023 年了….

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

讨厌前端

disabled 样式

你是刷 Visa 还是 UnionPay

2023 年了….

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

讨厌前端

方法一

simple样式

<hao-note  class="simple" >默认 提示块标签</hao-note><hao-note  class="simple" style="default">default 提示块标签</hao-note><hao-note  class="simple" style="primary">primary 提示块标签</hao-note><hao-note  class="simple" style="success">success 提示块标签</hao-note><hao-note  class="simple" style="info">info 提示块标签</hao-note><hao-note  class="simple" style="warning">warning 提示块标签</hao-note><hao-note  class="simple" style="danger">danger 提示块标签</hao-note>

modern样式

<hao-note  class="modern">默认 提示块标签</hao-note><hao-note  class="modern" style="default">default 提示块标签</hao-note><hao-note  class="modern" style="primary">primary 提示块标签</hao-note><hao-note  class="modern" style="success">success 提示块标签</hao-note><hao-note  class="modern" style="info" >info 提示块标签</hao-note><hao-note  class="modern" style="warning">warning 提示块标签</hao-note><hao-note  class="modern" style="danger">danger 提示块标签</hao-note>

flat样式

<hao-note  class="flat" content="">默认 提示块标签</hao-note><hao-note  class="flat" style="default">default 提示块标签</hao-note><hao-note  class="flat" style="primary">primary 提示块标签</hao-note><hao-note  class="flat" style="success">success 提示块标签</hao-note><hao-note  class="flat" style="info">info 提示块标签</hao-note><hao-note  class="flat" style="warning">warning 提示块标签</hao-note><hao-note  class="flat" style="danger">danger 提示块标签</hao-note>

disabled样式

<hao-note  class="disabled" content="">默认 提示块标签</hao-note><hao-note  class="disabled" style="default" >default 提示块标签</hao-note><hao-note  class="disabled" style="primary" >primary 提示块标签</hao-note><hao-note  class="disabled" style="success" >success 提示块标签</hao-note><hao-note  class="disabled" style="info" >info 提示块标签</hao-note><hao-note  class="disabled" style="warning">warning 提示块标签</hao-note><hao-note  class="disabled" style="danger" >danger 提示块标签</hao-note>

no-icon样式

<hao-note  class="flat" noIcon="no-icon">默认 提示块标签</hao-note><hao-note  class="flat" noIcon="no-icon" style="default">default 提示块标签</hao-note><hao-note  class="flat" noIcon="no-icon" style="primary">primary 提示块标签</hao-note><hao-note  class="flat" noIcon="no-icon" style="success">success 提示块标签</hao-note><hao-note  class="flat" noIcon="no-icon" style="info">info 提示块标签</hao-note><hao-note  class="flat" noIcon="no-icon" style="warning">warning 提示块标签</hao-note><hao-note  class="flat" noIcon="no-icon" style="danger">danger 提示块标签</hao-note>

方法二

图标支持 自己引入图标 和 主题内置的阿里图标

simple 样式

<hao-note  class="simple" noIcon="haofont hao-icon-rocket">你是刷 Visa 还是 UnionPay</hao-note><hao-note  class="simple" noIcon="haofont hao-icon-bullhorn" style="blue">2023 年了….</hao-note><hao-note  class="simple" noIcon="haofont hao-icon-instagram" style="pink">小心开车 安全至上</hao-note><hao-note  class="simple" noIcon="haofont hao-icon-fan" style="red">这是三片呢？还是四片？</hao-note><hao-note  class="simple" noIcon="haofont hao-icon-dengpao" style="orange">你是刷 Visa 还是 UnionPay</hao-note><hao-note  class="simple" noIcon="haofont hao-icon-sanmingzhi" style="purple">剪刀石头布</hao-note><hao-note  class="simple" noIcon="haofont hao-icon-train" style="green">讨厌前端</hao-note>

modern 样式

<hao-note  class="modern" noIcon="haofont hao-icon-rocket">你是刷 Visa 还是 UnionPay</hao-note><hao-note  class="modern" noIcon="haofont hao-icon-bullhorn" style="blue">2023 年了….</hao-note><hao-note  class="modern" noIcon="haofont hao-icon-instagram" style="pink">小心开车 安全至上</hao-note><hao-note  class="modern" noIcon="haofont hao-icon-fan" style="red">这是三片呢？还是四片？</hao-note><hao-note  class="modern" noIcon="haofont hao-icon-dengpao" style="orange">你是刷 Visa 还是 UnionPay</hao-note><hao-note  class="modern" noIcon="haofont hao-icon-sanmingzhi" style="purple">剪刀石头布</hao-note><hao-note  class="modern" noIcon="haofont hao-icon-train" style="green">讨厌前端</hao-note>

flat 样式

<hao-note  class="flat" noIcon="haofont hao-icon-rocket">你是刷 Visa 还是 UnionPay</hao-note><hao-note  class="flat" noIcon="haofont hao-icon-bullhorn" style="blue">2023 年了….</hao-note><hao-note  class="flat" noIcon="haofont hao-icon-instagram" style="pink">小心开车 安全至上</hao-note><hao-note  class="flat" noIcon="haofont hao-icon-fan" style="red">这是三片呢？还是四片？</hao-note><hao-note  class="flat" noIcon="haofont hao-icon-dengpao" style="orange">你是刷 Visa 还是 UnionPay</hao-note><hao-note  class="flat" noIcon="haofont hao-icon-sanmingzhi" style="purple">剪刀石头布</hao-note><hao-note  class="flat" noIcon="haofont hao-icon-train" style="green">讨厌前端</hao-note>

disabled 样式

<hao-note  class="disabled" noIcon="haofont hao-icon-rocket">你是刷 Visa 还是 UnionPay</hao-note><hao-note  class="disabled" noIcon="haofont hao-icon-bullhorn" style="blue">2023 年了….</hao-note><hao-note  class="disabled" noIcon="haofont hao-icon-instagram" style="pink">小心开车 安全至上</hao-note><hao-note  class="disabled" noIcon="haofont hao-icon-fan" style="red">这是三片呢？还是四片？</hao-note><hao-note  class="disabled" noIcon="haofont hao-icon-dengpao" style="orange">你是刷 Visa 还是 UnionPay</hao-note><hao-note  class="disabled" noIcon="haofont hao-icon-sanmingzhi" style="purple">剪刀石头布</hao-note><hao-note  class="disabled" noIcon="haofont hao-icon-train" style="green">讨厌前端</hao-note>

视频播放

视频

<hao-dplayer src="视频地址"></hao-dplayer>

Bilibili 视频

<hao-bilibili bvid="视频地址"></hao-bilibili>

视频

参数	含义
src	视频地址
width	width默认为100%
height	height默认为500

Bilibili 视频

参数	含义
bvid	其中bvid为必填
page	页数
width	width默认为100%
height	height默认为500

视频

<hao-dplayer src="https://img.cdn.yzczi.com/yzcz/2023/04/202304211828533962db1997022853986.mp4"></hao-dplayer>

Bilibili 视频

<hao-bilibili bvid="BV1k94y1C7B2"></hao-bilibili>