import{e as a,o as t,G as n}from"./vendor.bd251973.js";const l={class:"markdown-body"},p=n(`

Cell \u5355\u5143\u683C

\u4ECB\u7ECD

\u5217\u8868\u9879\uFF0C\u53EF\u7EC4\u6210\u5217\u8868\u3002

\u5B89\u88C5

import { createApp } from 'vue';
import { Cell,Icon } from '@nutui/nutui';

const app = createApp();
app.use(Cell).use(Icon);

\u57FA\u672C\u7528\u6CD5

<nut-cell title="\u6211\u662F\u6807\u9898" desc="\u63CF\u8FF0\u6587\u5B57"></nut-cell>
<nut-cell title="\u6211\u662F\u6807\u9898" sub-title="\u526F\u6807\u9898\u63CF\u8FF0" desc="\u63CF\u8FF0\u6587\u5B57"></nut-cell>
<nut-cell title="\u70B9\u51FB\u6D4B\u8BD5" @click="testClick"></nut-cell>
<nut-cell title="\u5706\u89D2\u8BBE\u7F6E 0" round-radius="0"></nut-cell>

// ...
import { ref } from 'vue';
import { Toast } from '@nutui/nutui';
export default {
  setup() {
      const switchChecked = ref(true);
      const testClick = (event) => {
        Toast.text('\u70B9\u51FB\u4E8B\u4EF6')
      };
      return { testClick,switchChecked };
  }
}
// ...

\u76F4\u63A5\u4F7F\u7528\u63D2\u69FD

 <nut-cell title="\u6211\u662F\u6807\u9898" desc="\u63CF\u8FF0\u6587\u5B57">
  <div>\u81EA\u5B9A\u4E49\u5185\u5BB9</div>
 </nut-cell>

\u94FE\u63A5 | \u5206\u7EC4\u7528\u6CD5

<nut-cell-group title="\u94FE\u63A5 | \u5206\u7EC4\u7528\u6CD5">
  <nut-cell title="\u94FE\u63A5" is-link></nut-cell>
  <nut-cell title="URL \u8DF3\u8F6C" desc="https://jd.com" is-link url="https://jd.com"></nut-cell>
  <nut-cell title="\u8DEF\u7531\u8DF3\u8F6C \u2019/\u2018 " to="/"></nut-cell>
</nut-cell-group>

\u81EA\u5B9A\u4E49\u53F3\u4FA7\u7BAD\u5934\u533A\u57DF

<nut-cell-group title="\u81EA\u5B9A\u4E49\u53F3\u4FA7\u7BAD\u5934\u533A\u57DF">
  <nut-cell title="Switch">
    <template v-slot:link>
      <nut-switch v-model="switchChecked" />
    </template>
  </nut-cell>
</nut-cell-group>

\u81EA\u5B9A\u4E49\u5DE6\u4FA7 Icon \u533A\u57DF

<nut-cell-group title="\u81EA\u5B9A\u4E49\u5DE6\u4FA7 Icon \u533A\u57DF">
  <nut-cell title="\u56FE\u7247">
    <template v-slot:icon>
      <img class="nut-icon" src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png" />
    </template>
  </nut-cell>
</nut-cell-group>

\u5355\u5143\u683C\u5C55\u793A\u56FE\u6807

<nut-cell title="\u59D3\u540D" icon="my" desc="\u5F20\u4E09"></nut-cell>

\u53EA\u5C55\u793A desc \uFF0C\u53EF\u901A\u8FC7 desc-text-align \u8C03\u6574\u5185\u5BB9\u4F4D\u7F6E

<nut-cell desc-text-align="left" desc="\u5F20\u4E09"></nut-cell>

API

Prop

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
title	\u6807\u9898\u540D\u79F0	String	-
sub-title	\u5DE6\u4FA7\u526F\u6807\u9898	String	-
desc	\u53F3\u4FA7\u63CF\u8FF0	String	-
desc-text-align	\u53F3\u4FA7\u63CF\u8FF0\u6587\u672C\u5BF9\u9F50\u65B9\u5F0F text-align	String	right
is-link	\u662F\u5426\u5C55\u793A\u53F3\u4FA7\u7BAD\u5934\u5E76\u5F00\u542F\u70B9\u51FB\u53CD\u9988	Boolean	false
icon	\u5DE6\u4FA7 \u56FE\u6807\u540D\u79F0 \u6216\u56FE\u7247\u94FE\u63A5	String	-
round-radius	\u5706\u89D2\u534A\u5F84	Number	6px
url `\u5C0F\u7A0B\u5E8F\u4E0D\u652F\u6301`	\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740	String	-
to `\u5C0F\u7A0B\u5E8F\u4E0D\u652F\u6301`	\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u76EE\u6807\u8DEF\u7531\u5BF9\u8C61\uFF0C\u540C vue-router \u7684 to \u5C5E\u6027 \u5C5E\u6027	String\uFF5CObject	-
replace `\u5C0F\u7A0B\u5E8F\u4E0D\u652F\u6301`	\u662F\u5426\u5728\u8DF3\u8F6C\u65F6\u66FF\u6362\u5F53\u524D\u9875\u9762\u5386\u53F2	Boolean	false

Event

\u540D\u79F0	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
click	\u70B9\u51FB\u4E8B\u4EF6	event:Event

Slots

\u540D\u79F0	\u8BF4\u660E
icon `v3.1.4`	\u81EA\u5B9A\u4E49\u5DE6\u4FA7 icon \u533A\u57DF
default	\u81EA\u5B9A\u4E49\u5185\u5BB9
link	\u81EA\u5B9A\u4E49\u53F3\u4FA7 link \u533A\u57DF

`,27),c=[p],j={setup(e,{expose:s}){return s({frontmatter:{}}),(r,d)=>(t(),a("div",l,c))}};export{j as default};