侧边栏壁纸
博主头像
琉璃红梅 博主等级

琉璃世界，白雪红梅。

  • 累计撰写 44 篇文章
  • 累计创建 90 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录
博客相关

Halo系列-Joe3主题的自定义标签食用文档

雪穗
雪穗
2024-09-22 / 0 评论 / 0 点赞 / 88 阅读 / 0 字
温馨提示：
本文最后更新于130天前，若内容或图片失效，请留言反馈。 若部分素材不小心影响到您的利益，请联系我删除。

参考博文：
1.Joe3部分样式展示
2.Joe主题帮助文档




居中标题

{tabs-pane 渲染展示}

{/tabs-pane}

{tabs-pane 代码示例}

<joe-mtitle title="任尔东西南北风"></joe-mtitle>

{/tabs-pane}

按钮元素

多彩按钮

{tabs-pane 渲染展示}

{/tabs-pane}

{tabs-pane 代码示例}

<joe-abtn color="#409eff" content="多彩按钮"></joe-abtn>

{/tabs-pane}

带图标按钮

详见：Font Awesome图标


{tabs-pane 渲染展示}

{/tabs-pane}

{tabs-pane 代码示例}

<joe-abtn icon="fa-bell" content="带图标按钮"></joe-abtn>

{/tabs-pane}

圆角按钮

{tabs-pane 渲染展示}

{/tabs-pane}

{tabs-pane 代码示例}

<joe-abtn radius="12px" content="圆角按钮"></joe-abtn>

{/tabs-pane}

复合按钮

{tabs-pane 渲染展示}

{/tabs-pane}

{tabs-pane 代码示例}

<joe-abtn
color="#409eff"
icon="fa-bell"
href="#"
radius="3px"
content="复合按钮"></joe-abtn>

{/tabs-pane}

便条按钮

{tabs-pane 渲染展示}

{/tabs-pane}

{tabs-pane 代码示例}

<joe-anote href="#" type="secondary" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="success" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="warning" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="error" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="info" content="便条按钮"></joe-anote>

{/tabs-pane}

复制按钮

{tabs-pane 渲染展示}

{/tabs-pane}

{tabs-pane 代码示例}

<joe-copy
title="点击复制"
content="如果你看向我，我会温柔地消融，像火山中的雪。"
color="green"
bold></joe-copy>

{/tabs-pane}

网盘按钮

{tabs-pane 渲染展示}

{/tabs-pane}

{tabs-pane 代码示例}

<joe-cloud type="default" url="" password=""></joe-cloud>
<joe-cloud type="360" url="" password=""></joe-cloud>
<joe-cloud type="bd" url="" password="666Q"></joe-cloud>
<joe-cloud type="ty" url="" password=""></joe-cloud>
<joe-cloud type="ct" url="" password=""></joe-cloud>
<joe-cloud type="wy" url="" password=""></joe-cloud>
<joe-cloud type="github" url="" password=""></joe-cloud>
<joe-cloud type="gitee" url="" password=""></joe-cloud>
<joe-cloud type="lz" url="" password=""></joe-cloud>
<joe-cloud type="ad" url="" password=""></joe-cloud>

{/tabs-pane}

装饰元素

跑马灯

{tabs-pane 渲染展示}

{/tabs-pane}

{tabs-pane 代码示例}

<span class="joe_lamp"></span>

{/tabs-pane}

进度条

{tabs-pane 渲染展示}

{/tabs-pane}

{tabs-pane 代码示例}

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

{/tabs-pane}

彩色虚线

{tabs-pane 渲染展示}


{/tabs-pane}

{tabs-pane 代码示例}

<joe-dotted></joe-dotted> 
<joe-dotted startcolor="#1772e8" endcolor="#4cd327"></joe-dotted>

{/tabs-pane}

分栏tab

渲染展示
{tabs-pane 初章}风雨飘摇{/tabs-pane} {tabs-pane 末章}挽狂澜于既倒，扶大厦于将倾{/tabs-pane}

代码示例 
<joe-tabs>
   <div class="_temp">
    {tabs-pane 初章}风雨飘摇{/tabs-pane}
    {tabs-pane 末章}挽狂澜于既倒，扶大厦于将倾{/tabs-pane}
  </div>
</joe-tabs>

时间线

{tabs-pane 渲染展示}
{timeline-item color="#ed4014"}1900 呱呱坠地{/timeline-item} {timeline-item}1921 莫欺少年穷{/timeline-item} {timeline-item}1942 莫欺中年穷{/timeline-item} {timeline-item}1963 莫欺老年穷{/timeline-item} {timeline-item}1984 死者为大{/timeline-item} {timeline-item}1995 盗墓者的眼泪{/timeline-item}

{/tabs-pane}

{tabs-pane 代码示例}

<joe-timeline>
 <div class="_temp">
   {timeline-item color="#19be6b"}1900 呱呱坠地{/timeline-item}
   {timeline-item}1921 莫欺少年穷{/timeline-item}
   {timeline-item}1942莫欺中年穷{/timeline-item}
   {timeline-item}1963 莫欺老年穷{/timeline-item}
   {timeline-item}1984死者为大{/timeline-item}
   {timeline-item}1995 盗墓者的眼泪{/timeline-item}
 </div>
</joe-timeline>

{/tabs-pane}

视频播放

任意视频

{tabs-pane 渲染展示}

{/tabs-pane}

{tabs-pane 代码示例}

<joe-dplayer src="https://www.sqwfly.top/upload/Lana.mp4"></joe-dplyer>

{/tabs-pane}

Bilibili 视频

{tabs-pane 渲染展示} {/tabs-pane}

{tabs-pane 代码示例}

<joe-bilibili bvid="BV15x4y1U7RU"></joe-bilibili>

{/tabs-pane}

PDF预览

{tabs-pane 渲染展示} {/tabs-pane}

{tabs-pane 代码示例}

<joe-pdf src="https://www.sqwfly.top/upload/lshort-zh-cn.pdf" width="100%" height="600px"></joe-pdf>

{/tabs-pane}

音乐

任意音乐

{tabs-pane 渲染展示}

{/tabs-pane}

{tabs-pane 代码示例}

<joe-mp3
  name="风中奇缘-侠岚主题曲"
  url="https://www.sqwfly.top/upload/风中奇缘.mp3"
  theme="red"
  cover="https://www.sqwfly.top/upload侠岚.jpg"
  autoplay>
</joe-mp3>

{/tabs-pane}

网易云歌单

{tabs-pane 渲染展示}

{/tabs-pane}

{tabs-pane 代码示例}

<joe-mlist id="7726626250"></joe-mlist>

{/tabs-pane}

网易云单曲

{tabs-pane 渲染展示} 由于api接口失效，所以此功能失效 {/tabs-pane}

{tabs-pane 代码示例}

<joe-music id="229285"></joe-music>

{/tabs-pane}

提示元素

{tabs-pane 渲染展示}




{/tabs-pane}

{tabs-pane 代码示例}

<joe-message type="info" content="普通消息"></joe-message>
<joe-message type="success" content="成功消息"></joe-message>
<joe-message type="warning" content="警告消息"></joe-message>
<joe-message type="error" content="错误消息"></joe-message>

{/tabs-pane}

警告框

{tabs-pane 渲染展示}
警告提示

成功警告提示

警告提示

错误警告提示
 {/tabs-pane}

{tabs-pane 代码示例}

<joe-alert type="info"><div class="_temp">警告提示</div></joe-alert>
<joe-alert type="success"><div class="_temp">成功警告提示</div></joe-alert>
<joe-alert type="warning"><div class="_temp">警告提示</div></joe-alert>
<joe-alert type="error"><div class="_temp">错误警告提示</div></joe-alert>

{/tabs-pane}

标注块

{tabs-pane 渲染展示}
标注1

标注2
 {/tabs-pane}

{tabs-pane 代码示例}

<joe-callout><div class="_temp">标注1</div></joe-callout>
<joe-callout color="#1772e8"><div class="_temp">标注2</div></joe-callout>

{/tabs-pane}

渲染原始内容


渲染展示

俺是个3级标题，我有自己的样式

我是原始内容，可以是任何合法的文本或HTML，我的样式和外界是隔离的
代码示例 
<joe-raw-content>
  <div id="_raw">
    <div
      style="padding: 1px 10px;background: linear-gradient(45deg, #329891, #ffe266);"
    >
      <h3 style="color:blue;font-style:italic">
        俺是个3级标题，我有自己的样式
      </h3>
      <p>我是原始内容，可以是任何合法的文本或HTML，我的样式和外界是隔离的</p>
    </div>
  </div>
</joe-raw-content>

卡片

默认卡片

{tabs-pane 渲染展示}
战无不胜，攻无不克。
{/tabs-pane}

{tabs-pane 代码示例}

<joe-card-default  width="80%" label="青龙卡片">
<div class="_temp">
战无不胜，攻无不克。
</div>
</joe-card-default>

{/tabs-pane}

描述卡片

{tabs-pane 渲染展示}
战无不胜，攻无不克。
{/tabs-pane}

{tabs-pane 代码示例}

<joe-card-describe title="青龙卡片">
<div class="_temp">
战无不胜，攻无不克。
</div>
</joe-card-describe>

{/tabs-pane}

卡片列表

{tabs-pane 渲染展示}
{card-list-item} 卡片1内容 {/card-list-item} {card-list-item} 卡片2内容 {/card-list-item}

{/tabs-pane}

{tabs-pane 代码示例}

<joe-card-list>
<div class="_temp">
{card-list-item}  卡片1内容 {/card-list-item} 
{card-list-item}  卡片2内容 {/card-list-item} 
</div>
</joe-card-list>

{/tabs-pane}

折叠框

渲染展示
{collapse-item label="标题1" open} 内容1 {/collapse-item} {collapse-item label="标题2"} 内容2 {/collapse-item}

代码示例 
<joe-collapse>
<div class="_temp">
{collapse-item label="标题1" open}  内容1 {/collapse-item} 
{collapse-item label="标题2"}  内容2 {/collapse-item} 
</div>
</joe-collapse>

宫格

{tabs-pane 渲染展示}
{grid-item} 宫格1 {/grid-item} {grid-item} 宫格2 {/grid-item} {grid-item} 宫格3 {/grid-item} {grid-item} 宫格4 {/grid-item} {grid-item} 宫格5 {/grid-item}
{/tabs-pane}

{tabs-pane 代码示例}

<joe-grid column="3" gap="15">
<div class="_temp">
{grid-item}  宫格1 {/grid-item} 
{grid-item}  宫格2 {/grid-item} 
{grid-item}  宫格3 {/grid-item} 
{grid-item}  宫格4 {/grid-item} 
{grid-item}  宫格5 {/grid-item} 
</div>
</joe-grid>

{/tabs-pane}

限制阅读



战无不胜，攻无不克。

0
自定义标签 joe3

  1. 支付宝打赏

    qrcode alipay

  2. 微信打赏

    qrcode weixin
版权归属： 雪穗
本文链接： https://www.sqwfly.top/archives/1726999234339
许可协议： 本文使用《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》协议授权

评论区