• Axure RP 9 for mac 高保真原型图 - 案例18 【导航栏-展开、收起】导入元件库

    相关链接

    案例目标

     1. 了解 导航栏-展开、收起 的实现原理
     2. 掌握 导入元件库 的方式

    一、成品效果

    Axure Cloud 案例18 【导航栏-展开、收起】导入元件库

    在这里插入图片描述

    二、安装元件库

    下载：

     进入Ant Design官网 选择 Ant Design Library。
     
    在这里插入图片描述
     
     选择 Web版本 最新。
     
    在这里插入图片描述

    安装：

    方式一：
    解压后会看到 *.rplib 文件，双击直接运行
     
    在这里插入图片描述
     
    哪一种都可以，如果选择第二种，要保证AntDesign3.9.x_Axure_20180903.rplib 文件位置不能改变
     在这里插入图片描述

    方式二：
    或者选择添加元件库
     
    在这里插入图片描述
     
    指定文件
     
    在这里插入图片描述

    选择：

    在列表中，已经可以看到新的元件库
     
    在这里插入图片描述
     
    等待元件库加载
     
    在这里插入图片描述

    使用：

     
    使用元件
     
    在这里插入图片描述

    三、素材准备

    随便找一个有下拉菜单的组合，保留两个一级导航，删掉多余的部分即可。

    在这里插入图片描述

    四、制作方法

    页面主要由四部分构成：title、主内容、导航、背景色

    在这里插入图片描述

    4.1 title

    几个图标，没有做任何交互

    在这里插入图片描述

    4.2 主内容

    每个 二级导航 对应一个 动态面板的子页面，记得打开垂直滚动即可实现 滚动条 效果。

    内部内容是从Ant Design元件库里面分割出来的，记得保证各个 子页面内容 的 宽度一致。

    在这里插入图片描述

    4.3 导航

    4.3.1 一级导航

    有两个一级导航：1.信息板、2.列表页

    其中 2.列表页 是收起状态，设置如下：
     
    隐藏二级：
    在这里插入图片描述
     
    图标旋转：(图片素材默认是向下的箭头）
     在这里插入图片描述
     
    编辑界面效果：
     在这里插入图片描述

    【一级导航】1.信息板 - 热区

    显示/隐藏： 选择 向下滑动、向上滑动，对应元件会自动被挤到其他地方。相当于前端的 流式布局，对应元素消失后，指定方向其他页面元素会自动进行偏移补齐。
     在这里插入图片描述
     
    旋转： 旋转图片达到展开、收起的效果
     在这里插入图片描述

    4.3.2 二级导航

    主要有颜色变化、选项组、点击交互：

    颜色变化：
     
    动态面板底色：透明（底色色号#333333）,字体颜色：白色（色号#FFFFFF 透明度65%）
     在这里插入图片描述
     
    鼠标悬停样式：填充蓝色（色号#0B4B88）、字体颜色：白色（色号#FFFFFF）
     
    在这里插入图片描述
     
    鼠标悬停样式：填充 - 浅蓝色（色号#1890FF）、字色 - 白色（色号#FFFFFF）
     
    在这里插入图片描述

    选项组：图中对应7个矩形块，都置于同一个选项组内
     
    在这里插入图片描述

    点击交互：设置当前矩形为选中状态为 真，由于所有二级导航处于同一选项组内，同一时间只能最多有一个处于选中状态。 并且右侧 主内容 动态面板切换到对应子页面。
     
    在这里插入图片描述

    22/09/16

    M

  • 相关阅读:
    【GEE笔记5】数据筛选Filter
    【漏洞预警】Linux Kernel权限提升漏洞
    机械设计基础重点
    docker install private registry 【docker 安装 registry & 仅证书认证】
    Mac-postman存储文件目录
    如何将PDF转换为Excel?一招解决办公难题
    Hashtable和HashMap、ConcurrentHashMap 之间的区别
    2.10 负载均衡原理- url hash 与 least_conn
    【HTML】常用标签总结
    Mac VMWare NAT模式安装 CentOS 7-操作教程
  • 原文地址：https://blog.csdn.net/qq_43529621/article/details/126890394