在信息密度与阅读节奏之间，找到恰当的留白
组件只负责建立秩序，让标题、摘要和图像自然形成阅读节奏。把界面的声音放轻，内容才能被清楚地听见。
Light DOM · Web Components
为内容而生的编辑式组件库
以编辑式排版、安静材质与清晰交互建立阅读秩序。让每一个标题、每一段摘要和每一次切换，都为内容服务。
$
npm install @zaihuanews/florui此预览展示下一版本。当前已发布的 0.2.x 使用 Astro，Web Components 版本尚未发布。
A considered foundation
少一点界面噪声，
多一点阅读秩序。
从内容流到编辑工具，FlorUI 提供恰到好处的结构，让界面保持清晰，也为你的品牌留出空间。
01
内容优先
标题、摘要与媒体拥有清晰的层级。组件尊重原生语义，让内容在交互之前就完整可读。
02
安静材质
克制的模糊、边框与色彩层次，让界面退后一步。浅色和深色模式共享同一套设计语言。
03
自适应节奏
从宽屏编辑台到掌中的新闻流，布局、留白和触摸交互跟随阅读场景自然调整。
当前日期：2026-08-08
Community poll
你最常使用哪一种阅读主题？
Built on the web
从语义 HTML 开始。
原生 CSS 定义外观，Web Components 增强必要交互。没有框架运行时，内容与主题保持可组合。
<!-- 在服务端或构建时输出 -->
<flor-modal>
<button class="flor-button" data-flor-modal-open>
打开阅读设置
</button>
<dialog data-flor-modal aria-labelledby="title">
<h2 id="title">阅读设置</h2>
<button data-flor-modal-close>完成</button>
</dialog>
</flor-modal>
<!-- 浏览器入口 -->
<script type="module">
import '@zaihuanews/florui/register';
</script>