NpCellGroup

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

Basic Usage

options supports all np-cell props.

浏览器不支持，请手动复制 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	boolean	-
arrow	Whether to show the right arrow	boolean	false
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