menu
hjthjthjt
hjthjthjt
永远的菜鸡

TigerMaterial 区块 & 样式预览

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

每个区块在处于编辑状态时,其顶部会出现一条工具栏,在左侧最末尾有一个三点(更多),点开可以看到「作为HTML编辑」,在例如使用下方的mark标签时,需要在HTML编辑模式下插入代码。添加完成后,你可以随时回到可视化模式。

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

区块

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

使用时,请选择在区块分类中的「TigerMaterial」中寻找,或键入关键词,关键词见下方。

FontAwesome 图标字体

关键字:font

示例

WordPress:

Android:

用法

因为博客大部分地方用的是 MDUI 自带的 Material Icons,但是不排除文章中有些地方可能会用到图标字体,仅靠 Material Icons 肯定无法满足,所以加了这个区块,它会在出现的位置导入核心 CSS 文件。

添加此区块后,自此区块往下的所有区块均可使用 FontAwesome 图标字体。

可扩展面板

关键词:panel

示例

默认展开

面板内容1

默认不展开

面板内容2

用法

可扩展面板预置两种情况,一种是默认打开第一张面板,一种是面板默认不展开( panel-title )。所有的文本框均支持 HTML 代码。

很直白吧……应该不用过多解释了。

如果需要连续几个面板连在一起,只需要直接接在一起添加即可,会自动合并到同一组里的。

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

按钮

关键字:button

示例

用法

按钮预置四种样式,浮动上色按钮,浮动白色按钮,扁平上色按钮,扁平白色按钮,浮动自定义颜色按钮,扁平自定义颜色按钮。

按打开链接情况分为两种,一种是当前页面打开链接,一种是新窗口打开链接(默认)。

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

复选

关键字:todo

示例



用法

复选预置两种样式,选中和未选中。

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

样式预览

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

使用 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> (选中文本后,点击工具栏中下三角中的「内联代码」即可)

按下 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