Press UI

# Cell

A cell is a single display item in a list.

# Code Demo

# Basic usage

Cell can be used alone or with CellGroup. CellGroup can provide top and bottom borders for Cell.

<press-cell-group>
   <press-cell title="cell" value="content" />
   <press-cell title="cell" value="content" label="description" :border="false" />
</press-cell-group>

# Card Style

Through the inset attribute of CellGroup, the cell can be converted to a rounded card style (supported since version 1.7.2).

<press-cell-group inset>
   <press-cell title="cell" value="content" />
   <press-cell title="cell" value="content" label="description information" />
</press-cell-group>

# cell size

The size of the cell can be controlled by the size attribute.

<press-cell title="cell" value="content" size="large" />
<press-cell title="cell" value="content" size="large" label="description information" />

# Show icon

Use the icon property to display an icon to the left of the title.

<press-cell title="cell" icon="location-o" />

# Show Arrows

After setting the is-link attribute, an arrow will be displayed on the right side of the cell, and the direction of the arrow can be controlled by the arrow-direction attribute.

<press-cell title="Cell" is-link />
<press-cell title="cell" is-link value="content" />
<press-cell title="cell" is-link value="content" arrow-direction="down" />

# page jump

The page jump can be performed through the url attribute, and the jump type can be controlled by the link-type attribute.

<press-cell
   is-link
   title="cell"
   link-type="navigateTo"
   url="/pages/dashboard/index"
/>

# Group title

The title of the group can be specified by the title property of CellGroup.

<press-cell-group title="Group 1">
   <press-cell title="cell" value="content" />
</press-cell-group>
<press-cell-group title="Group 2">
   <press-cell title="cell" value="content" />
</press-cell-group>

# Using slots

If the above usage does not meet your needs, you can use slots to customize the content.

<press-cell
   value="content"
   icon="shop-o"
   is-link
   :use-title-slot="true"
>
   <div slot="title">
     <div class="press-cell-text">cell</div>
     <press-tag type="danger">label</press-tag>
   </div>
</press-cell>
<press-cell title="Cell">
   <press-icon slot="right-icon" name="search" class="custom-icon" />
</press-cell>

# Vertical centering

The left and right content of the Cell can be vertically centered through the center property.

<press-cell center title="cell" value="content" label="description information" />

# API

# CellGroup Props

Parameter Description Type Default
title group title string -
inset Whether to display rounded corner card style boolean false
border Whether to show the outer border boolean true

# CellGroup external style class

class name description
custom-class root node style class

# Cell Props

Parameter Description Type Default
icon Left icon name or image link, see Icon component for optional values string -
title left title string | number -
title-width Title width, must include units string -
value right side content string | number -
label descriptive information below the title string -
size cell size, optional value is large string -
border Whether to show the bottom border boolean true
center Whether to vertically center the content boolean false
url Link address to jump after clicking string -
link-type link jump type, optional values are redirectTo switchTab reLaunch string navigateTo
clickable Whether to enable click feedback boolean false
is-link Whether to show the right arrow and enable click feedback boolean false
required Whether to show form required asterisks boolean false
arrow-direction Arrow direction, optional values are left up down string -
use-label-slot whether to use label slot boolean false
title-style title style string -

# Cell Events

Event Name Description Parameters
click Triggered when a cell is clicked -

# Cell Slot

Name Description
--- Custom value display content, if the value attribute is set, it will not take effect
title Custom title display content, if the title attribute is set, it will not take effect
label To customize label display content, you need to set the use-label-slot property
icon Custom icon display content, if the icon attribute is set, it will not take effect
right-icon Customize the right button, the default is arrow, if the is-link attribute is set, it will not take effect

# Cell external style class

class name description
custom-class root node style class
title-class title style class
label-class description information style class
value-class Right content style class

# Theme customization

--cell-font-size：
--cell-line-height：
--cell-height：
--cell-vertical-padding：
--cell-horizontal-padding：
--cell-text-color：
--cell-background-color：
--cell-border-color：
--cell-active-color：
--cell-required-color：
--cell-label-color：
--cell-label-font-size：
--cell-label-line-height：
--cell-label-margin-top：
--cell-value-color：
--cell-value-font-size：
--cell-icon-size：
--cell-right-icon-color：
--cell-large-vertical-padding：
--cell-large-title-font-size：
--cell-large-value-font-size：
--cell-large-label-font-size：
--cell-group-background-color：
--cell-group-title-color：
--cell-group-title-padding：
--cell-group-title-font-size：
--cell-group-title-line-height：
--cell-group-inset-padding：
--cell-group-inset-border-radius：
--cell-group-inset-title-padding：
横屏

← Col →