步骤

current 是正在进行的那一步的下标。它之前的都已完成并打上对勾；它之后的都还没到。当前那一步带着 aria-current="step"，所以除了配色之外还会被播报出来。

基础步骤

  1. 安装

  2. 写一个页面

  3. 构建

  4. 部署

steps({
  current: 1,
  items: [
    { title: '安装' },
    { title: '写一个页面' },
    { title: '构建' },
    { title: '部署' },
  ],
})

带描述

  1. 安装

    npm install -D sitelo

  2. 写一个页面

    src/index.ht.js

  3. 构建

    sitelo build

  4. 部署

    发布 dist/

steps({
  current: 2,
  items: [
    { title: '安装', description: 'npm install -D sitelo' },
    { title: '写一个页面', description: 'src/index.ht.js' },
    { title: '构建', description: 'sitelo build' },
    { title: '部署', description: '发布 dist/' },
  ],
})

垂直

当描述超过寥寥几个字时，竖排更合适。

  1. 装上这个包

    sitelo 自带 Vite，所以别的什么都不用装。

  2. 写一个返回 HTML 的函数

    src/ 里放一个文件，就已经是一整个站点了。

  3. 把产物发布出去

    dist/ 就是纯静态文件——哪家托管都收。

steps({
  direction: 'vertical',
  current: 1,
  items: [
    { title: '装上这个包', description: 'sitelo 自带 Vite，所以别的什么都不用装。' },
    { title: '写一个返回 HTML 的函数', description: 'src/ 里放一个文件，就已经是一整个站点了。' },
    { title: '把产物发布出去', description: 'dist/ 就是纯静态文件——哪家托管都收。' },
  ],
})

一步都还没做

  1. 安装

  2. 配置

  3. 部署

steps({ current: 0, items: ['安装', '配置', '部署'] })

全部完成

把 current 设到最后一个下标之后，所有步骤就都读作已完成。

  1. 安装

  2. 配置

  3. 部署

steps({ current: 3, items: ['安装', '配置', '部署'] })

在手机上

横排在窄屏上无处可去，所以宽度低于 40rem 时它会自己变成竖排——不需要任何属性。把这个窗口拉窄就能看到。

给它命名

这个列表是一个 <ol>，顺序本来就写在里面了。当页面上有不止一组步骤、需要区分时，再加上 label。

  1. 构建

  2. 上传

  3. 刷新缓存

steps({
  label: '部署进度',
  current: 1,
  items: ['构建', '上传', '刷新缓存'],
})

让流程往前走

状态就是三个类名加一个 aria-current，分散在每一步上。setStep() 会把它们一起挪动，所以在浏览器里推进的向导只是一次调用，而不是一个循环。

索引越过最后一步，就把每一步都留在完成状态——一个走完的流程正是这个样子。或者直接写在事件属性里，什么都不用打包：

button({ onclick: "import('/su/steps.js').then(m=>m.set('checkout',2))" }, 'Next')

或者从你自己的模块里调用——如果本来就有一个在跑的话：

import { setStep } from 'sitelo/ui/client'

setStep('checkout', 2)

属性

属性类型默认值说明
itemsArray[]字符串，或 { title, description } 对象。
currentnumber0正在进行那一步的下标。
direction'horizontal' | 'vertical''horizontal'排布方向。横排在 40rem 以下会转成竖排。
labelstring—列表的无障碍名称。