Container 布局容器

• <gr-components>：根元素容器。其中包含slot="aside" 和 slot="pages" 插槽。其子元素只能是这两个具名插槽。

• <gr-aside-item>：单个侧边栏元素容器。

• <gr-page>：单个页面元素容器。

自定义样式

移步到 CSS Part。

基本用法

TIP

因为包含 wheel 和 touch 事件，所以在本页面体验会大打折扣。

推荐到 此处 进行体验

查看代码

<gr-component>
  <ul slot="aside">
    <gr-aside-item path="Home" title="首页" desc="HOME"></gr-aside-item>
    <gr-aside-item path="News" title="新闻" desc="NEWS"></gr-aside-item>
  </ul>
  <div slot="pages">
    <gr-page path="News">News</gr-page>
    <gr-page path="Home">Home</gr-page>
  </div>
</gr-component>

Gr-aside-item Attributes

参数	说明	类型	可选值	默认值
path	路由路径（需要与 Gr-page 组件的 path 相匹配）	string	-	-
title	导航标题	string	-	-
desc	导航描述	string	-	-

Gr-page Attributes

参数	说明	类型	可选值	默认值
path	路由路径（需要与 Gr-aside-item 组件的 path 相匹配）	string	-	-

Gr-component Event

TIP

页面切换相关事件是由浏览器的 hash 值驱动的。所以若要进行页面切换时的相关操作，可以通过监听 window 对象上的 hashchange 事件，来进行后续操作。

window.addEventListener("hashchange", () => {
  console.log("页面切换");
});

名称	说明	回调参数
gr-component-load	当元素成功渲染时，触发该事件	-
gr-aside-toggle	当元素成功渲染时，触发该事件	e.detail.isHide: 侧边栏是否收起

Gr-component CSS Part

用法可参考 MDN ::part()伪类

名称	说明
main-container	根容器
aside-wrap	侧边栏容器
switch-btn	侧边栏切换按钮
cursor	侧边栏的游标（即跟随导航选中的对应元素的切换）
user-aside-wrap	插槽 slot="aside" 的父容器
user-pages-wrap	插槽 slot="pages" 的父容器

Gr-aside-item CSS Part

用法可参考 MDN ::part()伪类

名称	说明
container	根容器
title	标题容器
desc	描述容器

Gr-page CSS Part

用法可参考 MDN ::part()伪类

名称	说明
container	根容器