NpCell

Cell component.

Basic Usage

Use type to specify the control type. Supports checkbox / radio / switch controls, icons and right arrows.

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

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

const checkbox = ref(false)
const radio = ref(false)
const switchVal = ref(false)

const iconRender = () => {
  return <img src="/logo.png" alt="icon" />
}

const valueRender = () => {
  return <span style="color: #18a058">Render Value</span>
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 8px">
    <np-cell v-model:checked="checkbox" type="checkbox" label="Checkbox Type" />
    <np-cell v-model:checked="radio" type="radio" label="Radio Type" />
    <np-cell
      v-model:checked="switchVal"
      type="switch"
      label="Switch Type"
      :value="switchVal ? 'On' : 'Off'"
    />
    <np-cell label="With Arrow" :arrow="true" value="Navigate" />
    <np-cell label="With Icon" :icon="iconRender" />
    <np-cell
      v-model:checked="checkbox"
      type="checkbox"
      label="With Footer"
      value="Description"
      description="Footer is below the main content and does not affect the left control and content alignment"
    >
      <template #footer>
        <div style="font-size: 12px; color: #8a8a8a">
          Footer is below the main content and does not affect the left control
          and content alignment
        </div>
      </template>
    </np-cell>
    <np-cell label="Render Function" :value="valueRender" />
    <np-cell label="Plain Text, No Control" />
  </div>
</template>

Size

Use size to set the size.

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

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

const checkbox = ref(false)

const iconRender = () => {
  return <img src="/logo.png" alt="icon" />
}
</script>

<template>
  <div>
    <NpCell
      v-model:checked="checkbox"
      size="small"
      :icon="iconRender"
      type="checkbox"
      label="Checkbox Type"
      :arrow="true"
    />
    <NpCell
      v-model:checked="checkbox"
      :icon="iconRender"
      type="checkbox"
      label="Checkbox Type"
      :arrow="true"
    />
    <NpCell
      v-model:checked="checkbox"
      size="large"
      :icon="iconRender"
      type="checkbox"
      label="Checkbox Type"
      :arrow="true"
    />
  </div>
</template>

Bottom Border

Use bordered to show the bottom border.

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

<script setup lang="tsx">
import { NpCell } from '../index'

const iconRender = () => {
  return <img src="/logo.png" alt="icon" />
}
</script>

<template>
  <div>
    <np-cell type="checkbox" label="Profile" :icon="iconRender" arrow bordered>
      <template #footer>
        <span style="font-size: 12px; color: #8a8a8a">
          Basic info and avatar
        </span>
      </template>
    </np-cell>
    <np-cell type="checkbox" label="Account Settings" arrow bordered />
    <np-cell type="checkbox" label="Privacy" arrow />
  </div>
</template>

Props

Prop	Description	Type	Default
v-model:checked	Checked state of the control	boolean	false
type	Control type on the left	'checkbox' | 'radio' | 'switch'	-
hover	Whether to enable hover state	boolean	true if type is set, otherwise false
icon	Left icon	VNode | () => VNode	-
label	Cell label	string | VNode | () => VNode	-
value	Cell value	string | VNode | () => VNode	-
description	Cell description	string | VNode | () => VNode	-
arrow	Whether to show the right arrow	boolean	false
bordered	Whether to show the bottom border of the content area	boolean	false
size	Cell size	'small' | 'medium' | 'large'	'medium'

Slots

Name	Description
footer	Bottom content, displayed below the main content area

Events

Event	Description	Callback
update:checked	Triggered when the control state changes	(value: boolean) => void

Global Defaults

Use NpConfigProvider to change the default props globally. Props passed to the component itself always win.

<np-config-provider :component-options="{ Cell: { size: 'large', arrow: true } }">
  <np-cell label="Cell" />
</np-config-provider>