卡拉卢

Callaloo是一个Vue UI图书馆. 它容易被整合到任何Vue3+项目中,足迹很小,可以很容易地被标出,并提供常用组件.

安装

pnpm add @codeandfunction/callaloo

或者说

npm install @codeandfunction/callaloo

或者说

yarn add @codeandfunction/callaloo

示例

以下例子说明如何在您的Vue项目中使用 Callaloo 组件 .

<script setup lang="ts">
import CLThemeProvider from '@codeandfunction/callaloo/CLThemeProvider';
import CLButton from '@codeandfunction/callaloo/CLButton';
import { CLSizes } from '@codeandfunction/callaloo';

const onClickHandler = (evt?: Event) => {
  alert('Hello World!');
};
</script>

<template>
  <div class="my-awesome-app">
    <CLThemeProvider>
      <CLButton :on-click="onClickHandler" :size="CLSizes.Medium">Hello world</CLButton>
    </CLThemeProvider>
  </div>
</template>

自定义打字和大小

字体,字母间距和基数都是CSS变量,因此可以在没有JavaScript配置的情况下从自己的样式表上覆盖.

: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;
}

见 主题文件 用于每个变量和哪些组件.

通过 CDN 使用

如果您想尝试 Callaloo 没有构建步骤, 您可以直接从 CDN 中加载它 文档。 。 。 .

可用组件

Callaloo运送了一批越来越多的生产准备的Vue 3组件和可堆放物。 核心组成部分包括:

• 供应商

  • CL 主题提供器 - 应用级主题和设计符号
  • CL快递 - 土司通知供应商

• 布局容器( C)

  • 克拉达尔
  • 绘图器
  • CL 卡罗塞尔
  • 关闭
  • 列表
  • CL 摩多尔

• 导航链接( L)

  • 折叠
  • 克列纳夫林克
  • CLNav 区

• 按钮动作( A)

  • CL 按钮
  • CLA11y 按钮

• 形式投入

  • CL 输入
  • CL 检查框
  • CLRadio 按钮
  • CLS 选择
  • CLText区域a

• 类型和内容

  • CL 标题
  • CLM 请求文本
  • 中文本

• 反馈、状态和重叠

  • CL 文件夹
  • CL班纳
  • 电脑
  • CL 进展
  • CLSpinner 软件
  • CLS克勒通语Name
  • CL快递
  • CLD-下梅努

• 图标

  • 缩写 和完整的Callaloo 图标集

• 可编曲

  • 使用主题 - 访问和控制主题状态
  • 使用图示 - 启动祝酒词 从应用程序的任何地方

关于每个组件的详细用途、道具和示例,见 https://callaloo.dev/docs/组件/。 。 。 .

文档

欲了解更多关于主题内容、更详细的文件和实例,请访问 正式文件网站。 。 。 .

许可证

麻省理工学院