fix #99

components/select/demo/optgroup.md

@@ -0,0 +1,36 @@
+# 分组
+
+- order: 5
+
+option分组
+
+---
+
+````jsx
+var Select = antd.Select;
+var Option = Select.Option;
+var OptGroup = Select.OptGroup;
+
+function handleChange(value) {
+  console.log('selected ' + value);
+}
+
+React.render(
+  <Select value="lucy"
+    style={{width:200}}
+    showSearch={false}
+    onChange={handleChange}>
+    <OptGroup label="manager">
+      <Option value="jack">
+        <b style={{
+          color: 'red'
+        }}>jack</b>
+      </Option>
+      <Option value="lucy">lucy</Option>
+    </OptGroup>
+    <OptGroup label="engineer">
+      <Option value="yiminghe">yiminghe</Option>
+    </OptGroup>
+  </Select>
+, document.getElementById('components-select-demo-optgroup'));
+````

components/select/index.jsx

@@ -18,5 +18,6 @@ var AntSelect = React.createClass({
 });
 
 AntSelect.Option = Select.Option;
+AntSelect.OptGroup = Select.OptGroup;
 
 export default AntSelect;

components/select/index.md

@@ -20,6 +20,8 @@
 
 ## API
 
+### Select props
+
 | 参数     | 说明           | 类型     | 默认值       |
 |----------|----------------|----------|--------------|
 | value    | 指定默认选中的条目 | string/Array<String>   |  无  |
@@ -33,3 +35,18 @@
 | placeholder | 选择框默认文字 | string | 无 |
 | searchPlaceholder | 搜索框默认文字 | string | 无 |
 | combobox | 输入框自动提示模式 | | false |
+
+### Option props
+
+| 参数     | 说明           | 类型     | 默认值       |
+|----------|----------------|----------|--------------|
+| disabled    | 是否禁用 | Boolean   |  false  |
+| key   | 如果react需要你设置此项，此项值与value的值相同，然后可以省略value设置 |  String |  |
+| value   | 默认根据此属性值进行筛选 | String | - |
+
+### OptGroup props
+
+| 参数     | 说明           | 类型     | 默认值       |
+|----------|----------------|----------|--------------|
+| label    | 组名 | String/React.Element   |  无  |
+| key   |  |  String | - |

style/components/select.less

@@ -18,7 +18,6 @@
     position: absolute;
     top: 6px;
     right: 0;
-    //background: tint(@primary-color, 90%);
     padding-right: 16px;
     color: @primary-color;
   }
@@ -131,7 +130,6 @@
     .@{selectPrefixCls}-search__field {
       border: none;
       font-size: 100%;
-      //margin-top: 5px;
       background: transparent;
       outline: 0;
     }
@@ -152,7 +150,6 @@
     }
 
     .@{selectPrefixCls}-selection__rendered {
-      //display: inline-block;
       overflow: hidden;
       text-overflow: ellipsis;
       padding-left: 4px;
@@ -242,7 +239,23 @@
         padding: 0;
       }
 
-      & > &-item {
+      &-item-group-list {
+        margin: 0;
+        padding: 0;
+
+        > li.@{selectPrefixCls}-menu-item {
+          padding-left: 20px;
+        }
+      }
+
+      &-item-group-title {
+        color: #999;
+        line-height: 1.5;
+        padding: 8px 10px;
+        border-bottom: 1px solid #dedede;
+      }
+
+      li&-item {
         position: relative;
         display: block;
         padding: 7px 16px;