Yggdrasil
首页笔记归档友链关于
搜索⌘K
关于

组件图鉴

56 个组件,都来自正式页面,其中 43 个可以直接操作。

复选框

Checkbox

从一个小小的勾选,确认心中的选择。

接收更新
自动备份

开关

ToggleSwitch

轻轻拨动,让设置进入另一种状态。

下拉选择

FormSelect

在有序的选项中,找到合适的那一个。

单选框

Radio

让每一次选择,都清晰而确定。

输入框

FormInput

给文字一个安静的落点。

多行输入框

FormTextarea

容得下一段话。

时间选择

TimePicker

为下一次发生,留一个准确的时刻。

表单标签

FormLabel

用清晰的名字,解释一次输入。

输入栏

Composer

一句话的入口,圆润、安静。

输入栏输入框

ComposerInput

单行或多行,输入法组合时不抢跑。

发送键

ComposerSend

陶土色的一键送出。

分段控件

SegmentedControl

在不同视角之间,自然地切换。

上一页2 / 8下一页

分页导航

Pagination

每一次翻页,都是一次继续。

第 1–20 篇,共 57 篇
上一页1 / 3下一页

表格分页

TablePager

表格底边的一行,告诉你看到了第几条。

复制链接搜索⌘K向右旋转R

文字提示

Tooltip

恰到好处地,多说一句。

交互浮层

Popover

把下一步,放在触手可及的地方。

弹窗外壳

ModalShell

为需要专注的内容,留一处空间。

危险确认

ConfirmDialog

不可撤回之前,再确认一次。

已保存,新的想法正在生长。

状态提示

AlertBox

让结果被看见,也被理解。

已发布草稿待审核3 天后清除新

状态徽章

StatusBadge

用一个轻巧的标记,交代当前状态。

已发布草稿Docker 沙箱即将过期已吊销

状态圆点

StatusDot

一颗小圆点,安静地说明此刻的状态。

设计12灵感

标签

TagChip

让零散的内容,有迹可循。

叶Yggdrasil 的头像

用户头像

UserAvatar

一张头像,也有温柔的替补。

图片占位

ImagePlaceholder

图片缺席时,留一个安静的位置。

这里,等待第一颗种子。

写下一个新的开始。

空状态

EmptyState

还没有内容,也是故事的开始。

文章暂时没能加载

网络或服务出了点问题,稍后再试一次。

区块加载失败

LoadError

一块内容没能到来,别的照常可读。

第 1–3 张,共 5 张
上一页1 / 2下一页
已选 2 张 · 按勾选顺序插入

素材选择弹窗

AssetPickerModal

从素材库搜索、翻页并按勾选顺序选择图片。

  • 封面.webp1.2 MB已上传
  • 相册-02.png上传中
  • 草稿插图.jpg420 KB等待中
  • 超大原图.png大小超过 5MB 限制移除

素材上传弹窗

AssetUploadModal

选择、拖入或粘贴图片,并查看逐文件状态。

运行器进入视野后加载编辑器和终端…

代码运行器

CodeRunner

用 CodeMirror 编辑代码并在 Xterm 中查看运行输出。

青
青禾作者昨天 17:30

春天的第一片叶子,总会记得来时的风。

阿
阿木昨天 18:02

我也喜欢这句话,愿枝繁叶茂。

评论卡片外壳

CommentCardShell

评论卡片共享骨架,统一头像、层级缩进与状态展示。

评论编辑器将在卡片出现时加载

评论表单

CommentForm

填写匿名身份与评论内容,提交后查看本地结果。

青
青禾作者昨天 17:30

春天的第一片叶子,总会记得来时的风。

阿
阿木昨天 18:02

我也喜欢这句话。

评论项

CommentItem

已审核评论卡片,支持嵌套层级、作者标识与展开回复草稿。

青
青禾作者昨天 17:30

春天的第一片叶子,总会记得来时的风。

叶
叶子访客2026-09-22审核中
这条样例评论正在等待审核。

评论列表

CommentList

已审核与待审核评论合并树,支持时序排序与深度缩进。

叶
叶子访客2026-01-01审核中
这条样例评论正在等待审核。

待审核评论项

PendingCommentItem

展示评论作者、正文和审核中状态。

评论编辑器将在卡片出现时加载

评论区

CommentSection

表单、数量、回复树与空状态组成完整评论区。

图标

Icon

一套线条,指向每一个动作。

按钮

Button

一次点击,一个明确的结果。

复制链接搜索⌘K收起侧栏删除

图标按钮

IconButton

省下文字,但不省下名字。

天

超过保留期的日志由后台任务自动清理。

数字输入

NumberInput

把数字和它的单位放在一起。

更多操作

操作菜单

Menu

把不常用的操作,收进一个按钮里。

提示

ToastRegion

做完一件事,轻声告诉你结果。

底部抽屉

BottomSheet

从屏幕底部升起,手指一拨就收回。

关于/组件图鉴/复选框

面包屑

Breadcrumb

告诉你从哪里来,现在在哪里。

搜索面板

SearchPalette

按下 ⌘K,从任何地方出发。

左侧抽屉

SideSheet

从左边滑出,向左一推就收起。

后台命令面板

AdminPalette

按下 ⌘K,找文章、做操作、去别处。

从一片叶子开始

一片叶子,也记得来时的风。 这段固定文章展示正文排版和图片,不连接任何服务。

沿途所见

  • 清晨的光
  • 缓慢生长的枝条

让想法,像树一样生长。

let leaf = "Yggdrasil";
println!("{leaf}");

留下一张照片

暖白纸面上的一轮陶土色圆

文章正文

PostContent

渲染文章标题、列表、引用、代码与图片。

封面图片封面图片

文章封面

PostCover

文章封面,用于文章阅读与展示。

上一篇沿着风的方向下一篇下一圈年轮

文章页脚

PostFooter

正文后的上一篇与下一篇。

文章/设计

让想法生根

在时间的缝隙里,种下一些文字。记录设计、代码与日常,让零散的念头慢慢长成一片风景。

2026.09.233 分钟620 字

  • 设计

文章页头

PostHeader

用面包屑、衬线标题、导语、阅读信息与标签,开启一篇文章。

文章目录
  • 从一片叶子开始
    • 沿途所见
  • 留下一张照片
已读

从一片叶子开始

一片叶子,也记得来时的风。 这段固定文章展示正文排版和图片,不连接任何服务。

沿途所见

  • 清晨的光
  • 缓慢生长的枝条

让想法,像树一样生长。

let leaf = "Yggdrasil";
println!("{leaf}");

留下一张照片

暖白纸面上的一轮陶土色圆

文章目录

PostToc

按标题层级导航文章章节。

SELECT id, title, published, views FROM posts LIMIT 3;3 行 · 8ms
展开idtitlepublishedviews
108让想法生根true1280
107在时间的缝隙里种下文字true856
106未命名草稿:微风与山岗false42

SQL 结果表

SqlResultTable

SQL 结果表,用于后台工具。

滚动到这里后加载真实组件…

富文本编辑器

TiptapEditor

基于 Tiptap 的文章编辑器封装。

滚动到这里后加载真实组件…

代码编辑器

CodeMirrorEditor

基于 CodeMirror 的代码编辑器封装。

滚动到这里后加载真实组件…

终端视图

XtermTerminal

基于 xterm.js 的浏览器终端封装。

暖白纸面上的一轮陶土色圆细线网格上连起的几个点深色背景上层层展开的陶土色弧线

图片灯箱

Lightbox

带缩放档位、左右旋转与缩略条的图片查看器。

复选框

Checkbox

在多个选项中自由选择,或确认一项操作。勾选时,以轻巧的描边动画给予回应。

状态:默认 · 已选 · 危险态

属性

checkedSignal<bool>
当前是否选中,由父组件控制。
onchangeCallback<bool>
选择发生变化时,返回新的布尔值。
dangerSignal<bool>
使用红色强调,适合需要谨慎确认的操作。

用法

let checked = RwSignal::new(false);

view! {
    <Checkbox
        checked=checked
        onchange=move |value: bool| checked.set(value)
    />
}

src/components/ui.rs

打开详情页
© 2026 Yggdrasil
RSS更新日志写作指南由 Rust 与 Leptos 构建