CodeWave智能开发平台--03--目标:应用创建--03页面子页面设计

简介: CodeWave智能开发平台--03--目标:应用创建--03页面子页面设计

摘要

本文是网易数帆CodeWave智能开发平台系列的第06篇,主要介绍了基于CodeWave平台文档的新手入门进行学习,实现一个完整的应用,本文主要完成页面子页面设计

CodeWave智能开发平台的06次接触

CodeWave参考资源

网易数帆CodeWave开发者社区课程中心

网易数帆CodeWave开发者社区文档中心

网易数帆CodeWave开发者社区考试认证

应用开发流程

经过上篇文章的初级入门,对CodeWave低代码平台有了一定的认知,在模板的范围内开发一个特点的程序还是比较容易的,但同时需要说明的是,低代码平台有很多自己的逻辑,如果都学完在操作,实在是需要较长时间,本文结合应用开发流程,进行专题学习,应用创建☀️☀️

应用开发-搭建采购管理系统

视频来源

应用开发流程-03-页面子页面设计

进入自己的CodeWave智能开发平台

https://itzhang.codewave.163.com/dashboard/product/Home

页面子页面实现导航栏跳转

创建空白页父页面

页面名称procureManageSys

页面标题 采购管理系统

创建子页面

productList(产品管理)

contactsList(联系人管理)

supplierList(供应商管理)

homePage(首页)

在空白页首页中创建导航栏

双击父页面,进入父页面编辑区域

把导航拖到采购管理首页面,修改下拉菜单

在总览下添加我的工作台,在采购管理下添加供应商管理,联系人管理和产品管理。并设置这些菜单对应的跳转页面。

可以给各个子页面拖入一个文本组件,显示不同文本

点击预览

页面布局

先设置布局容器组件,再选择组件放在不同的容器中

首页设计

效果

首先拖入栅格布局,16 和 8

然后再8的部分,拖入1个多行的线性布局,对线性布局再创建一个副本

拖入面板组件,面板组件可以给每个布局显示边界

再修改左侧最大的面板标题为我的日历,同时把日历组件拖进来

修改快捷入口

拖入栅格布局 1:1:1布局

在每个栅格中,添加图片和文本组件

设置栅格内的格式

选择本地图片,图片连接在有道云笔记

图片素材:

供应商

联系人

产品

设置快捷入口的图片,替换为上面的图片,然后创建3个副本,修改图片和本文,删除多余栅格如下:

修改实用工具栅格文本

在该区域插入6个线性多行布局

第1行输入文本

第2行插入输入框

第3行插入按钮,并设置图标

第4行插曲栅格,分为2个,然后修改文本。再把第4行创建2个副本,修改文本,如下

精彩瞬间幻灯片设计:

添加幻灯片组件,设置组件大小

点击幻灯片组件,添加幻灯片子项

>

修改图片

效果如下:

设置首页的边框距离

如下

相关文章
|
数据库
会议OA必备!解密Layui神技:轻松构建动态可控的左侧权限菜单列表!
会议OA必备!解密Layui神技:轻松构建动态可控的左侧权限菜单列表!
84 0
|
5月前
|
UED
带您一步步构建一个具有复杂布局的电商详情页,涵盖页面结构规划、样式设计以及交互效果的实现
【6月更文挑战第14天】构建复杂布局的电商详情页涉及页面结构规划、样式设计和交互效果实现。首先,规划页面结构,包括顶部导航栏、商品图片展示区、商品信息区、用户评价区和相关商品推荐区。接着,进行样式设计,注重色彩搭配、字体选择、布局与间距以及图片处理。例如,使用固定顶部导航栏,轮播图展示商品图片,分块展示商品信息和评价,以及设计相关商品推荐区。最后,实现交互效果,如图片放大、添加到购物车按钮、滚动监听和评论互动,提升用户体验。实际开发时需根据需求和规范进行调整,保证跨设备兼容性。
105 1
|
6月前
|
存储 开发者
CodeWave智能开发平台--03--目标:应用创建--07供应商数据表格01
CodeWave智能开发平台--03--目标:应用创建--07供应商数据表格01
|
5月前
|
搜索推荐
CSDN自定义模块全攻略,DIY系统原有样式打造出你的专属个性化主页!
CSDN自定义模块全攻略,DIY系统原有样式打造出你的专属个性化主页!
96 0
|
6月前
|
数据采集 运维 监控
DataphinV4.0来啦:自定义全局角色 ,实时研发覆盖全部署场景,个性化企业配置看本期
本次V4.0版本升级,Dataphin支持自定义全局角色、自定义逻辑表命名规范、Flink on K8s的部署模式,提升企业级适配能力,灵活匹配企业特色;将集成任务快速从组件模式切换为脚本模式、支持外部触发类型节点等,提升研发平台易用性,助力高效开发便捷运维。
91183 1
|
6月前
|
Web App开发 存储 自然语言处理
推荐一款价值几万元的免费开源GPTs导航!还可自定义数据源做成通用导航站!
推荐一款价值几万元的免费开源GPTs导航!还可自定义数据源做成通用导航站!
130 0
|
6月前
|
数据可视化 数据库 开发者
CodeWave智能开发平台--03--目标:应用创建--09供应商详情页面上
CodeWave智能开发平台--03--目标:应用创建--09供应商详情页面上
|
6月前
|
数据可视化 数据库 数据安全/隐私保护
CodeWave智能开发平台--03--目标:应用创建--09供应商详情页面下
CodeWave智能开发平台--03--目标:应用创建--09供应商详情页面下
|
6月前
|
数据可视化 数据管理 数据建模
CodeWave智能开发平台--02--目标:文档快速阅读--01快速构建一个应用
CodeWave智能开发平台--02--目标:文档快速阅读--01快速构建一个应用
|
6月前
|
数据可视化 前端开发 数据库
CodeWave智能开发平台--02--目标:文档快速阅读--02新手入门
CodeWave智能开发平台--02--目标:文档快速阅读--02新手入门