@cloud-ui/u-number-portlet.vue

UNumberPortlet 数字窗格

这里是数字窗格的基本描述。

示例

基本用法

<u-number-portlet title="服务数" :value="20"></u-number-portlet>

单位

<u-number-portlet title="公有云" :value="20" unit="%"></u-number-portlet>

对齐

<u-number-portlet title="公有云" :value="20" unit="%" alignment="center"
    style="width: 300px"></u-number-portlet>

布局

<template>
<u-grid-layout>
    <u-grid-layout-row :repeat="3">
        <u-grid-layout-column>
            <u-number-portlet title="服务数" :value="20"></u-number-portlet>
        </u-grid-layout-column>
        <u-grid-layout-column>
            <u-number-portlet title="实例数" :value="30"></u-number-portlet>
        </u-grid-layout-column>
        <u-grid-layout-column>
            <u-number-portlet title="请求数" :value="20"></u-number-portlet>
        </u-grid-layout-column>
    </u-grid-layout-row>
</u-grid-layout>
</template>

颜色

<template>
<u-grid-layout>
    <u-grid-layout-row :repeat="4">
        <u-grid-layout-column>
            <u-number-portlet title="服务数" :value="20" color="primary"></u-number-portlet>
        </u-grid-layout-column>
        <u-grid-layout-column>
            <u-number-portlet title="实例数" :value="30" color="success"></u-number-portlet>
        </u-grid-layout-column>
        <u-grid-layout-column>
            <u-number-portlet title="请求数" :value="20" color="warning"></u-number-portlet>
        </u-grid-layout-column>
        <u-grid-layout-column>
            <u-number-portlet title="错误数" :value="20" color="error"></u-number-portlet>
        </u-grid-layout-column>
    </u-grid-layout-row>
</u-grid-layout>
</template>

API

Props/Attrs

Prop/Attr	Type	Default	Description
value	Number		数值
title	String		标题
alignment	String	'left'	'left'``'center'``'right'
unit	String		单位
color	String		颜色