xyzdata/Ant-Design.md

Last active August 11, 2022 15:01

Star (1) You must be signed in to star a gist
Fork (0) You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/xyzdata/f2b41a63feb21081e9f51d464d7434d7.js"></script>
Save xyzdata/f2b41a63feb21081e9f51d464d7434d7 to your computer and use it in GitHub Desktop.

Download ZIP

Ant-Design

Raw

Ant-Design.md

Ant-Design

https://github.com/xyzdata/git/issues/3

    
# todo

ant design

https://ant.design/docs/react/introduce-cn

https://ant.design/docs/spec/introduce-cn

https://ant.design/docs/resource/download-cn

xgqfrms-GitHub commented Jul 6, 2017 •

edited

Loading

Input & Row & Col & Cascader & Switch

Search = Input.Search

https://ant.design/components/input-cn/#API

<Cascader options={options} onChange={onChange} />

https://ant.design/components/cascader-cn/#API

<Cascader
    size="large"
    style={{width: '100%'}}
    options={city}
    placeholder="Please pick an address"
    onChange={handleChange.bind(null, 'address')}
/>

https://ant.design/components/grid-cn/#API

<Row gutter={24}>
    <Col 
        {...ColProps} 
        xl={{span: 4}} 
        md={{span: 6}}
        >
        {
            getFieldDecorator('name', {initialValue: name})(
                <Search 
                    placeholder="Search Name" 
                    size="large" 
                    onSearch={handleSubmit}
                />
            )
        }
    </Col>
</Row>

https://github.com/roylee0704/react-flexbox-grid

https://ant.design/components/collapse-cn/

xgqfrms-GitHub commented Jul 6, 2017 •

edited

Loading

Select

Option = Select.Option;

https://ant.design/components/select-cn/

https://ant.design/components/input-cn/#API

const selectBefore = (
  <Select defaultValue="Http://" style={{ width: 80 }}>
    <Option value="Http://">Http://</Option>
    <Option value="Https://">Https://</Option>
  </Select>
);
const selectAfter = (
  <Select defaultValue=".com" style={{ width: 70 }}>
    <Option value=".com">.com</Option>
    <Option value=".jp">.jp</Option>
    <Option value=".cn">.cn</Option>
    <Option value=".org">.org</Option>
  </Select>
);

<Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />

Radio

https://ant.design/components/radio-cn/

xgqfrms-GitHub commented Jul 6, 2017 •

edited

Loading

Mock

https://github.com/nuysoft/Mock/wiki/Getting-Started

        'roleId|1': [1, 2, 3],
        'roleName|1': function() {
            return ["管理员", "教师", "学生"][this.roleId - 1]
        },



const arr = ["管理员", "教师", "学生"];

arr[0];
arr[1];
arr[2];

https://gist.github.com/xgqfrms-GitHub/94607b60e14b998eab87ca8ab86588e4#gistcomment-2141365

fake.js

// 使用 Mock
import Mock from 'mockjs';

let data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'users|1-100': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 101
    }]
});


// 输出结果
console.log(
    JSON.stringify(data, null, 4)
);

// JSON.stringify(value[, replacer[, space]]);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

xgqfrms-GitHub commented Jul 6, 2017

phone & Regex

https://regexper.com/

phone: /^1[34578]\d{9}$/

https://regexper.com/#%2F%5E1%5B34578%5D%5Cd%7B9%7D%24%2Fg

let usersListData = Mock.mock({
    'data|80-100': [
        {
            id: '@id',
            name: '@name',
            nickName: '@last',
            phone: /^1[34578]\d{9}$/,
            'age|11-99': 1,
            address: '@county(true)',
            isMale: '@boolean',
            email: '@email',
            createTime: '@datetime',
            avatar () {
                return Mock.Random.image('100x100', Mock.Random.color(), '#ccc', 'png', this.nickName.substr(0, 1));
            }
        }
    ]
});

xgqfrms-GitHub commented Jul 6, 2017 •

edited

Loading

`@` 占位符。

https://github.com/nuysoft/Mock/wiki/Syntax-Specification

isMale: '@boolean',

// 'isMale|1': ['Man', 'Woman'],

// shit api



        'bm': '@boolean',
        'isMale|1': function() {
            return ["Man", "Woman"][this.bm + 0]
        },

xgqfrms-GitHub commented Jul 6, 2017

Admin

https://pmg1989.github.io/account/admin

角色: 教师管理员学生

https://github.com/pmg1989

https://github.com/pmg1989/dva-admin

xgqfrms-GitHub commented Jul 6, 2017 •

edited

Loading

// 连字符转驼峰
String.prototype.hyphenToHump = function() {
    return this.replace(/-(\w)/g, function() {
        return arguments[1].toUpperCase()
    });
};

// 驼峰转连字符
String.prototype.humpToHyphen = function() {
    return this.replace(/([A-Z])/g, '-$1').toLowerCase();
};

xgqfrms-GitHub commented Jul 6, 2017

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export

xgqfrms-GitHub commented Jul 6, 2017

roles

https://gist.github.com/xgqfrms-GitHub/94607b60e14b998eab87ca8ab86588e4#gistcomment-2141492

xgqfrms-GitHub commented Jul 21, 2017 •

edited

Loading

redux constants

https://github.com/xyzdata/react-slingshot/blob/gh-pages/src/constants/actionTypes.js

https://github.com/xyzdata/DVA/blob/master/src/constants.js

xgqfrms-GitHub commented Jul 21, 2017 •

edited

Loading

eslint error

jsx-eslint/eslint-plugin-react#447

// redux constants

export const PAGE_SIZE = 3;

// [eslint] Parsing error: The keyword 'export' is reserved

`.eslintrc`

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true,
            "modules": true,
            "experimentalObjectRestSpread": true
        }
    },
    "plugins": [
        "react"
    ],
    "extends": ["eslint:recommended", "plugin:react/recommended"],
    "rules": {
        "comma-dangle": 0
    },
    "settings": {
        "react": {
            "pragma": "React",
            "version": "15.4.2"
        }
    }
}