<script setup>
import Status from './index.vue'

</script>

# 状态 {#status}

## 用法

使用 type, text, color, spinSize 和 spinStyle 来定义 KsStatus 组件的样式和行为。

<ClientOnly>
    <Status/>
</ClientOnly>

这里是完整代码

<div class="composition-api" style="font-size:14px;">

```vue
<script setup>
import { KsStatus } from '@ksconsole/components'

</script>

<template>
  <div class="flex">
    <KsStatus color="#D8BFD8" text="自定义颜色"/>
    <KsStatus type="success" text="成功"/>
    <KsStatus type="error" text="错误"/>
    <KsStatus type="warning" text="警告"/>
    <KsStatus type="info" text="信息"/>
    <KsStatus type="loading" text="加载中"/>
    <KsStatus type="loading" text="增加loading大小" spinSize="small"/>
    <KsStatus type="loading" text="自定义loading大小" :spinStyle="{ width: '24px' }"/>
  </div>
</template>

<style scoped lang="less">
  .flex {
    display: flex;
  }
  .status-wrap, .loading-wrap {
    margin-right: 20px;
  }
</style>




```

</div>

### 属性

<table class="md-table">
		<thead>
			<tr>
				<th>属性名</th>
				<th>类型</th>
				<th>默认值</th>
				<th>说明</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>type</td>
				<td>String</td>
				<td>''</td>
				<td>Spin 的类型，可选值为 'success', 'error', 'warning', 'info', 'loading'</td>
			</tr>
			<tr>
				<td>text</td>
				<td>String</td>
				<td>''</td>
				<td>Spin 显示的文本</td>
			</tr>
			<tr>
				<td>color</td>
				<td>String</td>
				<td>''</td>
				<td>Spin 的颜色，如果设置了 type，则会忽略该属性</td>
			</tr>
			<tr>
				<td>spinSize</td>
				<td>String</td>
				<td>'mini'</td>
				<td>Spin 的尺寸，可选值为 'large', 'default', 'small', 'mini'</td>
			</tr>
			<tr>
				<td>spinStyle</td>
				<td>Object</td>
				<td>{ width: '14px' }</td>
				<td>Spin 的样式，可以用来设置自定义样式</td>
			</tr>
		</tbody>
	</table>
