menu
hjthjthjt
hjthjthjt
永远的菜鸡

TigerMaterial 短代码 & 样式预览

请注意,由于 WordPress 编辑器的转义,部分样式需要使用HTML模式编辑,具体方式为:

古登堡编辑器上部的这条工具栏,在左侧最末尾有一个三点(更多),点开可以看到「作为HTML编辑」,在例如使用下方的mark标签时,需要在HTML编辑模式下插入代码。添加完成后,你可以随时回到可视化模式。

下面的样式预览中,括号内的文字为说明。

短代码

TigerMaterial 内置了三套我认为在博文中能用到的短代码,当然你也可以前往 MDUI 开发文档 直接获取组件后以 HTML 放置在文章中。

使用时,请使用古登堡编辑器的「短代码区块」

TODO

会加入对<code>的短代码支持(其实是写这篇文章累到死)

可扩展面板

示例

默认展开

面板内容1

默认不展开

面板内容2


用法

可扩展面板预置两种情况,一种是默认打开第一张面板(使用 panel-title-open ),一种是面板默认不展开( panel-title ),两种方式的闭合均为 /panel-title。在面板内容中请使用 br 进行换行。

如果有另外的需求可以参阅 MDUI 开发文档

[panel]

[panel-title-open]默认展开[/panel-title]

[panel-content]

面板内容1[br]

[/panel-content]

[panel-title]默认不展开[/panel-title]

[panel-content]

面板内容2[br]

[/panel-content]

[/panel]

按钮

示例

用法

按钮预置四种样式,浮动上色按钮(使用 btn),浮动白色按钮( 使用 btn-white ),扁平上色按钮( 使用 btn-flat),扁平白色按钮( 使用 btn-white-flat) ,四种方式的闭合均为 /btn

按打开链接情况分为两种,一种是当前页面打开链接(使用 btn-url ),一种是新窗口打开链接( btn-url-new ),两种方式的闭合不同 ,根据两种情况分别使用/btn-url/btn-url-new

如果有另外的需求可以参阅 MDUI 开发文档

[btn][btn-url]链接[/btn-url]浮动上色按钮[/btn]

[btn-white][btn-url]链接[/btn-url]浮动上色按钮[/btn]

[btn-flat][btn-url]链接[/btn-url]浮动上色按钮[/btn]

[btn-white-flat][btn-url]链接[/btn-url]浮动上色按钮[/btn]

[btn][btn-url-new]链接[/btn-url-new]浮动上色按钮[/btn]

复选

示例


用法

复选预置两种样式,选中(使用 check),未选中( 使用 uncheck ),两种方式的闭合均为 /check

如果有另外的需求可以参阅 MDUI 开发文档

[check]选中[/check]

[uncheck]未选中[/check]

样式预览

这是一个链接 (使用古登堡编辑器默认的链接添加即可)

使用 mark 标签来高亮文本。 (在 HTML编辑模式 下插入<mark>文字</mark>)

这行文本被视为已删除文本。 (在工具栏中「链接」右侧的下三角中可以找到「删除线」)

这行文本是被强势插入的元素。 (在 HTML编辑模式 下插入 <ins> 文字</mark>)

这行文本带有下划线。 ( 在 HTML编辑模式 下插入 <u> 文字</u>,当然你也可以依赖 WordPress 自带的下划线 Ctrl+U

这行文本字体被缩小了。 (在 HTML编辑模式 下插入 <small> 文字</small>)

这行文本被加粗了。 (在 HTML编辑模式 下插入 <strong> 文字</strong > ,当然你也可以依赖 WordPress 自带的下划线 Ctrl+B

这段文本是斜体的。 (在 HTML编辑模式 下插入 <em> 文字</em > ,当然你也可以依赖 WordPress 自带的下划线 Ctrl+I

响应式设计缩写 RWD ( 在 HTML编辑模式 下插入 <abbr title="悬浮文字">文字</abbr> )

这行文本包含内联代码 <code> (在 HTML编辑模式 下插入 <code> 文字</code>)

按下 Esc 可以关闭对话框 (在 HTML编辑模式 下插入 <kbd> 文字</kbd>)

y = mx + b (在 HTML编辑模式 下插入 <var>文字<var> )

古登堡编辑器快捷键

你也可以在古登堡编辑器上部的这条工具栏,在右侧侧最末尾有一个三点(更多),点开可以看到「键盘快捷键」。

  • 将选定的文本加粗。Ctrl+B
  • 将选定的文本设为斜体。Ctrl+I
  • 将选定的文本转换为链接。Ctrl+K
  • 移除链接。Ctrl+Shift+K
  • 给选定的文本加下划线。Ctrl+U

本文采用 CC BY-NC-SA 3.0 协议进行许可,在您遵循此协议的情况下,可以自由共享与演绎本文章。

本文链接:https://jakting.com/tigermaterial-style-preview