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

段落文本

<p class="p 样式参数(参数以空格划分)">文本内容</p>
HTML
  1. 字体: logo, code
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right
  • 彩色文字

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

    红色

    黄色

    绿色

    青色

    蓝色

    灰色

  • 超大号文字

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

    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>
HTML

行内文本 span

<span class="p 样式参数(参数以空格划分)">文本内容</span>
HTML
  1. 字体: logo, code
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right
  • 彩色文字

    在一段话中方便插入各种颜色的标签,包括:红色黄色绿色青色蓝色灰色

  • 超大号文字

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

    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>
HTML

行内文本样式 text

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

分栏 tab

<hao-tabs id="选项卡块标签的唯一名称" index="选择第几个标签">
        <div class="_tpl" >
            {tabs-item 标题}内容{/tabs-item}
            {tabs-item 标题}内容{/tabs-item}
        </div></hao-tabs>
HTML
  1. Unique name :
    • 选项卡块标签的唯一名称,不带逗号。
    • 将在#id 中用作每个标签及其索引号的前缀。
    • 不要设置空格
    • 仅当前帖子/页面的 URL 必须是唯一的!
  2. [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>
HTML

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>
HTML

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>
HTML

按钮 btns

<hao-btns class="样式" style="布局" grid="列数" >
         <div class="_tpl" >
           {标题, 链接, 图片或者图标}
           {标题, 链接, 图片或者图标}
         </div></hao-btns>
    
    <hao-btns class="样式" style="布局" grid="列数">
         <div class="_tpl" >
           {标题, 描述, 链接, 图片, 图标}
           {标题, 描述, 链接, 图片, 图标}
         </div></hao-btns>
HTML
  1. 圆角样式class:rounded, circle
  2. 布局方式style:wide, fill, center,around 默认为自动宽度,适合视野内只有一两个的情况。
  3. 列数grid: grid2, grid3, grid4, grid5
参数 含义
wide 宽一点的按钮
fill 填充布局,自动铺满至少一行,多了会换行
center 居中,按钮之间是固定间距
around 居中分散
grid2 等宽最多 2 列,屏幕变窄会适当减少列数
grid3 等宽最多 4 列,屏幕变窄会适当减少列数
grid4 等宽最多 4 列,屏幕变窄会适当减少列数
grid5 等宽最多 5 列,屏幕变窄会适当减少列数

  • 如果需要显示类似「团队成员」之类的一组含有头像的链接:
  • 或者含有图标的按钮:
  • 圆形图标 + 标题 + 描述 + 图片 + 网格 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>
HTML
  • 或者含有图标的按钮:
<hao-btns class="rounded" grid="grid2">
         <div class="_tpl" >
           {查看文档, /, haofont hao-icon-book}
           {查看文档, /, haofont hao-icon-book}
         </div></hao-btns>
HTML
  • 圆形图标 + 标题 + 描述 + 图片 + 网格 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>
HTML

timeline

<hao-timeline title="标题/时间线" color="颜色">
         <div class="_tpl">
           {timeline-item 时间}内容{/timeline-item}
           {timeline-item 时间}内容{/timeline-item}
         </div></hao-timeline>
HTML
参数 含义
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

这是测试页面
  • red

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>
HTML
  • 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>
HTML
  • 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>
HTML
  • red
<hao-timeline title="2022" color="red">
         <div class="_tpl" >
           {timeline-item 01-02}这是测试页面{/timeline-item}
           {timeline-item 01-03}这是测试页面{/timeline-item}
         </div></hao-timeline>
HTML
  • 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>
HTML
  • 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>
HTML
  • 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>
HTML

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

复选列表 checkbox

<hao-checkbox class ='样式' colour='颜色' status='选中状态'>内容</hao-checkbox>
HTML
  1. 样式(class): plus, minus, times
  2. 颜色(colour): red, yellow, green, cyan, blue, gray
  3. 选中状态(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>
HTML

折叠框 folding

<hao-folding title="标题" color="颜色" type="状态">
        <div class="_tpl">
            内容
        </div></hao-folding>
HTML
参数 含义
title 标题
color 颜色:blue, cyan, green, yellow, red
type 状态填写 open 代表默认打开。
查看图片测试

Halo-Theme-TimePlus

查看默认打开的折叠框

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

查看代码测试
![4cacd3fee178fc75b9d5bf0915d1609.webp](/upload/4cacd3fee178fc75b9d5bf0915d1609.webp)
    
HTML
查看列表测试
内容
查看嵌套测试
查看嵌套测试2
查看嵌套测试3
哈哈哈
<hao-folding title="查看图片测试">
        <div class="_tpl">
    ![Halo-Theme-TimePlus](https://kunkunyu.com/upload/8cf77aed27831f70fa76085710a00b17.png)
        </div></hao-folding>
HTML
<hao-folding title="查看默认打开的折叠框" color="blue" type="open">
        <div class="_tpl">
            <p>这是一个默认打开的折叠框。</p>
        </div></hao-folding>
HTML
<hao-folding title="查看代码测试" color="green" >
        <div class="_tpl">
    
        ```html
    ![Halo-Theme-TimePlus](https://kunkunyu.com/upload/8cf77aed27831f70fa76085710a00b17.png)
        ```
        </div></hao-folding>
HTML
<hao-folding title="查看列表测试" color="yellow">
        <div class="_tpl">
            内容
        </div></hao-folding>
HTML
<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>
HTML

tag-hide

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

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

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

门里站着一个人?

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

卡片式外链标签引入

  • 携带跳转链接的卡片

必填项linkimgtip

<hao-introduction-card
        link="链接"
        img="图片"
        tip="标签"
        cardTitle= "卡片标题"
        logo ="logo"
        title="标题"
        subTitle="副标题" ></hao-introduction-card>
HTML
  • 不携带跳转链接的卡片

不填写logo title subTitle

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

  • 携带跳转链接的卡片
新品主题
时光相册主题
introduction
introduction
Halo-Theme-TimePlus
困困鱼
  • 不携带跳转链接的卡片

新品主题
时光相册主题
introduction

  • 携带跳转链接的卡片
<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>
HTML
  • 不携带跳转链接的卡片
<hao-introduction-card
        link="https://kunkunyu.com?preview-theme=theme-timeplus"
        img="https://kunkunyu.com/upload/8cf77aed27831f70fa76085710a00b17.png"
        tip="新品主题"
        cardTitle= "时光相册主题"></hao-introduction-card>
HTML

上标标签 tip

<hao-tip class="样式" color="自定义图标">内容</hao-tip>
HTML
参数 含义
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>
HTML

Note (Bootstrap Callout)

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

方法一

参数 含义
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>
HTML
  • 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>
HTML
  • 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>
HTML
  • 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>
HTML
  • 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>
HTML

方法二

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

  • 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>
HTML
  • 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>
HTML
  • 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>
HTML
  • 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>
HTML

视频播放

  • 视频
<hao-dplayer src="视频地址"></hao-dplayer>
HTML
  • Bilibili 视频
<hao-bilibili bvid="视频地址"></hao-bilibili>
HTML
  • 视频
参数 含义
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>
HTML
  • Bilibili 视频
<hao-bilibili bvid="BV1k94y1C7B2"></hao-bilibili>
HTML