list

以下是拓展后的markdown

## `<ul>`

既可以用于列表也可以用于子项 ul>li.na-list 或 ul.na-list>li

(R U R’) U’ (R U R’)
(U R U’ R’) 2次公式
(U R U’ R’) 3次公式

-  (R U R') U'  (R U R') 
-  (U R U' R’) 2次公式 
-  (U R U' R’) 3次公式

<ul> 有个别名 <menu>

## `<ol>`

既可以用于列表也可以用于子项 ol>li.na-list 或 ol.na-list>li

R U R’ U R U2 R’
(R’ F R F’) R U2’ R’ U (R U2’ R’)

1.  R U R' U R U2 R' 
2.  (R' F R F') R U2' R' U (R U2' R')

## tabs

页签列表不属于排版，放到这里是为了不让本篇篇幅太短（

ul.na-tabs
    li.na-tab(data-active)
        button.na-tab-name 蔡徐坤
    li.na-tab
        button.na-tab-name 陈立农
    li.na-tab
        button.na-tab-name 范丞丞
        button.na-tab-operation
            svg(data-icon='tips/outline/close')

--gap-tabs 间隔
--underline-width-tab-name 激活时的文本下划线高度
--padding-horizontal-tab-name 横向文本内距
--padding-vertical-tab-name 纵向文本内距
--opacity-tab-operation 操作图示透明度
--color-tabs 字体/操作图示颜色
--background-color-tabs 背景色
--font-size-tabs 字体大小
--line-height-tabs 行高

页签列表需要使用js来控制，变量设置得多也是为了封装js方便在透过shadowDOM设置样式

这里只展示样式，衍生的lit库等见主页

### `.lg`

ul.na-tabs.lg 预设更大的变量值

ul.na-tabs.lg(
    data-primary="danger"
    style="
        --background-color-tabs: var(--black);  \\
        color: rgb(var(--white))                \\
    "
)
    li.na-tab(data-active)
        button.na-tab-name 蔡徐坤
    li.na-tab
        button.na-tab-name 陈立农
    li.na-tab
        button.na-tab-name 范丞丞
        button.na-tab-operation
            svg(data-icon='tips/outline/close')

list

## <ul>

## <ol>

## tabs

### .lg

## `<ul>`

## `<ol>`

### `.lg`