关于

v2 有哪些新特性?

Pico v2.0 带来更好的无障碍支持、基于 SASS 的更简单定制、完整的调色板、全新的分组组件,以及 20 套预编译配色方案,通过 CDN 即可获得总计超过 100 种组合。

全新观感

所有颜色都经过重新精心手工定义,呈现出对比更强、更中性(少一些蓝调)的观感。

默认配色方案的可访问性大幅提升。大多数颜色现已符合 WCAG 2.1 AAA 标准,部分柔和的次要颜色符合 WCAG 2.1 AA 标准。

焦点状态在一致性和对比度上均有改进,间距也做了缩减,整体风格更利落、更中性。

定制更简单

我们重构了所有 .scss 文件,方便你通过 SASS 编译自己版本的 Pico。现在所有模块都可以使用 @use 启用或禁用。

我们新增了更多 CSS 变量,总数已超过 130 个,可以轻松打造独特的观感,提升设计灵活性。

调色板

Pico v2 附带 380 个手工调配的颜色,帮助你个性化自己的品牌设计系统。这些颜色可以导入任意 .scss 文件,并提供了一份包含全部颜色工具类的新样式表。

更好的断点

我们更新了断点,使其匹配标准设备的宽度,并为更大的屏幕新增了断点。

分组组件

借助分组role="group"),你现在可以水平堆叠表单元素和按钮。

条件样式

条件样式 是一项强大的功能,允许你通过将元素包裹在 .pico 容器中选择性地应用样式,非常适合混合风格的环境。这种方式将样式限定在指定区域内,在无缝组合多个样式表或组件时尤其有用。

版本选择器

试试版本选择器,它通过 CDN 为所有 Pico 版本提供 20 套预编译配色方案,组合总数超过 100 种。

破坏性变更

CSS 变量

所有 CSS 自定义属性 都带有 pico- 前缀,以避免与其他 CSS 框架或你自己的变量冲突。我们还新增了 CSS 变量,并按照统一的 {component}-{state}-{property} 模式重命名了部分变量。

SCSS 文件

我们重命名并移动了大量 .scss 文件。如果你导入了 Pico 模块,需要更新你的路径。

按钮

按钮 默认不再是 width: 100%;。只有表单按钮保持全宽,以与其他表单元素保持一致。

表格

.striped 类现在用于表格的斑马纹样式。

手风琴仍然是无类的,而下拉菜单现在需要 .dropdown。我们还移除了允许在导航中通过嵌套列表实现下拉菜单的实验性语法。

栅格

栅格的列现在会在小设备上(<768px)折叠。