Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@hife/catui

hifeteam327MIT2.35.6TypeScript support: included

喜马拉雅国际版前端基础组件库

readme

cat-ui

喜马拉雅国际版前端基础组件库

Build Status codecov HitCount

NPM

浏览器支持

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS Safari
iOS Safari
Electron
Electron
IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions last 2 versions

更新日志

更新日志

安装

npm install @hife/catui

or

yarn add hife-catui

使用

1 在入口中导入 css 文件

// index.js
import '@hife/catui/styles/index.css';

2 使用组件

import { Button } from '@hife/catui';

const App = () => {
  return <Button>Add</Button>;
};

export default App;

3 组件按需加载

  • yarn add babel-plugin-import -D 下载 babel-plugin-import 插件
  • 配置 babel-plugin-import 插件:

webpack.config.js

/**
 * css name covert
 * 1 Button => button
 * 2 ElementSelect => element-select
 * @param {string} name 组件名称
 */
const cssNameConvert = function(name) {
  const len = name.length;
  let ret = '';
  for (let i = 0; i < len; i++) {
    const charCode = name.charCodeAt(i);
    if (charCode >= 65 && charCode <= 90) {
      ret +=
        i === 0
          ? String.fromCharCode(charCode + 32)
          : `-${String.fromCharCode(charCode + 32)}`;
    } else {
      ret += name[i];
    }
  }
  return ret;
};

module.exprots = {
  module: {
    rules: [
      {
        {
          test: /\.(js|mjs|jsx|ts|tsx)$/,
          loader: require.resolve('babel-loader'),
          options: {
            plugins: [
              [
                'import',
                {
                  libraryName: '@hife/catui',
                  libraryDirectory: 'lib/components',
                  "camel2DashComponentName": false,
                  customStyleName: name => {
                    const newName = cssNameConvert(name);
                    return `@hife/catui/styles/${newName}.css`;
                  }
                }
              ]
            ]
          }
        }
      }
    ]
  }
}

开发流程

开发流程

changelog

Release v2.35.5

  • 🐛 (Button) 修复 Button 设置宽度时文字不居中的 bug (#164)

Release v2.35.4

  • 修复 Modal 组件关闭按钮消失的 bug (#163)

Release v2.35.3

  • 🐛 (style) 修复 font-family 错误的 bug (#162)

Release v2.35.2

  • 🐛 (bug) 修复select 组件默认值问题 (#161)

Release v2.35.1

  • 🐛 (Modal) 修复 Modal 组件在隐藏后还会存在于页面导致该区域不可点击的 bug (#158)

Release v2.35.0

  • ✨ (Modal) Modal 组件在 loading 状态时指针状态为 not-allowed (#156)
  • 🐛 (Input) 修复 Input 组件样式 bug (#157)

Release v2.34.1

  • 🐛 (Input) 修复 Input 样式 bug (#155)

Release v2.34.0

  • ✨ (Modal) Modal 组件添加 loading 属性 (#154)

Release v2.33.0

  • ✨ (message) 添加 message 组件当鼠标 hover 在其上时,不会消失的功能 (#152)
  • ✨ (message) message 组件添加直接传字符串的功能 (#151)

Release v2.32.0

  • Select 组件添加 position 属性 (#150)

Release v2.31.0

  • 更新模态框和按钮组件样式 (#149)

Release v2.29.1

  • 🐛 (Select) 修复多个 Select 组件放在一起时,点开一个 Select,其他的 Select 点不开的 bug

Release v2.28.0

  • ✨ (Select) Select 组件添加 containerSelector prop

Release v2.27.1

  • 🐛 (Tooltip) 修复 Tooltip containerSelector 无效的 bug

Release v2.26.0

  • ✨ (Tooltip) Tooltip 组件添加 containerSelector prop

Release v2.25.0

  • ✨ (Search) Search 组件添加 contentStyle props

Release v2.24.0

  • ✨ (Tabs) Tabs.TabPanel 组件添加可以修改 className 和 style 的功能

Release v2.23.2

  • 🐛 (Checkbox) 修复 Checkbox 样式 bug

Release v2.23.1

  • 🐛 (Checkbox) 修复 Checkbox 组件样式 bug

Release v2.23.0

  • ✨ (Checkbox) 添加 Checkbox 组件

Release v2.22.1

  • 🐛 (Input) 修复 Input 右侧 Icon 位置偏下的 bug

Release v2.22.0

  • ✨(Select) 完善 demo
  • 🐛 (value) value 类型 兼容 string 和 number

Release v2.21.0

  • ✨ (Select) add width props, contentStyle, triggerStyle

Release v2.20.5

  • Input 添加id, name
  • Radio 添加ID, name

Release v2.20.0

  • ✨ (Input) Input 添加 customClear prop
  • 🐛 (Modal) 修复 Modal footer 显示不正确的 bug
  • 🐛 (Row) 修复 Row 不支持服务端渲染的 bug

Release v2.19.0

  • ✨ (Radio) 添加 Radio 组件
  • 📝 (Switch) 添加 Switch 组件文档

Release v2.18.0

  • ✨ (Switch) 添加 Switch 组件

Release v2.17.1

  • 🐛 (Modal) 修复 Modal 组件在高度超出屏幕高度时,不能滚动的 bug

Release v2.17.0

  • ✨ (Row) Row 组件添加 gutter 属性
  • ✨ (Notification) 添加 notification.Notification 组件

Release v2.16.0

  • ✨ (notification) 添加 notificaton.default(config)
  • ✨ (Pagination) 添加 Pagination 组件
  • 🐛 (Modal test) 修复 Modal test typescript 错误的 bug
  • ♻️ (components) 修改 tsconfig 配置,并且使所有的组件代码能够在该配置下运行
  • ✨ (OPtimize) 优化 Search 组件, 支持多种调用方式, 优化 Selection, 样式可继承
  • ✨ (Modal) 添加 Modal 文档
  • 🐛 (Modal) 修复 Modal storybook 出错的 bug
  • ♻️ (Modal) 重构 Modal 组件
  • 🐛 (Icon) 修复 Icon 组件 ts 定义的问题

Release v2.15.0

  • ✨ (Select) 新增 Select 组件

Release v2.14.0

  • ✨ (Selection) 新增 Selection 组件
  • ✨ (Search) 新增 Search 组件

Release v2.12.0

  • ✨ (Table) 添加 Table 组件

Release v2.11.3

  • ♻️ (Grid) 修改 Grid 中 Row 和 Col 的导出方式

Release v2.11.2

  • 🐛 (Tooltip) 修复 Tooltip 组件样式不全的 bug

Release v2.11.1

  • 🐛 (Tooltip) 修复 Tooltip 组件未导出的 bug

Release v2.11.0

  • 🐛 (Popover) 修复 Popover.Trigger 组件 children 不能是函数式组件的 bug
  • 🔥 (Question) 移除 Question 组件