# @djthoms/pretty-checkbox 中文文档
规范地址：https://npmcn.com/package/%40djthoms/pretty-checkbox/
版本：3\.1\.0
npm 元数据更新时间：2022-04-05T04:50:40.393Z
中文译文更新时间：2026-11-12T12:22:39.164Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40djthoms/pretty-checkbox
原文对照：https://npmcn.com/package/%40djthoms/pretty-checkbox/?lang=original
项目主页：https://pretty-checkbox.netlify.app/
源码仓库：https://github.com/atomicpages/pretty-checkbox
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：591 kB，77 个文件
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2020-08-17T18:37:27.145Z
- 最新版本发布：2020-09-10T02:43:51.198Z
- 近 30 天下载量：9748（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：2（近 12 个月 0 个）
## 中文简介
一个纯 Css 库来美化复选框和收音机按钮.
## 安装
```sh
npm install @djthoms/pretty-checkbox
```
也可以使用：`pnpm add @djthoms/pretty-checkbox`、`yarn add @djthoms/pretty-checkbox`、`bun add @djthoms/pretty-checkbox`
## README
#
[](https://pretty-checkbox.netlify.app/)
pretty 检查框.cs
#### 一个纯CSS库来美化复选框和收音机按钮.
[](https://github.com/atomicpages/pretty-checkbox/releases)[ ](https://npmcn.com/package/%40djthoms/pretty-checkbox/LICENSE)[](https://npmcn.com/package/%40djthoms/pretty-checkbox/#)
**Demo and documentation**
[https://pretty-checkbox.netlify.app/](https://pretty-checkbox.netlify.app/)
## 特征
- 基础
- **形状** - 说吧 _平方边_, (中文(简体) ), _曲线_, (中文(简体) ), _回合_
- **备选案文** - 说吧 _默认_, (中文(简体) ), _填充_, (中文(简体) ), _细_
- **颜色** - 说吧 _小学_, (中文(简体) ), _成绩_, (中文(简体) ), _资讯_, (中文(简体) ), _3⁄4 ̄ ̧漯B_, (中文(简体) ), _危险_
- **颜色类型** - 说吧 _固态_, (中文(简体) ), _大纲_
- **动画** - 说吧 _平滑_, (中文(简体) ), _塔达_, (中文(简体) ), _果冻_, (中文(简体) ), _脉搏_, (中文(简体) ), _旋转_
- 切换 - iOS 样式 - _大纲_, (中文(简体) ), _填充_, (中文(简体) ), _斯莱姆_
- 响应
- 没有 Java 脚本
- 自定义字体图标
- SVG 图标
- 图像支持
- 在图标/ SVG / 图像之间切换
- 锁定
- 国家 _焦点_, (中文(简体) ), _缓冲_, (中文(简体) ), _不确定_
- 支持框架 - _诱饵_, (中文(简体) ), _基金会_, (中文(简体) ), _分层UI_, (中文(简体) ), _布玛_,, , , , , , , , .
- SCSS 定制
- 支持包括移动设备在内的所有现代浏览器
- 方便打印
- 还有.. _我开玩笑的,就这样!_ (中文(简体) )
## 安装
### 从CLI
使用 `npm` 或者说 `yarn`数字 :
```sh
npm install @djthoms/pretty-checkbox # or
yarn add @djthoms/pretty-checkbox
```
添加 `pretty-checkbox.min.css` 在您的 html 中:
### 从CDN
```html
```
### 手工下载
下载源从 [`Github`](https://github.com/atomicpages/pretty-checkbox/archive/master.zip)。 。 。 .
```html
```
`` 是图书馆下载的地方.
### 常设委员会
您也可以导入 `pretty-checkbox.scss` 在您的主要 scs 文件中.
```scss
@import '~@djthoms/pretty-checkbox/src/pretty-checkbox.scss';
```
请参考SCSS设置的文档 .
## 使用量
漂亮的复选框 有很多风格,
| 类名 | 说明 |
| :-- | :-- |
| `p-default` | 基本样式 |
| `p-switch` | iOS 喜欢切换样式 |
| `p-icon` | 自定义字体图标 |
| `p-svg` | 自定义 SVG 文件, 标记 |
| `p-image` | 小图像 |
还有三个形状 `p-round` `p-curve` `p-square` (默认)
### 基本复选框
```html
```
基本复选框有三个变体 `p-fill` `p-thick` `p-outline` (默认)
你可以结合他们.
```html
```
### 切换复选框
开关有三个变体 `p-outline` `p-fill` `p-slim`
```html
```
### 自定义字体图标
```html
```
> **说明**: 分类 " icon " 应加上图标类名称
> **说明**:图标要工作,需要添加相应的字体图标库. 在以上的例子中,我们使用了字体真棒图标。 因此,FontAwesome应该单独列入.
_[更多细节](https://pretty-checkbox.netlify.app/docs/basic-concepts/icons)_
### 特别工作组
支持 SVG 文件在 标记标记, 标记 (``)和图示
```html
```
> **说明**: 将 " svg " 级添加到 img 标记或 svg 标记中.
_[更多细节](https://pretty-checkbox.netlify.app/docs/basic-concepts/icons#svg)_
### 图像
支持任何类型的有效图像格式.
```html
```
> **说明**: " 图像 " 类将添加到印花标记中.
_[更多细节](https://pretty-checkbox.netlify.app/docs/basic-concepts/icons#images)_
### 颜色
有五种坚固的颜色 `p-primary` `p-success` `p-warning` `p-info` `p-danger`
还有五道轮廓颜色 `p-primary-o` `p-success-o` `p-warning-o` `p-info-o` `p-danger-o`
```html
```
> **说明**:彩色类必须在州级中加入. 固体颜色和Ouline颜色在字体图标和切换功能中具有不同的作用.
_[更多细节](https://pretty-checkbox.netlify.app/docs/basic-concepts/colors)_
## RTL 支持
包含 `rtl.css` 在您的源文件中 : smile :
## 再来
还有很多像 **_无线电按钮_** , (中文(简体) ), **_切换_** , (中文(简体) ), **_国家_** , (中文(简体) ), **_动画_** , (中文(简体) ), **_边框减少_** , (中文(简体) ), **_锁定_** , (中文(简体) ), **_缩放_**, (中文(简体) ), **_SCSS 设置_**。 。 。 .
请参考 [文档](https://pretty-checkbox.netlify.app/docs/) 要知道他们.
## 浏览器支持
在所有现代浏览器中工作.
`Chrome >= 26` `Firefox >= 16` `Safari >= 6.1` `Opera >= 15` `IE >= 9`
## 字体图标库
- [字型不错](http://fontawesome.io/icons/)
- [飞毛腿](https://getbootstrap.com/docs/3.3/components/#glyphicons)
- [材料图标( MDI)](https://materialdesignicons.com/)
- [材料图标( ZMDI)](http://zavoloklom.github.io/material-design-iconic-font/icons.html)
- [离子图标](http://ionicons.com/)
- [泰普森斯语Name](http://www.typicons.com/)
- [材料图标 (Google)](https://material.io/icons)
- 另一些没有经过测试,但将会起作用(99%).
## 特别工作组
- [用户界面Kit](https://getuikit.com/docs/icon)
- [羽毛](https://feathericons.com/)
- 其他人员
## 图书馆
- 武杰斯 - 韦杰斯 - VueJs - [pretty 复选框](https://github.com/hamed-ehtesham/pretty-checkbox-vue)
- 角质 - [ngx- pretty 检查框](https://github.com/miladfm/ngx-pretty-checkbox)
- 反应 - [漂亮复选框反应](https://github.com/atomicpages/pretty-checkbox-react)
## 灵感
- [很棒的靴子夹检查框](https://github.com/flatlogic/awesome-bootstrap-checkbox) - 创意
- [动画](http://animista.net/) - 动画
## 捐款
多亏了这些好人 花了宝贵的时间 帮助改进了图书馆 欢迎任何捐款!
## 许可证
这个项目根据麻省理工学院的许可证颁发
❤
## 常见问题
### @djthoms/pretty-checkbox 是什么？
一个纯 Css 库来美化复选框和收音机按钮\.
### 如何安装 @djthoms/pretty-checkbox？
在项目目录运行 npm install @djthoms/pretty-checkbox，或使用 pnpm add / yarn add / bun add。
### @djthoms/pretty-checkbox 支持 TypeScript 吗？
该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/djthoms\_\_pretty-checkbox 是否存在。
### @djthoms/pretty-checkbox 可以商用吗？
@djthoms/pretty-checkbox 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @djthoms/pretty-checkbox 的下载量有多少？
根据 npm 官方下载统计，@djthoms/pretty-checkbox 在 2026/10/13 – 2026/11/11 这 30 天内被下载 9,748 次，日均约 325 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @djthoms/pretty-checkbox 还在维护吗？
最新版本 3\.1\.0 发布于 2020/09/10（6 年前）；至今共发布 2 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/08/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。
