@regenbio/regenbio-components-react 1.2.16 → 1.2.17

package/packages/layout/src/components/PageHeader/demo/content.md

@@ -1,206 +0,0 @@
----
-order: 4
-title: 组合示例
----
-
-## 组合示例
-
-使用了 PageHeader 提供的所有能力。
-
-```tsx | pure
-import { MoreOutlined } from '@ant-design/icons';
-import { Button, Dropdown, Menu, PageHeader, Row, Tag, Typography } from 'antd';
-import React from 'react';
-
-const { Paragraph } = Typography;
-
-const menu = (
-  <Menu
-    items={[
-      {
-        key: '1',
-        label: (
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="http://www.alipay.com/"
-          >
-            1st menu item
-          </a>
-        ),
-      },
-      {
-        key: '2',
-        label: (
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="http://www.taobao.com/"
-          >
-            2nd menu item
-          </a>
-        ),
-      },
-      {
-        key: '3',
-        label: (
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="http://www.tmall.com/"
-          >
-            3rd menu item
-          </a>
-        ),
-      },
-    ]}
-  />
-);
-
-const DropdownMenu = () => (
-  <Dropdown key="more" overlay={menu} placement="bottomRight">
-    <Button type="text" icon={<MoreOutlined style={{ fontSize: 20 }} />} />
-  </Dropdown>
-);
-
-const routes = [
-  {
-    path: 'index',
-    breadcrumbName: 'First-level Menu',
-  },
-  {
-    path: 'first',
-    breadcrumbName: 'Second-level Menu',
-  },
-  {
-    path: 'second',
-    breadcrumbName: 'Third-level Menu',
-  },
-];
-
-const IconLink = ({ src, text }: { src: string; text: string }) => (
-  <a className="example-link">
-    <img className="example-link-icon" src={src} alt={text} />
-    {text}
-  </a>
-);
-
-const content = (
-  <>
-    <Paragraph>
-      Ant Design interprets the color system into two levels: a system-level
-      color system and a product-level color system.
-    </Paragraph>
-    <Paragraph>
-      Ant Design&#x27;s design team preferred to design with the HSB color
-      model, which makes it easier for designers to have a clear psychological
-      expectation of color when adjusting colors, as well as facilitate
-      communication in teams.
-    </Paragraph>
-    <div>
-      <IconLink
-        src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
-        text="Quick Start"
-      />
-      <IconLink
-        src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg"
-        text=" Product Info"
-      />
-      <IconLink
-        src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg"
-        text="Product Doc"
-      />
-    </div>
-  </>
-);
-
-const Content: React.FC<{
-  children: React.ReactNode;
-  extraContent: React.ReactNode;
-}> = ({ children, extraContent }) => (
-  <Row>
-    <div style={{ flex: 1 }}>{children}</div>
-    <div className="image">{extraContent}</div>
-  </Row>
-);
-
-const App: React.FC = () => (
-  <PageHeader
-    title="Title"
-    className="site-page-header"
-    subTitle="This is a subtitle"
-    tags={<Tag color="blue">Running</Tag>}
-    extra={[
-      <Button key="3">Operation</Button>,
-      <Button key="2">Operation</Button>,
-      <Button key="1" type="primary">
-        Primary
-      </Button>,
-      <DropdownMenu key="more" />,
-    ]}
-    avatar={{
-      src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4',
-    }}
-    breadcrumb={{ routes }}
-  >
-    <Content
-      extraContent={
-        <img
-          src="https://gw.alipayobjects.com/zos/antfincdn/K%24NnlsB%26hz/pageHeader.svg"
-          alt="content"
-          width="100%"
-        />
-      }
-    >
-      {content}
-    </Content>
-  </PageHeader>
-);
-
-export default App;
-```
-
-```css
-#components-page-header-demo-content .image {
-  display: flex;
-  align-items: center;
-  margin: 0 0 0 60px;
-}
-
-#components-page-header-demo-content .ant-page-header-rtl .image {
-  margin: 0 60px 0 0;
-}
-
-#components-page-header-demo-content .example-link {
-  margin-right: 16px;
-  line-height: 24px;
-}
-[data-theme='compact'] #components-page-header-demo-content .example-link {
-  line-height: 20px;
-}
-#components-page-header-demo-content .example-link-icon {
-  margin-right: 8px;
-}
-
-[data-theme='compact'] #components-page-header-demo-content .example-link-icon {
-  width: 20px;
-  height: 20px;
-}
-
-#components-page-header-demo-content .ant-page-header-rtl .example-link {
-  float: right;
-  margin-right: 0;
-  margin-left: 16px;
-}
-#components-page-header-demo-content .ant-page-header-rtl .example-link-icon {
-  margin-right: 0;
-  margin-left: 8px;
-}
-
-@media (max-width: 768px) {
-  #components-page-header-demo-content .image {
-    flex: 100%;
-    margin: 24px 0 0;
-  }
-}
-```

package/packages/layout/src/components/PageHeader/demo/ghost.en-US.md

@@ -1,52 +0,0 @@
----
-order: 2
-title: white background mode
----
-
-## white background mode
-
-The default PageHeader is a transparent background. In some cases, PageHeader needs its own background color.
-
-```tsx | pure
-import { Button, Descriptions, PageHeader } from 'antd';
-import React from 'react';
-
-const App: React.FC = () => (
-  <div className="site-page-header-ghost-wrapper">
-    <PageHeader
-      ghost={false}
-      onBack={() => window.history.back()}
-      oldtitle="Title"
-      suboldtitle="This is a subtitle"
-      extra={[
-        <Button key="3">Operation</Button>,
-        <Button key="2">Operation</Button>,
-        <Button key="1" type="primary">
-          Primary
-        </Button>,
-      ]}
-    >
-      <Descriptions size="small" column={3}>
-        <Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
-        <Descriptions.Item label="Association">
-          <a>421421</a>
-        </Descriptions.Item>
-        <Descriptions.Item label="Creation Time">2017-01-10</Descriptions.Item>
-        <Descriptions.Item label="Effective Time">2017-10-10</Descriptions.Item>
-        <Descriptions.Item label="Remarks">
-          Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
-        </Descriptions.Item>
-      </Descriptions>
-    </PageHeader>
-  </div>
-);
-
-export default App;
-```
-
-```css
-.site-page-header-ghost-wrapper {
-  padding: 24px;
-  background-color: hsl(220, 23%, 97%);
-}
-```

package/packages/layout/src/components/PageHeader/demo/ghost.md

@@ -1,52 +0,0 @@
----
-order: 2
-title: 白底模式
----
-
-## 白底模式
-
-默认 PageHeader 是透明底色的。在某些情况下，PageHeader 需要自己的背景颜色。
-
-```tsx | pure
-import { Button, Descriptions, PageHeader } from 'antd';
-import React from 'react';
-
-const App: React.FC = () => (
-  <div className="site-page-header-ghost-wrapper">
-    <PageHeader
-      ghost={false}
-      onBack={() => window.history.back()}
-      title="Title"
-      subTitle="This is a subtitle"
-      extra={[
-        <Button key="3">Operation</Button>,
-        <Button key="2">Operation</Button>,
-        <Button key="1" type="primary">
-          Primary
-        </Button>,
-      ]}
-    >
-      <Descriptions size="small" column={3}>
-        <Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
-        <Descriptions.Item label="Association">
-          <a>421421</a>
-        </Descriptions.Item>
-        <Descriptions.Item label="Creation Time">2017-01-10</Descriptions.Item>
-        <Descriptions.Item label="Effective Time">2017-10-10</Descriptions.Item>
-        <Descriptions.Item label="Remarks">
-          Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
-        </Descriptions.Item>
-      </Descriptions>
-    </PageHeader>
-  </div>
-);
-
-export default App;
-```
-
-```css
-.site-page-header-ghost-wrapper {
-  padding: 24px;
-  background-color: hsl(220, 23%, 97%);
-}
-```

package/packages/layout/src/components/PageHeader/demo/responsive.en-US.md

@@ -1,114 +0,0 @@
----
-order: 6
-iframe: 228
-title: responsive
----
-
-## responsive
-
-Under different screen sizes, there should be different performance
-
-```tsx | pure
-import { Button, Descriptions, PageHeader, Statistic, Tabs } from 'antd';
-import React from 'react';
-
-const { TabPane } = Tabs;
-
-const renderContent = (column = 2) => (
-  <Descriptions size="small" column={column}>
-    <Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
-    <Descriptions.Item label="Association">
-      <a>421421</a>
-    </Descriptions.Item>
-    <Descriptions.Item label="Creation Time">2017-01-10</Descriptions.Item>
-    <Descriptions.Item label="Effective Time">2017-10-10</Descriptions.Item>
-    <Descriptions.Item label="Remarks">
-      Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
-    </Descriptions.Item>
-  </Descriptions>
-);
-
-const extraContent = (
-  <div
-    style={{
-      display: 'flex',
-      width: 'max-content',
-      justifyContent: 'flex-end',
-    }}
-  >
-    <Statistic
-      oldtitle="Status"
-      value="Pending"
-      style={{
-        marginInlineEnd: 32,
-      }}
-    />
-    <Statistic oldtitle="Price" prefix="$" value={568.08} />
-  </div>
-);
-
-const Content: React.FC<{
-  children: React.ReactNode;
-  extra: React.ReactNode;
-}> = ({ children, extra }) => (
-  <div className="content">
-    <div className="main">{children}</div>
-    <div className="extra">{extra}</div>
-  </div>
-);
-
-const App: React.FC = () => (
-  <PageHeader
-    className="site-page-header-responsive"
-    onBack={() => window.history.back()}
-    oldtitle="Title"
-    suboldtitle="This is a subtitle"
-    extra={[
-      <Button key="3">Operation</Button>,
-      <Button key="2">Operation</Button>,
-      <Button key="1" type="primary">
-        Primary
-      </Button>,
-    ]}
-    footer={
-      <Tabs defaultActiveKey="1">
-        <TabPane tab="Details" key="1" />
-        <TabPane tab="Rule" key="2" />
-      </Tabs>
-    }
-  >
-    <Content extra={extraContent}>{renderContent()}</Content>
-  </PageHeader>
-);
-
-export default App;
-```
-
-<style>
-tr:last-child td {
-  padding-bottom: 0;
-}
-.ant-statistic-content {
-  font-size: 20px;
-  line-height: 28px;
-}
-#components-page-header-demo-responsive .content {
-  display: flex;
-}
-@media (max-width: 576px) {
-  #components-page-header-demo-responsive .content {
-    display: block;
-  }
-
-  #components-page-header-demo-responsive .main {
-    width: 100%;
-    margin-bottom: 12px;
-  }
-
-  #components-page-header-demo-responsive .extra {
-    width: 100%;
-    margin-left: 0;
-    text-align: left;
-  }
-}
-</style>

package/packages/layout/src/components/PageHeader/demo/responsive.md

@@ -1,114 +0,0 @@
----
-order: 6
-iframe: 228
-title: 响应式
----
-
-## 响应式
-
-在不同大小的屏幕下，应该有不同的表现。
-
-```tsx | pure
-import { Button, Descriptions, PageHeader, Statistic, Tabs } from 'antd';
-import React from 'react';
-
-const { TabPane } = Tabs;
-
-const renderContent = (column = 2) => (
-  <Descriptions size="small" column={column}>
-    <Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
-    <Descriptions.Item label="Association">
-      <a>421421</a>
-    </Descriptions.Item>
-    <Descriptions.Item label="Creation Time">2017-01-10</Descriptions.Item>
-    <Descriptions.Item label="Effective Time">2017-10-10</Descriptions.Item>
-    <Descriptions.Item label="Remarks">
-      Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
-    </Descriptions.Item>
-  </Descriptions>
-);
-
-const extraContent = (
-  <div
-    style={{
-      display: 'flex',
-      width: 'max-content',
-      justifyContent: 'flex-end',
-    }}
-  >
-    <Statistic
-      title="Status"
-      value="Pending"
-      style={{
-        marginInlineEnd: 32,
-      }}
-    />
-    <Statistic title="Price" prefix="$" value={568.08} />
-  </div>
-);
-
-const Content: React.FC<{
-  children: React.ReactNode;
-  extra: React.ReactNode;
-}> = ({ children, extra }) => (
-  <div className="content">
-    <div className="main">{children}</div>
-    <div className="extra">{extra}</div>
-  </div>
-);
-
-const App: React.FC = () => (
-  <PageHeader
-    className="site-page-header-responsive"
-    onBack={() => window.history.back()}
-    title="Title"
-    subTitle="This is a subtitle"
-    extra={[
-      <Button key="3">Operation</Button>,
-      <Button key="2">Operation</Button>,
-      <Button key="1" type="primary">
-        Primary
-      </Button>,
-    ]}
-    footer={
-      <Tabs defaultActiveKey="1">
-        <TabPane tab="Details" key="1" />
-        <TabPane tab="Rule" key="2" />
-      </Tabs>
-    }
-  >
-    <Content extra={extraContent}>{renderContent()}</Content>
-  </PageHeader>
-);
-
-export default App;
-```
-
-<style>
-tr:last-child td {
-  padding-bottom: 0;
-}
-.ant-statistic-content {
-  font-size: 20px;
-  line-height: 28px;
-}
-#components-page-header-demo-responsive .content {
-  display: flex;
-}
-@media (max-width: 576px) {
-  #components-page-header-demo-responsive .content {
-    display: block;
-  }
-
-  #components-page-header-demo-responsive .main {
-    width: 100%;
-    margin-bottom: 12px;
-  }
-
-  #components-page-header-demo-responsive .extra {
-    width: 100%;
-    margin-left: 0;
-    text-align: left;
-  }
-}
-</style>

package/packages/layout/src/components/PageHeader/index.en-US.md

@@ -1,39 +0,0 @@
----
-category: Components
-type: Navigation
-title: PageHeader
-cols: 1
-subtitle:
-cover: https://gw.alipayobjects.com/zos/alicdn/6bKE0Cq0R/PageHeader.svg
----
-
-A header with common actions and design elements built in.
-
-## When To Use
-
-PageHeader can be used to highlight the page topic, display important information about the page, and carry the action items related to the current page (including page-level operations, inter-page navigation, etc.) It can also be used as inter-page navigation.
-
-## PageHeader
-
-| Param | Description | Type | Default value | Version |
-| --- | --- | --- | --- | --- |
-| avatar | Avatar next to the title bar | [AvatarProps](/components/avatar/) | - |  |
-| backIcon | Custom back icon, if false the back icon will not be displayed | ReactNode \| boolean | \<ArrowLeft /> |  |
-| breadcrumb | Breadcrumb configuration | [Breadcrumb](/components/breadcrumb/) | - |  |
-| breadcrumbRender | Customize the content of the breadcrumb area | `(props, originBreadcrumb)=> ReactNode` | - | 4.11.0 |
-| extra | Operating area, at the end of the line of the title line | ReactNode | - |  |
-| footer | PageHeader's footer, generally used to render TabBar | ReactNode | - |  |
-| ghost | PageHeader type, will change background color | boolean | true |  |
-| subTitle | Custom subtitle text | ReactNode | - |  |
-| tags | Tag list next to title | [Tag](/components/tag/)\[] \| [Tag](/components/tag/) | - |  |
-| title | Custom title text | ReactNode | - |  |
-| onBack | Back icon click event | () => void | - |  |
-
-<style>
-  [data-theme="dark"] .site-page-header {
-    border: 1px solid #303030;
-  }
-  [data-theme="dark"]  .site-page-header-ghost-wrapper {
-    background-color: rgba(255,255,255,0.08);
-  }
-</style>

package/packages/layout/src/components/PageHeader/index.md

@@ -1,39 +0,0 @@
----
-category: Components
-type: 导航
-title: PageHeader
-cols: 1
-subtitle: 页头
-cover: https://gw.alipayobjects.com/zos/alicdn/6bKE0Cq0R/PageHeader.svg
----
-
-页头位于页容器中，页容器顶部，起到了内容概览和引导页级操作的作用。包括由面包屑、标题、页面内容简介、页面级操作等、页面级导航组成。
-
-## 何时使用
-
-当需要使用户快速理解当前页是什么以及方便用户使用页面功能时使用，通常也可被用作页面间导航。
-
-## PageHeader
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| avatar | 标题栏旁的头像 | [AvatarProps](/components/avatar/) | - |  |
-| backIcon | 自定义 back icon ，如果为 false 不渲染 back icon | ReactNode \| boolean | \<ArrowLeft /> |  |
-| breadcrumb | 面包屑的配置 | [Breadcrumb](/components/breadcrumb/) | - |  |
-| breadcrumbRender | 自定义面包屑区域的内容 | `(props, originBreadcrumb) => ReactNode` | - | 4.11.0 |
-| extra | 操作区，位于 title 行的行尾 | ReactNode | - |  |
-| footer | PageHeader 的页脚，一般用于渲染 TabBar | ReactNode | - |  |
-| ghost | pageHeader 的类型，将会改变背景颜色 | boolean | true |  |
-| subTitle | 自定义的二级标题文字 | ReactNode | - |  |
-| tags | title 旁的 tag 列表 | [Tag](/components/tag/)\[] \| [Tag](/components/tag/) | - |  |
-| title | 自定义标题文字 | ReactNode | - |  |
-| onBack | 返回按钮的点击事件 | () => void | - |  |
-
-<style>
-  [data-theme="dark"] .site-page-header {
-    border: 1px solid #303030;
-  }
-  [data-theme="dark"]  .site-page-header-ghost-wrapper {
-    background-color: rgba(255,255,255,0.08);
-  }
-</style>