八倍八角设计系统组件库

关于

Octuple在不同的页面和频道中创建了共同的语言和视觉一致性. 它代表了资产、公用事业和反应组件的集合,用于建设网络应用程序.

• 设计和开发工作可以迅速建立和复制.
• 减轻设计资源的压力,集中精力解决更大、更复杂的问题.
• 在跨功能团队内部和之间创建统一的语言.
• 建立产品、渠道和可能各自为政的部门之间的视觉一致性.
• 作为设计者和内容贡献者的教育工具和参考.

访问八角星 故事书网站。 。 。 .

更改日志

您可以查看添加、修正和更改的完整列表 更改日志

安装

要安装 Octuple 在您的工程中运行以下命令:

雅伦

yarn add @eightfold.ai/octuple

国家预防机制

npm install @eightfold.ai/octuple

使用量

import { Button } from '@eightfold.ai/octuple';

export const App = () => (
  <>
    <Button text={'Button'} />
  </>
);

并手动导入样式 :

import '@eightfold.ai/octuple/lib/octuple.css';

反应 19

Octuple支持回放16.8并上,包括回放19. 组件不需要 额外设置.

唯一的例外是 DialogHelper绝对如此 反应 19 删除 ReactDOM.render,所以一个回放19 应用必须告诉奥克塔普尔如何 调制。 在启动时、 在任何程序之前登记一次渲染器 DialogHelper 电话 :

import { unstableSetRender, createRootRenderer } from '@eightfold.ai/octuple';
import { createRoot } from 'react-dom/client';

unstableSetRender(createRootRenderer(createRoot));

没有它, DialogHelper.show() 记录设置步骤并什么都不做. createRootRenderer 每个容器缓存一个根, 因此重显示对话框 同一容器进行更新而不是重新装入。 习惯 制发器只要做同样的事情就很好:

unstableSetRender((node, container) => {
  // Must reuse an existing root for this container.
  const root = getOrCreateRoot(container);
  root.render(node);
  return () => root.unmount();
});

在反应18和以下不需要登记——使用遗留路径 自动.

我该怎么贡献?

奥克图普尔计划有多种贡献方式. 检查以下各节 找出哪个适合你.

使用八重机的应用程序和服务报告错误并推荐增强功能

请使用屏幕下方的“ Get Help” 工具提交错误和建议 .

在 GitHub 上创建一期

调取请求

审查拉动请求指南和我们 贡献指南。 。 。 .

许可证

麻省理工学院(c)