区块
区块
基础区块
主要区块
一个带有标题和主体文本的区块。
无填充的区块(使用block--body)。
区块标题
一个带有标题和主体文本的区块。
主要区块
一个带有标题和主体文本的区块。
次要区块
另一个区块以展示间距。
主要区块
一个带有标题和主体文本的区块。
次要区块
另一个区块以展示间距。
第三区块
行中的第三个区块。
主要区块
一个带有标题和主体文本的区块。
次要区块
另一个区块以展示间距。
第三区块
行中的第三个区块。
第四区块
用于布局演示的第四个区块。
次要区块
另一个区块以展示间距。
高级区块
主区域
主内容可以自然地随着标准间距增长。
旁边区域
此侧区域使用浅色背景突出补充内容。
三区域布局
草稿
左侧面板
次要导航或元数据可以在此显示。
主内容
主要信息保持居中以便于阅读。
右侧面板
上下文操作和见解可以在此侧进行分组。
固定旁边列
一个根据--size比例尺大小的窄列,旁边是吸收剩余宽度的主体。
128
投影
主要区块
一个带有标题和主体文本的区块。
次要区块
另一个区块以展示间距。
卡片
主要区块
一个带有标题和主体文本的区块。
次要区块
另一个区块以展示间距。
第三区块
行中的第三个区块。
角落的标记
`block--mark`在块的开始处的顶部角落放置一个小图标:它是什么 — 在图表中放置的卡片类型,文件的种类 —,在它所说内容的旁边,而不是标题。
主要区块
一个带有标题和主体文本的区块。
主要区块
一个带有标题和主体文本的区块。
主要区块
一个带有标题和主体文本的区块。
作为链接的区块
整个卡片都是链接——通过从多个卡片中选择一张卡片进行选择:一个计划,一个分支,一个模板。它看起来像文本,而不是静音的动作;在指针下,它的地面带有细微的色调,边缘变得坚固,键盘通过每个控件佩戴的焦点环找到它。
数字
一个居中的超大值或图标。用于仪表板计数器和状态图块——添加block--square以在宽度变化时保持图块为正方形。
吞吐量
42
每秒事件
关键指标
作为仪表板的关键指标读取的数字:`block--figure--start`从行的开始处放置,标签在上方,值与其单位向后设置(`block--figure-unit`),下面有一行说明它由什么组成(`block--figure-sub`)。`block--tone-cat-<name>`沿边缘绘制类别的条;一个`a.block--link`打开该指标的视图。在`grid`中,行在空间缩小时变为多行。
带有色调的区块
一种状态或类别的颜色——作为前缘下的条形,除此之外没有其他:这个条形与信息所携带的相同,没有着色的地面,因此它们的列表看起来像一个列表而不是警报。任何区块都可以采用它,包括一个站在区块上的条形。
block--tone-info — 地面保持区块自身,只有前缘带有颜色。
block--tone-success — 地面保持区块自身,只有前缘带有颜色。
block--tone-warning — 地面保持区块自身,只有前缘带有颜色。
block--tone-error — 地面保持区块自身,只有前缘带有颜色。
block--tone-cat-lavender — 地面保持区块自身,只有前缘带有颜色。
堆叠
水平
相等的列,满宽度,溢出时换行。
一
二
三
四
垂直
堆叠的行,满宽度,均匀间隙。
一
二
三
拆分
第一个子项增长,最后一个子项保持固定——用于引导+动作行。
在此引导文本中描述操作。
角落中的操作
在框架上使用`has-corner-actions` — 一个引导框、一个块、一段代码块或一条消息 — 以及它的图标操作在其中的`corner-actions`:在框架的末尾的顶部角落,指向该框架或持有键盘时显示,在没有指针的屏幕上始终可见(使用`corner-actions--always`始终显示)。一个包含运行文本的框架保持一列空白以供它们使用。
此引导可通过其角落的按钮复制。
嵌套
包含垂直堆叠的水平堆叠——典型的仪表板网格。
ONEONE
ONETWO
ONETHREE
TWOONE
TWOTWO
TWOTHREE
THREEONE
THREETWO
THREETHREE