Skip to content

RCollapseGrid 折叠面板

把一堆过滤条件组件收起来,让界面看着舒服一点。

基础使用

code
tsx
import { NCollapseGrid, RForm } from '@/components'
import { NInput, NFormItemGi, NButton ,NFlex} from 'naive-ui'

const Demo = () => {
  return (
    <RForm labelPlacement="left" showFeedback={false}>
      <NCollapseGrid cols={3} collapsedRows={1}>
        {{
          default: () => (
            <>
              <NFormItemGi>
                <NInput />
              </NFormItemGi>
            </>
          ),
          action: () => (
            <NFlex>
              <NButton>查询</NButton>
              <NButton>添加</NButton>
            </NFlex>
          ),
        }}
      </NCollapseGrid>
    </RForm>
  )
}

props

名称类型默认值说明
openbooleanfalse是否展开折叠
collapseToggleTextCollapseToggleText['展开', '收起']自定义展开与收起按钮文案
borderedbooleantrue显示边框
onUpdateValue(bool: boolean) => voidundefinedopen 状态更新的回调函数

其余的配置项,与 NGrid Props 完全一致。

slots

名称参数说明
default()默认内容
action()功能插槽,放置操作按钮

Released under the MIT License.