sitelo UI

sitelo-ui 是给 sitelo 用的组件库。每个组件都是一个返回 HTML 字符串的函数，因此可以直接嵌进你正在写的那个页面——没有编译器、没有运行时、也不用水合。

本节里的每个示例，都由渲染其外围页面的同一次构建渲染出来。你看到的就是下面那段代码产出的东西；它也会跟着本站的浅色与深色主题走，因为 sitelo-ui 读的是和文档同一个 data-theme 属性。

布局

• 居中

  容器居中且限宽的一栏页面内容。
• 一二三

  堆叠用间距令牌当间隙的 flex 行或列。
• 1234

  网格能塞几列就排几列，不用媒体查询。
• 或

  分割线区块之间的一条线，可带文字也可不带。
• 宽高比把盒子固定成某个形状，加载时页面就不会跳。

• 一张卡片

  卡片承载成组内容的一块面，含头部、主体和页脚。

排版

• 标题

  说明

  排版会自己挑元素的字号体系。

• 一个标题

  还有一段。

  富文本给来自 Markdown 或 CMS 的原始 HTML 上样式。

• 读一读文档。

  链接带样式的锚点，并附上外链该有的属性。
• 图标同一套网格上的 99 个图形，尺寸和颜色随周围文字。

输入

• 保存取消

  按钮五种变体、五种颜色、三种尺寸。
• 一二

  按钮组把几个按钮拼成一个控件。
• 邮箱

  文本框标签、控件、帮助文本和错误信息，全都接好。
• 主题浅色深色

  下拉选择原生 select，样式配套。
• SitemapRSS 订阅

  复选框真正的 input，用 CSS 装扮而不是替换掉。
• 免费pro

  单选组几个里挑一个，共用一个 name 的单选钮。
• 公开草稿

  开关给「一拨就生效」的设置用的开关。
• 滑块原生 range 输入，样式配套。
• 开关

  切换按钮一个会保持按下状态的按钮。
• abc

  切换组分段控件，可以是按钮，也可以是链接。

数据展示

• ALGHAT+1

  头像有图就用图，没图就用姓名首字母。
• 收件箱12

  徽标别在角上的一个计数或小圆点。
• 通过静态

  标签片一个标签、一个状态、一个筛选项。
• 把鼠标放上来

  提示框悬停和聚焦时的提示，完全用 CSS 画出来。

• 页面	大小
  /	4.1 kB
  /docs	12.7 kB

  表格由数据生成的行列，外面套着滚动容器。
• • 路由

    基于文件

  列表两侧可以各放一样东西的行。

• 

  图注一张图和它的说明，合成一个 figure。

反馈

• 已部署。

  提示图标和 ARIA 角色都跟着颜色走的一条消息。

• 这里什么都没有

  空状态列表在还没有内容时的样子。
• 进度已知进度用进度条，其余用加载转圈。
• 骨架屏照着即将到来的内容形状做的占位。
• 已保存。

  轻提示由脚本添加的一条转瞬即逝的消息。

导航

• 面包屑一条以当前页面收尾的层级路径。
• 分页开窗显示的页码，而且是真正的链接。
• 一二

  标签页链接式，一个标签一个页面——或者就地切换的面板。
• sitelo

  v2

  应用栏一边是品牌，另一边是导航和操作。
• 主题切换浅色与深色，进页面时不会闪。

浮层

• 打开模态框

  模态框基于 popover API 的对话框——全程没有脚本。
• 打开抽屉

  抽屉从边缘滑入的面板，用的是同样的 popover 机制。
• 操作 ▾

  菜单基于 details 的下拉菜单，开合都是白送的。
• 一个问题

  手风琴可折叠的区块，包括互斥模式。
• 展开更多

  不点开就一直藏着。

  折叠面板单独一个「展开更多」，没有手风琴那套外包装。

页面区块

• 一句标题

  再来一句说明。

  首屏区块落地页最上面那块：标题、说明、行动按钮。
• 文档指南 · 组件

  页脚几列链接，下面再来一行。

• 页面数

  204

  +8

  数据指标一个值得一看的数字，以及它的含义。
• 1. 1

     安装

  2. 2

     构建

  步骤带编号的流程，做完的都会标成已完成。

• 1. v2.7

     页面区块

  时间线沿着一条线依次排开的条目。
• sitelo.dev

  设备外框把截图放进浏览器、窗口、手机或终端里。

样式

• 主题定制一次调用改掉每一种颜色、圆角和字体。

接入方式

两行：导入组件，再把 styles() 放进 head。文档里的「组件」页面讲了安装、主题、调用约定和可选的客户端运行时，并用一张表列出了全部导出。

仓库里的 examples/ui 目录会把整套组件渲染在同一个页面上。