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

0.9.1 • Public • Published

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

Package Sidebar

Install

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

Weekly Downloads

1

Version

0.9.1

License

MIT

Unpacked Size

383 kB

Total Files

21

Last publish

Collaborators

  • lip966
  • damowangdexiaogenban
  • lifuquan
  • rainfore
  • zhangxiaoyudaisy