8 |
9 | 404
10 |
11 | 啊哦~，您要找的页面不存在。
12 | 返回首页
13 |
14 |
15 |
20 |
(
39 |
40 | Card content
41 |
42 | )}
43 | />,
44 | mountNode,
45 | );
46 | ```
47 |
--------------------------------------------------------------------------------
/components/select/index.zh-CN.md:
--------------------------------------------------------------------------------
1 | ---
2 | category: Components
3 | subtitle: 选择器
4 | type: 数据录入
5 | title: Select
6 | ---
7 |
8 | 当用户需要从一组同类数据中选择一个或多个时，可以使用下拉选择器，点击后选择对应项。
9 |
10 | ## 设计规范
11 |
12 | #### 默认主题
13 |
14 | - 选择器常规高度为 32px，小尺寸的高度为 24px，边框颜色 #D8DAE2，填充色 #FFFFFF，圆角4px;
15 | - 提示文字 12px,颜色 #B1B4C5，输入颜色 #3D446E；
16 | - hover 状态边框颜色 #1D78FF;
17 | - 点击状态边框颜色 #005CE6;
18 | - 禁用状态底色 #EBECF0，禁用说明文字 #B1B4C5；
19 | - 错误样式边框颜色 #F96C5B；
20 |
21 | #### 暗黑主题
22 |
23 | - 下拉框常规高度为 32px，小尺寸的高度为 24px，边框颜色 #2C3047，4px 圆角，宽度根据具体情况而定；
24 | - 提示字颜色 #666666，输入颜色 #BFBFBF；
25 |
26 | ## API
27 |
28 | |类名 |说明 |使用示例 |
29 | |---------|---------|---------|
30 | |.dt-ant-select-dropdown-default | 默认需设置 dropdownClassName 为 dt-ant-select-dropdown-default | UI5.0 额外样式 |
31 | |.dt-form-shadow-bg | 灰色背景,表单样式设置 | 灰色背景(仅默认主题下使用) |
32 | |.dt-form-light-bg | 浅色背景上，显示深色控件 | 浅色背景(仅暗黑主题下使用) |
33 |
--------------------------------------------------------------------------------
/components/empty/index.zh-CN.md:
--------------------------------------------------------------------------------
1 | ---
2 | category: Components
3 | subtitle: 空状态
4 | type: 数据展示
5 | title: Empty
6 | cols: 1
7 | cover: https://gw.alipayobjects.com/zos/alicdn/MNbKfLBVb/Empty.svg
8 | ---
9 |
10 | 空状态时的展示占位图。
11 |
12 | ## 何时使用
13 |
14 | - 当目前没有数据时，用于显式的用户提示。
15 | - 初始化场景时的引导创建流程。
16 |
17 |
33 |
--------------------------------------------------------------------------------
/scripts/changelog.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | while [[ "$#" > 0 ]]; do case $1 in
4 | -r|--release) release="$2"; shift;;
5 | -b|--branch) branch="$2"; shift;;
6 | *) echo "Unknown parameter passed: $1"; exit 1;;
7 | esac; shift; done
8 |
9 | # Default as minor, the argument major, minor or patch:
10 | if [ -z "$release" ]; then
11 | release="minor";
12 | fi
13 |
14 | # Default release branch is master
15 | if [ -z "$branch" ] ; then
16 | branch="master";
17 | fi;
18 |
19 |
20 | # echo "Branch is $branch"
21 | # echo "Release as $release"
22 |
23 | # Tag prefix
24 | prefix=""
25 | # git pull origin $branch
26 | # echo "Current pull origin $branch."
27 |
28 | # Auto generate version number and tag
29 | standard-version -r $release --tag-prefix $prefix --infile CHANGELOG.md
30 |
31 | # git push --follow-tags origin $branch
32 |
33 | # echo "Release finished."
34 |
35 |
36 |
--------------------------------------------------------------------------------
/components/datepicker/demo/disabled.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 3
3 | title:
4 | zh-CN: 禁用
5 | ---
6 |
7 | ## zh-CN
8 |
9 | 选择框的不可用状态。
10 |
11 | ```jsx
12 | import { DatePicker } from '../../index';
13 | import moment from 'dayjs';
14 |
15 | const { MonthPicker, RangePicker } = DatePicker;
16 |
17 | const dateFormat = 'YYYY-MM-DD';
18 | ReactDOM.render(
19 |
20 |
21 |
22 |
23 |
24 |
29 |
,
30 | mountNode,
31 | );
32 | ```
33 |
--------------------------------------------------------------------------------
/custom-icons/iconfont-svgs/DeleteOutlined.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/custom-icons/iconfont-svgs/UploadOutlined.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/components/card/demo/grid-card.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 1
3 | title:
4 | zh-CN: 网格型内嵌卡片
5 | en-US: Grid card
6 | ---
7 |
8 | ## zh-CN
9 |
10 | 一种常见的卡片内容区隔模式。
11 |
12 | ## en-US
13 |
14 | Grid style card content.
15 |
16 | ```jsx
17 | import { Card } from 'antd';
18 |
19 | const gridStyle = {
20 | width: '25%',
21 | textAlign: 'center',
22 | };
23 |
24 | ReactDOM.render(
25 |
26 | Content
27 |
28 | Content
29 |
30 | Content
31 | Content
32 | Content
33 | Content
34 | Content
35 | ,
36 | mountNode,
37 | );
38 | ```
39 |
--------------------------------------------------------------------------------
/components/alert/demo/icon.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 1
3 | title:
4 | zh-CN: 图标
5 | ---
6 |
7 | ## zh-CN
8 |
9 | 可口的图标让信息类型更加醒目。
10 |
11 | ```jsx
12 | import { Alert } from 'antd';
13 |
14 | ReactDOM.render(
15 |
16 |
17 |
18 |
19 |
20 |
21 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
24 |
25 |
26 |
27 |
28 |
,
29 | mountNode,
30 | );
31 | ```
32 |
--------------------------------------------------------------------------------
/scripts/release.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | while [[ "$#" > 0 ]]; do case $1 in
4 | -r|--release) release="$2"; shift;;
5 | -b|--branch) branch="$2"; shift;;
6 | -e|--env) env="$2"; shift;;
7 | *) echo "Unknown parameter passed: $1"; exit 1;;
8 | esac; shift; done
9 |
10 | # Default as minor, the argument major, minor or patch:
11 | if [ -z "$release" ]; then
12 | release="minor";
13 | fi
14 |
15 | # Default release branch is master
16 | if [ -z "$branch" ] ; then
17 | branch="master";
18 | fi;
19 |
20 |
21 | echo "Branch is $branch"
22 | echo "Release as $release"
23 |
24 | # Tag prefix
25 | prefix=""
26 | git pull origin $branch
27 | echo "Current pull origin $branch."
28 |
29 | standard-version -r $release --tag-prefix $prefix --infile CHANGELOG.md
30 |
31 | git push --follow-tags origin $branch
32 |
33 | if [ $env ] ; then
34 | git push --follow-tags $env $branch
35 | fi;
36 |
37 | echo "Release finished."
--------------------------------------------------------------------------------
/theme/static/motion.less:
--------------------------------------------------------------------------------
1 | .motion-container {
2 | height: 190px;
3 | margin: 40px 0 20px;
4 | line-height: 190px;
5 | text-align: center;
6 | }
7 |
8 | .motion-example {
9 | display: inline-block !important;
10 | width: 180px;
11 | height: 180px;
12 | color: #FFF;
13 | font-weight: bold;
14 | font-size: 18px;
15 | line-height: 180px;
16 | text-align: center;
17 | background: url(https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg) center/180px;
18 | border-radius: 8px;
19 | animation-duration: 0.5s !important;
20 | }
21 |
22 | .motion-select-wrapper {
23 | margin-bottom: 40px;
24 | text-align: center;
25 | }
26 |
27 | .motion-select {
28 | width: 180px;
29 | text-align: left;
30 | }
31 |
32 | .video-player {
33 | position: relative;
34 | max-width: 800px;
35 | &-right {
36 | float: right;
37 | width: 616px;
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/theme/template/Layout/Footer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { injectIntl } from 'react-intl';
3 | import config from '../../../bisheng.config';
4 |
5 | class Footer extends React.Component {
6 | constructor(props) {
7 | super(props);
8 |
9 | this.lessLoaded = false;
10 |
11 | this.state = {
12 | color: '#1890ff',
13 | };
14 | }
15 |
16 | render() {
17 | const year = new Date().getFullYear();
18 |
19 | return (
20 |
28 | );
29 | }
30 | }
31 |
32 | export default injectIntl(Footer);
33 |
--------------------------------------------------------------------------------
/components/table/demo/empty.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 1
3 | title:
4 | zh-CN: 无数据，缺省图距顶部 32px
5 | ---
6 |
7 | ## zh-CN
8 |
9 | 固定高度 300，缺省图标未垂直居中展示，而是默认距顶部 32px
10 |
11 | ```jsx
12 | import { Table } from 'antd';
13 |
14 | class App extends React.Component {
15 | state = {};
16 |
17 | render() {
18 | const columns = [
19 | {
20 | title: 'Name',
21 | dataIndex: 'name',
22 | key: 'name',
23 | },
24 | {
25 | title: 'Age',
26 | dataIndex: 'age',
27 | key: 'age',
28 | },
29 | ];
30 | const data = [];
31 | return (
32 |
41 | )
42 | }
43 | }
44 |
45 | ReactDOM.render(, mountNode);
46 | ```
47 |
--------------------------------------------------------------------------------
/custom-icons/iconfont-svgs/ImportOutlined.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/custom-icons/iconfont-svgs/CloseCircleFilled.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/theme/dt-theme/default/reset.less:
--------------------------------------------------------------------------------
1 | @import "~antd/dist/antd.less";
2 |
3 | // 覆盖antd变量
4 | @primary-color: #1D78FF;
5 |
6 | @heading-color: #3D446E;
7 |
8 | @font-size-base: 12px;
9 |
10 | @text-color: #3D446E;
11 |
12 | @border-radius-base: 4px;
13 |
14 | @border-color-base: #D8DAE2;
15 |
16 | @success-color: #11D7B2;
17 |
18 | @error-color: #F96C5B;
19 |
20 | @warning-color: #FBB310;
21 |
22 | @disabled-color: #B1B4C5;
23 |
24 | @disabled-bg: #EBECF0;
25 |
26 | @btn-disable-border: #EBECF0;
27 |
28 | @input-placeholder-color: #B1B4C5;
29 |
30 | @input-height-lg: 36px;
31 |
32 | @input-hover-border-color: #1D78FF;
33 |
34 | @modal-footer-padding-horizontal: 20px;
35 |
36 | @form-item-margin-bottom: 20px;
37 |
38 | @label-required-color: #F96C5B;
39 |
40 | @table-header-bg: #F9F9FA;
41 |
42 | @table-padding-vertical: 19px;
43 |
44 | @item-hover-bg: #F9F9FA;
45 |
46 | @select-item-selected-bg: #F9F9FA;
47 |
48 | @select-item-selected-font-weight: normal;
49 |
--------------------------------------------------------------------------------
/theme/dt-theme/dark/popover.less:
--------------------------------------------------------------------------------
1 | @import "../const.less";
2 |
3 | .ant-popover {
4 | .ant-popover-content {
5 | border: 1px solid #282B40;
6 | border-radius: 3px;
7 | .ant-popover-inner-content {
8 | padding: 16px;
9 | }
10 | }
11 | }
12 |
13 | .ant-popover-buttons {
14 | text-align: left;
15 | margin: 0;
16 | button {
17 | margin-right: 10px;
18 | margin-left: 0;
19 | &:last-child {
20 | color: @white;
21 | border-color: @red_dark;
22 | background-color: @red_dark;
23 | &:hover, &:focus {
24 | color: @white;
25 | background-color: #F08E89;
26 | border-color: #F08E89;
27 | }
28 | &:active, &.active {
29 | color: @white;
30 | border-color: @red_dark;
31 | background-color: @red_dark;
32 | }
33 | }
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/theme/dt-theme/default/input-number.less:
--------------------------------------------------------------------------------
1 | @import "../const.less";
2 |
3 | .ant-input-number {
4 | width: 100px;
5 | border-radius: 4px;
6 | }
7 |
8 | .ant-input-number:focus, .ant-input-number-focused {
9 | border-color: @clickColor;
10 | }
11 |
12 | // 前置/后置标签样式
13 | .ant-input-number-group-wrapper {
14 | width: 208px;
15 | }
16 |
17 | .dt-input-number-disabled {
18 | .ant-input-number-disabled {
19 | border-color: @grey_border;
20 | &:hover {
21 | border-color: @grey_border;
22 | }
23 | }
24 | .ant-input-number-group-addon {
25 | border-color: @black_border;
26 | background-color: @black_border;
27 | color: @black_pageMsg;
28 | }
29 | }
30 |
31 | .ant-input-number-group-addon {
32 | padding: 0 16px;
33 | background-color: @black_navBg;
34 | font-size: @font12;
35 | color: @black_title;
36 | }
37 |
38 | .ant-input-number-group-addon .ant-select {
39 | margin: -6.6px -16px;
40 | }
41 |
--------------------------------------------------------------------------------
/components/input-number/demo/size.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 1
3 | title:
4 | zh-CN: 三种大小
5 | en-US: Sizes
6 | ---
7 |
8 | ## zh-CN
9 |
10 | 三种大小的数字输入框，当 size 分别为 `large` 和 `small` 时，输入框高度为 `40px` 和 `24px` ，默认高度为 `32px`。
11 |
12 | ## en-US
13 |
14 | There are three sizes available to a numeric input box. By default, the size is `32px`. The two additional sizes are `large` and `small` which means `40px` and `24px`, respectively.
15 |
16 | ```jsx
17 | import { InputNumber } from 'antd';
18 |
19 | function onChange(value) {
20 | console.log('changed', value);
21 | }
22 |
23 | ReactDOM.render(
24 |
25 |
26 |
27 |
28 |
,
29 | mountNode,
30 | );
31 | ```
32 |
33 | ```css
34 | .ant-input-number {
35 | margin-right: 10px;
36 | }
37 | ```
38 |
--------------------------------------------------------------------------------
/components/select/demo/light.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 4
3 | title:
4 | zh-CN: 浅色背景(仅暗黑主题下使用)
5 | ---
6 |
7 | ## zh-CN
8 |
9 | 浅色背景上，显示深色控件
10 |
11 | 仅暗黑主题下使用，默认主题下使用无效
12 |
13 | - 为组件或其父组件添加类名`dt-form-light-bg`
14 |
15 | ```jsx
16 | import { Select } from 'antd';
17 |
18 | const { Option } = Select;
19 |
20 | ReactDOM.render(
21 |
22 |
27 |
30 |
,
31 | mountNode
32 | );
33 | ```
34 |
--------------------------------------------------------------------------------
/components/descriptions/demo/basic.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title:
4 | zh-CN: 基本
5 | en-US: Basic
6 | ---
7 |
8 | ## zh-CN
9 |
10 | 无边框情况。
11 |
12 | ## 何时使用
13 | 展示区域有限的情况下，使用有边框的样式不能提高内容利用率，采用无边框样式
14 | 内容跟随标题移动，整行左对齐，标题色号#8B8FA8，内容色号#3D446E
15 | - 为组件添加类名`dt-descriptions-vertical-display`
16 | 实现竖向排列
17 |
18 | ## en-US
19 |
20 |
21 | Simplest Usage.
22 |
23 | ```jsx
24 | import { Descriptions } from 'antd';
25 |
26 | ReactDOM.render(
27 |
28 | Zhou Maomao
29 | 1810000000
30 | Hangzhou, Zhejiang
31 | empty
32 |
33 | No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
34 |
35 | ,
36 | mountNode,
37 | );
38 | ```
39 |
--------------------------------------------------------------------------------
/components/select/demo/basic.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title:
4 | zh-CN: 基本使用
5 | en-US: Basic usage
6 | ---
7 |
8 | ## zh-CN
9 |
10 | 基本使用。
11 |
12 | ## en-US
13 |
14 | Basic usage example.
15 |
16 | ```jsx
17 | import { Select } from 'antd';
18 |
19 | const { Option } = Select;
20 |
21 | ReactDOM.render(
22 |
23 |
36 |
39 |
,
40 | mountNode
41 | );
42 | ```
43 |
--------------------------------------------------------------------------------
/custom-icons/iconfont-svgs/PaperClipOutlined.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/components/datepicker/demo/shadow.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 2
3 | title:
4 | zh-CN: 灰色背景(仅默认主题下使用)
5 | ---
6 |
7 | ## zh-CN
8 |
9 | 灰色背景中的表单需添加投影，去掉外边框
10 |
11 | 仅默认主题下使用，暗黑主题下使用无效
12 |
13 | - 为组件添加类名`dt-form-shadow-bg`
14 |
15 | ```jsx
16 | import { DatePicker } from '../../index';
17 | import moment from 'dayjs';
18 |
19 | const { MonthPicker, RangePicker } = DatePicker;
20 |
21 | const dateFormat = 'YYYY-MM-DD';
22 | ReactDOM.render(
23 |
24 |
25 |
26 |
27 |
28 |
32 |
,
33 | mountNode
34 | );
35 | ```
36 |
--------------------------------------------------------------------------------
/default.conf:
--------------------------------------------------------------------------------
1 | server {
2 | listen 8989;
3 | underscores_in_headers on;
4 | charset utf-8;
5 | gzip on;
6 | gzip_comp_level 9;
7 | gzip_min_length 1k;
8 | gzip_types text/plain text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript application/json application/javascript;
9 | gzip_vary on;
10 | gzip_http_version 1.1;
11 | gzip_disable "MSIE [1-6]\.(?!.*SV1)";
12 | proxy_set_header Host $host;
13 | proxy_set_header RealIP $remote_addr;
14 | proxy_set_header REMOTE-HOST $remote_addr;
15 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
16 |
17 | proxy_read_timeout 300;
18 |
19 | location / {
20 | try_files $uri /index.html;
21 | location ~ .*\.(ico|js|css|gif|jpg|jpeg|png|bmp|swf)$ {}
22 | root /home/app/ant-design-dtinsight-theme/dist;
23 | rewrite ^/$ /docs/react/getting-started.html redirect;
24 | }
25 | error_page 500 502 503 504 404 http://172.16.100.225:8989/docs/react/getting-started.html;
26 |
27 | }
28 |
--------------------------------------------------------------------------------
/components/collapse/demo/card.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 2
3 | title:
4 | zh-CN: 面板嵌套
5 | ---
6 |
7 | ## zh-CN
8 |
9 | 嵌套折叠面板。
10 |
11 |
12 | ```jsx
13 | import { Collapse } from 'antd';
14 |
15 |
16 | const { Panel } = Collapse;
17 |
18 | const text = `
19 | A dog is a type of domesticated animal.
20 | Known for its loyalty and faithfulness,
21 | it can be found as a welcome guest in many households across the world.
22 | `;
23 |
24 | ReactDOM.render(
25 |
26 |
27 |
28 |
29 | {text}
30 |
31 |
32 |
33 |
34 | {text}
35 |
36 |
37 | {text}
38 |
39 | ,
40 | mountNode,
41 | );
42 | ```
43 |
--------------------------------------------------------------------------------
/custom-icons/iconfont-svgs/EyeOutlined.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/components/collapse/demo/basic.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title:
4 | zh-CN: 基本使用
5 | en-US: Basic usage
6 | ---
7 |
8 | ## zh-CN
9 |
10 | 基本使用。
11 |
12 | ## en-US
13 |
14 | Basic usage example.
15 |
16 | ```jsx
17 | import { Collapse } from 'antd';
18 |
19 |
20 | const { Panel } = Collapse;
21 |
22 | function callback(key) {
23 | console.log(key);
24 | }
25 |
26 | const text = `
27 | A dog is a type of domesticated animal.
28 | Known for its loyalty and faithfulness,
29 | it can be found as a welcome guest in many households across the world.
30 | `;
31 |
32 | ReactDOM.render(
33 |
36 |
37 | {text}
38 |
39 |
40 | {text}
41 |
42 |
43 | {text}
44 |
45 | ,
46 | mountNode,
47 | );
48 | ```
49 |
--------------------------------------------------------------------------------
/components/table/demo/empty-top.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 2
3 | title:
4 | zh-CN: 无数据 - 缺省图距顶部 20%
5 | ---
6 |
7 | ## zh-CN
8 |
9 | 固定高度 400，缺省图标距顶部 20%
10 | - 添加 `dt-table-empty-top-20-percent` 类名，可以让缺省图距顶部 20%，大部分场景适用，不适用时使用默认的 margin 间距即可。
11 |
12 | ```jsx
13 | import { Table } from 'antd';
14 |
15 | class App extends React.Component {
16 | state = {};
17 |
18 | render() {
19 | const columns = [
20 | {
21 | title: 'Name',
22 | dataIndex: 'name',
23 | key: 'name',
24 | },
25 | {
26 | title: 'Age',
27 | dataIndex: 'age',
28 | key: 'age',
29 | },
30 | ];
31 | const data = [];
32 | return (
33 |
42 | )
43 | }
44 | }
45 |
46 | ReactDOM.render(, mountNode);
47 | ```
48 |
--------------------------------------------------------------------------------
/custom-icons/iconfont-svgs/StarFilled.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/components/layout/index.zh-CN.md:
--------------------------------------------------------------------------------
1 | ---
2 | category: Components
3 | cols: 1
4 | type: 布局
5 | title: Layout
6 | subtitle: 布局
7 | ---
8 |
9 | 协助进行页面级整体布局。
10 |
11 | ## 设计规范
12 |
13 | - 点击展开各个子产品入口的浮窗，可以切换至其他子产品，每个子产品以及 UIC 的这个位置常显该图标
14 | - 绘制画布 64px X 64px 应用显示尺寸 40px X 40px
15 | - 各个子产品的名称 字体使用【Poppins-中粗体】字号 20，最后轮廓化并且创建控件，宽度不固定，整体布局根据文字长度固定间距左右自动调整
16 | - 选择项目下拉框宽度固定 208px，项目名称超出宽度“...”显示
17 | - tab 标题每一项固定 112px 的宽度，标题最多 6 个字，tab 项最多 6 个
18 | - 用户名称固定宽度 112px，超出“...”展示
19 | - 点击用户名唤起下拉框 内容需要产品重新规划
20 | - 导航布局是在 1440px 宽度的设计稿上面正常展开，如果遇到左边 tab 项达到最多数量 6 个，并且屏幕比较小的情况，需要根据屏幕宽度折叠 tab 项
21 |
22 |
23 | ## API
24 |
25 | |类名 |说明 |使用示例
26 | |---------|---------|
27 | |.dt-layout-header | 顶部导航样式 | 基本用法、带项目选择、侧边导航 |
28 | |.dt-layout-sider | 侧边导航栏样式设置 | 侧边导航 |
29 | |.dt-container | 主要内容模块样式 | 基本用法、带项目选择 |
30 | |.dt-slider-top-icon | 侧边栏收缩按钮 | 侧边导航 |
31 | |.dt-header-project-select-menu | 顶部导航栏 项目选择菜单 | 带项目选择、侧边导航 |
32 | |.dt-header-log-wrapper | logo 以及标题样式设置 | 基本用法、带项目选择、侧边导航 |
33 |
--------------------------------------------------------------------------------
/components/list/demo/basic.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 1
3 | title:
4 | zh-CN: 基础列表
5 | en-US: Basic list
6 | ---
7 |
8 | ## zh-CN
9 |
10 | 基础列表。
11 |
12 | ## en-US
13 |
14 | Basic list.
15 |
16 | ```jsx
17 | import { List, Avatar } from 'antd';
18 |
19 | const data = [
20 | {
21 | title: 'Ant Design Title 1',
22 | },
23 | {
24 | title: 'Ant Design Title 2',
25 | },
26 | {
27 | title: 'Ant Design Title 3',
28 | },
29 | {
30 | title: 'Ant Design Title 4',
31 | },
32 | ];
33 |
34 | ReactDOM.render(
35 | (
39 |
40 | }
42 | title={{item.title}}
43 | description="Ant Design, a design language for background applications, is refined by Ant UED Team"
44 | />
45 |
46 | )}
47 | />,
48 | mountNode,
49 | );
50 | ```
51 |
--------------------------------------------------------------------------------
/components/notification/demo/btn.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title:
4 | zh-CN: 带操作按钮
5 | ---
6 |
7 | ## zh-CN
8 |
9 | 带操作按钮
10 |
11 | ```jsx
12 | import { Button, notification } from 'antd';
13 |
14 | const openNotificationWithIcon = type => {
15 | const btn = (
16 | <>
17 |
20 |
23 |
24 | );
25 | notification[type]({
26 | message: '提示信息',
27 | btn,
28 | description:
29 | 'This is the content of the notification. This is the content of the notification. This is the content of the notification.'
30 | });
31 | };
32 |
33 | ReactDOM.render(
34 |
35 |
36 |
,
37 | mountNode,
38 | );
39 | ```
40 |
--------------------------------------------------------------------------------
/components/collapse/demo/ghost.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 1
3 | title:
4 | zh-CN: ghost
5 | ---
6 |
7 | ## zh-CN
8 |
9 | 使折叠面板透明且无边框，和下方 面板嵌套 的示例代码一致，但多了 ghost。
10 |
11 |
12 | ```jsx
13 | import { Collapse } from 'antd';
14 |
15 |
16 | const { Panel } = Collapse;
17 |
18 | const text = `
19 | A dog is a type of domesticated animal.
20 | Known for its loyalty and faithfulness,
21 | it can be found as a welcome guest in many households across the world.
22 | `;
23 |
24 | ReactDOM.render(
25 |
26 |
27 |
28 |
29 | {text}
30 |
31 |
32 |
33 |
34 | {text}
35 |
36 |
37 | {text}
38 |
39 | ,
40 | mountNode,
41 | );
42 | ```
43 |
--------------------------------------------------------------------------------
/custom-icons/iconfont-svgs/PlusSquareOutlined.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/theme/dt-theme/default/list.less:
--------------------------------------------------------------------------------
1 | @import "../const.less";
2 |
3 | .ant-list-bordered {
4 | border: 1px solid @black_readonly;
5 | }
6 |
7 | .ant-list {
8 | .ant-list-header {
9 | border-bottom: 1px solid @black_readonly;
10 | padding: 16px;
11 | }
12 | .ant-list-item {
13 | border-bottom: 1px solid @black_readonly;
14 | padding: 16px;
15 | .ant-card-bordered {
16 | border: 1px solid @black_readonly;
17 | }
18 | .ant-card-head {
19 | font-size: 16px;
20 | padding: 0 16px;
21 | border-bottom: none;
22 | .ant-card-head-title {
23 | padding: 16px 0 12px;
24 | }
25 | }
26 | .ant-card-body {
27 | color: @black_pageMsg;
28 | padding: 5px 16px 16px;
29 | font-size: 12px;
30 | }
31 | }
32 | .ant-list-item-meta-avatar {
33 | margin-right: 8px;
34 | }
35 | .ant-list-item-meta-description {
36 | color: @black_Desc;
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/custom-icons/generate/rate.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Rate 下的星星为实心，需要单独处理
3 | */
4 | const fileNameToClassName = {
5 | StarFilled: 'anticon-star',
6 | };
7 |
8 | const getName = (value) => {
9 | if (Array.isArray(value)) {
10 | let str = '';
11 | value.forEach(
12 | (item, idx) => (str += `.${item} svg path${idx !== value.length - 1 ? ', ' : ''}`)
13 | );
14 | return str;
15 | } else {
16 | return `.${value} svg path`;
17 | }
18 | };
19 |
20 | module.exports = (pathContentMap) => {
21 | let cssContent = '';
22 | Object.keys(fileNameToClassName).forEach((item) => {
23 | cssContent += `
24 | ${getName(fileNameToClassName[item])} {
25 | &:first-child {
26 | d: path("${pathContentMap[item]}");
27 | }
28 | &:not(:first-child) {
29 | d: path("");
30 | }
31 | }`;
32 | });
33 |
34 | return `.ant-rate-star {
35 | .ant-rate-star-first, .ant-rate-star-second {${cssContent}
36 | }
37 | }
38 | `;
39 | };
40 |
--------------------------------------------------------------------------------
/theme/dt-theme/default/alert.less:
--------------------------------------------------------------------------------
1 | @import "../const.less";
2 |
3 | .ant-alert.ant-alert-no-icon {
4 | padding: 12px 16px;
5 | }
6 |
7 | .ant-alert-icon {
8 | top: 13px;
9 | left: 16px;
10 | font-size: 20px;
11 | }
12 |
13 | .ant-alert-close-icon {
14 | top: 10px;
15 | right: 14px;
16 | }
17 |
18 | .ant-alert-close-icon .anticon-close {
19 | color: @black_pageMsg;
20 | &:hover {
21 | color: @black_Desc;
22 | }
23 | }
24 |
25 | .ant-alert-with-description {
26 | padding: 12px 16px;
27 | .ant-alert-icon {
28 | top: 13px;
29 | left: 20px;
30 | font-size: 20px;
31 | margin-top: 1px;
32 | margin-right: 8px;
33 | }
34 | .ant-alert-close-icon {
35 | top: 12px;
36 | }
37 | }
38 |
39 | .ant-alert-content {
40 | .ant-alert-message {
41 | .operate-btn {
42 | float: right;
43 | }
44 | }
45 | }
46 |
47 | .ant-alert-action {
48 | line-height: 20px;
49 | font-weight: 400;
50 | font-size: 12px;
51 | margin-right: 31px;
52 | }
53 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ant-design-dtinsight-theme
2 |
3 | Engish | [Chinese](./README_zh.md)
4 |
5 | ## Docs
6 | - [v2.x](https://dtstack.github.io/ant-design-dtinsight-theme/docs/react/introduce-cn)
7 | - [v1.x](https://liuxy0551.github.io/ant-design-dtinsight-theme/docs/react/getting-started-cn)
8 |
9 | This project has implemented the compilation of the DTInsight UI5.0 standard style based on the Ant-Design 4.x version and realized the component style preview based on the Bisheng framework.
10 |
11 | In this project you can:
12 |
13 | - Preview the component and view its associated code implementation
14 | - Use and preview custom styles
15 |
16 | ## Installation
17 |
18 | ```javascript
19 | npm install ant-design-dtinsight-theme --save
20 |
21 | OR
22 |
23 | yarn add ant-design-dtinsight-theme
24 | ```
25 |
26 | ## Contribution
27 |
28 | At present, the project is still in the early stage. If you have better comments, please feel free to [Issue](https://github.com/DTStack/ant-design-dtinsight-theme/issues/new) or [Pull Request](https://github.com/DTStack/ant-design-dtinsight-theme/pulls)
29 |
--------------------------------------------------------------------------------
/custom-icons/generate/formSpecial.js:
--------------------------------------------------------------------------------
1 | /**
2 | * ant-form-item-feedback-icon下的图标需要单独处理
3 | */
4 | const fileNameToClassName = {
5 | CheckCircleFilled: 'anticon-check-circle',
6 | ExclamationCircleFilled: ['anticon-exclamation-circle'],
7 | };
8 |
9 | const getName = (value) => {
10 | if (Array.isArray(value)) {
11 | let str = '';
12 | value.forEach(
13 | (item, idx) => (str += `.${item} svg path${idx !== value.length - 1 ? ', ' : ''}`)
14 | );
15 | return str;
16 | } else {
17 | return `.${value} svg path`;
18 | }
19 | };
20 |
21 | module.exports = (pathContentMap) => {
22 | let cssContent = '';
23 | Object.keys(fileNameToClassName).forEach((item) => {
24 | cssContent += `
25 | ${getName(fileNameToClassName[item])} {
26 | &:first-child {
27 | d: path("${pathContentMap[item]}");
28 | }
29 | &:not(:first-child) {
30 | d: path("");
31 | }
32 | }`;
33 | });
34 |
35 | return `.ant-form-item-feedback-icon {${cssContent}
36 | }
37 | `;
38 | };
39 |
--------------------------------------------------------------------------------
/components/message/demo/basic.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title:
4 | zh-CN: 基本使用
5 | ---
6 |
7 | ## zh-CN
8 |
9 | 最简单的用法，适用于信息提醒反馈。
10 |
11 | 共有四种样式 infor、success、warning、error。
12 |
13 | ```jsx
14 | import { message, Button } from 'antd';
15 |
16 | const success = () => {
17 | message.success('This is a success message');
18 | };
19 |
20 | const error = () => {
21 | message.error('This is an error message');
22 | };
23 |
24 | const warning = () => {
25 | message.warning('This is a warning message');
26 | };
27 |
28 | const info = () => {
29 | message.info('This is a normal message');
30 | };
31 |
32 | const loading = () => {
33 | const hide = message.loading('Action in progress..', 0);
34 | setTimeout(hide, 2500);
35 | };
36 |
37 | ReactDOM.render(
38 |
39 |
40 |
41 |
42 |
43 |
44 |
,
45 | mountNode,
46 | );
47 | ```
48 |
--------------------------------------------------------------------------------
/components/step/demo/clickable.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 9
3 | title:
4 | zh-CN: 可点击
5 | ---
6 |
7 | ## zh-CN
8 |
9 | 设置 `onChange` 后，Steps 变为可点击状态。
10 |
11 | ```jsx
12 | import { Steps, Divider } from 'antd';
13 |
14 | const { Step } = Steps;
15 |
16 | class Demo extends React.Component {
17 | state = {
18 | current: 0,
19 | };
20 |
21 | onChange = current => {
22 | console.log('onChange:', current);
23 | this.setState({ current });
24 | };
25 |
26 | render() {
27 | const { current } = this.state;
28 |
29 | return (
30 | <>
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 | );
46 | }
47 | }
48 |
49 | ReactDOM.render(, mountNode);
50 | ```
51 |
--------------------------------------------------------------------------------
/custom-icons/iconfont-svgs/QuestionCircleFilled.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/theme/dt-theme/default/popover.less:
--------------------------------------------------------------------------------
1 | @import "../const.less";
2 |
3 | .ant-popover {
4 | .ant-popover-inner {
5 | padding: 16px;
6 | box-shadow: 0 5px 22px 0 rgba(61, 68, 110, 0.2);
7 | .ant-popover-buttons {
8 | .ant-btn {
9 | border-radius: 2px;
10 | }
11 | }
12 | }
13 | .ant-popover-title {
14 | padding: 0;
15 | border-bottom: none;
16 | min-height: 22px;
17 | font-size: 14px;
18 | font-weight: 500;
19 | font-family: PingFangSC-Medium, "PingFang SC";
20 | margin-bottom: 4px;
21 | }
22 | .ant-popover-message-title {
23 | color: @black_title;
24 | font-size: 12px;
25 | font-family: PingFangSC-Regular, "PingFang SC";
26 | padding-left: 25px;
27 | }
28 | .ant-popover-message {
29 | & > .anticon {
30 | font-size: 20px;
31 | top: 2px;
32 | }
33 | }
34 | .ant-popover-inner-content {
35 | padding: 0;
36 | }
37 | }
38 |
39 | .ant-popconfirm {
40 | min-width: 200px;
41 | }
42 |
--------------------------------------------------------------------------------
/components/select/demo/multiply.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 5
3 | title:
4 | zh-CN: 多选
5 | ---
6 |
7 | ## zh-CN
8 |
9 | 多选，从已有条目中选择；禁用样式。
10 |
11 | ```jsx
12 | import { Select } from 'antd';
13 |
14 | const { Option } = Select;
15 |
16 | const children = [];
17 | for (let i = 10; i < 36; i++) {
18 | children.push();
19 | }
20 |
21 | function handleChange(value) {
22 | console.log(`selected ${value}`);
23 | }
24 |
25 | ReactDOM.render(
26 |
27 |
37 |
38 |
47 |
,
48 | mountNode,
49 | );
50 | ```
51 |
--------------------------------------------------------------------------------
/components/datepicker/demo/basic.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title:
4 | zh-CN: 基本使用
5 | ---
6 |
7 | ## zh-CN
8 |
9 | 最简单的用法，在浮层中可以选择或者输入日期。
10 |
11 | ```jsx
12 | import { DatePicker } from '../../index';
13 | import moment from 'moment';
14 | const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
15 |
16 | function onChange(date, dateString) {
17 | console.log(date, dateString);
18 | }
19 |
20 | function disabledDate(current) {
21 | // Can not select days before today and today
22 | return current && current < moment().endOf('day');
23 | }
24 |
25 | ReactDOM.render(
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
,
35 | mountNode,
36 | );
37 | ```
38 |
--------------------------------------------------------------------------------
/components/dropdown/demo/basic.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title:
4 | zh-CN: 基本使用
5 | ---
6 |
7 | ## zh-CN
8 |
9 | 最简单的下拉菜单。
10 |
11 | ## en-US
12 |
13 | The most basic dropdown menu.
14 |
15 | ```tsx
16 | import { Menu, Dropdown, Space } from 'antd';
17 | import { DownOutlined } from '@ant-design/icons';
18 |
19 | const menu = (
20 |
37 | );
38 |
39 | ReactDOM.render(
40 |
41 | e.preventDefault()}>
42 |
43 | Hover me
44 |
45 |
46 |
47 | ,
48 | mountNode,
49 | );
50 | ```
51 |
--------------------------------------------------------------------------------
/components/popover/demo/basic.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title:
4 | zh-CN: 基本
5 | en-US: Basic
6 | ---
7 |
8 | ## zh-CN
9 |
10 | 最简单的用法，浮层的大小由内容区域决定。
11 |
12 | ## en-US
13 |
14 | The most basic example. The size of the floating layer depends on the contents region.
15 |
16 | ```jsx
17 | import { Popover, Button } from 'antd';
18 |
19 | const content = (
20 |
21 |
Content
22 |
Content
23 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
33 |
34 |
35 | {text}
36 |
37 |
38 | {text}
39 |
40 |
41 | {text}
42 |
43 |
44 |
25 |
26 |
27 |
28 |
29 |
34 |
,
35 | mountNode
36 | );
37 | ```
38 |
--------------------------------------------------------------------------------
/custom-icons/iconfont-svgs/SwapOutlined.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/components/tab/demo/slide-vertical.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 4
3 | title:
4 | zh-CN: 隐藏 `···` icon
5 | en-US: HiddenIcon
6 | ---
7 |
8 | ## zh-CN
9 |
10 | 可以使用 `dt-tabs-hidden-more-icon` 隐藏数量较多时左下角或右上角的 `···` icon
11 |
12 | ## en-US
13 |
14 | You can use 'dt-tabs-hidden-more-icon' to hide the more icon in the bottom left or top right corner when there is a large quantity.
15 |
16 | ```jsx
17 | import { Tabs, Radio } from 'antd';
18 | import { AndroidOutlined, AppleOutlined } from '@ant-design/icons';
19 |
20 | const { TabPane } = Tabs;
21 |
22 | class SlidingTabsDemo extends React.Component {
23 | constructor(props) {
24 | super(props);
25 | }
26 |
27 | render() {
28 | return (
29 |
30 |
31 | {[...Array(30).keys()].map(i => (
32 | Tab-{i} : `Tab-${i}`} key={i}>
33 | Content of tab {i}
34 |
35 | ))}
36 |
37 |
40 |
43 |
50 | 内容
51 |
52 |
53 | );
54 | }
55 | }
56 |
57 | ReactDOM.render(, mountNode);
58 | ```
59 |
--------------------------------------------------------------------------------
/theme/static/style/mixins/iconfont.less:
--------------------------------------------------------------------------------
1 | .iconfont-mixin() {
2 | display: inline-block;
3 | color: @icon-color;
4 | font-style: normal;
5 | line-height: 0;
6 | text-align: center;
7 | text-transform: none;
8 | vertical-align: -0.125em; // for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
9 | text-rendering: optimizelegibility;
10 | -webkit-font-smoothing: antialiased;
11 | -moz-osx-font-smoothing: grayscale;
12 | > * {
13 | line-height: 1;
14 | }
15 | svg {
16 | display: inline-block;
17 | }
18 | &::before {
19 | display: none; // dont display old icon.
20 | }
21 | & &-icon {
22 | display: block;
23 | }
24 | }
25 |
26 | // for iconfont font size
27 | // fix chrome 12px bug, support ie
28 | .iconfont-size-under-12px(@size, @rotate: 0deg) {
29 | display: inline-block;
30 |
31 | @font-scale: unit(@size / 12px);
32 | font-size: 12px;
33 | // IE9
34 | font-size: ~"@{size} \9";
35 | transform: scale(@font-scale) rotate(@rotate);
36 | :root & {
37 | font-size: @font-size-sm; // reset IE9 and above
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/theme/template/Content/index.jsx:
--------------------------------------------------------------------------------
1 | import collect from 'bisheng/collect';
2 | import MainContent from './MainContent';
3 |
4 | export default collect(async (nextProps) => {
5 | const { pathname } = nextProps.location;
6 |
7 | const pageDataPath =
8 | pathname.indexOf('.html') > 0
9 | ? pathname.replace('.html', '').split('/')
10 | : pathname.replace('-cn', '').split('/');
11 |
12 | const pageData = nextProps.utils.get(nextProps.data, pageDataPath);
13 |
14 | if (!pageData) {
15 | // eslint-disable-next-line no-throw-literal
16 | throw 404;
17 | }
18 |
19 | const locale = 'zh-CN';
20 | const pageDataPromise =
21 | typeof pageData === 'function'
22 | ? pageData()
23 | : (pageData[locale] || pageData.index[locale] || pageData.index)();
24 | const demosFetcher = nextProps.utils.get(nextProps.data, [...pageDataPath, 'demo']);
25 | if (demosFetcher) {
26 | const [localizedPageData, demos] = await Promise.all([pageDataPromise, demosFetcher()]);
27 | return { localizedPageData, demos };
28 | }
29 |
30 | return { localizedPageData: await pageDataPromise };
31 | })(MainContent);
32 |
--------------------------------------------------------------------------------
/theme/static/style/style/mixins/iconfont.less:
--------------------------------------------------------------------------------
1 | .iconfont-mixin() {
2 | display: inline-block;
3 | color: @icon-color;
4 | font-style: normal;
5 | line-height: 0;
6 | text-align: center;
7 | text-transform: none;
8 | vertical-align: -0.125em; // for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
9 | text-rendering: optimizelegibility;
10 | -webkit-font-smoothing: antialiased;
11 | -moz-osx-font-smoothing: grayscale;
12 | > * {
13 | line-height: 1;
14 | }
15 | svg {
16 | display: inline-block;
17 | }
18 | &::before {
19 | display: none; // dont display old icon.
20 | }
21 | & &-icon {
22 | display: block;
23 | }
24 | }
25 |
26 | // for iconfont font size
27 | // fix chrome 12px bug, support ie
28 | .iconfont-size-under-12px(@size, @rotate: 0deg) {
29 | display: inline-block;
30 |
31 | @font-scale: unit(@size / 12px);
32 | font-size: 12px;
33 | // IE9
34 | font-size: ~"@{size} \9";
35 | transform: scale(@font-scale) rotate(@rotate);
36 | :root & {
37 | font-size: @font-size-sm; // reset IE9 and above
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/components/cascader/demo/basic.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 1
3 | title:
4 | zh-CN: 基本
5 | ---
6 |
7 | ## zh-CN
8 |
9 | 省市区级联。
10 |
11 | - 添加类名 dt-ant-select-outside 为级联选择框设置统一样式
12 |
13 | ```jsx
14 | import { Cascader } from 'antd';
15 |
16 | const options = [
17 | {
18 | value: 'zhejiang',
19 | label: 'Zhejiang Zhejiang Zhejiang Zhejiang',
20 | children: [
21 | {
22 | value: 'hangzhou',
23 | label: 'Hangzhou',
24 | children: [
25 | {
26 | value: 'xihu',
27 | label: 'West Lake',
28 | },
29 | ],
30 | },
31 | ],
32 | },
33 | {
34 | value: 'jiangsu',
35 | label: 'Jiangsu',
36 | children: [
37 | {
38 | value: 'nanjing',
39 | label: 'Nanjing',
40 | children: [
41 | {
42 | value: 'zhonghuamen',
43 | label: 'Zhong Hua Men',
44 | },
45 | ],
46 | },
47 | ],
48 | },
49 | ];
50 |
51 | function onChange(value) {
52 | console.log(value);
53 | }
54 |
55 | ReactDOM.render(
56 | ,
57 | mountNode,
58 | );
59 | ```
60 |
--------------------------------------------------------------------------------
/custom-icons/iconfont-svgs/QuestionCircleOutlined.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/custom-icons/iconfont-svgs/DragOutlined.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/custom-icons/iconfont-svgs/ExportOutlined.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/custom-icons/generate/special.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Notification, Modal, Message, Popover, Popconfirm 的 Dom 与 className="root" 同级，所以单独处理，Alert 下的图标需要单独处理
3 | */
4 | const fileNameToClassName = {
5 | CheckCircleFilled: 'anticon-check-circle',
6 | ExclamationCircleFilled: ['anticon-info-circle'],
7 | WarningFilled: 'anticon-exclamation-circle',
8 | };
9 |
10 | const getName = (value) => {
11 | if (Array.isArray(value)) {
12 | let str = '';
13 | value.forEach(
14 | (item, idx) => (str += `.${item} svg path${idx !== value.length - 1 ? ', ' : ''}`)
15 | );
16 | return str;
17 | } else {
18 | return `.${value} svg path`;
19 | }
20 | };
21 |
22 | module.exports = (pathContentMap) => {
23 | let cssContent = '';
24 | Object.keys(fileNameToClassName).forEach((item) => {
25 | cssContent += `
26 | ${getName(fileNameToClassName[item])} {
27 | &:first-child {
28 | d: path("${pathContentMap[item]}");
29 | }
30 | &:not(:first-child) {
31 | d: path("");
32 | }
33 | }`;
34 | });
35 |
36 | return `.ant-notification, .ant-modal-confirm, .ant-message, .ant-popover, .ant-alert {${cssContent}
37 | }
38 | `;
39 | };
40 |
--------------------------------------------------------------------------------
/components/checkbox/demo/layout.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 5
3 | title:
4 | zh-CN: 布局
5 | en-US: Use with Grid
6 | ---
7 |
8 | ## zh-CN
9 |
10 | Checkbox.Group 内嵌 Checkbox 并与 Grid 组件一起使用，可以实现灵活的布局。
11 |
12 | ## en-US
13 |
14 | We can use Checkbox and Grid in Checkbox.Group, to implement complex layout.
15 |
16 | ```tsx
17 | import { Checkbox, Col, Row } from 'antd';
18 | import type { CheckboxValueType } from 'antd/es/checkbox/Group';
19 | import React from 'react';
20 |
21 | const onChange = (checkedValues: CheckboxValueType[]) => {
22 | console.log('checked = ', checkedValues);
23 | };
24 |
25 | const App: React.FC = () => (
26 |
27 |
28 |
29 | A
30 |
31 |
32 | B
33 |
34 |
35 | C
36 |
37 |
38 | D
39 |
40 |
41 | E
42 |
43 |
44 |
45 | );
46 |
47 | ReactDOM.render(, mountNode);
48 | ```
49 |
--------------------------------------------------------------------------------
/components/modal/demo/size.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 1
3 | title:
4 | zh-CN: 大小
5 | ---
6 |
7 | ## zh-CN
8 |
9 | large size 的弹框， 宽度为 900px 。
10 |
11 | ```jsx
12 | import { Modal, Button } from 'antd';
13 |
14 | class App extends React.Component {
15 | state = { visible: false };
16 |
17 | showModal = () => {
18 | this.setState({
19 | visible: true,
20 | });
21 | };
22 |
23 | handleOk = e => {
24 | console.log(e);
25 | this.setState({
26 | visible: false,
27 | });
28 | };
29 |
30 | handleCancel = e => {
31 | console.log(e);
32 | this.setState({
33 | visible: false,
34 | });
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
43 |
50 | Some contents...
51 | Some contents...
52 | Some contents...
53 |
54 |
41 |
44 |
51 | Some contents...
52 | Some contents...
53 | Some contents...
54 |
55 |
18 |
24 | } className="dt-btn-custom-icon">一级按钮
25 |
31 |
37 | } className="dt-btn-highlight">
38 |
,
39 | mountNode,
40 | );
41 | ```
42 |
--------------------------------------------------------------------------------
/theme/dt-theme/default/card.less:
--------------------------------------------------------------------------------
1 | @import "../const.less";
2 |
3 | .ant-card {
4 | .ant-card-head {
5 | padding: 16px;
6 | border-bottom: 1px solid @grey_border;
7 | .ant-card-head-wrapper {
8 | .ant-card-head-title,
9 | .ant-card-extra {
10 | padding: 0;
11 | }
12 | }
13 | }
14 | .ant-card-body {
15 | padding: 16px;
16 | }
17 | }
18 |
19 | .ant-card-bordered {
20 | border: 1px solid @black_readonly;
21 | }
22 |
23 | .dt-card-shadow-bg {
24 | box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.12);
25 | border: unset;
26 | }
27 |
28 | .ant-tabs-large > .ant-tabs-nav .ant-tabs-tab {
29 | padding: 16px;
30 | }
31 |
32 | .ant-card-contain-tabs {
33 | .ant-card-head {
34 | padding: 0;
35 | }
36 | .ant-card-head-wrapper {
37 | .ant-card-head-title, .ant-card-extra {
38 | margin: 16px 16px 0;
39 | line-height: 32px;
40 | }
41 | }
42 | .ant-tabs-nav {
43 | padding: 0 16px;
44 | }
45 | .ant-tabs-tab {
46 | color: @black_Desc;
47 | }
48 | }
49 |
50 | /* ————Custom ClassName———— */
51 | .dt-card-shadow {
52 | box-shadow: 0 2px 30px 0 #EAECF4;
53 | border: 1px solid #EAF0FC;
54 | }
55 |
--------------------------------------------------------------------------------
/theme/dt-theme/default/checkbox.less:
--------------------------------------------------------------------------------
1 | @import "../const.less";
2 |
3 | // checkbox
4 | .ant-checkbox-wrapper, .ant-checkbox {
5 | &:hover .ant-checkbox-inner {
6 | border-color: @hoverColor;
7 | }
8 | }
9 |
10 | .ant-checkbox-wrapper {
11 | line-height: @lineHeight;
12 | .ant-checkbox {
13 | top: 0.32em;
14 | .ant-checkbox-inner {
15 | border-radius: 2px;
16 | width: 16px;
17 | height: 16px;
18 | }
19 | & + span {
20 | line-height: 20px;
21 | }
22 | }
23 | }
24 |
25 | .ant-checkbox-wrapper-disabled {
26 | // 禁用已选择的 checkbox
27 | .ant-checkbox-checked {
28 | .ant-checkbox-inner {
29 | background-color: @black_border;
30 | &::after {
31 | border-color: @white;
32 | }
33 | }
34 | }
35 | // 禁用未选择的 checkbox
36 | .ant-checkbox-disabled {
37 | .ant-checkbox-inner {
38 | border-color: @black_border;
39 | }
40 | }
41 | }
42 |
43 | .ant-checkbox-input:focus + .ant-checkbox-inner {
44 | border-color: @primaryColor;
45 | }
46 |
47 | .ant-checkbox-group {
48 | & > .ant-checkbox-wrapper {
49 | margin-left: 0;
50 | margin-right: 16px;
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/components/upload/demo/basic.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title:
4 | zh-CN: 点击上传
5 | en-US: Upload by clicking
6 | ---
7 |
8 | ## zh-CN
9 |
10 | 经典款式，用户点击按钮弹出文件选择框。
11 | ## 设计规范
12 | - 提示文本距离上传按钮间距8px，上传按钮样式同次要按钮Button的icon+文字按钮样式
13 | - 上传以后的回显部分，文件名字体12px Regular，色号#64698B，回显部分的矩形背景宽度默认264px，长度可根据场景自行调整，圆角半径4px，填充色#F5F5F8。
14 |
15 | ## en-US
16 |
17 | Classic mode. File selection dialog pops up when upload button is clicked.
18 |
19 | ```jsx
20 | import { Upload, message, Button } from 'antd';
21 | import { UploadOutlined } from '@ant-design/icons';
22 |
23 | const props = {
24 | name: 'file',
25 | action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
26 | headers: {
27 | authorization: 'authorization-text',
28 | },
29 | onChange(info) {
30 | if (info.file.status !== 'uploading') {
31 | console.log(info.file, info.fileList);
32 | }
33 | if (info.file.status === 'done') {
34 | message.success(`${info.file.name} file uploaded successfully`);
35 | } else if (info.file.status === 'error') {
36 | message.error(`${info.file.name} file upload failed.`);
37 | }
38 | },
39 | };
40 |
41 | ReactDOM.render(
42 |
43 | }> Click to Upload
44 | ,
45 | mountNode,
46 | );
47 | ```
48 |
--------------------------------------------------------------------------------
/components/tag/demo/color.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 3
3 | title:
4 | en-US: Color
5 | zh-CN: 多彩标签
6 | ---
7 |
8 | ## zh-CN
9 |
10 | - 支持多种预设色彩的标签样式，用作不同场景使用。如果预设值不能满足需求，可以设置为具体的色值。
11 |
12 | ```jsx
13 | import { Tag } from 'antd';
14 |
15 |
16 | ReactDOM.render(
17 |
18 |
预设色彩
19 |
magenta
20 |
red
21 |
volcano
22 |
orange
23 |
gold
24 |
lime
25 |
green
26 |
cyan
27 |
blue
28 |
geekblue
29 |
purple
30 |
31 |
success
32 |
processing
33 |
error
34 |
warning
35 |
default
36 |
37 |
自定义颜色
38 |
#f50
39 |
#2db7f5
40 |
#87d068
41 |
#108ee9
42 |
37 |
38 | Horizontal
39 | Vertical
40 |
41 |
42 | {[...Array(30).keys()].map(i => (
43 |
44 | Content of tab {i}
45 |
46 | ))}
47 |
48 |
49 | );
50 | }
51 | }
52 |
53 | ReactDOM.render(, mountNode);
54 | ```
55 |
--------------------------------------------------------------------------------