Cell

Demo

Install

import React from 'react';
import { Cell } from 'vant-react';

Usage

Basic Usage

<Cell
      title={{ text: 'Title', fontSize: '14px' }}
      content={{ text: 'Content', fontSize: '12px' }}
    />
<Cell
      title={{ text: 'Title', fontSize: '14px' }}
      content={{ text: 'Content', fontSize: '12px' }}
      description={{ text: 'description', fontSize: '12px' }}
    />

Cell Icon

<Cell titleIcon={{ name: 'location-o', size: '12px' }}
      title={{ text: 'Title', fontSize: '14px' }}
      contentIcon={{ name: 'arrow', size: '12px' }}
      content={{ text: 'Content', fontSize: '12px' }} 
    />

Cell Tag

<Cell
      title={{ text: 'Title', fontSize: '14px' }}
      Tag={<Tag type='danger' text='Tag' />}
      content={{ text: 'Content', fontSize: '12px' }}
    />

Round Cell

<Cell title={{ text: 'Title', fontSize: '14px' }} round />

Value Only

<Cell title={{ text: 'Title', fontSize: '14px' }} round />

URL

<Cell
      title={{ text: 'URL', fontSize: '14px' }}
      url='www.google.com'
      replace
    />

Action

<Cell
      title={{ text: 'Click', fontSize: '14px' }}
      click={(e) => {
        alert(e);
      }}
    />

API

Props

Attribute	Description	Type	Default	Required
title	Cell title	object	-	optional
titleIcon	Left side icon name	object	-	optional
content	Cell content	object	-	optional
contentIcon	Right side icon name	object	-	optional
description	Cell description	object	-	optional
Tag	Cell tag	React Element	-	optional
url	Link URL	string	-	optional
replace	Whether open in current tab	boolean	-	optional
round	Whether to be round button	boolean	-	optional

Event

Event	Description	Arguments
click	Triggered when click cell and not disabled or loading	event: Event