前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Joe2.0样式问题的写法

Joe2.0样式问题的写法

作者头像
在水一方
发布于 2022-06-14 08:38:34
发布于 2022-06-14 08:38:34
27100
代码可运行
举报
文章被收录于专栏:在水一方在水一方
运行总次数:0
代码可运行

前言

今天给主题升级了一下版本,记录Joe2.0样式常用到的一些样式的写法,能够丰富写作的形式,不错,用这篇文章记录一下

跑马灯
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<span class="joe_lamp"></span>
彩色虚线
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<joe-dotted></joe-dotted>
<joe-dotted startcolor="#1772e8" endcolor="#4cd327"></joe-dotted>
时间线

10元

20元

100元

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<joe-timeline>
 <div class="_tpl">
   {timeline-item 2020}10{/timeline-item}
   {timeline-item 2021}20{/timeline-item}
   {timeline-item 2022}100{/timeline-item}
 </div>
</joe-timeline>
Tabs标签

第一个

第二个

故事1

故事2

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<joe-tabs>
  <div class="_tpl">
    {tabs-pane 第一个}故事1{/tabs-pane}
    {tabs-pane 第二个}故事2{/tabs-pane}
  </div>
</joe-tabs>
按钮

多彩按钮

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<joe-abtn color="#409eff" content="多彩按钮"></joe-abtn>

带图

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<joe-abtn icon="fa-bell" content="带图标按钮"></joe-abtn>
便条按钮
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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>
视频播放器

视频地址:https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217101826WjyFCbUXQ2.mp4

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<joe-dplayer src="https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217101826WjyFCbUXQ2.mp4"></joe-dplyer>

```html
<joe-dplayer src="https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217101826WjyFCbUXQ2.mp4"></joe-dplyer>
```html
<joe-dplayer src="https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217101826WjyFCbUXQ2.mp4"></joe-dplyer>
Bilibili 视频

视频地址:https://www.bilibili.com/video/BV12h411k7vr

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<joe-bilibili bvid="BV12h411k7vr"></joe-bilibili>
pdf的展示方式
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<joe-pdf
src="https://bbchin.com/upload/2022/03/Node%E7%9A%84%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%AE%9E%E7%8E%B0-0a7b571b1a5b4a0d8f810a253afe7077.pdf"
></joe-pdf>
网易云歌单
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<joe-mlist id="6800335663"></joe-mlist>
网易云单曲
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<joe-music id="1303046498"></joe-music>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<joe-mp3
  name="天生狂野-柴古唐斯主题曲"
  url="https://bbchin.com/upload/2022/04/%E5%A4%A9%E7%94%9F%E7%8B%82%E9%87%8E-%E6%9F%B4%E5%8F%A4%E5%94%90%E6%96%AF%E4%B8%BB%E9%A2%98%E6%9B%B2.mp3"
  theme="red"
  cover="https://bbchin.com/upload/2022/04/cgts.png"
  autoplay
></joe-mp3>
消息提示
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
    • 跑马灯
    • 彩色虚线
    • 时间线
    • Tabs标签
    • 按钮
    • 便条按钮
    • 视频播放器
    • Bilibili 视频
    • pdf的展示方式
    • 网易云歌单
    • 网易云单曲
    • 消息提示
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档