feat(component): 新增Tabs组件

Yoshino-UI · Aug 17, 2018 · b56ecbb · b56ecbb
1 parent 96640c8
commit b56ecbb
Show file tree

Hide file tree

Showing 41 changed files with 912 additions and 26 deletions.
diff --git a/components/Alert/style/index.less b/components/Alert/style/index.less
@@ -9,7 +9,7 @@
   font-size: 12px;
   line-height: @line-height-base;
   margin-bottom: 10px;
-  font-size: @font-size-base;
+  font-size: @font-size-default;
   transition: @transition-slow;
   transform: scaleY(1.0);
   transform-origin: 50% 0%;
@@ -99,7 +99,7 @@
   }
 
   &-description {
-    font-size: @font-size-base;
+    font-size: @font-size-default;
     padding-top: 5px;
 
   }

diff --git a/components/AutoComplete/style/index.less b/components/AutoComplete/style/index.less
@@ -15,7 +15,7 @@
     border-radius: @border-radius-large;
     background-color: white;
     box-shadow: @shadow-base;
-    font-size: @font-size-base;
+    font-size: @font-size-default;
     transform-origin: 50% 0;
     z-index: @z-index-pop;
 

diff --git a/components/Button/style/index.less b/components/Button/style/index.less
@@ -82,7 +82,7 @@
   &-size-large {
     padding: 0 15px;
     height: 32px;
-    font-size: @font-size-base;
+    font-size: @font-size-default;
     height: @button-height-size-large;
   }
 
@@ -116,7 +116,7 @@
       width: 28px;
       height: 28px;
       padding: 0;
-      font-size: @font-size-base;
+      font-size: @font-size-default;
     }
   }
 

diff --git a/components/Card/style/index.less b/components/Card/style/index.less
@@ -2,7 +2,7 @@
 
 @card-prefix-cls:  ~"@{css-prefix}-card";
 .@{card-prefix-cls} {
-  font-size: @font-size-base;
+  font-size: @font-size-default;
   background: white;
 
   &-head{

diff --git a/components/Checkbox/style/index.less b/components/Checkbox/style/index.less
@@ -39,7 +39,7 @@
 
   &-text {
     margin: 0 10px;
-    font-size: @font-size-base;
+    font-size: @font-size-default;
   }
 
 }

diff --git a/components/Collapse/style/index.less b/components/Collapse/style/index.less
@@ -19,7 +19,7 @@
   cursor: pointer;
 
   &-title {
-    font-size: @font-size-base;
+    font-size: @font-size-default;
     background-color: @panel-bgColor;
     padding: 12px 0 12px 40px;
   }

diff --git a/components/Input/style/index.less b/components/Input/style/index.less
@@ -64,7 +64,7 @@
   > input {
     height: @input-size-small;
     padding: 1px 7px;
-    font-size: @font-size-base;
+    font-size: @font-size-default;
   }
 
 

diff --git a/components/InputNumber/style/index.less b/components/InputNumber/style/index.less
@@ -27,7 +27,7 @@
 .@{inputnumber-prefix-cls}-small {
   height: @input-size-small;
   padding: 1px 7px;
-  font-size: @font-size-base;
+  font-size: @font-size-default;
 }
 
 .@{inputnumber-prefix-cls}-large {

diff --git a/components/Menu/style/index.less b/components/Menu/style/index.less
@@ -12,7 +12,7 @@
   }
 
   &-title {
-    font-size: @font-size-base;
+    font-size: @font-size-default;
     height: 40px;
     line-height: 40px;
     cursor: pointer;
@@ -67,7 +67,7 @@
 @menu-item-group-prefix-cls:  ~"@{css-prefix}-menu-item-group";
 .@{menu-item-group-prefix-cls} {
   &-title {
-    font-size: @font-size-base;
+    font-size: @font-size-default;
     height: 40px;
     line-height: 40px;
     color: @color-disabled;
@@ -80,7 +80,7 @@
 
 @menu-item-prefix-cls:  ~"@{css-prefix}-menu-item";
 .@{menu-item-prefix-cls} {
-  font-size: @font-size-base;
+  font-size: @font-size-default;
   height: 40px;
   line-height: 40px;
   cursor: pointer;

diff --git a/components/Modal/style/var.less b/components/Modal/style/var.less
@@ -15,5 +15,5 @@
 @title-font-size: @font-size-large;
 @title-font-color: black;
 
-@content-font-size: @font-size-base;
+@content-font-size: @font-size-default;
 @content-font-color: rgba(0,0,0,.65);
diff --git a/components/Pagination/style/index.less b/components/Pagination/style/index.less
@@ -13,7 +13,7 @@
     border-radius: @border-radius-large;
     margin-right: 8px;
     text-align: center;
-    font-size: @font-size-base;
+    font-size: @font-size-default;
     cursor: pointer;
 
     span {

diff --git a/components/Radio/style/index.less b/components/Radio/style/index.less
@@ -41,7 +41,7 @@
 
   &-text {
     margin: 0 10px;
-    font-size: @font-size-base;
+    font-size: @font-size-default;
   }
 
 }

diff --git a/components/Select/style/index.less b/components/Select/style/index.less
@@ -9,6 +9,7 @@
   padding: 0 11px;
   transition: @transition-base;
   cursor: pointer;
+  display: inline-block;
 
   &-enabled {
     .@{select-prefix-cls} {

diff --git a/components/Select/style/var.less b/components/Select/style/var.less
@@ -16,8 +16,8 @@
 @select-size-default: 32px;
 @select-size-large: 40px;
 
-@select-font-size-small: @font-size-base;
-@select-font-size-default: @font-size-base;
+@select-font-size-small: @font-size-default;
+@select-font-size-default: @font-size-default;
 @select-font-size-large: @font-size-large;
 
 @select-border-color: @border-color;

diff --git a/components/Steps/style/index.less b/components/Steps/style/index.less
@@ -143,7 +143,7 @@
 }
 
 .@{itemPreCls}-small {
-  font-size: @font-size-base;
+  font-size: @font-size-default;
   .@{itemPreCls}-icon {
     width: @steps-size-small;
     height: @steps-size-small;

diff --git a/components/Tabs/Pane.tsx b/components/Tabs/Pane.tsx
@@ -0,0 +1,57 @@
+
+import {Component} from 'react';
+import * as React from 'react';
+import * as classNames from 'classnames';
+import {IBaseComponent, TKey} from '../template/component';
+
+export interface IPaneProps extends IBaseComponent {
+  /**
+   * 选项标题
+   */
+  name: TKey;
+  /**
+   * 禁用
+   */
+  disabled?: boolean;
+  /**
+   * 激活key，由Tabs传入，开发者不应使用
+   */
+  active?: boolean;
+}
+
+export interface IPaneState {
+
+}
+
+/**
+ * **组件中文名称**-组件描述。
+ */
+export class Pane extends Component<IPaneProps, IPaneState> {
+  static defaultProps = {
+
+  };
+
+  render() {
+    const {
+      className, style, name,
+      active, disabled,
+      children, onChange,
+      ...otherProps} = this.props;
+    const preCls = 'yoshino-tabs-pane';
+    const clsName = classNames(
+      preCls, className,
+      {[`${preCls}-disabled`]: disabled},
+    );
+    return (
+      <div
+        className={clsName}
+        style={style}
+        {...otherProps}
+      >
+        {children}
+      </div>
+    );
+  }
+}
+
+export default Pane;