diff --git a/components/affix/index.html b/components/affix/index.html index 391458898..1f8ae2a1a 100644 --- a/components/affix/index.html +++ b/components/affix/index.html @@ -594,18 +594,6 @@ Affix 固钉 - Ant Design 代码演示 -
@@ -674,6 +662,18 @@ ReactDOM.render(
+
diff --git a/components/alert/index.html b/components/alert/index.html index c20ee5375..7151a0dc6 100644 --- a/components/alert/index.html +++ b/components/alert/index.html @@ -632,38 +632,6 @@ Alert 警告提示 - Ant Design 代码演示 -
@@ -910,6 +878,38 @@ ReactDOM.render(
+
diff --git a/components/badge/index.html b/components/badge/index.html index 472d54ceb..b6654a040 100644 --- a/components/badge/index.html +++ b/components/badge/index.html @@ -611,43 +611,6 @@ Badge 徽标数 - Ant Design 代码演示 -
@@ -1048,6 +1011,43 @@ ReactDOM.render(
+
diff --git a/components/breadcrumb/index.html b/components/breadcrumb/index.html index 1d7ef10cb..018530143 100644 --- a/components/breadcrumb/index.html +++ b/components/breadcrumb/index.html @@ -645,28 +645,6 @@ Breadcrumb 面包屑 - Ant Design 代码演示 -
@@ -977,6 +955,28 @@ ReactDOM.render(
+
diff --git a/components/button/index.html b/components/button/index.html index f2e77acc9..70f28aa9a 100644 --- a/components/button/index.html +++ b/components/button/index.html @@ -637,43 +637,6 @@ Button 按钮 - Ant Design 代码演示 -
@@ -1486,6 +1449,43 @@ ReactDOM.render(< +
  • + + 按钮类型 + +
    • +
  • + + 按钮形状 + +
    • +
  • + + 按钮尺寸 + +
    • +
  • + + 不可用 + +
    • +
  • + + 加载中 + +
    • +
  • + + 按钮组合 + +
    • +
  • + + 图标按钮 + +
    • +
    diff --git a/components/calendar/index.html b/components/calendar/index.html index 09df1ac0c..e2700a480 100644 --- a/components/calendar/index.html +++ b/components/calendar/index.html @@ -639,35 +639,8 @@ Calendar 日历 - Ant Design 代码演示 -
    -
    +
    @@ -696,6 +669,55 @@ ReactDOM.render(

    一个通用的日历面板，支持年/月切换。

    +
    +
    +
    + + 
    import { Calendar } from 'antd';
+
+function dateCellRender(value) {
+  return <div>自定义日数据 {value.getDayOfMonth()}</div>;
+}
+
+function monthCellRender(value) {
+  return <div>自定义月数据 {value.getMonth()}</div>;
+}
+
+ReactDOM.render(
+  <Calendar defaultValue={new Date('2010-10-10')}
+  dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
+, mountNode);
    +
    +
    +
    + 自定义渲染 +
    +

    用 dateCellRender 和 monthCellRender 函数来自定义需要渲染的数据。

    + +
    @@ -910,92 +932,6 @@ ReactDOM.render(

    一个复杂的应用实例。

    -
    -
    -
    - - 
    import { Calendar } from 'antd';
-
-function onPanelChange(value, mode) {
-  console.log(value, mode);
-}
-
-ReactDOM.render(
-  <div style={{ width: 290, border: '1px solid #d9d9d9', borderRadius: 4 }}>
-    <Calendar fullscreen={false} onPanelChange={onPanelChange} />
-  </div>
-, mountNode);
    -
    -
    -
    - 卡片模式 -
    -

    用于嵌套在空间有限的容器中。

    - -
    -
    -
    -
    -
    -
    - - 
    import { Calendar } from 'antd';
-
-function dateCellRender(value) {
-  return <div>自定义日数据 {value.getDayOfMonth()}</div>;
-}
-
-function monthCellRender(value) {
-  return <div>自定义月数据 {value.getMonth()}</div>;
-}
-
-ReactDOM.render(
-  <Calendar defaultValue={new Date('2010-10-10')}
-  dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
-, mountNode);
    -
    -
    -
    - 自定义渲染 -
    -

    用 dateCellRender 和 monthCellRender 函数来自定义需要渲染的数据。

    - -
    @@ -1032,9 +968,71 @@ ReactDOM.render(

    通过 locale 配置时区、语言等, 默认支持 en_US, zh_CN

    -
    +
    +
    +
    + + 
    import { Calendar } from 'antd';
+
+function onPanelChange(value, mode) {
+  console.log(value, mode);
+}
+
+ReactDOM.render(
+  <div style={{ width: 290, border: '1px solid #d9d9d9', borderRadius: 4 }}>
+    <Calendar fullscreen={false} onPanelChange={onPanelChange} />
+  </div>
+, mountNode);
    +
    +
    +
    + 卡片模式 +
    +

    用于嵌套在空间有限的容器中。

    +
    +
    +
    +
    diff --git a/components/carousel/index.html b/components/carousel/index.html index aace851d3..9b8b1df08 100644 --- a/components/carousel/index.html +++ b/components/carousel/index.html @@ -647,28 +647,6 @@ Carousel 走马灯 - Ant Design 代码演示 -
    @@ -943,6 +921,28 @@ ReactDOM.render(
    +
    diff --git a/components/checkbox/index.html b/components/checkbox/index.html index dcf67165c..91d76e2f0 100644 --- a/components/checkbox/index.html +++ b/components/checkbox/index.html @@ -653,28 +653,6 @@ Checkbox 多选框 - Ant Design 代码演示 -
    @@ -900,6 +878,28 @@ ReactDOM.render(
    +
    diff --git a/components/collapse/index.html b/components/collapse/index.html index c4a00ba9d..bf441e180 100644 --- a/components/collapse/index.html +++ b/components/collapse/index.html @@ -632,23 +632,6 @@ Collapse 折叠面板 - Ant Design 代码演示 -
    @@ -899,6 +882,23 @@ ReactDOM.render(
    +
    diff --git a/components/date-picker/index.html b/components/date-picker/index.html index 68bd7e8c9..07ac18575 100644 --- a/components/date-picker/index.html +++ b/components/date-picker/index.html @@ -704,58 +704,6 @@ DatePicker 日期选择框 - Ant Design 代码演示 -
    @@ -1147,6 +1095,58 @@ ReactDOM.render(< +
  • + + 基本 + +
    • +
  • + + 日期格式 + +
    • +
  • + + 三种大小 + +
    • +
  • + + 日期时间选择 + +
    • +
  • + + 禁用 + +
    • +
  • + + 指定不可选择日期 + +
    • +
  • + + 日期范围一 + +
    • +
  • + + 日期范围二 + +
    • +
  • + + 月选择器 + +
    • +
  • + + 国际化 + +
    • +
    diff --git a/components/dropdown/index.html b/components/dropdown/index.html index b1c5bcfbf..8f2c526e3 100644 --- a/components/dropdown/index.html +++ b/components/dropdown/index.html @@ -640,38 +640,6 @@ Dropdown 下拉菜单 - Ant Design 代码演示 -
    @@ -1126,6 +1094,38 @@ ReactDOM.render(
    +
    diff --git a/components/form/index.html b/components/form/index.html index 14ad1c67b..318fd4003 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -778,60 +778,8 @@ Form 表单 - Ant Design 代码演示 -
    -
    +
    @@ -890,6 +838,137 @@ ReactDOM.render(

    注意： 在表单里面，我们只使用大尺寸， 即高度为 32px，作为唯一的尺寸。

    +
    +
    +
    + + 
    import {Form, Input, Button, Checkbox, message} from 'antd';
+const FormItem = Form.Item;
+
+const Demo = React.createClass({
+  mixins: [Form.ValueMixin],
+
+  getInitialState() {
+    return {
+      formData: {
+        userName: undefined,
+        password: undefined,
+        agreement: undefined,
+      }
+    };
+  },
+
+  handleSubmit(e) {
+    e.preventDefault();
+    message.success('收到表单值~~~ ：' + JSON.stringify(this.state.formData, function(k, v) {
+      if (typeof v === 'undefined') {
+        return '';
+      }
+      return v;
+    }));
+  },
+
+  render() {
+    const formData = this.state.formData;
+    return (
+      <Form inline onSubmit={this.handleSubmit}>
+        <FormItem
+          id="userName"
+          label="账户：">
+          <Input placeholder="请输入账户名" id="userName" name="userName" onChange={this.setValue.bind(this, 'userName')} value={formData.userName} />
+        </FormItem>
+        <FormItem
+          id="password"
+          label="密码：">
+          <Input type="password" placeholder="请输入密码" id="password" name="password" onChange={this.setValue.bind(this, 'password')} value={formData.password} />
+        </FormItem>
+        <FormItem>
+          <label className="ant-checkbox-inline">
+            <Checkbox name="agreement" value={formData.agreement} onChange={this.setValue.bind(this, 'agreement')} /> 记住我
+          </label>
+        </FormItem>
+        <Button type="primary" htmlType="submit">登录</Button>
+      </Form>
+    );
+  }
+});
+
+ReactDOM.render(<Demo />, mountNode);
    +
    +
    +
    + 平行排列 +
    +

    行内排列，常用于登录界面。

    + +
    @@ -1108,6 +1187,248 @@ ReactDOM.render(<不支持 mixins；

    +
    +
    +
    + + 
    import {Form, Input, Select, Checkbox, Radio} from 'antd';
+const FormItem = Form.Item;
+const Option = Select.Option;
+const RadioGroup = Radio.Group;
+
+function handleSelectChange(value) {
+  console.log('selected ' + value);
+}
+
+ReactDOM.render(
+  <Form horizontal>
+    <FormItem
+      id="control-input"
+      label="输入框："
+      labelCol={{span: 6}}
+      wrapperCol={{span: 14}}>
+      <Input id="control-input" placeholder="Please enter..." />
+    </FormItem>
+
+    <FormItem
+      id="control-textarea"
+      label="文本域："
+      labelCol={{span: 6}}
+      wrapperCol={{span: 14}}>
+      <Input type="textarea" id="control-textarea" rows="3" />
+    </FormItem>
+
+    <FormItem
+      id="select"
+      label="Select 选择器："
+      labelCol={{span: 6}}
+      wrapperCol={{span: 14}}>
+      <Select id="select" size="large" defaultValue="lucy" style={{width:200}} onChange={handleSelectChange}>
+        <Option value="jack">jack</Option>
+        <Option value="lucy">lucy</Option>
+        <Option value="disabled" disabled>disabled</Option>
+        < Option value="yiminghe">yiminghe</Option>
+      </Select>
+    </FormItem>
+
+    <FormItem
+      label="Checkbox 多选框："
+      labelCol={{span: 6}}
+      wrapperCol={{span: 18}} >
+        <label className="ant-checkbox-vertical">
+          <Checkbox />选项一
+        </label>
+        <label className="ant-checkbox-vertical">
+          <Checkbox />选项二
+        </label>
+        <label className="ant-checkbox-vertical">
+          <Checkbox disabled />选项三（不可选）
+        </label>
+    </FormItem>
+
+    <FormItem
+      label="Checkbox 多选框："
+      labelCol={{span: 6}}
+      wrapperCol={{span: 18}} >
+        <label className="ant-checkbox-inline">
+          <Checkbox />选项一
+        </label>
+        <label className="ant-checkbox-inline">
+          <Checkbox />选项二
+        </label>
+        <label className="ant-checkbox-inline">
+          <Checkbox />选项三
+        </label>
+    </FormItem>
+
+    <FormItem
+      label="Radio 单选框："
+      labelCol={{span: 6}}
+      wrapperCol={{span: 18}} >
+        <RadioGroup value="b">
+          <Radio value="a">A</Radio>
+          <Radio value="b">B</Radio>
+          <Radio value="c">C</Radio>
+          <Radio value="d">D</Radio>
+        </RadioGroup>
+    </FormItem>
+  </Form>
+, mountNode);
    +
    +
    +
    + 表单控件 +
    +

    展示所有支持的表单控件。

    +

    注： 输入框：只有正确设置了 type 属性的输入控件才能被赋予正确的样式。

    + +
    @@ -1353,836 +1674,6 @@ ReactDOM.render(

    各类输入框的组合展现。

    -
    -
    -
    - - 
    import { Form, Input, DatePicker, Col } from 'antd';
-const FormItem = Form.Item;
-
-ReactDOM.render(
-  <Form horizontal>
-    <FormItem
-      label="失败校验："
-      labelCol={{span: 5}}
-      wrapperCol={{span: 12}}
-      validateStatus="error"
-      help="请输入数字和字母组合">
-      <Input defaultValue="无效选择" id="error" />
-    </FormItem>
-
-    <FormItem
-      label="警告校验："
-      labelCol={{span: 5}}
-      wrapperCol={{span: 12}}
-      validateStatus="warning">
-      <Input defaultValue="前方高能预警" id="warning" />
-    </FormItem>
-
-    <FormItem
-      label="校验中："
-      labelCol={{span: 5}}
-      wrapperCol={{span: 12}}
-      hasFeedback
-      validateStatus="validating"
-      help="信息审核中...">
-      <Input defaultValue="我是被校验的内容" id="validating" />
-    </FormItem>
-
-    <FormItem
-      label="成功校验："
-      labelCol={{span: 5}}
-      wrapperCol={{span: 12}}
-      hasFeedback
-      validateStatus="success">
-      <Input defaultValue="我是正文" id="success" />
-    </FormItem>
-
-    <FormItem
-      label="警告校验："
-      labelCol={{span: 5}}
-      wrapperCol={{span: 12}}
-      hasFeedback
-      validateStatus="warning">
-      <Input defaultValue="前方高能预警" id="warning" />
-    </FormItem>
-
-    <FormItem
-      label="失败校验："
-      labelCol={{span: 5}}
-      wrapperCol={{span: 12}}
-      hasFeedback
-      validateStatus="error"
-      help="请输入数字和字母组合">
-      <Input defaultValue="无效选择" id="error" />
-    </FormItem>
-
-    <FormItem
-      label="Datepicker："
-      labelCol={{span: 5}}
-      validateStatus="error">
-      <Col span="6">
-        <DatePicker />
-      </Col>
-      <Col span="1">
-        <p className="ant-form-split">-</p>
-      </Col>
-      <Col span="6">
-        <DatePicker />
-      </Col>
-      <Col span="19" offset="5">
-        <p className="ant-form-explain">请输入正确选项</p>
-      </Col>
-    </FormItem>
-  </Form>
-, mountNode);
    -
    -
    -
    - 校验提示 -
    -

    我们为表单控件定义了三种校验状态，为 <FormItem> 定义 validateStatus 属性即可。

    -

    validateStatus: ['success', 'warning', 'error', 'validating']。

    -

    另外为输入框添加反馈图标，设置 <FormItem> 的 hasFeedback 属性值为 true 即可。

    -

    注意: 反馈图标只对 <Input /> 有效。

    - -
    -
    -
    -
    - - 
    import { Form, Input, Row, Col, Button } from 'antd';
-const FormItem = Form.Item;
-
-ReactDOM.render(
-<Form horizontal className="advanced-search-form">
-  <Row>
-    <Col span="8">
-      <FormItem
-        label="搜索名称："
-        labelCol={{span: 10}}
-        wrapperCol={{span: 14}}>
-        <Input placeholder="请输入搜索名称" />
-      </FormItem>
-      <FormItem
-        label="较长搜索名称："
-        labelCol={{span: 10}}
-        wrapperCol={{span: 14}}>
-        <Input placeholder="请输入搜索名称" />
-      </FormItem>
-      <FormItem
-        label="搜索名称："
-        labelCol={{span: 10}}
-        wrapperCol={{span: 14}}>
-        <Input placeholder="请输入搜索名称" />
-      </FormItem>
-    </Col>
-    <Col span="8">
-      <FormItem
-        label="搜索名称："
-        labelCol={{span: 10}}
-        wrapperCol={{span: 14}}>
-        <Input placeholder="请输入搜索名称" />
-      </FormItem>
-      <FormItem
-        label="较长搜索名称："
-        labelCol={{span: 10}}
-        wrapperCol={{span: 14}}>
-        <Input placeholder="请输入搜索名称" />
-      </FormItem>
-      <FormItem
-        label="搜索名称："
-        labelCol={{span: 10}}
-        wrapperCol={{span: 14}}>
-        <Input placeholder="请输入搜索名称" />
-      </FormItem>
-    </Col>
-    <Col span="8">
-      <FormItem
-        label="搜索名称："
-        labelCol={{span: 10}}
-        wrapperCol={{span: 14}}>
-        <Input placeholder="请输入搜索名称" />
-      </FormItem>
-      <FormItem
-        label="较长搜索名称："
-        labelCol={{span: 10}}
-        wrapperCol={{span: 14}}>
-        <Input placeholder="请输入搜索名称" />
-      </FormItem>
-      <FormItem
-        label="搜索名称："
-        labelCol={{span: 10}}
-        wrapperCol={{span: 14}}>
-        <Input placeholder="请输入搜索名称" />
-      </FormItem>
-    </Col>
-  </Row>
-  <Row>
-    <Col span="8" offset="16" style={{textAlign: 'right'}}>
-      <Button type="primary" htmlType="submit">搜索</Button>
-      <Button type="ghost">清除条件</Button>
-    </Col>
-  </Row>
-</Form>
-, mountNode);
    /* 定制样式 */
-
-.advanced-search-form {
-  padding: 16px 8px;
-  background: #f8f8f8;
-  border: 1px solid #d9d9d9;
-  border-radius: 6px;
-}
-
-/* 由于输入标签长度不确定，所以需要微调使之看上去居中 */
-.advanced-search-form > .row {
-  margin-left: -10px;
-}
-
-.advanced-search-form > .row > .col-8 {
-  padding: 0 8px;
-}
-
-.advanced-search-form .ant-form-item {
-  margin-bottom: 16px;
-}
-
-.advanced-search-form .ant-btn + .ant-btn {
-  margin-left: 8px;
-}
    - -
    -
    -
    - 高级搜索 -
    -

    三列栅格式的表单排列方式，常用于数据表格的高级搜索。

    -

    有部分定制的样式代码，由于输入标签长度不确定，需要根据具体情况自行调整。

    - -
    -
    -
    -
    -
    -
    - - 
    import {Form, Input, Button, Checkbox, message} from 'antd';
-const FormItem = Form.Item;
-
-const Demo = React.createClass({
-  mixins: [Form.ValueMixin],
-
-  getInitialState() {
-    return {
-      formData: {
-        userName: undefined,
-        password: undefined,
-        agreement: undefined,
-      }
-    };
-  },
-
-  handleSubmit(e) {
-    e.preventDefault();
-    message.success('收到表单值~~~ ：' + JSON.stringify(this.state.formData, function(k, v) {
-      if (typeof v === 'undefined') {
-        return '';
-      }
-      return v;
-    }));
-  },
-
-  render() {
-    const formData = this.state.formData;
-    return (
-      <Form inline onSubmit={this.handleSubmit}>
-        <FormItem
-          id="userName"
-          label="账户：">
-          <Input placeholder="请输入账户名" id="userName" name="userName" onChange={this.setValue.bind(this, 'userName')} value={formData.userName} />
-        </FormItem>
-        <FormItem
-          id="password"
-          label="密码：">
-          <Input type="password" placeholder="请输入密码" id="password" name="password" onChange={this.setValue.bind(this, 'password')} value={formData.password} />
-        </FormItem>
-        <FormItem>
-          <label className="ant-checkbox-inline">
-            <Checkbox name="agreement" value={formData.agreement} onChange={this.setValue.bind(this, 'agreement')} /> 记住我
-          </label>
-        </FormItem>
-        <Button type="primary" htmlType="submit">登录</Button>
-      </Form>
-    );
-  }
-});
-
-ReactDOM.render(<Demo />, mountNode);
    -
    -
    -
    - 平行排列 -
    -

    行内排列，常用于登录界面。

    - -
    -
    -
    -
    - - 
    import {Form, Input, Select, Checkbox, Radio} from 'antd';
-const FormItem = Form.Item;
-const Option = Select.Option;
-const RadioGroup = Radio.Group;
-
-function handleSelectChange(value) {
-  console.log('selected ' + value);
-}
-
-ReactDOM.render(
-  <Form horizontal>
-    <FormItem
-      id="control-input"
-      label="输入框："
-      labelCol={{span: 6}}
-      wrapperCol={{span: 14}}>
-      <Input id="control-input" placeholder="Please enter..." />
-    </FormItem>
-
-    <FormItem
-      id="control-textarea"
-      label="文本域："
-      labelCol={{span: 6}}
-      wrapperCol={{span: 14}}>
-      <Input type="textarea" id="control-textarea" rows="3" />
-    </FormItem>
-
-    <FormItem
-      id="select"
-      label="Select 选择器："
-      labelCol={{span: 6}}
-      wrapperCol={{span: 14}}>
-      <Select id="select" size="large" defaultValue="lucy" style={{width:200}} onChange={handleSelectChange}>
-        <Option value="jack">jack</Option>
-        <Option value="lucy">lucy</Option>
-        <Option value="disabled" disabled>disabled</Option>
-        < Option value="yiminghe">yiminghe</Option>
-      </Select>
-    </FormItem>
-
-    <FormItem
-      label="Checkbox 多选框："
-      labelCol={{span: 6}}
-      wrapperCol={{span: 18}} >
-        <label className="ant-checkbox-vertical">
-          <Checkbox />选项一
-        </label>
-        <label className="ant-checkbox-vertical">
-          <Checkbox />选项二
-        </label>
-        <label className="ant-checkbox-vertical">
-          <Checkbox disabled />选项三（不可选）
-        </label>
-    </FormItem>
-
-    <FormItem
-      label="Checkbox 多选框："
-      labelCol={{span: 6}}
-      wrapperCol={{span: 18}} >
-        <label className="ant-checkbox-inline">
-          <Checkbox />选项一
-        </label>
-        <label className="ant-checkbox-inline">
-          <Checkbox />选项二
-        </label>
-        <label className="ant-checkbox-inline">
-          <Checkbox />选项三
-        </label>
-    </FormItem>
-
-    <FormItem
-      label="Radio 单选框："
-      labelCol={{span: 6}}
-      wrapperCol={{span: 18}} >
-        <RadioGroup value="b">
-          <Radio value="a">A</Radio>
-          <Radio value="b">B</Radio>
-          <Radio value="c">C</Radio>
-          <Radio value="d">D</Radio>
-        </RadioGroup>
-    </FormItem>
-  </Form>
-, mountNode);
    -
    -
    -
    - 表单控件 -
    -

    展示所有支持的表单控件。

    -

    注： 输入框：只有正确设置了 type 属性的输入控件才能被赋予正确的样式。

    - -
    @@ -2523,6 +2014,205 @@ ReactDOM.render(<
    +
    +
    +
    + + 
    import { Form, Input, DatePicker, Col } from 'antd';
+const FormItem = Form.Item;
+
+ReactDOM.render(
+  <Form horizontal>
+    <FormItem
+      label="失败校验："
+      labelCol={{span: 5}}
+      wrapperCol={{span: 12}}
+      validateStatus="error"
+      help="请输入数字和字母组合">
+      <Input defaultValue="无效选择" id="error" />
+    </FormItem>
+
+    <FormItem
+      label="警告校验："
+      labelCol={{span: 5}}
+      wrapperCol={{span: 12}}
+      validateStatus="warning">
+      <Input defaultValue="前方高能预警" id="warning" />
+    </FormItem>
+
+    <FormItem
+      label="校验中："
+      labelCol={{span: 5}}
+      wrapperCol={{span: 12}}
+      hasFeedback
+      validateStatus="validating"
+      help="信息审核中...">
+      <Input defaultValue="我是被校验的内容" id="validating" />
+    </FormItem>
+
+    <FormItem
+      label="成功校验："
+      labelCol={{span: 5}}
+      wrapperCol={{span: 12}}
+      hasFeedback
+      validateStatus="success">
+      <Input defaultValue="我是正文" id="success" />
+    </FormItem>
+
+    <FormItem
+      label="警告校验："
+      labelCol={{span: 5}}
+      wrapperCol={{span: 12}}
+      hasFeedback
+      validateStatus="warning">
+      <Input defaultValue="前方高能预警" id="warning" />
+    </FormItem>
+
+    <FormItem
+      label="失败校验："
+      labelCol={{span: 5}}
+      wrapperCol={{span: 12}}
+      hasFeedback
+      validateStatus="error"
+      help="请输入数字和字母组合">
+      <Input defaultValue="无效选择" id="error" />
+    </FormItem>
+
+    <FormItem
+      label="Datepicker："
+      labelCol={{span: 5}}
+      validateStatus="error">
+      <Col span="6">
+        <DatePicker />
+      </Col>
+      <Col span="1">
+        <p className="ant-form-split">-</p>
+      </Col>
+      <Col span="6">
+        <DatePicker />
+      </Col>
+      <Col span="19" offset="5">
+        <p className="ant-form-explain">请输入正确选项</p>
+      </Col>
+    </FormItem>
+  </Form>
+, mountNode);
    +
    +
    +
    + 校验提示 +
    +

    我们为表单控件定义了三种校验状态，为 <FormItem> 定义 validateStatus 属性即可。

    +

    validateStatus: ['success', 'warning', 'error', 'validating']。

    +

    另外为输入框添加反馈图标，设置 <FormItem> 的 hasFeedback 属性值为 true 即可。

    +

    注意: 反馈图标只对 <Input /> 有效。

    + +
    @@ -2637,6 +2327,262 @@ ReactDOM.render(

    2) 为 <fieldset> 设置 disabled 属性，可以禁用 <fieldset> 中包含的所有控件。

    +
    +
    +
    + + 
    import { Form, Input, Row, Col, Button } from 'antd';
+const FormItem = Form.Item;
+
+ReactDOM.render(
+<Form horizontal className="advanced-search-form">
+  <Row>
+    <Col span="8">
+      <FormItem
+        label="搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+      <FormItem
+        label="较长搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+      <FormItem
+        label="搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+    </Col>
+    <Col span="8">
+      <FormItem
+        label="搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+      <FormItem
+        label="较长搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+      <FormItem
+        label="搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+    </Col>
+    <Col span="8">
+      <FormItem
+        label="搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+      <FormItem
+        label="较长搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+      <FormItem
+        label="搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+    </Col>
+  </Row>
+  <Row>
+    <Col span="8" offset="16" style={{textAlign: 'right'}}>
+      <Button type="primary" htmlType="submit">搜索</Button>
+      <Button type="ghost">清除条件</Button>
+    </Col>
+  </Row>
+</Form>
+, mountNode);
    /* 定制样式 */
+
+.advanced-search-form {
+  padding: 16px 8px;
+  background: #f8f8f8;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+}
+
+/* 由于输入标签长度不确定，所以需要微调使之看上去居中 */
+.advanced-search-form > .row {
+  margin-left: -10px;
+}
+
+.advanced-search-form > .row > .col-8 {
+  padding: 0 8px;
+}
+
+.advanced-search-form .ant-form-item {
+  margin-bottom: 16px;
+}
+
+.advanced-search-form .ant-btn + .ant-btn {
+  margin-left: 8px;
+}
    + +
    +
    +
    + 高级搜索 +
    +

    三列栅格式的表单排列方式，常用于数据表格的高级搜索。

    +

    有部分定制的样式代码，由于输入标签长度不确定，需要根据具体情况自行调整。

    + +
    @@ -2764,8 +2710,60 @@ ReactDOM.render(
    -
    +
    +
    diff --git a/components/input-number/index.html b/components/input-number/index.html index 7e7131000..eeb8b1ec8 100644 --- a/components/input-number/index.html +++ b/components/input-number/index.html @@ -636,23 +636,6 @@ InputNumber 数字输入框 - Ant Design 代码演示 -
    @@ -801,6 +784,23 @@ ReactDOM.render(
    +
    diff --git a/components/layout/index.html b/components/layout/index.html index e8dbcbcea..6513249ca 100644 --- a/components/layout/index.html +++ b/components/layout/index.html @@ -693,40 +693,8 @@ Layout 布局 - Ant Design 代码演示 -
    -
    +
    @@ -833,262 +801,7 @@ div.testColClassName {

    使用单一的一组 .col-* 栅格类，就可以创建一个基本的栅格系统，所有列（column）必须放在 .row 内。

    -
    -
    -
    - - 
    import { Row, Col } from 'antd';
-
-ReactDOM.render(
-  <div>
-    <Row>
-      <Col span="18" push="6">.col-18 .col-push-6</Col>
-      <Col span="6" pull="18">.col-6 .col-pull-18</Col>
-    </Row>
-  </div>,
-  mountNode
-);
    -
    -
    -
    - 布局排序 -
    -

    列排序。

    -

    通过使用 .col-push-* 和 .col-pull-* 类就可以很容易的改变列（column）的顺序。

    - -
    -
    -
    -
    - - 
    import { Row, Col } from 'antd';
-
-const DemoBox = React.createClass({
-  render() {
-    const { value } = this.props;
-    const className = `hight-${value}`;
-    return (
-      <p className={className}>{this.props.children}</p>
-    );
-  }
-});
-
-ReactDOM.render(
-  <div>
-    <p>顶部对齐</p>
-    <Row type="flex" justify="center" align="top">
-      <Col span="4"><DemoBox value="100">.col-4</DemoBox></Col>
-      <Col span="4"><DemoBox value="50">.col-4</DemoBox></Col>
-      <Col span="4"><DemoBox value="120">.col-4</DemoBox></Col>
-      <Col span="4"><DemoBox value="80">.col-4</DemoBox></Col>
-    </Row>
-
-    <p>居中对齐</p>
-    <Row type="flex" justify="space-around" align="middle">
-      <Col span="4"><DemoBox value="100">.col-4</DemoBox></Col>
-      <Col span="4"><DemoBox value="50">.col-4</DemoBox></Col>
-      <Col span="4"><DemoBox value="120">.col-4</DemoBox></Col>
-      <Col span="4"><DemoBox value="80">.col-4</DemoBox></Col>
-    </Row>
-
-    <p>底部对齐</p>
-    <Row type="flex" justify="space-between" align="bottom">
-      <Col span="4"><DemoBox value="100">.col-4</DemoBox></Col>
-      <Col span="4"><DemoBox value="50">.col-4</DemoBox></Col>
-      <Col span="4"><DemoBox value="120">.col-4</DemoBox></Col>
-      <Col span="4"><DemoBox value="80">.col-4</DemoBox></Col>
-    </Row>
-  </div>,
-  mountNode
-);
    -
    -
    -
    - Flex对齐 -
    -

    Flex 子元素垂直对齐。

    - -
    -
    -
    -
    +
    @@ -1163,6 +876,51 @@ ReactDOM.render(

    使用 .col-offset-* 类可以将列向右侧偏。例如，.col-offset-4 类将 .col-4 元素向右侧偏移了4个列（column）的宽度。

    +
    +
    +
    + + 
    import { Row, Col } from 'antd';
+
+ReactDOM.render(
+  <div>
+    <Row>
+      <Col span="18" push="6">.col-18 .col-push-6</Col>
+      <Col span="6" pull="18">.col-6 .col-pull-18</Col>
+    </Row>
+  </div>,
+  mountNode
+);
    +
    +
    +
    + 布局排序 +
    +

    列排序。

    +

    通过使用 .col-push-* 和 .col-pull-* 类就可以很容易的改变列（column）的顺序。

    + +
    @@ -1374,6 +1132,214 @@ ReactDOM.render(

    使用 row-flex 定义 flex 布局，其子元素根据不同的值 start,center,end,space-between,space-around，分别定义其在父节点里面的排版方式。

    +
    +
    +
    + + 
    import { Row, Col } from 'antd';
+
+const DemoBox = React.createClass({
+  render() {
+    const { value } = this.props;
+    const className = `hight-${value}`;
+    return (
+      <p className={className}>{this.props.children}</p>
+    );
+  }
+});
+
+ReactDOM.render(
+  <div>
+    <p>顶部对齐</p>
+    <Row type="flex" justify="center" align="top">
+      <Col span="4"><DemoBox value="100">.col-4</DemoBox></Col>
+      <Col span="4"><DemoBox value="50">.col-4</DemoBox></Col>
+      <Col span="4"><DemoBox value="120">.col-4</DemoBox></Col>
+      <Col span="4"><DemoBox value="80">.col-4</DemoBox></Col>
+    </Row>
+
+    <p>居中对齐</p>
+    <Row type="flex" justify="space-around" align="middle">
+      <Col span="4"><DemoBox value="100">.col-4</DemoBox></Col>
+      <Col span="4"><DemoBox value="50">.col-4</DemoBox></Col>
+      <Col span="4"><DemoBox value="120">.col-4</DemoBox></Col>
+      <Col span="4"><DemoBox value="80">.col-4</DemoBox></Col>
+    </Row>
+
+    <p>底部对齐</p>
+    <Row type="flex" justify="space-between" align="bottom">
+      <Col span="4"><DemoBox value="100">.col-4</DemoBox></Col>
+      <Col span="4"><DemoBox value="50">.col-4</DemoBox></Col>
+      <Col span="4"><DemoBox value="120">.col-4</DemoBox></Col>
+      <Col span="4"><DemoBox value="80">.col-4</DemoBox></Col>
+    </Row>
+  </div>,
+  mountNode
+);
    +
    +
    +
    + Flex对齐 +
    +

    Flex 子元素垂直对齐。

    + +
    @@ -1431,8 +1397,40 @@ ReactDOM.render(
    -
    +
    +
    diff --git a/components/menu/index.html b/components/menu/index.html index d3c282092..a08303011 100644 --- a/components/menu/index.html +++ b/components/menu/index.html @@ -725,35 +725,8 @@ Menu 导航菜单 - Ant Design 代码演示 -
    -
    +
    @@ -901,6 +874,210 @@ ReactDOM.render(<
    +
    +
    +
    + + 
    import { Menu, Icon } from 'antd';
+const SubMenu = Menu.SubMenu;
+const MenuItemGroup = Menu.ItemGroup;
+
+const Sider = React.createClass({
+  getInitialState() {
+    return {
+      current: '1'
+    };
+  },
+  handleClick(e) {
+    console.log('click ', e);
+    this.setState({
+      current: e.key
+    });
+  },
+  render() {
+    return <Menu onClick={this.handleClick}
+                 style={{width:240}}
+                 defaultOpenKeys={['sub1']}
+                 selectedKeys={[this.state.current]}
+                 mode="inline">
+      <SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
+        <MenuItemGroup title="分组1">
+          <Menu.Item key="1">选项1</Menu.Item>
+          <Menu.Item key="2">选项2</Menu.Item>
+        </MenuItemGroup>
+        <MenuItemGroup title="分组2">
+          <Menu.Item key="3">选项3</Menu.Item>
+          <Menu.Item key="4">选项4</Menu.Item>
+        </MenuItemGroup>
+      </SubMenu>
+      <SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
+        <Menu.Item key="5">选项5</Menu.Item>
+        <Menu.Item key="6">选项6</Menu.Item>
+        <SubMenu key="sub3" title="三级导航">
+          <Menu.Item key="7">选项7</Menu.Item>
+          <Menu.Item key="8">选项8</Menu.Item>
+        </SubMenu>
+      </SubMenu>
+      <SubMenu key="sub4" title={<span><Icon type="setting" /><span>导航三</span></span>}>
+        <Menu.Item key="9">选项9</Menu.Item>
+        <Menu.Item key="10">选项10</Menu.Item>
+        <Menu.Item key="11">选项11</Menu.Item>
+        <Menu.Item key="12">选项12</Menu.Item>
+      </SubMenu>
+    </Menu>;
+  }
+});
+ReactDOM.render(<Sider />, mountNode);
    +
    +
    +
    + 内嵌菜单 +
    +

    垂直菜单，子菜单内嵌在菜单区域。

    + +
    @@ -1109,6 +1286,178 @@ ReactDOM.render(<
    +
    +
    +
    + + 
    import { Menu, Icon } from 'antd';
+const SubMenu = Menu.SubMenu;
+const MenuItemGroup = Menu.ItemGroup;
+
+function handleClick(e) {
+  console.log('click', e);
+}
+
+ReactDOM.render(<Menu onClick={handleClick} style={{width:240}} mode="vertical">
+  <SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
+    <MenuItemGroup title="分组1">
+      <Menu.Item key="1">选项1</Menu.Item>
+      <Menu.Item key="2">选项2</Menu.Item>
+    </MenuItemGroup>
+    <MenuItemGroup title="分组2">
+      <Menu.Item key="3">选项3</Menu.Item>
+      <Menu.Item key="4">选项4</Menu.Item>
+    </MenuItemGroup>
+  </SubMenu>
+  <SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
+    <Menu.Item key="5">选项5</Menu.Item>
+    <Menu.Item key="6">选项6</Menu.Item>
+    <SubMenu key="sub3" title="三级导航">
+      <Menu.Item key="7">选项7</Menu.Item>
+      <Menu.Item key="8">选项8</Menu.Item>
+    </SubMenu>
+  </SubMenu>
+  <SubMenu key="sub4" title={<span><icon type="setting" /><span>导航三</span></span>}>
+    <Menu.Item key="9">选项9</Menu.Item>
+    <Menu.Item key="10">选项10</Menu.Item>
+    <Menu.Item key="11">选项11</Menu.Item>
+    <Menu.Item key="12">选项12</Menu.Item>
+  </SubMenu>
+</Menu>
+, mountNode);
    +
    +
    +
    + 垂直菜单 +
    +

    子菜单是弹出的形式。

    + +
    @@ -1324,386 +1673,35 @@ ReactDOM.render(<
    -
    -
    -
    -
    - - 
    import { Menu, Icon } from 'antd';
-const SubMenu = Menu.SubMenu;
-const MenuItemGroup = Menu.ItemGroup;
-
-const Sider = React.createClass({
-  getInitialState() {
-    return {
-      current: '1'
-    };
-  },
-  handleClick(e) {
-    console.log('click ', e);
-    this.setState({
-      current: e.key
-    });
-  },
-  render() {
-    return <Menu onClick={this.handleClick}
-                 style={{width:240}}
-                 defaultOpenKeys={['sub1']}
-                 selectedKeys={[this.state.current]}
-                 mode="inline">
-      <SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
-        <MenuItemGroup title="分组1">
-          <Menu.Item key="1">选项1</Menu.Item>
-          <Menu.Item key="2">选项2</Menu.Item>
-        </MenuItemGroup>
-        <MenuItemGroup title="分组2">
-          <Menu.Item key="3">选项3</Menu.Item>
-          <Menu.Item key="4">选项4</Menu.Item>
-        </MenuItemGroup>
-      </SubMenu>
-      <SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
-        <Menu.Item key="5">选项5</Menu.Item>
-        <Menu.Item key="6">选项6</Menu.Item>
-        <SubMenu key="sub3" title="三级导航">
-          <Menu.Item key="7">选项7</Menu.Item>
-          <Menu.Item key="8">选项8</Menu.Item>
-        </SubMenu>
-      </SubMenu>
-      <SubMenu key="sub4" title={<span><Icon type="setting" /><span>导航三</span></span>}>
-        <Menu.Item key="9">选项9</Menu.Item>
-        <Menu.Item key="10">选项10</Menu.Item>
-        <Menu.Item key="11">选项11</Menu.Item>
-        <Menu.Item key="12">选项12</Menu.Item>
-      </SubMenu>
-    </Menu>;
-  }
-});
-ReactDOM.render(<Sider />, mountNode);
    -
    -
    -
    - 内嵌菜单
    -

    垂直菜单，子菜单内嵌在菜单区域。

    - -
    -
    -
    -
    - - 
    import { Menu, Icon } from 'antd';
-const SubMenu = Menu.SubMenu;
-const MenuItemGroup = Menu.ItemGroup;
-
-function handleClick(e) {
-  console.log('click', e);
-}
-
-ReactDOM.render(<Menu onClick={handleClick} style={{width:240}} mode="vertical">
-  <SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
-    <MenuItemGroup title="分组1">
-      <Menu.Item key="1">选项1</Menu.Item>
-      <Menu.Item key="2">选项2</Menu.Item>
-    </MenuItemGroup>
-    <MenuItemGroup title="分组2">
-      <Menu.Item key="3">选项3</Menu.Item>
-      <Menu.Item key="4">选项4</Menu.Item>
-    </MenuItemGroup>
-  </SubMenu>
-  <SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
-    <Menu.Item key="5">选项5</Menu.Item>
-    <Menu.Item key="6">选项6</Menu.Item>
-    <SubMenu key="sub3" title="三级导航">
-      <Menu.Item key="7">选项7</Menu.Item>
-      <Menu.Item key="8">选项8</Menu.Item>
-    </SubMenu>
-  </SubMenu>
-  <SubMenu key="sub4" title={<span><icon type="setting" /><span>导航三</span></span>}>
-    <Menu.Item key="9">选项9</Menu.Item>
-    <Menu.Item key="10">选项10</Menu.Item>
-    <Menu.Item key="11">选项11</Menu.Item>
-    <Menu.Item key="12">选项12</Menu.Item>
-  </SubMenu>
-</Menu>
-, mountNode);
    -
    -
    -
    - 垂直菜单 -
    -

    子菜单是弹出的形式。

    - -
    -
    -
    +
    diff --git a/components/message/index.html b/components/message/index.html index a62a2ee85..d88b0c5f2 100644 --- a/components/message/index.html +++ b/components/message/index.html @@ -633,28 +633,6 @@ Message 全局提示 - Ant Design 代码演示 -
    @@ -831,6 +809,28 @@ ReactDOM.render(< +
  • + + 普通提示 + +
    • +
  • + + 其他提示类型 + +
    • +
  • + + 修改延时 + +
    • +
  • + + 加载中 + +
    • +
    diff --git a/components/modal/index.html b/components/modal/index.html index acca3fb56..9d542f55f 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -709,43 +709,6 @@ Modal 对话框 - Ant Design 代码演示 -
    @@ -1451,6 +1414,43 @@ ReactDOM.render(< +
  • + + 基本 + +
    • +
  • + + 异步关闭 + +
    • +
  • + + 自定义页脚 + +
    • +
  • + + 确认对话框 + +
    • +
  • + + 确认对话框 + +
    • +
  • + + 信息提示 + +
    • +
  • + + 国际化 + +
    • +
    diff --git a/components/notification/index.html b/components/notification/index.html index 6f432c47c..cfac80b3b 100644 --- a/components/notification/index.html +++ b/components/notification/index.html @@ -661,33 +661,6 @@ Notification 通知提醒框 - Ant Design 代码演示 -
    @@ -981,6 +954,33 @@ mountNode);
    +
    diff --git a/components/pagination/index.html b/components/pagination/index.html index 86252db19..42ece5089 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -650,48 +650,6 @@ Pagination 分页 - Ant Design 代码演示 -
    @@ -924,6 +882,48 @@ mountNode);
    +
    diff --git a/components/popconfirm/index.html b/components/popconfirm/index.html index 10c62f500..f826eefef 100644 --- a/components/popconfirm/index.html +++ b/components/popconfirm/index.html @@ -624,28 +624,6 @@ Popconfirm 气泡确认框 - Ant Design 代码演示 -
    @@ -1061,6 +1039,28 @@ ReactDOM.render(< +
  • + + 基本 + +
    • +
  • + + 位置 + +
    • +
  • + + 国际化 + +
    • +
  • + + 条件触发 + +
    • +
    diff --git a/components/popover/index.html b/components/popover/index.html index d89af6ebc..7b3d8f40c 100644 --- a/components/popover/index.html +++ b/components/popover/index.html @@ -630,28 +630,6 @@ Popover 气泡卡片 - Ant Design 代码演示 -
    @@ -1093,6 +1071,28 @@ ReactDOM.render(< +
  • + + 基本 + +
    • +
  • + + 位置 + +
    • +
  • + + 三种触发方式 + +
    • +
  • + + 从浮层内关闭 + +
    • +
    diff --git a/components/progress/index.html b/components/progress/index.html index 15c48fb61..01e19b88a 100644 --- a/components/progress/index.html +++ b/components/progress/index.html @@ -663,38 +663,6 @@ Progress 进度条 - Ant Design 代码演示 -
    @@ -1056,6 +1024,38 @@ ReactDOM.render(< +
  • + + 进度条 + +
    • +
  • + + 进度圈 + +
    • +
  • + + 小型进度条 + +
    • +
  • + + 小型进度圈 + +
    • +
  • + + 进度圈动态展示 + +
    • +
  • + + 动态展示 + +
    • +
    diff --git a/components/queue-anim/index.html b/components/queue-anim/index.html index 85e4fedf0..b281e4a25 100644 --- a/components/queue-anim/index.html +++ b/components/queue-anim/index.html @@ -818,48 +818,6 @@ QueueAnim 进出场动画 - Ant Design 代码演示 -
    @@ -2213,6 +2171,48 @@ ReactDOM.render((
    +
    diff --git a/components/radio/index.html b/components/radio/index.html index b725fe6f4..3a1c428b6 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -647,28 +647,6 @@ Radio 单选框 - Ant Design 代码演示 -
    @@ -988,6 +966,28 @@ ReactDOM.render(< +
  • + + 基本 + +
    • +
  • + + 不可用 + +
    • +
  • + + RadioGroup 组合 + +
    • +
  • + + 按钮样式 + +
    • +
    diff --git a/components/select/index.html b/components/select/index.html index bf0c9e7e1..c5e5544f0 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -751,48 +751,6 @@ Select 选择器 - Ant Design 代码演示 -
    @@ -1470,6 +1428,48 @@ ReactDOM.render(< +
  • + + 基本使用 + +
    • +
  • + + 三种大小 + +
    • +
  • + + 带搜索框 + +
    • +
  • + + 多选 + +
    • +
  • + + 标签 + +
    • +
  • + + 智能提示 + +
    • +
  • + + 分组 + +
    • +
  • + + 联动 + +
    • +
    diff --git a/components/slider/index.html b/components/slider/index.html index 60b00e7f7..c1283579d 100644 --- a/components/slider/index.html +++ b/components/slider/index.html @@ -659,38 +659,6 @@ Slider 滑动输入条 - Ant Design 代码演示 -
    @@ -1160,6 +1128,38 @@ ReactDOM.render(< +
  • + + 基本 + +
    • +
  • + + 带输入框的滑块 + +
    • +
  • + + 带 icon 的滑块 + +
    • +
  • + + 分段式滑块 + +
    • +
  • + + 事件 + +
    • +
  • + + 格式化 Tooltip 内容 + +
    • +
    diff --git a/components/spin/index.html b/components/spin/index.html index 0ccdda2d4..c1cf36d46 100644 --- a/components/spin/index.html +++ b/components/spin/index.html @@ -599,28 +599,6 @@ Spin 加载中 - Ant Design 代码演示 -
    @@ -809,6 +787,28 @@ ReactDOM.render(< +
  • + + 基本用法 + +
    • +
  • + + 各种大小 + +
    • +
  • + + 容器 + +
    • +
  • + + 卡片加载中 + +
    • +
    diff --git a/components/steps/index.html b/components/steps/index.html index 4dd400434..d4cbabd1b 100644 --- a/components/steps/index.html +++ b/components/steps/index.html @@ -663,45 +663,8 @@ Steps 步骤条 - Ant Design 代码演示 -
    -
    +
    @@ -761,170 +724,7 @@ ReactDOM.render(<
    -
    -
    -
    - - 
    import { Steps } from 'antd';
-const Step = Steps.Step;
-
-ReactDOM.render(<Steps>
-  <Step status="finish" title="步骤1" icon="cloud" />
-  <Step status="process" title="步骤2" icon="apple" />
-  <Step status="wait" title="步骤3" icon="github" />
-</Steps>, mountNode);
    -
    -
    -
    - 带ICON图标的步骤条 -
    -

    通过设置 Steps.Step 的 icon 属性，可以启用自定义图标。

    - -
    -
    -
    -
    - - 
    import { Steps } from 'antd';
-const Step = Steps.Step;
-
-const steps = [{
-  title: '已完成',
-  description: '这里是信息的描述'
-}, {
-  title: '进行中',
-  description: '这里是信息的描述'
-}, {
-  title: '待运行',
-  description: '这里是信息的描述'
-}, {
-  title: '又一个待运行',
-  description: '这里是信息的描述'
-}].map(function(s, i) {
-  return (
-    <Step key={i} title={s.title} description={s.description} />
-  );
-});
-
-ReactDOM.render(<Steps direction="vertical" current={1}>{steps}</Steps>,
-  mountNode);
    -
    -
    -
    - 竖直方向的步骤条 -
    -

    简单的竖直方向的步骤条。

    - -
    -
    -
    -
    - - 
    import { Steps } from 'antd';
-const Step = Steps.Step;
-
-const steps = [{
-  status: 'finish',
-  title: '已完成',
-  description: '这里是多信息的描述啊'
-}, {
-  status: 'process',
-  title: '进行中',
-  description: '这里是多信息的耶哦耶哦哦耶哦耶'
-}, {
-  status: 'wait',
-  title: '又一个待运行',
-  description: '描述啊描述啊'
-}, {
-  status: 'wait',
-  title: '待运行',
-  description: '这里是多信息的描述啊'
-}].map(function(s, i) {
-  return (
-    <Step key={i} title={s.title} status={s.status} description={s.description} />
-  );
-});
-
-ReactDOM.render(<Steps>{steps}</Steps>, mountNode);
    -
    -
    -
    - 自定义状态 -
    -

    可以使用 status 定义每个步骤的状态。

    - -
    -
    -
    -
    +
    @@ -984,6 +784,38 @@ ReactDOM.render(<
    +
    +
    +
    + + 
    import { Steps } from 'antd';
+const Step = Steps.Step;
+
+ReactDOM.render(<Steps>
+  <Step status="finish" title="步骤1" icon="cloud" />
+  <Step status="process" title="步骤2" icon="apple" />
+  <Step status="wait" title="步骤3" icon="github" />
+</Steps>, mountNode);
    +
    +
    +
    + 带ICON图标的步骤条 +
    +

    通过设置 Steps.Step 的 icon 属性，可以启用自定义图标。

    + +
    @@ -1101,6 +933,67 @@ ReactDOM.render(<App />, mountNode);

    随机生成 3~6 个步骤，初始随机进行到其中一个步骤。

    +
    +
    +
    + + 
    import { Steps } from 'antd';
+const Step = Steps.Step;
+
+const steps = [{
+  title: '已完成',
+  description: '这里是信息的描述'
+}, {
+  title: '进行中',
+  description: '这里是信息的描述'
+}, {
+  title: '待运行',
+  description: '这里是信息的描述'
+}, {
+  title: '又一个待运行',
+  description: '这里是信息的描述'
+}].map(function(s, i) {
+  return (
+    <Step key={i} title={s.title} description={s.description} />
+  );
+});
+
+ReactDOM.render(<Steps direction="vertical" current={1}>{steps}</Steps>,
+  mountNode);
    +
    +
    +
    + 竖直方向的步骤条 +
    +

    简单的竖直方向的步骤条。

    + +
    @@ -1156,9 +1049,114 @@ ReactDOM.render(<
    -
    +
    +
    +
    + + 
    import { Steps } from 'antd';
+const Step = Steps.Step;
+
+const steps = [{
+  status: 'finish',
+  title: '已完成',
+  description: '这里是多信息的描述啊'
+}, {
+  status: 'process',
+  title: '进行中',
+  description: '这里是多信息的耶哦耶哦哦耶哦耶'
+}, {
+  status: 'wait',
+  title: '又一个待运行',
+  description: '描述啊描述啊'
+}, {
+  status: 'wait',
+  title: '待运行',
+  description: '这里是多信息的描述啊'
+}].map(function(s, i) {
+  return (
+    <Step key={i} title={s.title} status={s.status} description={s.description} />
+  );
+});
+
+ReactDOM.render(<Steps>{steps}</Steps>, mountNode);
    +
    +
    +
    + 自定义状态 +
    +

    可以使用 status 定义每个步骤的状态。

    +
    +
    +
    +
    diff --git a/components/switch/index.html b/components/switch/index.html index 3d4ebae26..dcbfe3329 100644 --- a/components/switch/index.html +++ b/components/switch/index.html @@ -633,28 +633,6 @@ Switch 开关 - Ant Design 代码演示 -
    @@ -821,6 +799,28 @@ ReactDOM.render(
    +
    diff --git a/components/table/index.html b/components/table/index.html index d08f7730d..5c55fede5 100644 --- a/components/table/index.html +++ b/components/table/index.html @@ -852,80 +852,8 @@ Table 表格 - Ant Design 代码演示 -
    -
    +
    @@ -1057,6 +985,117 @@ ReactDOM.render(<
    +
    +
    +
    + + 
    import { Table } from 'antd';
+
+const columns = [{
+  title: '姓名',
+  dataIndex: 'name',
+  render: function(text) {
+    return <a href="#">{text}</a>;
+  }
+}, {
+  title: '年龄',
+  dataIndex: 'age'
+}, {
+  title: '住址',
+  dataIndex: 'address'
+}];
+const data = [{
+  key: '1',
+  name: '胡彦斌',
+  age: 32,
+  address: '西湖区湖底公园1号'
+}, {
+  key: '2',
+  name: '胡彦祖',
+  age: 42,
+  address: '西湖区湖底公园1号'
+}, {
+  key: '3',
+  name: '李大嘴',
+  age: 32,
+  address: '西湖区湖底公园1号'
+}];
+
+// 通过 rowSelection 对象表明需要行选择
+const rowSelection = {
+  onChange(selectedRowKeys) {
+    console.log('selectedRowKeys changed: ' + selectedRowKeys);
+  },
+  onSelect: function(record, selected, selectedRows) {
+    console.log(record, selected, selectedRows);
+  },
+  onSelectAll: function(selected, selectedRows) {
+    console.log(selected, selectedRows);
+  }
+};
+
+ReactDOM.render(<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
+, mountNode);
    +
    +
    +
    + 可选择 +
    +

    第一列是联动的选择框。

    + +
    @@ -1215,6 +1254,129 @@ ReactDOM.render(<
    +
    +
    +
    + + 
    import { Table } from 'antd';
+
+const columns = [{
+  title: '姓名',
+  dataIndex: 'name',
+  render: function(text) {
+    return <a href="#">{text}</a>;
+  }
+}, {
+  title: '年龄',
+  dataIndex: 'age'
+}, {
+  title: '住址',
+  dataIndex: 'address'
+}];
+const data = [{
+  key: '1',
+  name: '胡彦斌',
+  age: 32,
+  address: '西湖区湖底公园1号'
+}, {
+  key: '2',
+  name: '胡彦祖',
+  age: 42,
+  address: '西湖区湖底公园1号'
+}, {
+  key: '3',
+  name: '李大嘴',
+  age: 32,
+  address: '西湖区湖底公园1号'
+}];
+
+// 通过 rowSelection 对象表明需要行选择
+const rowSelection = {
+  getCheckboxProps: function(record) {
+    return {
+      defaultChecked: record.name === '李大嘴', // 配置默认勾选的列
+      disabled: record.name === '胡彦祖'    // 配置无法勾选的列
+    };
+  },
+  onChange(selectedRowKeys) {
+    console.log('selectedRowKeys changed: ' + selectedRowKeys);
+  },
+  onSelect: function(record, selected, selectedRows) {
+    console.log(record, selected, selectedRows);
+  },
+  onSelectAll: function(selected, selectedRows) {
+    console.log(selected, selectedRows);
+  },
+};
+
+ReactDOM.render(<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
+, mountNode);
    +
    +
    +
    + 选择框属性 +
    +

    配置选择框的默认属性。

    + +
    @@ -1305,6 +1467,167 @@ ReactDOM.render(<
    +
    +
    +
    + + 
    import { Table } from 'antd';
+
+const columns = [{
+  title: '姓名',
+  dataIndex: 'name',
+  filters: [{
+    text: '姓李的',
+    value: '李'
+  }, {
+    text: '姓胡的',
+    value: '胡'
+  }],
+  // 指定确定筛选的条件函数
+  // 这里是名字中第一个字是 value
+  onFilter: function(value, record) {
+    return record.name.indexOf(value) === 0;
+  },
+  sorter: function(a, b) {
+    return a.name.length - b.name.length;
+  }
+}, {
+  title: '年龄',
+  dataIndex: 'age',
+  sorter: function(a, b) {
+    return a.age - b.age;
+  }
+}, {
+  title: '地址',
+  dataIndex: 'address',
+  filters: [{
+    text: '南湖',
+    value: '南湖'
+  }, {
+    text: '西湖',
+    value: '西湖'
+  }],
+  filterMultiple: false,
+  onFilter: function(value, record) {
+    return record.address.indexOf(value) === 0;
+  },
+  sorter: function(a, b) {
+    return a.address.length - b.address.length;
+  }
+}];
+
+const data = [{
+  key: '1',
+  name: '胡斌',
+  age: 32,
+  address: '南湖区湖底公园1号'
+}, {
+  key: '2',
+  name: '胡彦祖',
+  age: 42,
+  address: '西湖区湖底公园12号'
+}, {
+  key: '3',
+  name: '李大嘴',
+  age: 32,
+  address: '南湖区湖底公园123号'
+}, {
+  key: '4',
+  name: '李秀莲大嘴哥',
+  age: 32,
+  address: '西湖区湖底公园123号'
+}];
+
+function onChange(pagination, filters, sorter) {
+  // 点击分页、筛选、排序时触发
+  console.log('各类参数是', pagination, filters, sorter);
+}
+
+ReactDOM.render(<Table columns={columns} dataSource={data} onChange={onChange} />
+, mountNode);
    +
    +
    +
    + 筛选和排序 +
    +

    对某一列数据进行筛选，使用列的 filter 属性来指定需要筛选菜单的列，onFilter 用于筛选当前数据，filterMultiple 用于指定多选和单选。

    +

    对某一列数据进行排序，通过指定列的 sorter 函数即可启动排序按钮。sorter: function(a, b) { ... }， a、b 为比较的两个列数据。

    + +
    @@ -1491,6 +1814,82 @@ ReactDOM.render(<
    +
    +
    +
    + + 
    import { Table } from 'antd';
+
+const columns = [{
+  title: '姓名',
+  dataIndex: 'name'
+}, {
+  title: '年龄',
+  dataIndex: 'age'
+}, {
+  title: '住址',
+  dataIndex: 'address'
+}];
+
+const data = [{
+  key: '1',
+  name: '胡彦斌',
+  age: 32,
+  address: '西湖区湖底公园1号'
+}, {
+  key: '2',
+  name: '胡彦祖',
+  age: 42,
+  address: '西湖区湖底公园1号'
+}, {
+  key: '3',
+  name: '李大嘴',
+  age: 32,
+  address: '西湖区湖底公园1号'
+}];
+
+ReactDOM.render(<Table columns={columns} dataSource={data} pagination={false} />
+, mountNode);
    +
    +
    +
    + 不显示分页 +
    +

    传入 pagination 为 false 即可。此时表格将完整显示 dataSource 内的数据，不进行任何分页。

    + +
    @@ -1585,665 +1984,6 @@ ReactDOM.render(<
    -
    -
    -
    - - 
    import { Table } from 'antd';
-
-function renderAction() {
-  return <a href="#">删除</a>;
-}
-
-function expandedRowRender(record) {
-  return <p>{record.description}</p>;
-}
-
-const columns = [
-  {title: '姓名', dataIndex: 'name', key: 'name'},
-  {title: '年龄', dataIndex: 'age', key: 'age'},
-  {title: '住址', dataIndex: 'address', key: 'address'},
-  {title: '操作', dataIndex: '', key: 'x', render: renderAction}
-];
-
-const data = [
-  {key: 1, name: '胡彦斌', age: 32, address: '西湖区湖底公园1号', description: '我是胡彦斌，今年32岁，住在西湖区湖底公园1号。'},
-  {key: 2, name: '吴彦祖', age: 42, address: '西湖区湖底公园2号', description: '我是吴彦祖，今年42岁，住在西湖区湖底公园2号。'},
-  {key: 3, name: '李大嘴', age: 32, address: '西湖区湖底公园3号', description: '我是李大嘴，今年32岁，住在西湖区湖底公园3号。'}
-];
-
-ReactDOM.render(
-<Table columns={columns}
-  expandedRowRender={expandedRowRender}
-  dataSource={data}
-  className="table" />
-, mountNode);
    -
    -
    -
    - 可展开 -
    -

    当表格内容较多不能一次性完全展示时。

    - -
    -
    -
    -
    - - 
    import { Table, Button } from 'antd';
-
-const columns = [{
-  title: '姓名',
-  dataIndex: 'name'
-}, {
-  title: '年龄',
-  dataIndex: 'age'
-}, {
-  title: '住址',
-  dataIndex: 'address'
-}];
-const data = [{
-  key: '1',
-  name: '胡彦斌',
-  age: 32,
-  address: '西湖区湖底公园1号'
-}, {
-  key: '2',
-  name: '胡彦祖',
-  age: 42,
-  address: '西湖区湖底公园1号'
-}, {
-  key: '3',
-  name: '李大嘴',
-  age: 32,
-  address: '西湖区湖底公园1号'
-}];
-
-const App = React.createClass({
-  getInitialState() {
-    return {
-      loading: false
-    };
-  },
-  toggleLoading() {
-    this.setState({
-      loading: !this.state.loading
-    });
-  },
-  render() {
-    return <div>
-      <Table columns={columns} dataSource={data} loading={this.state.loading} />
-      <Button type="primary" onClick={this.toggleLoading}>切换 loading 状态</Button>
-    </div>;
-  }
-});
-
-ReactDOM.render(<App />, mountNode);
    -
    -
    -
    - 加载中的表格 -
    -

    用属性 loading 控制表格加载中状态。

    - -
    -
    -
    -
    -
    -
    - - 
    import { Table } from 'antd';
-
-const columns = [{
-  title: '姓名',
-  dataIndex: 'name',
-  render: function(text) {
-    return <a href="#">{text}</a>;
-  }
-}, {
-  title: '年龄',
-  dataIndex: 'age'
-}, {
-  title: '住址',
-  dataIndex: 'address'
-}];
-const data = [{
-  key: '1',
-  name: '胡彦斌',
-  age: 32,
-  address: '西湖区湖底公园1号'
-}, {
-  key: '2',
-  name: '胡彦祖',
-  age: 42,
-  address: '西湖区湖底公园1号'
-}, {
-  key: '3',
-  name: '李大嘴',
-  age: 32,
-  address: '西湖区湖底公园1号'
-}];
-
-// 通过 rowSelection 对象表明需要行选择
-const rowSelection = {
-  onChange(selectedRowKeys) {
-    console.log('selectedRowKeys changed: ' + selectedRowKeys);
-  },
-  onSelect: function(record, selected, selectedRows) {
-    console.log(record, selected, selectedRows);
-  },
-  onSelectAll: function(selected, selectedRows) {
-    console.log(selected, selectedRows);
-  }
-};
-
-ReactDOM.render(<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
-, mountNode);
    -
    -
    -
    - 可选择 -
    -

    第一列是联动的选择框。

    - -
    -
    -
    -
    - - 
    import { Table } from 'antd';
-
-const columns = [{
-  title: '姓名',
-  dataIndex: 'name',
-  render: function(text) {
-    return <a href="#">{text}</a>;
-  }
-}, {
-  title: '年龄',
-  dataIndex: 'age'
-}, {
-  title: '住址',
-  dataIndex: 'address'
-}];
-const data = [{
-  key: '1',
-  name: '胡彦斌',
-  age: 32,
-  address: '西湖区湖底公园1号'
-}, {
-  key: '2',
-  name: '胡彦祖',
-  age: 42,
-  address: '西湖区湖底公园1号'
-}, {
-  key: '3',
-  name: '李大嘴',
-  age: 32,
-  address: '西湖区湖底公园1号'
-}];
-
-// 通过 rowSelection 对象表明需要行选择
-const rowSelection = {
-  getCheckboxProps: function(record) {
-    return {
-      defaultChecked: record.name === '李大嘴', // 配置默认勾选的列
-      disabled: record.name === '胡彦祖'    // 配置无法勾选的列
-    };
-  },
-  onChange(selectedRowKeys) {
-    console.log('selectedRowKeys changed: ' + selectedRowKeys);
-  },
-  onSelect: function(record, selected, selectedRows) {
-    console.log(record, selected, selectedRows);
-  },
-  onSelectAll: function(selected, selectedRows) {
-    console.log(selected, selectedRows);
-  },
-};
-
-ReactDOM.render(<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
-, mountNode);
    -
    -
    -
    - 选择框属性 -
    -

    配置选择框的默认属性。

    - -
    -
    -
    -
    - - 
    import { Table } from 'antd';
-
-const columns = [{
-  title: '姓名',
-  dataIndex: 'name',
-  filters: [{
-    text: '姓李的',
-    value: '李'
-  }, {
-    text: '姓胡的',
-    value: '胡'
-  }],
-  // 指定确定筛选的条件函数
-  // 这里是名字中第一个字是 value
-  onFilter: function(value, record) {
-    return record.name.indexOf(value) === 0;
-  },
-  sorter: function(a, b) {
-    return a.name.length - b.name.length;
-  }
-}, {
-  title: '年龄',
-  dataIndex: 'age',
-  sorter: function(a, b) {
-    return a.age - b.age;
-  }
-}, {
-  title: '地址',
-  dataIndex: 'address',
-  filters: [{
-    text: '南湖',
-    value: '南湖'
-  }, {
-    text: '西湖',
-    value: '西湖'
-  }],
-  filterMultiple: false,
-  onFilter: function(value, record) {
-    return record.address.indexOf(value) === 0;
-  },
-  sorter: function(a, b) {
-    return a.address.length - b.address.length;
-  }
-}];
-
-const data = [{
-  key: '1',
-  name: '胡斌',
-  age: 32,
-  address: '南湖区湖底公园1号'
-}, {
-  key: '2',
-  name: '胡彦祖',
-  age: 42,
-  address: '西湖区湖底公园12号'
-}, {
-  key: '3',
-  name: '李大嘴',
-  age: 32,
-  address: '南湖区湖底公园123号'
-}, {
-  key: '4',
-  name: '李秀莲大嘴哥',
-  age: 32,
-  address: '西湖区湖底公园123号'
-}];
-
-function onChange(pagination, filters, sorter) {
-  // 点击分页、筛选、排序时触发
-  console.log('各类参数是', pagination, filters, sorter);
-}
-
-ReactDOM.render(<Table columns={columns} dataSource={data} onChange={onChange} />
-, mountNode);
    -
    -
    -
    - 筛选和排序 -
    -

    对某一列数据进行筛选，使用列的 filter 属性来指定需要筛选菜单的列，onFilter 用于筛选当前数据，filterMultiple 用于指定多选和单选。

    -

    对某一列数据进行排序，通过指定列的 sorter 函数即可启动排序按钮。sorter: function(a, b) { ... }， a、b 为比较的两个列数据。

    - -
    -
    -
    -
    - - 
    import { Table } from 'antd';
-
-const columns = [{
-  title: '姓名',
-  dataIndex: 'name'
-}, {
-  title: '年龄',
-  dataIndex: 'age'
-}, {
-  title: '住址',
-  dataIndex: 'address'
-}];
-
-const data = [{
-  key: '1',
-  name: '胡彦斌',
-  age: 32,
-  address: '西湖区湖底公园1号'
-}, {
-  key: '2',
-  name: '胡彦祖',
-  age: 42,
-  address: '西湖区湖底公园1号'
-}, {
-  key: '3',
-  name: '李大嘴',
-  age: 32,
-  address: '西湖区湖底公园1号'
-}];
-
-ReactDOM.render(<Table columns={columns} dataSource={data} pagination={false} />
-, mountNode);
    -
    -
    -
    - 不显示分页 -
    -

    传入 pagination 为 false 即可。此时表格将完整显示 dataSource 内的数据，不进行任何分页。

    - -
    @@ -2336,6 +2076,74 @@ ReactDOM.render(<
    +
    +
    +
    + + 
    import { Table } from 'antd';
+
+function renderAction() {
+  return <a href="#">删除</a>;
+}
+
+function expandedRowRender(record) {
+  return <p>{record.description}</p>;
+}
+
+const columns = [
+  {title: '姓名', dataIndex: 'name', key: 'name'},
+  {title: '年龄', dataIndex: 'age', key: 'age'},
+  {title: '住址', dataIndex: 'address', key: 'address'},
+  {title: '操作', dataIndex: '', key: 'x', render: renderAction}
+];
+
+const data = [
+  {key: 1, name: '胡彦斌', age: 32, address: '西湖区湖底公园1号', description: '我是胡彦斌，今年32岁，住在西湖区湖底公园1号。'},
+  {key: 2, name: '吴彦祖', age: 42, address: '西湖区湖底公园2号', description: '我是吴彦祖，今年42岁，住在西湖区湖底公园2号。'},
+  {key: 3, name: '李大嘴', age: 32, address: '西湖区湖底公园3号', description: '我是李大嘴，今年32岁，住在西湖区湖底公园3号。'}
+];
+
+ReactDOM.render(
+<Table columns={columns}
+  expandedRowRender={expandedRowRender}
+  dataSource={data}
+  className="table" />
+, mountNode);
    +
    +
    +
    + 可展开 +
    +

    当表格内容较多不能一次性完全展示时。

    + +
    @@ -2573,6 +2381,124 @@ ReactDOM.render(<Table

    表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。

    +
    +
    +
    + + 
    import { Table, Button } from 'antd';
+
+const columns = [{
+  title: '姓名',
+  dataIndex: 'name'
+}, {
+  title: '年龄',
+  dataIndex: 'age'
+}, {
+  title: '住址',
+  dataIndex: 'address'
+}];
+const data = [{
+  key: '1',
+  name: '胡彦斌',
+  age: 32,
+  address: '西湖区湖底公园1号'
+}, {
+  key: '2',
+  name: '胡彦祖',
+  age: 42,
+  address: '西湖区湖底公园1号'
+}, {
+  key: '3',
+  name: '李大嘴',
+  age: 32,
+  address: '西湖区湖底公园1号'
+}];
+
+const App = React.createClass({
+  getInitialState() {
+    return {
+      loading: false
+    };
+  },
+  toggleLoading() {
+    this.setState({
+      loading: !this.state.loading
+    });
+  },
+  render() {
+    return <div>
+      <Table columns={columns} dataSource={data} loading={this.state.loading} />
+      <Button type="primary" onClick={this.toggleLoading}>切换 loading 状态</Button>
+    </div>;
+  }
+});
+
+ReactDOM.render(<App />, mountNode);
    +
    +
    +
    + 加载中的表格 +
    +

    用属性 loading 控制表格加载中状态。

    + +
    @@ -2732,8 +2658,80 @@ ReactDOM.render(
    -
    +
    +
    diff --git a/components/tabs/index.html b/components/tabs/index.html index 7c7d655b2..4360705f3 100644 --- a/components/tabs/index.html +++ b/components/tabs/index.html @@ -665,58 +665,6 @@ Tabs 标签页 - Ant Design 代码演示 -
    @@ -1451,6 +1399,58 @@ ReactDOM.render(
    +
    diff --git a/components/tag/index.html b/components/tag/index.html index 44b17dd44..c4d84e1e9 100644 --- a/components/tag/index.html +++ b/components/tag/index.html @@ -619,18 +619,6 @@ Tag 标签 - Ant Design 代码演示 -
    @@ -739,6 +727,18 @@ ReactDOM.render(< +
  • + + 基本 + +
    • +
  • + + 各种类型 + +
    • +
    diff --git a/components/time-picker/index.html b/components/time-picker/index.html index d6a1e54d1..42601e125 100644 --- a/components/time-picker/index.html +++ b/components/time-picker/index.html @@ -657,43 +657,6 @@ TimePicker 时间选择框 - Ant Design 代码演示 -
    @@ -988,6 +951,43 @@ ReactDOM.render(
    +
    diff --git a/components/timeline/index.html b/components/timeline/index.html index 4e2131e89..2f159dfda 100644 --- a/components/timeline/index.html +++ b/components/timeline/index.html @@ -625,23 +625,6 @@ Timeline 时间轴 - Ant Design 代码演示 -
    @@ -825,6 +808,23 @@ ReactDOM.render(
    +
    diff --git a/components/tooltip/index.html b/components/tooltip/index.html index a58d8b44d..2425b724a 100644 --- a/components/tooltip/index.html +++ b/components/tooltip/index.html @@ -600,18 +600,6 @@ Tooltip 文字提示 - Ant Design 代码演示 -
    @@ -863,6 +851,18 @@ ReactDOM.render(
    +
    diff --git a/components/transfer/index.html b/components/transfer/index.html index 3a4d5b6fb..c38ff4a4b 100644 --- a/components/transfer/index.html +++ b/components/transfer/index.html @@ -653,25 +653,8 @@ Transfer 穿梭框 - Ant Design 代码演示 -
    -
    +
    @@ -785,6 +768,110 @@ ReactDOM.render(<
    +
    @@ -917,114 +1004,25 @@ ReactDOM.render(<
    -
    -
    -
    +
    diff --git a/components/tree/index.html b/components/tree/index.html index ebabe4cb4..52ff896f2 100644 --- a/components/tree/index.html +++ b/components/tree/index.html @@ -682,28 +682,6 @@ Tree 树形控件 - Ant Design 代码演示 -
    @@ -1176,6 +1154,28 @@ ReactDOM.render(< +
  • + + 基本 + +
    • +
  • + + 可选择 + +
    • +
  • + + 接收外部传参 + +
    • +
  • + + 异步数据加载 + +
    • +
    diff --git a/components/upload/index.html b/components/upload/index.html index 69bdf7eac..0e3b3735a 100644 --- a/components/upload/index.html +++ b/components/upload/index.html @@ -674,48 +674,6 @@ Upload 文件上传 - Ant Design 代码演示 -
    @@ -1300,6 +1258,48 @@ ReactDOM.render(
    +
    diff --git a/components/validation/index.html b/components/validation/index.html index 6afb43bf9..62387d711 100644 --- a/components/validation/index.html +++ b/components/validation/index.html @@ -658,23 +658,6 @@ Validation 表单校验 - Ant Design 代码演示 -
    @@ -2176,6 +2159,23 @@ ReactDOM.render(< +
  • + + Input 表单域 + +
    • +
  • + + 其他表单域校验 + +
    • +
  • + + 自定义校验规则 + +
    • +
    diff --git a/spec/layout/index.html b/spec/layout/index.html index bbb0fbc6d..cd49bf8a4 100644 --- a/spec/layout/index.html +++ b/spec/layout/index.html @@ -361,30 +361,8 @@ 代码演示 -
    -
    +
    @@ -639,347 +617,7 @@ ReactDOM.render(

    <BrowserDemo /> 做演示用，无须复制。

    -
    -
    -
    - - 
    import { Menu, Breadcrumb, Icon } from 'antd';
-const SubMenu = Menu.SubMenu;
-
-ReactDOM.render(
-  <BrowserDemo>
-    <div className="ant-layout-aside">
-      <aside className="ant-layout-sider">
-        <div className="ant-layout-logo"></div>
-        <Menu mode="inline" theme="dark"
-          defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}>
-          <SubMenu key="sub1" title={<span><Icon type="user" />导航一</span>}>
-            <Menu.Item key="1">选项1</Menu.Item>
-            <Menu.Item key="2">选项2</Menu.Item>
-            <Menu.Item key="3">选项3</Menu.Item>
-            <Menu.Item key="4">选项4</Menu.Item>
-          </SubMenu>
-          <SubMenu key="sub2" title={<span><Icon type="laptop" />导航二</span>}>
-            <Menu.Item key="5">选项5</Menu.Item>
-            <Menu.Item key="6">选项6</Menu.Item>
-            <Menu.Item key="7">选项7</Menu.Item>
-            <Menu.Item key="8">选项8</Menu.Item>
-          </SubMenu>
-          <SubMenu key="sub3" title={<span><Icon type="notification" />导航三</span>}>
-            <Menu.Item key="9">选项9</Menu.Item>
-            <Menu.Item key="10">选项10</Menu.Item>
-            <Menu.Item key="11">选项11</Menu.Item>
-            <Menu.Item key="12">选项12</Menu.Item>
-          </SubMenu>
-        </Menu>
-      </aside>
-      <div className="ant-layout-main">
-        <div className="ant-layout-header"></div>
-        <div className="ant-layout-breadcrumb">
-          <Breadcrumb>
-            <Breadcrumb.Item>首页</Breadcrumb.Item>
-            <Breadcrumb.Item>应用列表</Breadcrumb.Item>
-            <Breadcrumb.Item>某应用</Breadcrumb.Item>
-          </Breadcrumb>
-        </div>
-        <div className="ant-layout-container">
-          <div className="ant-layout-content">
-            <div style={{ height: 590 }}>
-              内容区域
-            </div>
-          </div>
-        </div>
-        <div className="ant-layout-footer">
-        Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
-        </div>
-      </div>
-    </div>
-  </BrowserDemo>
-, document.getElementById('spec-layout-demo-aside'));
    .ant-layout-aside {
-  position: relative;
-  min-height: 100%;
-}
-
-.ant-layout-aside .ant-layout-logo {
-  width: 150px;
-  height: 32px;
-  background: #333;
-  border-radius: 6px;
-  margin: 16px 24px 16px 28px;
-}
-
-.ant-layout-aside .ant-layout-sider {
-  width: 224px;
-  background: #404040;
-  position: absolute;
-  overflow: auto;
-  padding-bottom: 24px;
-  height: 100%;
-}
-
-.ant-layout-aside .ant-layout-sider > .ant-menu {
-  margin-bottom: 20px;
-}
-
-.ant-layout-aside .ant-layout-header {
-  background: #fff;
-  height: 64px;
-  border-bottom: 1px solid #e9e9e9;
-}
-
-.ant-layout-aside .ant-layout-breadcrumb {
-  margin: 7px 0 -17px 24px;
-}
-
-.ant-layout-aside .ant-layout-main {
-  margin-left: 224px;
-}
-
-.ant-layout-aside .ant-layout-container {
-  margin: 24px 16px;
-}
-
-.ant-layout-aside .ant-layout-content {
-  background: #fff;
-  padding: 24px;
-}
-
-.ant-layout-aside .ant-layout-footer {
-  height; 64px;
-  line-height: 64px;
-  text-align: center;
-  font-size: 12px;
-  color: #999;
-  background: #fff;
-  border-top: 1px solid #e9e9e9;
-  width: 100%;
-}
    -
    -
    -
    - 侧边导航 -
    -

    顶级导航在侧边栏。

    -

    侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。

    - -
    -
    -
    -
    +
    @@ -1394,6 +1032,344 @@ ReactDOM.render(

    顶级导航在头部，次级导航在侧边栏。

    +
    +
    +
    + + 
    import { Menu, Breadcrumb, Icon } from 'antd';
+const SubMenu = Menu.SubMenu;
+
+ReactDOM.render(
+  <BrowserDemo>
+    <div className="ant-layout-aside">
+      <aside className="ant-layout-sider">
+        <div className="ant-layout-logo"></div>
+        <Menu mode="inline" theme="dark"
+          defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}>
+          <SubMenu key="sub1" title={<span><Icon type="user" />导航一</span>}>
+            <Menu.Item key="1">选项1</Menu.Item>
+            <Menu.Item key="2">选项2</Menu.Item>
+            <Menu.Item key="3">选项3</Menu.Item>
+            <Menu.Item key="4">选项4</Menu.Item>
+          </SubMenu>
+          <SubMenu key="sub2" title={<span><Icon type="laptop" />导航二</span>}>
+            <Menu.Item key="5">选项5</Menu.Item>
+            <Menu.Item key="6">选项6</Menu.Item>
+            <Menu.Item key="7">选项7</Menu.Item>
+            <Menu.Item key="8">选项8</Menu.Item>
+          </SubMenu>
+          <SubMenu key="sub3" title={<span><Icon type="notification" />导航三</span>}>
+            <Menu.Item key="9">选项9</Menu.Item>
+            <Menu.Item key="10">选项10</Menu.Item>
+            <Menu.Item key="11">选项11</Menu.Item>
+            <Menu.Item key="12">选项12</Menu.Item>
+          </SubMenu>
+        </Menu>
+      </aside>
+      <div className="ant-layout-main">
+        <div className="ant-layout-header"></div>
+        <div className="ant-layout-breadcrumb">
+          <Breadcrumb>
+            <Breadcrumb.Item>首页</Breadcrumb.Item>
+            <Breadcrumb.Item>应用列表</Breadcrumb.Item>
+            <Breadcrumb.Item>某应用</Breadcrumb.Item>
+          </Breadcrumb>
+        </div>
+        <div className="ant-layout-container">
+          <div className="ant-layout-content">
+            <div style={{ height: 590 }}>
+              内容区域
+            </div>
+          </div>
+        </div>
+        <div className="ant-layout-footer">
+        Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
+        </div>
+      </div>
+    </div>
+  </BrowserDemo>
+, document.getElementById('spec-layout-demo-aside'));
    .ant-layout-aside {
+  position: relative;
+  min-height: 100%;
+}
+
+.ant-layout-aside .ant-layout-logo {
+  width: 150px;
+  height: 32px;
+  background: #333;
+  border-radius: 6px;
+  margin: 16px 24px 16px 28px;
+}
+
+.ant-layout-aside .ant-layout-sider {
+  width: 224px;
+  background: #404040;
+  position: absolute;
+  overflow: auto;
+  padding-bottom: 24px;
+  height: 100%;
+}
+
+.ant-layout-aside .ant-layout-sider > .ant-menu {
+  margin-bottom: 20px;
+}
+
+.ant-layout-aside .ant-layout-header {
+  background: #fff;
+  height: 64px;
+  border-bottom: 1px solid #e9e9e9;
+}
+
+.ant-layout-aside .ant-layout-breadcrumb {
+  margin: 7px 0 -17px 24px;
+}
+
+.ant-layout-aside .ant-layout-main {
+  margin-left: 224px;
+}
+
+.ant-layout-aside .ant-layout-container {
+  margin: 24px 16px;
+}
+
+.ant-layout-aside .ant-layout-content {
+  background: #fff;
+  padding: 24px;
+}
+
+.ant-layout-aside .ant-layout-footer {
+  height; 64px;
+  line-height: 64px;
+  text-align: center;
+  font-size: 12px;
+  color: #999;
+  background: #fff;
+  border-top: 1px solid #e9e9e9;
+  width: 100%;
+}
    +
    +
    +
    + 侧边导航 +
    +

    顶级导航在侧边栏。

    +

    侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。

    + +
    @@ -1565,8 +1541,30 @@ ReactDOM.render(
    -
    +
    +