README

Pickles 2 CSS 组件。

安装

使用 npm 安装。

$ npm install --save px2style

使用 composer 安装。

$ composer require pickles2/px2style

自定义属性

:root {
	--px2-font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", "Helvetica Neue", "Arial", sans-serif;
	--px2-main-color: #00a0e6;
	--px2-text-color: #333;
	--px2-background-color: #f9f9f9;
	--px2-border-color: #f0f0f0;
}

变更日志

px2style v3.3.0 (2024年9月10日)

• 添加了图片列表字段。
• 添加了图片滑动模块。
• 向旧式滑动模块添加了不推荐标志。
• px2-modal: 改善了 tab 键操作的行为。
• px2-modal 的 contentFill 选项启用时改变了 DOM 结构。
• 将图片字段的 filenameAutoSetter 选项的默认值从 ifEmpty 更改为 random。
• 将图片字段的 format 选项设置为默认转换为 image/webp。
• 向图片字段的 format 选项添加了不执行格式转换的 Boolean false 或 String pass 设置。
• 其他一些细节改进。

px2style v3.2.5 (2024年4月30日)

• px2-modal: 修正了暗黑模式下的样式问题。
• 添加了 auto 主题。
• 改善了 px2-horizontal-list 的边距设置。
• 其他一些细节改进。

px2style v3.2.4 (2023年11月13日)

• 添加了 .px2-index-list。
• 更新了 darkmode 主题。
• 其他一些细节改进。

px2style v3.2.3 (2023年8月29日)

• 在自动调整图片大小功能中，如果注册了 GIF，则不进行转换。

px2style v3.2.2 (2023年7月14日)

• 修正了 px2style.css 中一些模块未构建的错误。
• 修正了 px2style.css 和主题分离的错误。

px2style v3.2.1 (2023年6月25日)

• 改善了 .px2-viewport-fit 的处理。
• 当 .px2-grid 的内容宽度不足时，将其居中。

px2style v3.2.0 (2023年5月1日)

• 修正了 .px2-p、 .px2-section、 .px2-notice、 .px2-tabs 的样式。
• 将基本样式表和 default 主题分开。
• 更新了 darkmode 主题。

px2style v3.1.2 (2023年4月22日)

• 添加了 px2style.form()。
• 添加了 .px2-table.px2-table--dl。
• 添加了 .px2-radio-switch。
• 向 .px2-tabs 添加了标签回退选项。
• 向图片字段添加了注册的图片自动调整大小的功能。
• 向图片字段添加了 format 选项。
• 其他一些细节改进。

px2style v3.1.1 (2023年3月11日)

• 改善了 .px2-a 的样式。

px2style v3.1.0 (2023年2月11日)

• 改善了模块的分类。
• 添加了 px2style__image 字段。
• 改善了 .px2-linklist 的样式。
• 向 .px2-grid 添加了 5/6 宽度。
• 改善了 .px2-grid 的边距设计。
• 从 .px2-image 中删除了 href、target 字段。
• 添加了新的模块 .px2-image-banner-link。
• 错误修复：修正了 .px2-grid 中 3/4 宽度不起作用的问题。
• 向每个 Broccoli 模块明确声明了模块 ID。
• 其他一些细节改进。

px2style v3.0.2 (2022年12月28日)

• 修正了 px2style.modal() 在重叠打开时背景色叠加过重的问题。
• 改善了 px2style.modal() 的元素自动聚焦功能。
• 向 px2style.modal() 添加了选项 height、contentFill。
• 添加了 px2style.getOpenedModalCount()。
• 改善了链接列表的样式。
• 在图片模块中，修正了使用 px2style.modal() 打开放大图片模态的问题。
• 其他一些内部代码的细节改进。

px2style v3.0.1 (2022/11/03)

• 向 px2style.modal() 的选项中添加了 onbgclick。
• 向 px2style.modal() 的选项中添加了 type，添加了 drawer-left 和 drawer-right。
• 在 px2style.modal() 中，如果没有标题和按钮，则自动隐藏头部和尾部。

px2style v3.0.0 (2022/10/16)

• 添加了 Broccoli 模块，并集成了模块功能。
• 引入了 @layer px2style。
• 向 px2style.modal() 中添加了控制背景不滚动的选项。
• 将 px2style.modal() 的容器更改为 dialog 元素。
• 添加了章节模块 .px2-section。
• 对 .px2-button、 .px2-input、 .px-input-group、 .px2-form-input-list 进行了微调。
• 删除了 .px2-header、 .px2-editor-type、 .px2-document、 .px2-slim。
• 废弃了 px2style.setConfig()、 px2style.getConfig()。
• 将暗黑模式从主题文件中分离出来。
• 修复了一些其他错误。

px2style v2.0.20 (2022/07/11)

• 修正了 px2style.modal() 中，由于特定操作导致背景聚焦的问题。

px2style v2.0.19 (2022/06/05)

• 在 px2style.modal() 中，在打开模态后立即将焦点置于模态的标题上。
• 向 px2style.modal() 添加了 replaceBody() 方法。
• 添加了 .px2-note、 .px2-error。
• 修复了一些其他错误。

px2style v2.0.18 (2022/05/06)

• 修复了在使用 .px2-modal 时，点击关闭按钮会发送表单的问题。
• px2style.modal() 现在返回 modal 对象。

px2style v2.0.17 (2022/05/02)

• 在 .px2-modal 中，当表单锁定时，隐藏关闭按钮。

px2style v2.0.16 (2021/11/26)

• 在 .px2-header 中，为可折叠的全球菜单添加了分隔线，以便在小型屏幕上容纳肩部菜单。
• .px2-editor-type--html-gui 的标签从 GUI 更改为 Block。
• .px2-loading 现在比 .px2-modal 更靠前显示。
• 添加了 .px2-open-in-new-window。
• 改善了 .px2-modal 的样式。
• 添加了对 .px2-notice 的暗黑模式支持。
• 当未设置自定义属性时，将应用默认值。
• 其他一些小修。

px2style v2.0.15 (2021/06/26)

• 添加了 --px2-text-color 和 --px2-background-color。

px2style v2.0.14 (2021/04/28)

• 在 .px2-modal 中，添加了一项功能，可以暂时禁用表单操作。
• 其他一些小修。

px2style v2.0.13 (2021/04/04)

• 略微降低了暗黑模式中的对比度。
• 在 .px2-modal 中，添加了一项功能，可以暂时禁用关闭。
• 在 .px2-input 中，添加了错误表示 .px2-input--error。
• 添加了表单输入列表模块 .px2-form-input-list。
• 添加了表单提交区域模块 .px2-form-submit-area。
• 其他一些小修。

px2style v2.0.12 (2021/02/21)

• 添加了 .px2-grid。
• 在 .px2-modal 中添加了关闭按钮。
• 添加了 .px2-input--block。
• 添加了对暗黑模式的支持 body.px2-darkmode。

px2style v2.0.11 (2020/12/10)

• 添加了 .px2-note-list。
• 修复了在 .px2-btn 中禁用时，鼠标操作不响应的问题。
• 修正了拼写错误：从 burette 到 bullet。
• 在 JavaScript 初始化选项中添加了 additionalClassName。
• 更改了文件名：从 styles.css 到 px2style.css，从 scripts.js 到 px2style.js。

px2style v2.0.10 (2020/08/12)

• 添加了 .px2-btn--toggle-on。
• 添加了 .px2-input。
• 添加了 .px2-input-group。

px2style v2.0.9 (2020/05/10)

• 添加了 .px2-notice。
• 添加了 px2style.flashMessage()。
• 改善了 .px2-modal 的样式。
• 在 px2style.modal() 中改善了有关制表键操作的控件。
• px2style.modal() 现在可以通过按 ESC 键关闭。
• 在 px2style.modal() 中添加了 onclose 选项。
• px2style.modal() 现在可以多次打开。

px2style v2.0.8 (2020/03/14)

• 改善了 .px2-modal 的样式。
• 在 px2style.modal() 中添加了 buttonsSecondary 选项。

px2style v2.0.7 (2019/12/13)

• 修复了在 macOS Catalina 中 .px2-btn 没有以正确字体显示的问题。
• 添加了实用工具 .px2-font-size-ll、.px2-font-size-l、.px2-font-size-s、.px2-font-size-ss。
• 添加了实用工具 .px2-text-align-left、.px2-text-align-center、.px2-text-align-right。
• 添加了 .px2-vertical-list。
• 其他一些小修。

px2style v2.0.6 (2019/07/17)

• 修复了在 .px2-header 中与子菜单开关控制相关的问题。
• .px2-header 现在考虑小屏幕的情况，其样式会发生变化。
• 修正了在 .px2-header 中汉堡菜单的写法。

px2style v2.0.5 (2019/05/28)

• 将 px2style.message() 重命名为 px2style.loadingMessage()。

px2style v2.0.4 (2019/05/27)

• 添加了 .px2-header。
• 添加了 px2style.loading()、px2style.message()、px2style.closeLoading()。
• 其他一些小修。

px2style v2.0.3 (2019/01/13)

• 添加了 .px2-link。
• 添加了 .px2-link.px2-link--burette。
• 在 .px2-editor-type 中添加了 alias。
• 将 .px2-editor-type__*** 改为 .px2-editor-type.px2-editor-type--***。（但为了保持向后兼容性，仍然保留了旧格式）
• 添加了列表分类。
• 为按钮动作添加了“按下感觉”。
• 在 px2-modal 中添加了 form 选项。

px2style v2.0.2 (2017/05/30)

• 添加了 .px2-table。
• 添加了 .px2-document。
• 添加了 .px2-p。
• 添加了 .px2-slim。
• 添加了 .px2-responsive。
• 在 px2style.modal() 中添加了 width 选项。

px2style v2.0.1 (2017/04/11)

• 将按钮的背景色设置为不透明。
• 添加了 px2-modal。
• 将 JavaScript 对象名称更改为 window.px2style。

px2style v2.0.0 (2016/09/17)

• 首次发布。

许可证

MIT 许可证

作者

• Tomoya Koyanagi tomk79@gmail.com
• 网站: https://www.pxt.jp/
• Twitter: @tomk79 https://twitter.com/tomk79/