@arco-design/mobile-react 2.31.6 → 2.32.0

package/esnext/tabs/style/css/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../../style/css/public.css';
+import './index.css';

package/esnext/tabs/style/css/index.js

@@ -0,0 +1,2 @@
+import '../../../../style/css/public.css';
+import './index.css';

package/esnext/tabs/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../style/public.less';
+import './index.less';

package/esnext/tabs/style/index.js

@@ -0,0 +1,2 @@
+import '../../../style/public.less';
+import './index.less';

package/esnext/tabs/style/index.less

@@ -0,0 +1,559 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-tabs {
+    display: flex;
+    overflow: hidden;
+    .use-var(color, font-color);
+
+    &-top {
+        flex-direction: column;
+    }
+
+    &-bottom {
+        flex-direction: column-reverse;
+    }
+
+    &-top,
+    &-bottom {
+        &.full-screen {
+            height: 100%;
+        }
+    }
+
+    &-left,
+    &-right {
+        height: 100%;
+    }
+
+    &-left {
+        flex-direction: row;
+    }
+
+    &-right {
+        flex-direction: row-reverse;
+    }
+}
+
+.@{prefix}-tab-cell-container {
+
+    &-wrap {
+        flex: 0 0 auto;
+        position: relative;
+        .use-var(background, tabs-tab-bar-background);
+
+        &.horizontal {
+            .use-var(width, tabs-tab-bar-width);
+            height: 100%;
+        }
+
+        &.vertical {
+            .use-var(height, tabs-tab-bar-height);
+            width: 100%;
+
+            &.type-card {
+                .use-var(height, tabs-tab-bar-card-height);
+            }
+
+            &.type-tag,
+            &.type-tag-divide {
+                .use-var(height, tabs-tab-bar-tag-height);
+            }
+        }
+    }
+
+    &-inner {
+        width: inherit;
+        height: inherit;
+        overflow: hidden;
+
+        &.has-divider {
+
+            &.pos-top {
+                .hairline-var(line-color, bottom);
+            }
+
+            &.pos-bottom {
+                .hairline-var(line-color, top);
+            }
+
+            &.pos-left {
+                .hairline-var(line-color, right);
+            }
+
+            &.pos-right {
+                .hairline-var(line-color, left);
+            }
+        }
+
+        &.fixed {
+            position: fixed;
+            left: 0;
+            width: 100%;
+            z-index: @fixed-z-index;
+            background: inherit;
+
+            &.pos-top {
+                top: 0;
+            }
+
+            &.pos-bottom {
+                bottom: 0;
+            }
+        }
+
+        &.type-tag,
+        &.type-tag-divide {
+
+            &.vertical {
+                .use-var(padding, tabs-tab-bar-tag-vertical-padding, "", 0);
+            }
+        }
+    }
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    visibility: hidden;
+    width: inherit;
+    height: inherit;
+
+    &.horizontal {
+        flex-direction: column;
+    }
+
+    &.vertical {
+
+        &.arrange-start,
+        &.overflow {
+            justify-content: flex-start;
+        }
+
+        &.arrange-center:not(.overflow) {
+            justify-content: center;
+        }
+
+        &.arrange-end:not(.overflow) {
+            justify-content: flex-end;
+        }
+
+        .fake-padding {
+            height: 100%;
+            flex: 0 0 auto;
+        }
+    }
+
+    &.shown {
+        visibility: visible;
+    }
+
+    &.type-line,
+    &.type-tag {
+        overflow: scroll;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
+        &.vertical {
+            box-sizing: content-box;
+            .use-var(padding-bottom, scroller-buffer);
+        }
+    }
+
+    &.type-card {
+        .use-var(border, tabs-tab-bar-card-color, 1PX solid);
+        .use-var(border-radius, tabs-tab-bar-card-border-radius);
+    }
+
+    &.type-tag,
+    &.type-tag-divide {
+
+        &.vertical {
+            height: 100%;
+        }
+    }
+}
+
+.@{prefix}-tab-cell-underline {
+    // ios 奇葩机型 用will-change会有下拉刷新不同步问题
+    // 不提升合成层又会有残影问题 因此用translateZ来提升
+    @keyframes caterpillarX {
+
+        0% {
+            transform: scaleX(1) translateZ(0);
+        }
+
+        50% {
+            transform: scaleX(2) translateZ(0);
+        }
+
+        100% {
+            transform: scaleX(1) translateZ(0);
+        }
+    }
+    @keyframes caterpillarY {
+
+        0% {
+            transform: scaleY(1) translateZ(0);
+        }
+
+        50% {
+            transform: scaleY(2) translateZ(0);
+        }
+
+        100% {
+            transform: scaleY(1) translateZ(0);
+        }
+    }
+    position: absolute;
+    z-index: 1;
+    transform: translateZ(0);
+    transition-property: all;
+    transition-timing-function: cubic-bezier(.445, .05, .55, .95);
+    overflow: visible;
+    opacity: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.show {
+        opacity: 1;
+    }
+
+    .pos-top &,
+    .pos-bottom & {
+        left: 0;
+        .use-var(width, tabs-underline-size);
+        .use-var(height, tabs-underline-thick);
+    }
+
+    .pos-top & {
+        bottom: 0;
+    }
+
+    .pos-top.type-line & {
+        .use-var(bottom, scroller-buffer);
+    }
+
+    .pos-bottom & {
+        top: 0;
+    }
+
+    .pos-left &,
+    .pos-right & {
+        top: 0;
+        .use-var(height, tabs-underline-size);
+        .use-var(width, tabs-underline-thick);
+    }
+
+    .pos-left & {
+        left: 0;
+    }
+
+    .pos-right & {
+        right: 0;
+    }
+
+    &-inner {
+        flex: 0 0 auto;
+        width: 100%;
+        height: 100%;
+        transition: inherit;
+        .use-var(border-radius, tabs-underline-border-radius);
+        .use-var(background-color, tabs-underline-color);
+
+        &.caterpillar {
+
+            &:not(.custom-animate) {
+
+                &.vertical {
+                    animation-name: caterpillarX;
+                }
+
+                &.horizontal {
+                    animation-name: caterpillarY;
+                }
+            }
+            // fix: js计算部分以linear计算，这里对齐避免抖动
+            animation-timing-function: linear;
+        }
+    }
+}
+
+.@{prefix}-tab-cell {
+    .use-var(font-size, tabs-tab-bar-font-size);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    text-align: center;
+
+    &.no-shrink {
+        flex-shrink: 0;
+    }
+
+    &.vertical {
+        height: 100%;
+
+        &.line,
+        &.tag {
+            display: inline-flex;
+            vertical-align: middle;
+        }
+
+        &.line-divide,
+        &.card,
+        &.tag-divide {
+            flex: 1;
+        }
+
+        &:not(.custom) {
+
+            &.line:not(.last) {
+                .use-var-with-rtl(margin-right, tabs-tab-bar-line-gutter);
+            }
+
+            &.line,
+            &.line-divide {
+
+                &.active {
+                    .text-medium();
+                    .use-var(color, tabs-tab-bar-line-active-color);
+                }
+            }
+
+            &.card {
+                .use-var(color, tabs-tab-bar-card-color);
+
+                &.active {
+                    .use-var(background, tabs-tab-bar-card-color);
+                    .use-var(color, tabs-tab-bar-card-text-color);
+                    .text-medium();
+                }
+
+                &:not(:last-child) {
+                    .use-var-with-rtl(border-right, tabs-tab-bar-card-color, 1PX solid);
+                }
+
+                &:first-of-type {
+                    .use-var-with-rtl(border-top-left-radius, tabs-tab-bar-card-border-radius);
+                    .use-var-with-rtl(border-bottom-left-radius, tabs-tab-bar-card-border-radius);
+                }
+
+                &:last-of-type {
+                    .use-var-with-rtl(border-top-right-radius, tabs-tab-bar-card-border-radius);
+                    .use-var-with-rtl(border-bottom-right-radius, tabs-tab-bar-card-border-radius);
+                }
+            }
+
+            &.card,
+            &.tag-divide {
+
+                &.android {
+                    .rem(padding-top, 2);
+                }
+            }
+
+            &.tag,
+            &.tag-divide {
+                .use-var(padding, tabs-tab-bar-tag-padding);
+                .rem(border-radius, 100);
+                .use-var(background, tabs-tab-bar-tag-background);
+                .use-var(color, tabs-tab-bar-tag-text-color);
+
+                &:not(.last) {
+                    .use-var-with-rtl(margin-right, tabs-tab-bar-tag-gutter);
+                }
+
+                &.active {
+                    .use-var(background, tabs-tab-bar-tag-active-background);
+                    .use-var(color, tabs-tab-bar-tag-active-text-color);
+                    .text-medium();
+                }
+            }
+        }
+    }
+
+    &.horizontal {
+        .use-var(height, tabs-tab-bar-horizontal-height);
+
+        &.active {
+            .text-medium();
+            .use-var(color, tabs-tab-bar-line-active-color);
+        }
+    }
+}
+
+.@{prefix}-tab-pane-container {
+
+    &.mode-swipe {
+        display: flex;
+        align-items: flex-start;
+        transition-property: all;
+        transition-timing-function: ease-out;
+    }
+
+    &.mode-swipe-energy-saving {
+        position: relative;
+        overflow: hidden;
+    }
+
+    &.full-screen {
+        flex: 1;
+        overflow: hidden;
+    }
+
+    &.horizontal {
+        flex: 1;
+        flex-direction: column;
+    }
+
+    &.mode-scroll-horizontal {
+        overflow-x: auto;
+        white-space: nowrap;
+    }
+}
+
+.@{prefix}-tab-pane {
+    width: 100%;
+    flex: 1;
+    overflow: auto;
+
+    .mode-scroll-horizontal & {
+        width: auto;
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    &.mode-swipe.full-screen {
+        height: 100%;
+    }
+}
+
+.@{prefix}-tab-pane-extra {
+    position: absolute;
+}
+
+/***************************************************
+ *                                                 *
+ *               Arco Theme Style                  *
+ *                                                 *
+ ***************************************************/
+& when (@use-dark-mode = 1) {
+    
+  .process-bg-color-with-config,
+  .process-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+    }
+  }
+  .wait-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+    }
+  }
+  .@{prefix}-tabs {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-font-color);
+    }
+  }
+  .@{prefix}-tab-cell-container {
+    &-wrap {
+      @{arco-dark-mode-selector} & {
+        .use-var(background, dark-tabs-tab-bar-background);
+      }
+    }
+    &-inner {
+      &.has-divider {
+        &.pos-top {
+          @{arco-dark-mode-selector} & {
+            .hairline-var(dark-line-color, bottom);
+          }
+        }
+        &.pos-bottom {
+          @{arco-dark-mode-selector} & {
+            .hairline-var(dark-line-color, top);
+          }
+        }
+        &.pos-left {
+          @{arco-dark-mode-selector} & {
+            .hairline-var(dark-line-color, right);
+          }
+        }
+        &.pos-right {
+          @{arco-dark-mode-selector} & {
+            .hairline-var(dark-line-color, left);
+          }
+        }
+      }
+    }
+    &.type-card {
+      @{arco-dark-mode-selector} & {
+        .use-var(border, dark-tabs-tab-bar-card-color, 1PX solid);
+      }
+    }
+  }
+  .@{prefix}-tab-cell-underline {
+    &-inner {
+      @{arco-dark-mode-selector} & {
+        .use-var(background-color, dark-tabs-underline-color);
+      }
+    }
+  }
+  .@{prefix}-tab-cell {
+    &.vertical {
+      &:not(.custom) {
+        &.line,
+        &.line-divide {
+          &.active {
+            @{arco-dark-mode-selector} & {
+              .use-var(color, dark-tabs-tab-bar-line-active-color);
+            }
+          }
+        }
+        &.card {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-tabs-tab-bar-card-color);
+          }
+          &.active {
+            @{arco-dark-mode-selector} & {
+              .use-var(background, dark-tabs-tab-bar-card-color);
+              .use-var(color, dark-tabs-tab-bar-card-text-color);
+            }
+          }
+          &:not(:last-child) {
+            @{arco-dark-mode-selector} & {
+              .use-var-with-rtl(border-right, dark-tabs-tab-bar-card-color, 1PX solid);
+            }
+          }
+        }
+        &.tag,
+        &.tag-divide {
+          @{arco-dark-mode-selector} & {
+            .use-var(background, dark-tabs-tab-bar-tag-background);
+            .use-var(color, dark-tabs-tab-bar-tag-text-color);
+          }
+          &.active {
+            @{arco-dark-mode-selector} & {
+              .use-var(background, dark-tabs-tab-bar-tag-active-background);
+              .use-var(color, dark-tabs-tab-bar-tag-active-text-color);
+            }
+          }
+        }
+      }
+    }
+    &.horizontal {
+      &.active {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-tabs-tab-bar-line-active-color);
+        }
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/tabs/tab-cell-underline.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TabCellUnderlineProps, TabCellUnderlineRef } from './type';
+declare const TabCellUnderline: React.ForwardRefExoticComponent<TabCellUnderlineProps & React.RefAttributes<TabCellUnderlineRef>>;
+export default TabCellUnderline;