- 综合排序
- 最热优先
- 最新优先
- 来自专栏Rattenking
【taro react】 ---- Stepper 步进器组件封装
1.目的 学会 taro 组件的封装； 学习 【Stepper 进步器】的基础逻辑； 学会 react 组件调用值的传递！ 2. 【Stepper 进步器】组件布局 2.1 预览样式 2.2 布局结构代码 使用 flex 布局，作为进步器的盒子，注意由于个人习惯，基本采用的 flex 布局，rui-fa 是 flex: none 【Stepper 进步器】传入参数赋值 传入的 默认 value 进行渲染显示； 传入的 min / max 需要事件触发进行判断处理。 【Stepper 进步器】输入事件触发处理 input 失去焦点获取输入的 value； 获取传入的 max 和 min 的值，如果没有，默认 1000 和 1； 对输入的 value 去掉非数字项【注意 【Stepper 进步器】点击加减号触发处理 获取传入的 max 和 min 的值，如果没有，默认 1000 和 1； 判断点击的是加号还是减号； 加号，判断加1是否小于等于最大值，满足就加1； 减号，
1.1K20编辑于 2022-01-06 - 来自专栏青年码农
Flutter基础widgets教程-Stepper篇
1 Stepper Stepper 是一个步骤条组件 2 构造函数 Stepper({ Key key, @required this.steps, this.physics,
7441815发布于 2020-10-10 - 来自专栏阿策小和尚
【Flutter 专题】69 图解基本 Stepper 步进器
和尚尝试做一个积分进度和类似物流进度的小组建，优先考虑的是自定义 ListView 但还是查阅了一下资料，发现神奇的 Stepper 步进器，虽不能完全满足需求，但提供了很好的思路，和尚仅就基本的 Stepper 学习一下； 源码分析 const Stepper({ Key key, @required this.steps, // Step 列表 subtitle 为副标题，在 title 之下，默认小一个字号； return Stepper(steps: [ Step(title: Text('Step 标题一'), subtitle: Text Stepper type 包括横向 horizontal 展示与纵向 vertical 展示两类，默认是 vertical； return Stepper(type: StepperType.horizontal ---- Stepper 使用方便快捷，虽样式相对固定无法满足所有需求，但给我们提供了很好的自定义思路；和尚对 Stepper 研究尚浅，如有错误请多多指导！
1.4K31发布于 2019-12-02 - 来自专栏月亮与二进制
《iOS Human Interface Guidelines》——Stepper步进控件
API NOTE 查看UIStepper学习更多关于在你的代码中定义步进控件的内容。
35910发布于 2021-11-23 - 来自专栏CSDNToQQCode
HarmonyOS-UIAbitity-Stepper——【坚果派-红目香薰】
Stepper 步骤导航器组件，适用于引导用户按照步骤完成任务的导航场景。 子组件 仅能包含子组件StepperItem。 接口 Stepper(value?: { index? ItemState = ItemState.Normal; @State thirdState: ItemState = ItemState.Normal; build() { Stepper 例如路由跳转等 console.info('onFinish'); }) .onSkip(() => { // 此处可处理点击跳过时的逻辑，例如动态修改Stepper
26610编辑于 2024-02-24 - 来自专栏Web前端
React 步骤条组件 Stepper 深入解析与常见问题
在构建复杂的多步骤表单或流程时，步骤条（Stepper）组件是一个非常有用的工具。它可以帮助用户了解当前进度，并且可以轻松地在不同的步骤之间导航。 import React, { useState } from 'react';const Stepper = ({ steps }) => { const [currentStep, setCurrentStep ;在这个例子中，我们定义了一个名为 Stepper 的组件，它接受一个 steps 数组作为属性。 例如，可以创建一个名为 Stepper.module.css 的文件来定义步骤条组件的样式：.stepper { display: flex;}.step { padding: 10px; border /Stepper.module.css';const Stepper = ({ steps }) => { const { currentStep, handleNext, handleBack }
1.2K10编辑于 2024-12-12 - 来自专栏Flutter笔记
Flutter | 自定义一个 Stepper 步骤组件
因为当时了解过 Material 组件库里有一个 Stepper 控件，是类似的效果，我就和他说，可以魔改一下 Stepper，感觉应该不难，然后他回过来了一个这个表情： ? 经过 那下面就来说说编写该控件的经过， 首先我们应该了解一下原生 Stepper 是个什么样子，并且分析一下源码。 了解原生 Stepper 还是老样子，看一下构造方法： const Stepper({ Key key, @required this.steps, this.physics, this.type 先不看代码，把前面定义 Stepper 的代码改一下，改成三个： ? 这样代码对照着图片来看，就很容易看得懂。 2.下面是一个 ListView：这个是上面说到的 control，在后续我们自定义Stepper 是没用的，不用管。
3.6K70发布于 2019-08-02 - 来自专栏鸿蒙开发笔记
纯血鸿蒙APP实战开发——自定义Stepper
介绍在许多场景下，我们都需要引导用户按照步骤完成任务，此功能在HarmonyOS Next中可以使用 Stepper 来实现，但是Stepper的定制化能力较弱，开发者无法定制上下页切换按钮的样式、位置 ，因此本例介绍了如何基于Swiper实现Stepper的能力。 verified) { promptAction.showToast({ message: $r("app.string.stepper_info_not_filled") }); this.noticeItem, (_: number, __: number) => { Row() .height($r("app.integer.stepper_usernotice_item_height
38320编辑于 2025-02-17 - 来自专栏IMWeb前端团队
如何掌握高级的React设计模式: 复合组件【译】
Stepper.Progress /> <Stepper.Steps /> </Stepper> ); } } export default App; 到目前为止 Stepper.Progress> <Stepper.Stage num={1} /> <Stepper.Stage num={2} /> < Stepper.Stage num={3} /> <Stepper.Stage num={4} /> </Stepper.Progress> <Stepper.Steps Stepper.Progress> <Stepper.Stage num={1} /> <Stepper.Stage num={2} /> < Stepper.Stage num={3} /> </Stepper.Progress> <Stepper.Steps> <Stepper.Step
1.8K10发布于 2019-12-03 - 来自专栏疯狂的小程序
微信小程序加减号弹出框详解
shade-shop-detail"> <view class="detail-right flexb"> <view class='detail-title-de'>购买数量view> <view class="<em>stepper</em> detail-title-de{ font-size: 30rpx; color: #333333; margin-bottom: 20rpx; } /* 右侧增加减少 */ /* 计算加减 */ .<em>stepper</em> { display: flex; border-radius: 5px; text-align: center; } .<em>stepper</em> text{ display: block; width : 50rpx; height: 52rpx; border:1px solid #999999; line-height: 50rpx; color: #666666; } .<em>stepper</em> solid #999999; line-height: 50rpx; color: #333333; font-size: 28rpx; text-align: center; } /* .<em>stepper</em>
2K80发布于 2018-01-25 - 来自专栏C++
【HarmonyOS之旅】基于ArkTS开发(三) -＞ 兼容JS的类Web开发(四) -＞ 常见组件(二) -＞ stepper
1 -> 创建Stepper组件 在pages/index目录下的hml文件中创建一个Stepper组件。 <! > </stepper-item> <stepper-item> <text>Step 2</text> </stepper-item> </stepper> stepper-item1</text> </stepper-item> <stepper-item> <text>stepper-item2</text> </ stepper-item> <stepper-item> <text>stepper-item3</text> </stepper-item> </stepper text>stepper-item3</text> </stepper-item> <stepper-item> <text>stepper-item4</text>
21810编辑于 2025-02-11 - 来自专栏IMWeb前端团队
如何掌握高级react设计模式: Context API【译】
> <Stepper.Stage num={1} /> </Stepper.Progress> <Stepper.Steps> <Stepper.Step num={1} text={"Stage 1"}/> </Stepper.Steps> </Stepper> ); } } export ={1}> <Stepper.Progress> <Stepper.Stage num={1} /> </Stepper.Progress 6.对需要 props 或传递 props 的所有组件重复第4和第5步骤 到这里我不再逐步详细介绍了，只需要对 Stepper.Steps，Stepper.Progress 和 Stepper.Stage </Stepper> ); } } Stepper.Steps 和 Stepper.Step 不再直接从父级那里取出 stage属性。
1.4K20发布于 2019-12-03 - 来自专栏腾讯IMWeb前端团队
如何掌握高级react设计模式: Context API【译】
> <Stepper.Stage num={1} /> </Stepper.Progress> <Stepper.Steps> <Stepper.Step num={1} text={"Stage 1"}/> </Stepper.Steps> </Stepper> ); } } export ={1}> <Stepper.Progress> <Stepper.Stage num={1} /> </Stepper.Progress 6.对需要 props 或传递 props 的所有组件重复第4和第5步骤 到这里我不再逐步详细介绍了，只需要对 Stepper.Steps，Stepper.Progress 和 Stepper.Stage </Stepper> ); } } Stepper.Steps 和 Stepper.Step 不再直接从父级那里取出 stage属性。
1.2K20编辑于 2022-06-29 - 来自专栏腾讯IMWeb前端团队
如何掌握高级的React设计模式: 复合组件【译】
> <Stepper.Stage num={1} /> <Stepper.Stage num={2} /> <Stepper.Stage num ={3} /> <Stepper.Stage num={4} /> </Stepper.Progress> <Stepper.Steps /> > <Stepper.Stage num={1} /> <Stepper.Stage num={2} /> <Stepper.Stage num ={3} /> </Stepper.Progress> <Stepper.Steps> <Stepper.Step num={1} text={"Stage 3"}/> <Stepper.Step num={4} text={"Stage 4"}/> </Stepper.Steps> </Stepper>
1.1K10编辑于 2022-06-29 - 来自专栏Flutter
Flutter 步骤进度组件
Stepper Stepper控件是一个展示一系列步骤进度的控件，用法如下： Stepper( steps: <Step>[ Step( title: Text('2020-4- content: Text('今天是2020-4-23'), state: StepState.complete ) 影响字体样式和圆圈内图标： 设置为StepState.error的效果： 点击事件： Stepper 效果如下： 切换显示的Step，设置如下： int _currentStep = 0; Stepper( onStepTapped: (index) { setState(( 可以使用`controlsBuilder`，用法如下： Stepper( controlsBuilder: (BuildContext context, {VoidCallback onStepContinue child: Text('取消'), onPressed: onStepCancel, ), ], ); }, ... ) 效果如下： Stepper
1.2K20发布于 2020-09-11 - 来自专栏Material Design组件
Human Interface Guidelines — Steppers
争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚 Steppers Human Interface Guidelines链接：Steppers Stepper Stepper 使用时注意 ·明显地让 stepper 影响的值 Stepper本身不显示任何值，因此请确保人们知道使用 stepper 时他们将更改多大的值。 ·当可能发生较大的值更改时，请勿使用 stepper 对于需要几次敲击的小改动，stepper 可以胜任。 例如，在打印屏幕上，使用步进器设置打印份数是有意义的，因为人们很少更改此设置。 另一方面，使用 stepper 来选择页面范围是没有意义的，因为即使是合理的页面范围也需要大量的点击。
69550发布于 2018-06-21 - 来自专栏清墨_iOS分享
iOS UIStepper实现数量递增递减
(知道这个就行了,虽然能设置加减按钮的图片，但是图片颜色会固定成stepper的tintColor,也不满足需求) OK，既然知道了这些东西，那我们就开始实现我们的需求吧。 FC7C1F67CF2178DA4C43DD4350A8E6C7.jpg 实现需求： 需求是这样的 DBF08F90-FB6B-424B-9240-AB893A576065.png 而我们的stepper stepper = [[UIStepper alloc]initWithFrame:CGRectMake(100, 200, 8, 5)]; stepper.tintColor = [UIColor clearColor]; stepper.minimumValue = 0; stepper.maximumValue = 1000; stepper.stepValue = ]; // step.wraps = YES; //写了这个属性从0递减是100，从100递增是0 [self.view addSubview:stepper];
1.4K50发布于 2018-05-07 - 来自专栏前端达人
分享16个常用的自定义表单组件样式代码片段（下）
input（左右加减按钮输入框） 有时候，减号在左边，加号在右边的输入框，方便用户调整数值，也很常见，如下图所示： HTML部分
<! -- Minus button --> <button class="<em>stepper</em>__button">-</button> <! -- Input container --><input type="text" class="<em>stepper</em>__input" -- Plus button --> <button class="<em>stepper</em>__button">+</button>CSS部分 .stepper { display: flex __content { flex: 1; } .stepper__input { /* Take full size of its container */ height: 100%;1K10编辑于 2022-04-18来自专栏大话swiftQuickSort BinaryTree`s deep LeetCode~ListNode
{ var tmp1 = l1 var tmp2 = l2 var stepper = 0 var destListNode: ListNode? while tmp1 ! next } dest = dest + stepper print(dest) stepper = Int(dest / 10) if(destListNode next = ListNode.init(stepper) } } }else{ var tmp = destListNode next = ListNode.init(Int(dest%10)) if tmp1 == nil && tmp2 == nil { //没有后续x且需要进位 if stepper ! next = ListNode.init(stepper) } } } } return destListNode
41440发布于 2019-07-04来自专栏大话swiftLeetCode之两数之和
{ var tmp1 = l1 var tmp2 = l2 var stepper = 0 var destListNode: ListNode? next } dest = dest + stepper // print(dest) stepper = Int(dest / 10) next = ListNode.init(Int(dest%10)) } } if stepper ! next = ListNode.init(Int(stepper%10)) } return destListNode } } 性能 ?
34430发布于 2019-07-04
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号