@arco-design/mobile-react 2.19.0

package/esm/steps/style/css/index.css

@@ -0,0 +1,200 @@
+.arco-steps {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  padding:  0.32rem 0 ;
+}
+.arco-steps-item {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+          flex: 1;
+}
+.arco-steps-item.horizontal {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+}
+.arco-steps-item.vertical {
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+          align-items: flex-start;
+}
+.arco-steps-item:last-child .arco-steps-item-tail:after {
+  display: none;
+}
+.arco-steps-item-tail {
+  position: absolute;
+}
+.horizontal .arco-steps-item-tail {
+  width: 100%;
+  top: 0.18rem;
+  left: 50%;
+  padding:  0 0.36rem ;
+}
+.horizontal .arco-steps-item-tail:after {
+  content: "";
+  display: inline-block;
+  width: 100%;
+  height:  1PX ;
+  background:  #e5e6eb ;
+  border-radius: 0.04rem;
+}
+.vertical .arco-steps-item-tail {
+  height: 100%;
+  top: 0.18rem;
+  left: 0.15rem;
+  padding:  0.28rem 0 ;
+}
+.vertical .arco-steps-item-tail:after {
+  content: "";
+  display: inline-block;
+  height: 100%;
+  width:  1PX ;
+  background:  #e5e6eb ;
+  border-radius: 0.04rem;
+}
+.finish .arco-steps-item-tail:after {
+  background:  #165dff ;
+}
+.arco-steps-item-custom-icon {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  width:  20PX ;
+  height:  20PX ;
+}
+.arco-steps-item-icon {
+  display: inline-block;
+  border-radius: 50%;
+  width:  18PX ;
+  height:  18PX ;
+  text-align: center;
+}
+.number.finish .arco-steps-item-icon {
+  background:  #E8F3FF ;
+}
+.number.process .arco-steps-item-icon {
+  background:  #165dff ;
+}
+.number.wait .arco-steps-item-icon {
+  background:  #F2F3F5 ;
+}
+.number.error .arco-steps-item-icon {
+  background:  #F53F3F ;
+}
+.arco-steps-item-icon svg {
+  position: relative;
+  font-size:  10PX ;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+.finish .arco-steps-item-icon svg {
+  color:  #165dff ;
+}
+.error .arco-steps-item-icon svg {
+  color:  #FFFFFF ;
+  font-size:  8PX ;
+}
+.arco-steps-item-icon-num {
+  font-size:  12PX ;
+  line-height:  18PX ;
+  color:  #86909c ;
+  font-weight: bold;
+}
+.android .arco-steps-item-icon-num,
+.arco-steps-item-icon-num.android,
+.arco-steps-item-icon-num.system-android {
+  font-weight: 400;
+  -webkit-text-stroke: 0.3PX #86909c;
+  text-stroke: 0.3PX #86909c;
+}
+.process .arco-steps-item-icon-num {
+  color:  #FFFFFF ;
+}
+.arco-steps-item-icon-dot {
+  position: relative;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  display: inline-block;
+  width:  8PX ;
+  height:  8PX ;
+  border-radius: 50%;
+  border-width:  1.5PX ;
+  border-style: solid;
+}
+.finish .arco-steps-item-icon-dot {
+  border-color:  #165dff ;
+}
+.wait .arco-steps-item-icon-dot {
+  border-color:  #86909c ;
+}
+.process .arco-steps-item-icon-dot {
+  border: none;
+  background:  #165dff ;
+}
+.arco-steps-item-content {
+  text-align: center;
+}
+.horizontal .arco-steps-item-content {
+  margin-top:  0.1rem ;
+}
+.vertical .arco-steps-item-content {
+  margin-left:  0.26rem ;
+  text-align: left;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+          flex: 1;
+  padding-bottom:  0.5rem ;
+}
+.arco-steps-item-title {
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
+}
+.finish .arco-steps-item-title {
+  color:  #1d2129 ;
+}
+.error .arco-steps-item-title {
+  color:  #F53F3F ;
+}
+.process .arco-steps-item-title {
+  color:  #165dff ;
+  font-weight: 500;
+}
+.wait .arco-steps-item-title {
+  color:  #86909c ;
+}
+.arco-steps-item-description {
+  font-size:  0.24rem ;
+  line-height:  0.36rem ;
+  color:  #4e5969 ;
+}
+.wait .arco-steps-item-description {
+  color:  #86909c ;
+}
+.vertical .arco-steps-item-description {
+  margin-top:  0.04rem ;
+}
+.arco-steps.vertical {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  padding-bottom:  0 ;
+  padding-left:  0.4rem ;
+}

package/esm/steps/style/css/index.d.ts

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

package/esm/steps/style/css/index.js

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

package/esm/steps/style/index.d.ts

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

package/esm/steps/style/index.js

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

package/esm/steps/style/index.less

@@ -0,0 +1,206 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-steps {
+    display: flex;
+    .use-var(padding, steps-padding);
+
+    &-item {
+        position: relative;
+        display: flex;
+        flex: 1;
+
+        &.horizontal {
+            flex-direction: column;
+            align-items: center;
+        }
+
+        &.vertical {
+            align-items: flex-start;
+        }
+
+        &:last-child &-tail:after {
+            display: none;
+        }
+
+        &-tail {
+            position: absolute;
+
+            .horizontal & {
+                width: 100%;
+                .rem(top, 9);
+                left: 50%;
+                .use-var(padding, steps-tail-horizontal-padding);
+
+                &:after {
+                    content: "";
+                    display: inline-block;
+                    width: 100%;
+                    .use-var(height, steps-tail-standard-size);
+                    .use-var(background, steps-tail-standard-background);
+                    .rem(border-radius, 2);
+                }
+            }
+
+            .vertical & {
+                height: 100%;
+                .rem(top, 9);
+                .rem(left, 7.5);
+                .use-var(padding, steps-tail-vertical-padding);
+
+                &:after {
+                    content: "";
+                    display: inline-block;
+                    height: 100%;
+                    .use-var(width, steps-tail-standard-size);
+                    .use-var(background, steps-tail-standard-background);
+                    .rem(border-radius, 2);
+                }
+            }
+
+            .finish &:after {
+                .use-var(background, steps-tail-finish-background);
+            }
+        }
+
+        &-custom-icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .use-var(width, steps-custom-icon-width);
+            .use-var(height, steps-custom-icon-height);
+        }
+
+        &-icon {
+            display: inline-block;
+            border-radius: 50%;
+            .use-var(width, steps-icon-width);
+            .use-var(height, steps-icon-height);
+            text-align: center;
+
+            .number.finish & {
+                .use-var(background, steps-finish-icon-num-background);
+            }
+
+            .number.process & {
+                .use-var(background, steps-process-icon-num-background);
+            }
+
+            .number.wait & {
+                .use-var(background, steps-wait-icon-num-background);
+            }
+
+            .number.error & {
+                .use-var(background, steps-error-icon-num-background);
+            }
+
+            svg {
+                position: relative;
+                .use-var(font-size, steps-icon-svg-standard-font-size);
+                top: 50%;
+                transform: translateY(-50%);
+
+                .finish & {
+                    .use-var(color, steps-finish-icon-svg-color);
+                }
+
+                .error & {
+                    .use-var(color, steps-error-icon-svg-color);
+                    .use-var(font-size, steps-error-icon-svg-font-size);
+                }
+            }
+
+            &-num {
+                .use-var(font-size, steps-icon-num-font-size);
+                .use-var(line-height, steps-icon-num-line-height);
+                .use-var(color, steps-icon-num-color);
+                .text-medium-var(steps-icon-num-color);
+
+                .process & {
+                    .use-var(color, steps-process-icon-num-color);
+                }
+            }
+
+            &-dot {
+                position: relative;
+                top: 50%;
+                transform: translateY(-50%);
+                display: inline-block;
+                .use-var(width, steps-dot-width);
+                .use-var(height, steps-dot-height);
+                border-radius: 50%;
+                .use-var(border-width, steps-dot-border-width);
+                border-style: solid;
+
+                .finish & {
+                    .use-var(border-color, steps-finish-dot-border-color);
+                }
+
+                .wait & {
+                    .use-var(border-color, steps-wait-dot-border-color);
+                }
+
+                .process & {
+                    border: none;
+                    .use-var(background, steps-process-dot-background);
+                }
+            }
+        }
+
+        &-content {
+            text-align: center;
+
+            .horizontal & {
+                .use-var(margin-top, steps-horizontal-content-margin-top);
+            }
+
+            .vertical & {
+                .use-var(margin-left, steps-vertical-content-margin-left);
+                text-align: left;
+                flex: 1;
+                .use-var(padding-bottom, steps-vertical-content-padding-bottom);
+            }
+        }
+
+        &-title {
+            .use-var(font-size, steps-title-font-size);
+            .use-var(line-height, steps-title-line-height);
+
+            .finish & {
+                .use-var(color, steps-finish-title-color);
+            }
+
+            .error & {
+                .use-var(color, steps-error-title-color);
+            }
+
+            .process & {
+                .use-var(color, steps-process-title-color);
+                font-weight: 500;
+            }
+
+            .wait & {
+                .use-var(color, steps-wait-title-color);
+            }
+        }
+
+        &-description {
+            .use-var(font-size, steps-description-font-size);
+            .use-var(line-height, steps-description-line-height);
+            .use-var(color, steps-description-color);
+
+            .wait & {
+                .use-var(color, steps-wait-description-color);
+            }
+
+            .vertical & {
+                .use-var(margin-top, steps-description-margin-top);
+            }
+        }
+    }
+
+    &.vertical {
+        flex-direction: column;
+        .use-var(padding-bottom, steps-vertical-padding-bottom);
+        .use-var(padding-left, steps-vertical-padding-left);
+    }
+}

package/esm/steps/type.d.ts

@@ -0,0 +1,98 @@
+/// <reference types="react" />
+export interface StepProps {
+    /**
+     * 步骤标题
+     * @en Step title
+     */
+    title?: React.ReactNode;
+    /**
+     * 步骤说明文字
+     * @en Step description
+     */
+    description?: React.ReactNode;
+    /**
+     * 自定义步骤图标
+     * @en Custom step Icon
+     */
+    icon?: React.ReactNode;
+    /**
+     * 指定步骤状态，不配置该项时，会根据 Steps 的 current 属性自动指定状态
+     * @en Specify the step status. When this item is not input, the status will be automatically specified according to the current property of steps
+     */
+    status?: 'finish' | 'error' | 'wait' | 'process';
+}
+export interface StepsProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式，如果想用 css 控制 icon 颜色，可使用公共 mixin '.set-steps-color(@color)'
+     * @en Custom stylesheet. If want to use CSS to control icon color, use public mixin ' set-steps-color(@color)'
+     */
+    style?: React.CSSProperties;
+    /**
+     * 步骤条方向
+     * @en Step bar direction
+     * @default horizontal
+     */
+    direction?: 'vertical' | 'horizontal';
+    /**
+     * 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态，传入则受控
+     * @en Specify the current step, counting from 0. In the step children elements, the status can be overwritten through the status, and it is controlled if it is input
+     */
+    current?: number;
+    /**
+     * 步骤图标类型。在子 Step 元素中，可以通过 icon 属性覆盖图标
+     * @en Steps icon type. In the children step elements , the icons can be overridden by the property icon
+     * @default number
+     */
+    iconType?: 'number' | 'dot';
+    /**
+     * 当前步骤的节点状态
+     * @en Status of the current step
+     * @default process
+     */
+    status?: 'finish' | 'error' | 'wait' | 'process';
+    /**
+     * 初始 step index
+     * @en Default step index
+     * @default 0
+     */
+    defaultIndex?: number;
+    /**
+     * 步骤条自定义数据，优先级高于 Children Step 子元素
+     * @en Custom data of step bar, which takes precedence over children elements of steps component
+     */
+    items?: StepProps[];
+    /**
+     * 点击步骤触事件
+     * @en Callback when clicking the step
+     */
+    onClick?: (current: number) => void;
+    /**
+     * step 变化回调
+     * @en Callback when step changes
+     */
+    onChange?: (index: number) => void;
+    /**
+     * 子元素，优先级低于 items
+     * @en Child element, with priority lower than items
+     */
+    children?: React.ReactNode;
+}
+export interface StepRef {
+    /**
+     * Step 最外层元素 DOM
+     * @en Outermost element DOM of the Step
+     */
+    dom: HTMLDivElement | null;
+}
+export interface StepsRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}

package/esm/steps/type.js

@@ -0,0 +1 @@
+export {};

package/esm/sticky/demo/style/css/mobile.css

@@ -0,0 +1,14 @@
+#demo-sticky {
+  padding-bottom: 800px;
+}
+#demo-sticky .demo-sticky-container {
+  height: 200px;
+  background: #f5f6f7;
+  line-height: 80px;
+  font-size: 14px;
+  color: #939aa3;
+  text-align: center;
+}
+#demo-sticky .arco-button {
+  min-height: var(--button-large-height);
+}

package/esm/sticky/demo/style/mobile.less

@@ -0,0 +1,16 @@
+@import '../../../../style/mixin.less';
+
+#demo-sticky {
+    padding-bottom: 800px;
+    .demo-sticky-container {
+        height: 200px;
+        background: #f5f6f7;
+        line-height: 80px;
+        font-size: 14px;
+        color: #939aa3;
+        text-align: center;
+    }
+    .@{prefix}-button {
+        min-height: var(--button-large-height);
+    }
+}

package/esm/sticky/index.d.ts

@@ -0,0 +1,136 @@
+import React, { CSSProperties, ReactNode } from 'react';
+export interface StickyRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 局部滚动模式下，如果容器外部还有嵌套滚动，可主动调用此方法，让 sticky 的元素主动更新 fixed 位置
+     * @en In the local scrolling mode, if there is nested scrolling outside the container, this method can be actively called to make the sticky element actively update the fixed position
+     */
+    recalculatePosition: () => void;
+}
+export interface StickyEventPayload {
+    /**
+     * 当前是否为吸顶/吸底状态
+     * @en Whether it is currently in the top/bottom suction state
+     */
+    isSticky: boolean;
+    /**
+     * 前一个状态是否为吸顶/吸底状态
+     * @en Whether the previous state is ceiling / bottom suction state
+     */
+    wasSticky: boolean;
+    /** 当前是否为吸顶状态 */
+    isTopSticky: boolean;
+    /** 当前是否为吸底状态 */
+    isBottomSticky: boolean;
+}
+export interface StickyProps {
+    /**
+     * 吸附位置，top 表示吸顶，bottom 表示吸底，both 表示既吸顶又吸底
+     * @en Adsorption position, top means fixed top, bottom means fixed bottom, both means both top and bottom
+     * @default "top"
+     */
+    position?: 'top' | 'bottom' | 'both';
+    /**
+     * 当距离容器顶部距离为该值时吸顶
+     * @en Fixed top when the distance from the top of the container is this value
+     * @default 0
+     */
+    topOffset?: number;
+    /**
+     * 当距离容器底部距离为该值时吸底
+     * @en Fixed bottom when the distance from the bottom of the container is this value
+     * @default 0
+     */
+    bottomOffset?: number;
+    /**
+     * 当sticky元素需要跟随依附容器离开视口时距离依附容器边缘的距离
+     * @en The distance from the edge of the attached container when the sticky element needs to follow the attached container to leave the viewport
+     * @default 0
+     */
+    followOffset?: number;
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: CSSProperties;
+    /**
+     * 组件内部内容
+     * @en Children elements of the component
+     */
+    children?: ReactNode;
+    /**
+     * 层级指数，z-index的值
+     * @en z-index
+     * @default 100
+     */
+    zIndex?: number;
+    /**
+     * 在处于sticky状态时是否portal
+     * @en Whether it is portal in sticky state
+     * @default false
+     */
+    portalWhenSticky?: boolean;
+    /**
+     * 处于sticky状态时，元素固定样式。推荐用fixed，如果为absolute则需自行为滚动容器的父容器设置 position: relative
+     * @en When in the sticky state, the fixed style of the element. Fixed is recommended. If absolute, need to set position: relative for the parent container of the scrolling container.
+     * @default "fixed"
+     */
+    stickyStyle?: 'fixed' | 'absolute';
+    /**
+     * 处于sticky状态时的自定义样式
+     * @en Custom style when in sticky state
+     */
+    stickyCssStyle?: CSSProperties;
+    /**
+     * 被portal时挂载的容器
+     * @en Container mounted when being portaled
+     * @default () => document.body
+     */
+    getPortalContainer?: () => HTMLElement;
+    /**
+     * 吸顶状态切换时触发
+     * payload.isSticky: 当前是否为吸顶/吸底状态
+     * payload.wasSticky: 前一个状态是否为吸顶/吸底状态
+     * @en Triggered when the sticky state is switched
+     * @en isSticky: Whether it is currently in the top/bottom state
+     * @en Whether the previous state is the top/bottom state
+     */
+    onStickyStateChange?: (payload: StickyEventPayload) => void;
+    /**
+     * 滚动时top变化回调，参数为元素距离容器顶部减去topOffset的距离
+     * @en The top change callback when scrolling, the parameter is the distance of the element from the top of the container minus topOffset
+     */
+    onTopChange?: (top: number) => void;
+    /**
+     * 指定sticky元素的依附容器，sticky元素不会超出容器，在容器离开视口时会跟随
+     * 如果返回string则使用querySelector选取容器
+     * @en Specifies the attachment container of the sticky element. The sticky element will not exceed the container and will follow when the container leaves the viewport
+     * @en If a string is returned, use querySelector to select the container
+     */
+    getContainer?: () => HTMLElement | string;
+    /**
+     * 指定滚动容器，如果指定该值则relative属性始终认定为false；如果返回string则使用querySelector选取容器
+     * @en Specifies the scrolling container. If this value is specified, the relative property is always regarded as false; if a string is input, use querySelector to select the container
+     * @default () => window
+     */
+    getScrollContainer?: () => HTMLElement | Window | string;
+}
+/**
+ * 粘性布局组件，元素相对于窗口或指定容器的吸顶效果。
+ * @en Sticky layout component, The sticky-to-top effect of the element relative to the window or specified container
+ * @type 布局
+ * @type_en Layout
+ * @name 粘性布局
+ * @name_en Sticky
+ */
+declare const Sticky: React.ForwardRefExoticComponent<StickyProps & React.RefAttributes<StickyRef>>;
+export default Sticky;