# @codeandfunction/callaloo 中文文档 规范地址：https://npmcn.com/package/%40codeandfunction/callaloo/ 版本：5\.26\.0 npm 元数据更新时间：2026-10-23T00:46:15.636Z 中文译文更新时间：2026-11-10T06:39:03.421Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40codeandfunction/callaloo 原文对照：https://npmcn.com/package/%40codeandfunction/callaloo/?lang=original ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1.5 MB，255 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：2 个 - peer 依赖：vue ^3\.5\.26 - 首次发布：2024-08-15T15:15:04.413Z - 最新版本发布：2026-10-23T00:46:15.441Z - 近 30 天下载量：2680（2026-10-10 至 2026-11-08，npm 官方下载统计） - 已发布版本数：232（近 12 个月 79 个） ## 中文简介 Callaloo是一个Vue UI图书馆. 它容易被整合到任何Vue3+项目中,足迹很小,可以很容易地被标出,并提供常用组件. ## 安装 ```sh npm install @codeandfunction/callaloo ``` 也可以使用：`pnpm add @codeandfunction/callaloo`、`yarn add @codeandfunction/callaloo`、`bun add @codeandfunction/callaloo` ## README # [卡拉卢](https://callaloo.dev/) Callaloo是一个Vue UI图书馆. 它容易被整合到任何Vue3+项目中,足迹很小,可以很容易地被标出,并提供常用组件. * * * [![npm](https://img.shields.io/npm/v/%40codeandfunction%2Fcallaloo)](https://www.npmjs.com/package/@codeandfunction/callaloo) [![npm](https://img.shields.io/npm/dm/%40codeandfunction%2Fcallaloo)](https://www.npmjs.com/package/@codeandfunction/callaloo) [![Bundle Size](https://img.shields.io/bundlephobia/min/%40codeandfunction%2Fcallaloo)](https://bundlephobia.com/result?p=%40codeandfunction%2Fcallaloo) [![Bundle Size](https://img.shields.io/bundlephobia/minzip/%40codeandfunction%2Fcallaloo)](https://bundlephobia.com/result?p=%40codeandfunction%2Fcallaloo) ## 安装 ```bash pnpm add @codeandfunction/callaloo ``` **或者说** ```bash npm install @codeandfunction/callaloo ``` **或者说** ```bash yarn add @codeandfunction/callaloo ``` ## 示例 以下例子说明如何在您的Vue项目中使用 Callaloo 组件 . ```vue ``` ## 自定义打字和大小 字体,字母间距和基数都是CSS变量,因此可以在没有JavaScript配置的情况下从自己的样式表上覆盖. ```css :root { --clll-base-size: 16px; /* all spacing, font sizes and control heights derive from this */ --clll-font-family: 'Inter', sans-serif; --clll-font-family-heading: 'Playfair Display', serif; --clll-font-family-label: 'Inter', sans-serif; --clll-font-family-mono: 'JetBrains Mono', monospace; --clll-letter-spacing: normal; --clll-letter-spacing-heading: -0.02em; --clll-letter-spacing-label: 0.04em; --clll-letter-spacing-mono: 0; } ``` 见 [主题文件](https://callaloo.dev/docs/getting-started/theming#css-variables) 用于每个变量和哪些组件. ## 通过 CDN 使用 如果您想尝试 Callaloo 没有构建步骤, 您可以直接从 CDN 中加载它 [文档](https://callaloo.dev/#usage-via-cdn)。 。 。 . ## 可用组件 Callaloo运送了一批越来越多的生产准备的Vue 3组件和可堆放物。 核心组成部分包括: - **供应商** - [CL 主题提供器](https://callaloo.dev/docs/getting-started/theming) - 应用级主题和设计符号 - [CL快递](https://callaloo.dev/docs/providers/toast-provider) - 土司通知供应商 - **布局容器( C)** - [克拉达尔](https://callaloo.dev/docs/components/card) - [绘图器](https://callaloo.dev/docs/components/drawer) - [CL 卡罗塞尔](https://callaloo.dev/docs/components/carousel) - [关闭](https://callaloo.dev/docs/components/disclosure) - [列表](https://callaloo.dev/docs/components/table) - [CL 摩多尔](https://callaloo.dev/docs/components/modal) - **导航链接( L)** - [折叠](https://callaloo.dev/docs/components/link) - [克列纳夫林克](https://callaloo.dev/docs/components/navlink) - [CLNav 区](https://callaloo.dev/docs/components/navsection) - **按钮动作( A)** - [CL 按钮](https://callaloo.dev/docs/components/button) - [CLA11y 按钮](https://callaloo.dev/docs/components/a11ybutton) - **形式投入** - [CL 输入](https://callaloo.dev/docs/components/input) - [CL 检查框](https://callaloo.dev/docs/components/checkbox) - [CLRadio 按钮](https://callaloo.dev/docs/components/radio) - [CLS 选择](https://callaloo.dev/docs/components/select) - [CLText区域a](https://callaloo.dev/docs/components/textarea) - **类型和内容** - [CL 标题](https://callaloo.dev/docs/components/heading) - [CLM 请求文本](https://callaloo.dev/docs/components/masked-text) - [中文本](https://callaloo.dev/docs/components/text) - **反馈、状态和重叠** - [CL 文件夹](https://callaloo.dev/docs/components/badge) - [CL班纳](https://callaloo.dev/docs/components/banner) - [电脑](https://callaloo.dev/docs/components/pill) - [CL 进展](https://callaloo.dev/docs/components/progress) - [CLSpinner 软件](https://callaloo.dev/docs/components/spinner) - [CLS克勒通语Name](https://callaloo.dev/docs/components/skeleton) - [CL快递](https://callaloo.dev/docs/components/toast) - [CLD-下梅努](https://callaloo.dev/docs/components/dropdown) - **图标** - [缩写](https://callaloo.dev/docs/components/icon) 和完整的Callaloo [图标集](https://callaloo.dev/docs/assets/icons) - **可编曲** - [使用主题](https://callaloo.dev/docs/getting-started/theming) - 访问和控制主题状态 - [使用图示](https://callaloo.dev/docs/providers/toast-provider) - 启动祝酒词 从应用程序的任何地方 关于每个组件的详细用途、道具和示例,见 [https://callaloo.dev/docs/组件/](https://callaloo.dev/docs/components/)。 。 。 . ## 文档 欲了解更多关于主题内容、更详细的文件和实例,请访问 [正式文件网站](https://callaloo.dev/)。 。 。 . ## 许可证 [麻省理工学院](https://opensource.org/license/MIT) ## 常见问题 ### @codeandfunction/callaloo 是什么？ Callaloo是一个Vue UI图书馆\. 它容易被整合到任何Vue3\+项目中,足迹很小,可以很容易地被标出,并提供常用组件\. ### 如何安装 @codeandfunction/callaloo？ 在项目目录运行 npm install @codeandfunction/callaloo，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.5\.26）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @codeandfunction/callaloo 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @codeandfunction/callaloo 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @codeandfunction/callaloo 可以商用吗？ @codeandfunction/callaloo 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @codeandfunction/callaloo 的下载量有多少？ 根据 npm 官方下载统计，@codeandfunction/callaloo 在 2026/10/10 – 2026/11/08 这 30 天内被下载 2,680 次，日均约 89 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @codeandfunction/callaloo 还在维护吗？ 最新版本 5\.26\.0 发布于 2026/10/23（18 天前）；至今共发布 232 个版本，其中过去 12 个月发布了 79 个；首次发布于 2024/08/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。