文档

Appearance

折叠面板 ​

注意点 ​

  1. 折叠面板通常会用在页面搜索里，点击高级搜索会展开收起

  2. 展开后的搜索项框要与搜索按钮对齐

  3. 折叠面板的头部搜索项非必须

使用方式 ​

  1. 使用全局组件 n-collapse

  2. 具名插槽：header 用于展示头部高级搜索之前的内容，自定义

  3. 具名插槽：content 用于展示折叠面板展开后的内容，自定义

  4. 代码

<a-card>
    <n-collapse>
        <template v-slot:header>
            <a-row>
                <a-col :xs="{offset:0}" :sm="{offset:8}" :lg="{offset:1}">
                    <a-form label-align="right">
                        <a-form-item label="频道">
                            <a-input-search value="" placeholder="请输入" enter-button />
                        </a-form-item>
                    </a-form>
                </a-col>
            </a-row>
        </template>
        <template v-slot:content>
            <a-row>
                <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <a-form-item label="频道名称搜索">
                        <a-input value="" placeholder="请输入" enter-button />
                    </a-form-item>
                </a-col>
                <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <a-form-item label="页面名称搜索">
                        <a-input value="" placeholder="请输入" enter-button />
                    </a-form-item>
                </a-col>
                <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <a-form-item label="页面路径搜索：">
                        <a-input value="" placeholder="请输入" enter-button />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :xs="{offset:0}" :sm="{offset:8}" :lg="{offset:2}">
                    <a-space>
                        <n-button type="search"></n-button>
                        <n-button type="reset"></n-button>
                    </a-space>
                </a-col>
            </a-row>
        </template>
    </n-collapse>
</a-card>