Reinit project

src/components/Tab/index.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { formatMessage } from 'umi-plugin-locale';
+
+import styles from './style.less';
+
+export interface TabItemModel {
+  key: string;
+  name: string;
+  icon?: string;
+  iconSelected?: string;
+}
+
+export type TabItemModels = TabItemModel[];
+
+export interface TabProps {
+  items: TabItemModels;
+  selectedKey?: string;
+  onChange?: (key: string) => void;
+}
+
+const Tab: React.FC<TabProps> = ({
+  items,
+  selectedKey,
+  onChange,
+}) => {
+  const onItemClick = (key: string) => {
+    if (onChange) {
+      onChange(key);
+    }
+  };
+
+  const itemWidth = { width: `${100 / (items.length || 1)}%` };
+  return (
+    <div className={styles.tab}>
+      {items.map(item => (
+        <div
+          onClick={() => onItemClick(item.key)}
+          style={itemWidth}
+          className={`${styles.item} ${item.key === selectedKey ? styles.active : ''}`}
+          key={item.key}
+        >
+          {item.icon && item.iconSelected && <img src={item.key === selectedKey ? item.iconSelected : item.icon} />}
+          <span>{formatMessage({ id: item.name })}</span>
+        </div>
+      ))}
+    </div>
+  )
+};
+
+export default Tab;

src/components/Tab/style.less

@@ -0,0 +1,33 @@
+@import '../../global.less';
+
+.tab {
+  width: 100%;
+  height: 100%;
+  user-select: none;
+}
+
+.item {
+  height: 100%;
+  transition: all .18s;
+
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 0.6rem;
+  color: @hint-color;
+
+  :global {
+    img {
+      @size: 20px;
+      width: @size;
+      margin-bottom: 4px;
+    }
+  }
+}
+
+.active {
+  color: @primary-color;
+  transform: scale(1.15);
+}