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 | | 颜色 |