新都在

logo

Hao主题相关标签

2024/04/02
#halo
828
2

段落文本

<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 列，屏幕变窄会适当减少列数

  • 如果需要显示类似「团队成员」之类的一组含有头像的链接：
xaoxuu 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>
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标题/时间线
colortimeline 颜色，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

卡片式外链标签引入

  • 携带跳转链接的卡片

必填项link，img，tip

<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卡片标题
logologo
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视频地址
widthwidth默认为100%
heightheight默认为500
  • Bilibili 视频
参数含义
bvid其中bvid为必填
page页数
widthwidth默认为100%
heightheight默认为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