大设计图案

大设计重现模式.

文档

你可以找到我们 文档页面。 。 。 .

快速启动指南

添加 @bigcommerce/big-design, (中文(简体) ), @bigcommerce/big-design-patterns 财务报告和审定财务报表 styled-components@6 使用 npm数字 :

npm install @bigcommerce/big-design @bigcommerce/big-design-patterns styled-components@6

或带有 pnpm数字 :

pnpm add @bigcommerce/big-design @bigcommerce/big-design-patterns styled-components@6

按照 快速启动指南 然后导入任意模式,例如 Page 财务报告和审定财务报表 Header把它用在应用程序的任何地方.

import { Panel } from '@bigcommerce/big-design';
import { AddIcon } from '@bigcommerce/big-design-icons';
import { Page, Header } from '@bigcommerce/big-design-patterns';

export default function App() {
  const header = (
    <Header
      title="Products"
      description="View and manage your products."
      actions={[{ text: 'Add new', iconLeft: <AddIcon /> }]}
    />
  );

  return (
    <Page header={header}>
      <Panel header="Main content">
        ...
      </Panel>
    </Page>
  );
}