NpCellGroup

A cell group that batch-renders NpCell via the options config, with optional group title.

Basic Usage

options supports a subset of np-cell props, see NpCellGroupOption below.

浏览器不支持，请手动复制 group.en.vue

<script setup lang="tsx">
import { ref } from 'vue'
import { NpCellGroup } from '../index'
import type { NpCellGroupOption } from '../index'

const options = ref<NpCellGroupOption[]>([
  { label: 'Notifications' },
  { label: 'Sound' },
  { label: 'Vibration' },
])

const navOptions: NpCellGroupOption[] = [
  { label: 'Profile', arrow: true, hover: true },
  {
    label: 'Account Security',
    arrow: true,
    hover: true,
    description: 'Account security settings',
  },
  { label: 'Privacy', arrow: true, hover: true, value: 'Configured' },
  {
    key: 'storage',
    label: 'Storage',
    arrow: true,
    hover: true,
    value: () => <span style="color: #18a058">storage</span>,
    footer: () => (
      <span style="font-size: 12px; color: #8a8a8a">
        Supports render functions
      </span>
    ),
  },
]

const handleChange = (_keys: unknown[], item: NpCellGroupOption) => {
  console.log('changed:', item.label)
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px">
    <NpCellGroup title="Notifications" :options="options" />
    <NpCellGroup
      title="Account"
      bordered
      :options="navOptions"
      @change="handleChange"
    />
  </div>
</template>

Props

Prop	Description	Type	Default
title	Group title	string	-
options	Cell config list	NpCellGroupOption[]	[]
type	Control type on the left	'checkbox' | 'radio' | 'switch'	-
size	Size	'small' | 'medium' | 'large'	medium
bordered	Whether to show dividers	boolean	false

NpCellGroupOption

Prop	Description	Type	Default
key	Option identifier	string | number	current index
icon	Left icon	VNode | () => VNode	-
label	Cell label	string | VNode | () => VNode	-
value	Cell value	string | VNode | () => VNode	-
description	Cell description	string | VNode | () => VNode	-
footer	Bottom content	VNode | () => VNode	-
hover	Whether to enable hover state, falls back to the Cell config of NpConfigProvider when omitted	boolean	-
arrow	Whether to show the right arrow, falls back to the Cell config of NpConfigProvider when omitted	boolean	false (when no Cell config)
onClick	Click callback	() => void	-

Events

Event	Description	Callback
change	Triggered when the selection changes	(keys: NpCellGroupKeys, item: NpCellGroupOption) => void
update:keys	Triggered when the control state changes	(keys: NpCellGroupKeys) => void

Global Defaults

Use NpConfigProvider to change the default size / bordered. Props passed to the component itself always win; when hover / arrow are not set on an option, they fall back to the Cell config of NpConfigProvider.

<np-config-provider
  :component-options="{ CellGroup: { size: 'small', bordered: true } }"
>
  <np-cell-group :options="options" />
</np-config-provider>