layout

本文档页面构建使用的布局套路

• --width-aside 侧边宽度 全局变量
• --background-color-aside 侧边背景色 全局变量
• aside[data-float] 侧边悬浮
• aside[data-collapsed] 塌陷侧边（带过渡）
• aside[data-folded] 折叠侧边

## watermark

添加 .na-watermark 类名的元素即可拥有一个 ::after 水印图层

但是它會隨其内容滚动，若需要你必须多套一层

这个页面充满了水印

• 全局变量 --opacity-watermark 水印调整透明度（默认0.1）
• 全局变量 --border-radius-watermark 水印调整圆角（默认unset）
• 全局变量 --background-watermark 水印调整图案（默认）填充色推荐是 fill="#808080"

## menu

本文档的左侧菜单利用了这个，但是使用的 details>summary

结合 details[name] 属性可以在不写JavaScript的情况下保持只有一个子菜单展开

在之前的实现是 ul>li

• li.na-menu-submenu[data-folded] 标记当前折叠的子菜单
  • [data-selected|data-active] 标记当前选中的叶子

• 叶子-0
• 分类-1
  • 叶子-1-1
  • 叶子-1-2
• 分类-2
  • 叶子-2-1
  • 叶子-2-2

菜单有以下全局变量

• --color-menu 菜单颜色（默认主题色）
• --color-menu-item 菜单字体颜色（默认黑）
• --color-menu-item:hover 鼠标悬停菜单字体颜色（默认菜单颜色）
• --color-menu-item:active 当前所在菜单字体颜色（默认白）
• --background-color-menu-item 菜单背景颜色（默认透明）
• --background-color-menu-item:hover 鼠标悬停菜单背景颜色（默认透明）
• --background-color-menu-item:active 当前所在菜单背景颜色（默认菜单颜色）
• --padding-horizontal-menu-item 纵向内边距
• --padding-vertical-menu-item 横向内边距

全局变量 --border-radius-md 调整菜单圆角很常见