@cloud-ui/i-status.vue

IStatus 状态图标

• 示例
  • 基本用法
  • 修改尺寸
• API
  • Props/Attrs
  • Slots

请在这里添加描述

示例

基本用法

<u-linear-layout>
    <i-status name="success">运行中</i-status>
    <i-status name="paused">已停服</i-status>
    <i-status name="warning">异常</i-status>
    <i-status name="waiting">重启中</i-status>
    <i-status name="error">更新失败</i-status>
    <i-status name="enabled">启用</i-status>
    <i-status name="disabled">禁用</i-status>
    <i-status name="unused">未使用</i-status>
    <i-status name="end">结束</i-status>
    <i-status name="expired">失效</i-status>
    <i-status name="locked">已锁定</i-status>
    <i-status name="unlocked">已解锁</i-status>
    <i-status name="binding">已绑定</i-status>
    <i-status name="migrating">迁移</i-status>
    <i-status name="unpaid">未付款</i-status>
</u-linear-layout>

修改尺寸

<u-linear-layout direction="vertical">
    <u-linear-layout>
        <i-status size="mini" name="success">运行中</i-status>
        <i-status size="mini" name="paused">已停服</i-status>
        <i-status size="mini" name="warning">异常</i-status>
        <i-status size="mini" name="waiting">重启中</i-status>
        <i-status size="mini" name="error">更新失败</i-status>
        <i-status size="mini" name="enabled">启用</i-status>
        <i-status size="mini" name="disabled">禁用</i-status>
        <i-status size="mini" name="unused">未使用</i-status>
        <i-status size="mini" name="end">结束</i-status>
        <i-status size="mini" name="expired">失效</i-status>
        <i-status size="mini" name="locked">已锁定</i-status>
        <i-status size="mini" name="unlocked">已解锁</i-status>
        <i-status size="mini" name="binding">已绑定</i-status>
        <i-status size="mini" name="migrating">迁移</i-status>
        <i-status size="mini" name="unpaid">未付款</i-status>
    </u-linear-layout>
    <u-linear-layout>
        <i-status size="small" name="success">运行中</i-status>
        <i-status size="small" name="paused">已停服</i-status>
        <i-status size="small" name="warning">异常</i-status>
        <i-status size="small" name="waiting">重启中</i-status>
        <i-status size="small" name="error">更新失败</i-status>
        <i-status size="small" name="enabled">启用</i-status>
        <i-status size="small" name="disabled">禁用</i-status>
        <i-status size="small" name="unused">未使用</i-status>
        <i-status size="small" name="end">结束</i-status>
        <i-status size="small" name="expired">失效</i-status>
        <i-status size="small" name="locked">已锁定</i-status>
        <i-status size="small" name="unlocked">已解锁</i-status>
        <i-status size="small" name="binding">已绑定</i-status>
        <i-status size="small" name="migrating">迁移</i-status>
        <i-status size="small" name="unpaid">未付款</i-status>
    </u-linear-layout>
    <u-linear-layout>
        <i-status size="normal" name="success">运行中</i-status>
        <i-status size="normal" name="paused">已停服</i-status>
        <i-status size="normal" name="warning">异常</i-status>
        <i-status size="normal" name="waiting">重启中</i-status>
        <i-status size="normal" name="error">更新失败</i-status>
        <i-status size="normal" name="enabled">启用</i-status>
        <i-status size="normal" name="disabled">禁用</i-status>
        <i-status size="normal" name="unused">未使用</i-status>
        <i-status size="normal" name="end">结束</i-status>
        <i-status size="normal" name="expired">失效</i-status>
        <i-status size="normal" name="locked">已锁定</i-status>
        <i-status size="normal" name="unlocked">已解锁</i-status>
        <i-status size="normal" name="binding">已绑定</i-status>
        <i-status size="normal" name="migrating">迁移</i-status>
        <i-status size="normal" name="unpaid">未付款</i-status>
    </u-linear-layout>
    <u-linear-layout>
        <i-status size="large" name="success">运行中</i-status>
        <i-status size="large" name="paused">已停服</i-status>
        <i-status size="large" name="warning">异常</i-status>
        <i-status size="large" name="waiting">重启中</i-status>
        <i-status size="large" name="error">更新失败</i-status>
        <i-status size="large" name="enabled">启用</i-status>
        <i-status size="large" name="disabled">禁用</i-status>
        <i-status size="large" name="unused">未使用</i-status>
        <i-status size="large" name="end">结束</i-status>
        <i-status size="large" name="expired">失效</i-status>
        <i-status size="large" name="locked">已锁定</i-status>
        <i-status size="large" name="unlocked">已解锁</i-status>
        <i-status size="large" name="binding">已绑定</i-status>
        <i-status size="large" name="migrating">迁移</i-status>
        <i-status size="large" name="unpaid">未付款</i-status>
    </u-linear-layout>
</u-linear-layout>

API

Props/Attrs

Prop/Attr	Type	Options	Default	Description
name	string			图标名称
size	enum	'small', 'normal', 'large'	'normal'	图标尺寸

Slots

(default)

插入文本或 HTML。