panel

这个样式设计来自于 ui5 panel

进入
到顶了
div(style={
    'border': '2px solid rgb(var(--black))',
    'border-radius': 'var(--border-radius-lg)',
    'overflow': 'hidden',
})
    details.na-panel
        summary 进入
        div 到顶了

## data-primary

details.na-panel[data-primary] 这个属性需要启用后才可以继承主题和拥有某些局部样式

进入
到顶了
details.na-panel(data-primary)
    summary 进入
    div 到顶了

## data-marker=">"

预设了另一个箭头符号 ，使用 data-marker=">" 启用，代替默认的

进入
到顶了
details.na-panel(
    data-marker=">"
    data-primary="warning"
    style="color:rgb(var(--gold-8))"
)
    summary 进入
    div 到顶了

## custom style

箭头图标由 summary::before 的 mask 遮罩图片实现，屏蔽掉了原本的类似 li::marker 实现，可以自定义添加你需要的 图形

 正在安装🥰

😍😍😍😍😍😍99%

details.na-panel(
    data-marker="(>)"
    data-primary
    style={
        color: 'rgb(var(--blue-6))',
        '--color-panel': 'var(--blue-1)'
    }
)
    summary 
        span 正在安装
        span 🥰
    div
        p.na-paragraph(data-size=2 style="margin:0") 
            | 😍😍😍😍😍😍
            span(style="float:right") 99%

style(lang="stylus").
    .na-panel[data-marker="(>)"] summary::before
        mask url("docs/icons/direction/outline/right-circle.svg")
        background-color rgb(var(--blue-6))