后端用户界面元素

• Scoreboards
• Indicators
• 饼形图
• 条形图

后端用户界面包括许多可在页面上使用的 HTML 控件。这些控件不会作为任何类型的小部件公开，但可以简化您的项目可能具有的一些自定义 UI 需求。

#Scoreboards

记分板控件通常显示在后端列表上方，显示一些摘要或最重要的数据。该控件可以包含任何图表和指标（见下文）。显示在列表小部件上方的记分牌控件标记示例：

<div class="scoreboard">
    <div data-control="toolbar">
        <div class="scoreboard-item control-chart" data-control="chart-pie">
            <ul>
                <li data-color="#95b753">Published <span>84</span></li>
                <li data-color="#e5a91a">Drafts <span>12</span></li>
                <li data-color="#cc3300">Deleted <span>18</span></li>
            </ul>
        </div>

        <div class="scoreboard-item control-chart" data-control="chart-bar">
            <ul>
                <li data-color="#95b753">Published <span>84</span></li>
                <li data-color="#e5a91a">Drafts <span>12</span></li>
                <li data-color="#cc3300">Deleted <span>18</span></li>
            </ul>
        </div>

        <div class="scoreboard-item title-value">
            <h4>Weight</h4>
            <p>100</p>
            <p class="description">unit: kg</p>
        </div>
    </div>
</div>

<?= $this->listRender() ?>

请注意，您应该使用scoreboard-item 记分牌元素的类。

#Indicators

指标是具有标题、值和描述的简单报告元素。您可以使用positive 和negative 值元素上的类。字体秋天 图标类允许在值之前添加图标。

<div class="scoreboard-item title-value">
    <h4>Weight</h4>
    <p>100</p>
    <p class="description">unit: kg</p>
</div>

<div class="scoreboard-item title-value">
    <h4>Comments</h4>
    <p class="positive">44</p>
    <p class="description">previous month: 32</p>
</div>

<div class="scoreboard-item title-value">
    <h4>Length</h4>
    <p class="negative">31</p>
    <p class="description">previous: 42</p>
</div>

<div class="scoreboard-item title-value">
    <h4>Latest commenter</h4>
    <p class="wn-icon-star">John Smith</p>
    <p class="description">registered: yes</p>
</div>

<div class="scoreboard-item title-value" data-control="goal-meter" data-value="88">
    <h4>goal meter</h4>
    <p>88%</p>
    <p class="description">37 posts remain</p>
</div>

NOTE: 该示例是在记分牌区域的上下文中给出的。如果您使用指标报告小部件 部分，班级scoreboard-item 不应该使用。

#饼形图

饼图将信息输出为圆图，中心有可选标签。示例标记：

<div
    class="control-chart centered wrap-legend"
    data-control="chart-pie"
    data-size="200"
    data-center-text="100">
    <ul>
        <li>Label 1 <span>100</span></li>
        <li>Label 2 <span>100</span></li>
        <li>Label 3 <span>100</span></li>
    </ul>
</div>

#条形图

下一个示例显示了条形图标记。这wrap-legend 类是可选的，它管理图例布局。这data-height 和data-full-width 属性也是可选的。

<div
    class="control-chart wrap-legend"
    data-control="chart-bar"
    data-height="100"
    data-full-width="1">
    <ul>
        <li>Label 1 <span>100</span></li>
        <li>Label 2 <span>100</span></li>
        <li>Label 3 <span>100</span></li>
    </ul>
</div>