mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
18 lines
28 KiB
JavaScript
18 lines
28 KiB
JavaScript
import{_ as e,E as l,c as h,o as n,aR as d,I as i,a as t,w as a}from"./chunks/framework.C7RrxATG.js";const F=JSON.parse('{"title":"Cell","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/component/cell.md","filePath":"en-US/component/cell.md","lastUpdated":1762249100000}'),k={name:"en-US/component/cell.md"},p=d(`<h1 id="cell" tabindex="-1">Cell <a class="header-anchor" href="#cell" aria-label="Permalink to "Cell""></a></h1><p>Cells are used to group information and actions for a single subject.</p><h2 id="basic-usage" tabindex="-1">Basic Usage <a class="header-anchor" href="#basic-usage" aria-label="Permalink to "Basic Usage""></a></h2><p>The <code>title</code> attribute sets the left title of the cell, and the <code>value</code> attribute sets the right content of the cell.</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Title"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Content"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="icon" tabindex="-1">Icon <a class="header-anchor" href="#icon" aria-label="Permalink to "Icon""></a></h2><p>The <code>icon</code> attribute sets the icon class name on the left side of the cell.</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Title"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Content"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"setting"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="large-size" tabindex="-1">Large Size <a class="header-anchor" href="#large-size" aria-label="Permalink to "Large Size""></a></h2><p>The <code>size</code> attribute can be set to <code>large</code> to increase the cell height.</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Title"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Content"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"large"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="groups" tabindex="-1">Groups <a class="header-anchor" href="#groups" aria-label="Permalink to "Groups""></a></h2><p>Cells can be grouped using the <code>wd-cell-group</code> component.</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell-group</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Group 1"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Title"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Content"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Title"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Content"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell-group</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell-group</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Group 2"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Title"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Content"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Title"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Content"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell-group</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="custom-content" tabindex="-1">Custom Content <a class="header-anchor" href="#custom-content" aria-label="Permalink to "Custom Content""></a></h2><p>The cell component provides three slots: default slot, title slot, and icon slot, which can be used to customize the content.</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Title"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Custom Content</</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Content"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"title"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Title</</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"margin-top: 5px; font-size: 12px; color: #999;"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Subtitle</</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Title"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Content"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"icon"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"custom-icon"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="clickable" tabindex="-1">Clickable <a class="header-anchor" href="#clickable" aria-label="Permalink to "Clickable""></a></h2><p>The <code>clickable</code> attribute sets whether the cell is clickable. If set to <code>true</code>, the cell will have a click effect and a right arrow will be displayed.</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Title"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Content"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> clickable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="link" tabindex="-1">Link <a class="header-anchor" href="#link" aria-label="Permalink to "Link""></a></h2><p>The <code>is-link</code> attribute sets whether the cell is a link. If set to <code>true</code>, a right arrow will be displayed. The <code>link-type</code> attribute sets the link type, which can be <code>navigateTo</code>, <code>redirectTo</code>, <code>reLaunch</code>, <code>switchTab</code>. The <code>url</code> attribute sets the link path.</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Title"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Content"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> is-link</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> url</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"/pages/index/index"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> link-type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"switchTab"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="vertical-alignment" tabindex="-1">Vertical Alignment <a class="header-anchor" href="#vertical-alignment" aria-label="Permalink to "Vertical Alignment""></a></h2><p>The <code>center</code> attribute sets whether the left and right content of the cell is vertically centered.</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Title"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Content"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="cell-group-attributes" tabindex="-1">Cell Group Attributes <a class="header-anchor" href="#cell-group-attributes" aria-label="Permalink to "Cell Group Attributes""></a></h2><table tabindex="0"><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Default</th><th>Version</th></tr></thead><tbody><tr><td>title</td><td>Group title</td><td>string</td><td>-</td><td>-</td></tr><tr><td>value</td><td>Group value</td><td>string</td><td>-</td><td>-</td></tr><tr><td>border</td><td>Whether to show the outer border</td><td>boolean</td><td>true</td><td>-</td></tr></tbody></table><h2 id="cell-attributes" tabindex="-1">Cell Attributes <a class="header-anchor" href="#cell-attributes" aria-label="Permalink to "Cell Attributes""></a></h2><table tabindex="0"><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Default</th><th>Version</th></tr></thead><tbody><tr><td>title</td><td>Left title</td><td>string</td><td>-</td><td>-</td></tr><tr><td>value</td><td>Right content</td><td>string</td><td>-</td><td>-</td></tr><tr><td>icon</td><td>Left icon class name, see Icon component for optional values</td><td>string</td><td>-</td><td>-</td></tr><tr><td>icon-size</td><td>Icon size</td><td>string | number</td><td>-</td><td>1.13.0</td></tr><tr><td>icon-prefix</td><td>Icon class name prefix, same as Icon component</td><td>string</td><td>'wd-icon'</td><td>-</td></tr><tr><td>label</td><td>Description below the title</td><td>string</td><td>-</td><td>-</td></tr><tr><td>is-link</td><td>Whether to show the right arrow and click effect</td><td>boolean</td><td>false</td><td>-</td></tr><tr><td>clickable</td><td>Whether to show the click effect</td><td>boolean</td><td>false</td><td>-</td></tr><tr><td>link-type</td><td>Link type, can be 'navigateTo', 'redirectTo', 'reLaunch', 'switchTab'</td><td>string</td><td>navigateTo</td><td>-</td></tr><tr><td>url</td><td>Link path, valid when is-link is true</td><td>string</td><td>-</td><td>-</td></tr><tr><td>to</td><td>Route object, same as the to attribute of vue-router, valid when is-link is true</td><td>string / object</td><td>-</td><td>-</td></tr><tr><td>replace</td><td>If true, the navigation will not leave a history record, valid when is-link is true</td><td>boolean</td><td>false</td><td>-</td></tr><tr><td>size</td><td>Cell size, can be 'large'</td><td>string</td><td>-</td><td>-</td></tr><tr><td>title-width</td><td>Title width, with unit</td><td>string</td><td>-</td><td>-</td></tr><tr><td>center</td><td>Whether to vertically center the left and right content</td><td>boolean</td><td>false</td><td>-</td></tr><tr><td>required</td><td>Whether to show the required asterisk</td><td>boolean</td><td>false</td><td>-</td></tr><tr><td>marker-side</td><td>Position of the required marker</td><td>'before' | 'after'</td><td>'before'</td><td>1.12.0</td></tr><tr><td>on</td><td>Whether to show the on icon on the right</td><td>boolean</td><td>false</td><td>-</td></tr><tr><td>bordered</td><td>Whether to show the bottom border</td><td>boolean</td><td>true</td><td>-</td></tr><tr><td>center-title</td><td>Whether to center the title</td><td>boolean</td><td>false</td><td>0.1.1</td></tr><tr><td>ellipsis</td><td>Whether to truncate content with ellipsis when it overflows</td><td>boolean</td><td>false</td><td>1.11.0</td></tr><tr><td>use-title-slot</td><td>Whether to enable title slot, enabled by default to solve v-slot and v-if conflict issues</td><td>boolean</td><td>true</td><td>1.11.0</td></tr></tbody></table><h2 id="cell-events" tabindex="-1">Cell Events <a class="header-anchor" href="#cell-events" aria-label="Permalink to "Cell Events""></a></h2><table tabindex="0"><thead><tr><th>Event Name</th><th>Description</th><th>Parameters</th><th>Version</th></tr></thead><tbody><tr><td>click</td><td>Triggered when the cell is clicked</td><td>event: Event</td><td>-</td></tr></tbody></table><h2 id="cell-slots" tabindex="-1">Cell Slots <a class="header-anchor" href="#cell-slots" aria-label="Permalink to "Cell Slots""></a></h2><table tabindex="0"><thead><tr><th>Name</th><th>Description</th><th>Version</th></tr></thead><tbody><tr><td>title</td><td>Custom title</td><td>-</td></tr><tr><td>icon</td><td>Custom icon</td><td>-</td></tr><tr><td>label</td><td>Custom label</td><td>-</td></tr><tr><td>default</td><td>Custom right content</td><td>-</td></tr></tbody></table><h2 id="cell-group-slots" tabindex="-1">Cell Group Slots <a class="header-anchor" href="#cell-group-slots" aria-label="Permalink to "Cell Group Slots""></a></h2><table tabindex="0"><thead><tr><th>Name</th><th>Description</th><th>Version</th></tr></thead><tbody><tr><td>default</td><td>Default slot</td><td>-</td></tr><tr><td>value</td><td>Custom value slot</td><td>-</td></tr></tbody></table><h2 id="cell-external-style-classes" tabindex="-1">Cell External Style Classes <a class="header-anchor" href="#cell-external-style-classes" aria-label="Permalink to "Cell External Style Classes""></a></h2><table tabindex="0"><thead><tr><th>Class Name</th><th>Description</th><th>Version</th></tr></thead><tbody><tr><td>custom-class</td><td>Root node custom class</td><td>-</td></tr><tr><td>custom-label-class</td><td>Label custom class</td><td>-</td></tr><tr><td>custom-value-class</td><td>Value custom class</td><td>-</td></tr><tr><td>custom-title-class</td><td>Title custom class</td><td>-</td></tr></tbody></table><h2 id="cell-group-external-style-classes" tabindex="-1">Cell Group External Style Classes <a class="header-anchor" href="#cell-group-external-style-classes" aria-label="Permalink to "Cell Group External Style Classes""></a></h2><table tabindex="0"><thead><tr><th>Class Name</th><th>Description</th><th>Version</th></tr></thead><tbody><tr><td>custom-class</td><td>Root node custom class</td><td>-</td></tr><tr><td>custom-title-class</td><td>Title custom class</td><td>-</td></tr></tbody></table><h2 id="source-code" tabindex="-1">Source Code <a class="header-anchor" href="#source-code" aria-label="Permalink to "Source Code""></a></h2>`,43);function r(o,E,c,g,u,y){const s=l("ExternalLink");return n(),h("div",null,[p,i(s,{href:"https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/subPages/cell"},{default:a(()=>[t("Documentation")]),_:1}),t(" • "),i(s,{href:"https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/uni_modules/wot-design-uni/components/wd-cell"},{default:a(()=>[t("Component")]),_:1})])}const C=e(k,[["render",r]]);export{F as __pageData,C as default};
|