Skip to content

Commit

Permalink
docs: 优化组件展示
Browse files Browse the repository at this point in the history
  • Loading branch information
@fikyair
fikyair committed Oct 19, 2021
1 parent 0ace9b6 commit 6532fe1
Show file tree
Hide file tree
Showing 19 changed files with 553 additions and 452 deletions.
42 changes: 0 additions & 42 deletions src/_codeBlock.js
View file

This file was deleted.

34 changes: 0 additions & 34 deletions src/codeBlocks.js
View file

This file was deleted.

228 changes: 119 additions & 109 deletions src/components/Alerts/alert.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,120 +3,130 @@ import { Story, Meta } from "@storybook/react";
import Alert, { BaseAlertProps } from "./alert";
import AlertDoc from "./alert-doc.mdx";
import Card from "../Card/card";
import "../../styles/common.stories";

const BaseAlert = () => {
const commonCss = { width: 450, marginBottom: 20 };
const cardCss = { margin: "20px 20px 0 0" };

return (
<div style={{ display: "flex", width: 1024, flexWrap: "wrap" }}>
<Card title="默认" style={cardCss} shadow>
<Alert
style={commonCss}
message="这是一个 default 类型 alert"
type="default"
/>
<Alert
style={commonCss}
message="这是一个 success 类型 alert"
type="success"
/>
<Alert
style={commonCss}
message="这是一个 danger 类型 alert"
type="danger"
/>
<Alert
style={{ width: 450 }}
message="这是一个 warning 类型 alert"
type="warning"
/>
</Card>
<Card title="显示描述信息" style={cardCss} shadow>
<Alert
style={commonCss}
message="Default"
description="这是一个 primary 类型 alert"
type="default"
/>
<Alert
style={commonCss}
message="Success"
description="这是一个 success 类型 alert"
type="success"
/>
<Alert
style={commonCss}
message="Danger"
description="这是一个 danger 类型 alert"
type="danger"
/>
<Alert
style={{ width: 450 }}
message="Warning"
description="这是一个 warning 类型 alert"
type="warning"
/>
</Card>
<Card title="可以关闭" style={cardCss} shadow>
<Alert
style={commonCss}
closable
message="Default"
description="这是一个 primary 类型 alert"
type="default"
/>
<Alert
style={commonCss}
closable
message="Success"
description="这是一个 success 类型 alert"
type="success"
/>
<Alert
style={commonCss}
closable
message="Danger"
description="这是一个 danger 类型 alert"
type="danger"
/>
<Alert
style={{ width: 450 }}
closable
message="Warning"
description="这是一个 warning 类型 alert"
type="warning"
/>
</Card>
<Card title="Icon" style={cardCss} shadow>
<Alert
style={commonCss}
message="Default"
description="这是一个 primary 类型 alert"
type="default"
icon="camera-retro"
/>
<Alert
style={commonCss}
message="Success"
description="这是一个 success 类型 alert"
type="success"
icon="atom"
/>
<Alert
style={commonCss}
message="Danger"
description="这是一个 danger 类型 alert"
type="danger"
icon="beer"
/>
<Alert
style={{ width: 450 }}
message="Warning"
description="这是一个 warning 类型 alert"
type="warning"
icon="balance-scale"
/>
</Card>
<div className="container">
<div className="item">
<Card title="默认" style={cardCss} shadow>
<Alert
style={commonCss}
message="这是一个 default 类型 alert"
type="default"
/>
<Alert
style={commonCss}
message="这是一个 success 类型 alert"
type="success"
/>
<Alert
style={commonCss}
message="这是一个 danger 类型 alert"
type="danger"
/>
<Alert
style={{ width: 450 }}
message="这是一个 warning 类型 alert"
type="warning"
/>
</Card>
</div>
<div className="item">
<Card title="显示描述信息" style={cardCss} shadow>
<Alert
style={commonCss}
message="Default"
description="这是一个 primary 类型 alert"
type="default"
/>
<Alert
style={commonCss}
message="Success"
description="这是一个 success 类型 alert"
type="success"
/>
<Alert
style={commonCss}
message="Danger"
description="这是一个 danger 类型 alert"
type="danger"
/>
<Alert
style={{ width: 450 }}
message="Warning"
description="这是一个 warning 类型 alert"
type="warning"
/>
</Card>
</div>
<div className="item">
<Card title="可以关闭" style={cardCss} shadow>
<Alert
style={commonCss}
closable
message="Default"
description="这是一个 primary 类型 alert"
type="default"
/>
<Alert
style={commonCss}
closable
message="Success"
description="这是一个 success 类型 alert"
type="success"
/>
<Alert
style={commonCss}
closable
message="Danger"
description="这是一个 danger 类型 alert"
type="danger"
/>
<Alert
style={{ width: 450 }}
closable
message="Warning"
description="这是一个 warning 类型 alert"
type="warning"
/>
</Card>
</div>
<div className="item">
<Card title="Icon" style={cardCss} shadow>
<Alert
style={commonCss}
message="Default"
description="这是一个 primary 类型 alert"
type="default"
icon="camera-retro"
/>
<Alert
style={commonCss}
message="Success"
description="这是一个 success 类型 alert"
type="success"
icon="atom"
/>
<Alert
style={commonCss}
message="Danger"
description="这是一个 danger 类型 alert"
type="danger"
icon="beer"
/>
<Alert
style={{ width: 450 }}
message="Warning"
description="这是一个 warning 类型 alert"
type="warning"
icon="balance-scale"
/>
</Card>
</div>
</div>
);
};
Expand Down
2 changes: 2 additions & 0 deletions src/components/AutoComplete/autoComplete.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { DataSourceType } from "./autoComplete";
import { lakersWithNumber } from "./dataConfig";
import AutoCompleteDoc from "./auto-complete-doc.mdx";
import Card from "../Card/card";
import "../../styles/common.stories";

interface GithubUserProps {
login: string;
url: string;
Expand Down
Loading

0 comments on commit 6532fe1

Please sign in to comment.