交互式组件

EmojiClock

现在几点了？

🕧 (半小时) 🕖 (5分钟) 🕞 (指定时间)

FeedCard 和 FeedGroup

用于在友链页面展示链接，由于友链页面的 Markdown 部分要可能会显示这个组件，就放在这个目录下大家都能调用了。去友链页面看看吧。

Galgame

一个简单的视觉小说游戏引擎，支持多段文字、剧情分支选项、历史回顾等功能。

无游戏数据

数据结构

每个段落包含：

属性	类型	说明
`id`	`string`	段落唯一标识符
`speaker`	`string?`	发言人名称
`text`	`string`	段落文本（支持 `\n` 换行）
`choices`	`Choice[]?`	选择支选项
`isEnding`	`boolean?`	是否为结局

选择支包含：

属性	类型	说明
`text`	`string`	选项显示文本
`next`	`string`	跳转到的段落 ID
`mark`	`string \| object?`	保存的标记（用于条件判断）
`visible`	`boolean \| function?`	是否显示该选项

属性说明

属性	类型	默认值	说明
`data`	`GalgameData \| string`	无	游戏数据或加载路径
`showHistory`	`boolean`	`true`	是否显示历史回顾按钮
`showRestart`	`boolean`	`true`	是否显示重新开始按钮

Folding

折叠组件，支持折叠和展开，可以嵌套使用。

可以通过标题插槽传值超链接粗体 Inline code

默认插槽的超链接粗体 Inline code

折叠还可以嵌套

默认展开的折叠。

在嵌套使用的组件内部使用 MDC 的 #slotname 插槽语法

必须缩进，否则会报错。

- 默认展开的折叠。

Key

按下键时会亮，可以通过 @press 配置触发事件，鼠标点击也会触发事件，博客全站搜索框的按键提示使用了这个组件。

纯 Code
Esc F2 Ctrl A Space Tab Enter
指定修饰符、图标、文本（macOS 自动使用图标）
⌃ ⌥ ⇧ 空格 ⇥ ↵
组合键
Ctrl+Shift+A Shift+Alt ⌃⌥⎋

~~热血组合技 ↑ ↑ ↓ ↓ ← → ← → B A~~

Tab

Tab 组件支持两种样式：默认的标签栏样式和下拉框样式。

标签栏样式（默认）

# 一个简单的 Tab

是这样。

带边框的标签栏样式

HTML 是网页的基础标记语言，定义了网页的结构。

带边框的下拉框样式

React 是一个由 Facebook 开发的 JavaScript 库，用于构建用户界面。

属性说明

属性	类型	说明	示例
`tabs`	`string[]`	标签页名称数组	`["Tab1", "Tab2"]`
`center`	`boolean`	是否居中显示（仅限标签栏样式）	`true` / `false`
`active`	`number`	默认显示的标签页（下标从 1 开始）	`1`、`2`、`3`
`combobox`	`boolean`	是否使用下拉框样式，默认为标签栏样式	`true` / `false`
`border`	`boolean`	是否为整个 Tab 组件外层显示边框背景框	`true` / `false`

功能特性

标签栏样式：传统的选项卡展示方式，适合选项较少的场景
下拉框样式：紧凑的下拉菜单展示方式，支持搜索过滤，适合选项较多的场景

插槽

使用 #tab{n} 插槽来定义第 n 个标签页的内容，其中 n 从 1 开始。

mdc

::tab{:tabs='["标签1", "标签2", "标签3"]'}
#tab1
标签 1 的内容
#tab2
标签 2 的内容
#tab3
标签 3 的内容
::

Timeline

前天: 看到了小兔
昨天: 是小鹿
今天: 是你。

今日无事
今日依旧无事
然后——: 一件事
两件事。; 再添一笔。

Tip

我是一条小提示，我没有图标， +v 点击就能复制，太方便了！

交互式组件

交互式组件

交互式组件

评论