0

我想在 Material UI Stepper 组件中使用嵌套的 Step 组件

这是我正在寻求的行为。我在 NextJS 上下文中使用 Material UI 和 Formik。我使用教程作为参考。

线框

下面是一些线框图，可帮助说明三个顶级父步骤中的每一个，第三个屏幕截图说明最后一个父步骤（步骤 3）具有三个嵌套的子步骤。

家长第一步 -告诉我们您的财产没有孩子的步骤

这是表单的第一步。客户将提供有关将生产媒体的土地或站立结构的信息（取决于那里的选择，某些产品将不是他们可以选择的选项）。

屏幕截图 1：这是表单中的第一步

第一步截图

家长第二步 -选择您的服务包含多种产品和套餐的门户

这一步实际上是查看分类产品的非线性门户。有四个服务类别，包括产品和子包。目标是能够挑选和选择产品并将它们添加到购物车。

截图 2：这是主页/门户

第二步截图

家长步骤三 -提供一些信息3 子步骤

这一步实际上是查看分类产品的非线性门户。有四个服务类别，包括产品和子包。目标是能够挑选和选择产品并将它们添加到购物车。

截图 3：这是我们在 3 个子“步骤”内收集信息的地方

第三步截图

这是 Material Ui Stepper 组件的概要。 https://material-ui.com/components/steppers/

依赖项/环境

  1. 我将此回购作为起点：https ://github.com/CharlestonREM/youtube-2020-june-multi-step-form-formik
  2. 我正在使用 Formik-Material UI：https ://github.com/stackworx/formik-material-ui
  3. 我想使用带有嵌套步骤的 Material UI Stepper 组件：https ://material-ui.com/components/steppers/
4

0 回答 0