BBB UI 组件反应

此寄存器包含从主库提取的可重复使用的 React 组件库 大蓝色按钮( BBB) 项目。 这些组件提供了一个一致而可自定义的界面,可以在其他项目中被再用,使得它们能够轻松地采用BBB视觉特性.

可用组件

以下是此库中可用的组件列表. 每个部分都有自己的详细文件,并附有使用实例和完整的道具清单.

• 溴化二苯醚
• BBB-Avatar (英语)
• BB 按钮
• BBB 检查框
• BBB 潜水器
• BBHint 语句
• BBB 投入
• BBB 摩多尔
• BBBNavigation 语录
• BBScroll地区
• BBS搜索器
• BBB 选择
• BBB 滑轮
• BBB斯平纳
• BBT文本输出
• BBText 输出
• BBB 趋势
• BBB 切换
• BBB 类型

同伴依赖关系

此库需要在您的工程中安装以下对等依赖 :

react ^18.2.0
react-dom ^18.2.0
styled-components >=5.3.0
react-modal >=3.16.1
@emotion/react ^11.13.0
@emotion/styled ^11.13.0
@mui/material ^6.4.9 || ^7.0.0
@mui/icons-material ^6.4.9 || ^7.0.0
prop-types ^15.8.1
react-icons ^5.5.0

确保安装这些依赖性以避免运行时间出错,并确保兼容性.

您可以安装以下命令:

npm install react react-dom styled-components react-modal @emotion/react @emotion/styled @mui/material @mui/icons-material prop-types react-icons

说明数字 : @tippyjs/react 财务报告和审定财务报表 tippy.js (被"工具通"内部使用) 飞船作为这个库的常有依赖,所以它们被自动安装——不需要自己添加.

用 CSS 变量自定义颜色

此库支持使用 CSS 自定义属性(可变) 的压倒性组件颜色 。 您可以在项目的全球 CSS 或样式表中定义这些变量,以便在不修改库代码的情况下自定义组件的外观 。 这对主题和保持与您的应用设计系统的一致性特别有用.

要使用此特性:

1. 定义您工程根样式中的 CSS 变量( 例如在全局 CSS 文件或通过样式组件) createGlobalStyle) (中文(简体) ).
2. 如果这些变量设置在 :root 元素或母容器.

说明: 这些变量是可选的。 如果不定义, 组件将返回到默认的样式组件主题值, 这些值来自工程的 src/stylesheets/palette.ts 文档.

可用的 CSS 变量

下表列出所支持的CSS变量,用于色彩压倒,取自 src/stylesheets/palette.ts. 每个变量对应组件中使用的特定颜色方面(如中性,品牌,语义等). "Maps to BBB Core Variable"一栏表示该变量是否与标准的BBB核心颜色对齐(基于文件的评论). “ 默认值” 一栏显示如果变量未设定时使用的倒置颜色 .

示例使用数字 :

:root {
  --color-primary: #ff5733; /* Override primary brand color to a custom orange */
  --color-text-default: #333333; /* Darker text for better contrast */
}

如果您需要覆盖特定组件的颜色或添加新的变量,请参考组件的 styles.ts 用于执行细节.

在 JS 中导入颜色托肯

除了CSS变量之外,每个组件内部使用的同一种颜色符号也是 导出为嵌入 colors 对象,直接用于JS/TS(如: 样式组件 :

// From the package root
import { colors } from '@bigbluebutton/bbb-ui-components-react';

// Or from the dedicated, tree-shakeable subpath
import { colors } from '@bigbluebutton/bbb-ui-components-react/colors';

const StyledDiv = styled.div`
  color: ${colors.text.default};
  background: ${colors.background.white};
`;

colors 分类方式与上表相同: neutral, (中文(简体) ), brand, (中文(简体) ), semantic, (中文(简体) ), background, (中文(简体) ), border, (中文(简体) ), text, (中文(简体) ), icon, (中文(简体) ), hover, (中文(简体) ), overlay, (中文(简体) ), shadow, (中文(简体) ), user。 。 。 .

安装

您可以直接从 npm 安装库 :

npm install @bigbluebutton/bbb-ui-components-react

地方发展

如果您想要在当地建立图书馆或贡献:

构建捆绑

nvm use
npm install
npm run build

使用 npm 链接

在本地开发和测试时 npm link,您可能需要调整您的 Webpack 配置,以确保与 styled-components 财务报告和审定财务报表 react,这些实例处理不当。 在使用此库的项目中添加以下别名配置 :

resolve: {
  alias: {
    'styled-components': path.resolve('./node_modules/styled-components'),
    react: path.resolve('./node_modules/react'),
    'react-dom': path.resolve('./node_modules/react-dom'),
  },
}