导航面板

区块

导航面板区块可用于文章编辑器与全站编辑器，可插入任何区块内或页面的任何位置。导航面板区块内可插入任何其他类型的区块作为面板内容显示。

内容设置

导航面板区块内容包含两个部分，分别是面板内容与切换按钮内容

面板内容

面板内容通过向主区块插入其他内部区块进行配置，可插入任何类型区块。

切换按钮

切换按钮内容通过配置选项进行配置。

配置选项

全局样式

Select 选择区块对应的全局样式。

切换按钮

切换按钮

Select 设置切换按钮的显示类型。

文字(打开)

String 切换按钮(未打开状态)所显示的文本。

文字(关闭)

String 切换按钮(已打开状态)所显示的文本。

图标(打开)

Select 切换按钮(未打开状态)所显示的图标。

图标(关闭)

Select 切换按钮(已打开状态)所显示的图标。

交互设置

动画

Select 打开面板执行的动画类型。

移动方向

Select 面板动画移动到的方向。

持续时长

Number 面板动画的持续时间，单位为秒。0 ～ 100 之间的任意数值，整数或浮点数。

延时

Number 面板动画播放前的延迟时间，单位为秒。0 ～ 100 之间的任意数值，整数或浮点数。

动画曲线

Select 面板动画的加速度曲线。

自定义曲线

String 自定义曲线函数，为 GSAP 动画曲线，设置方式可参考 GSAP Eases Docs。

设备

Select 选择启用的设备。

元素

<nav class="mk-navigation">
  <div class="el-panel"><div class="panel-wrap">...内部区块</div></div>
  <div class="el-toggle"><div class="toggle-wrap">...内容</div></div>
</nav>

• 主容器 .mk-navigation
• 面板 .el-panel
• 切换按钮 .el-toggle

其他