README

向仪表板添加多种列表

安装

composer require dillingham/nova-list-card

基本用法

php artisan nova:list-card RecentUsers

<?php

namespace App\Nova\Metrics;

use App\Nova\User;
use NovaListCard\ListCard;

class RecentUsers extends ListCard
{
    /**
     * Setup the card options
     */
    public function __construct()
    {
        $this->resource(User::class)
            ->heading('Recent Users')
            ->orderBy('created_at', 'desc')
            ->timestamp()
            ->viewAll();
    }

查看更多示例

可能的场景

• 最新资源 / 最旧资源
• 即将到来 / 过期资源
• 按关系计数最多的顶级资源
• 按关系列总和最多的顶级资源

卡片宽度

设置卡片的宽度，默认 1/3

->width('3/5')

卡片标题

->heading('Top Bloggers')

资源副标题

在标题下方显示资源的 副标题

->subtitle(),

或在标题下方显示资源的属性

->subtitle('city'),

时间戳

在资源标题下方添加时间戳

可选：作为侧值添加，见下文。

默认值：created_at & moment.js 格式：MM/DD/YYYY

->timestamp(),
->timestamp('due_at'),
->timestamp('completed_at', 'MM/DD'),

相对时间戳： 5 天前 | 5 天后

->timestamp('completed_at', 'relative'),

侧值

在右侧显示资源值

->value('city'),

聚合计数

添加关系的计数

->resource(Category::class)
->withCount('posts')
->value('category_posts'),

聚合总和

添加关系列的总和

->resource(User::class)
->withSum('orders', 'total')
->value('orders_sum'),

值格式化

您可以使用 numeral.js 改变值输出

-value('orders_sum') // 55200
-value('orders_sum', '0.0a') // 55.2k
-value('orders_sum', '($ 0.00 a)') // $55.2k

值时间戳：为 moment.js 格式 添加第三个参数

->value('created_at') // 2019-04-27 00:00:00
->value('created_at', 'MM/DD', 'timestamp') // 04/27
->value('created_at', 'relative', 'timestamp') // 5 days ago

限制

设置要显示的项目数，默认：5

->limit(3)

排序

设置资源的排序顺序

->orderBy('scheduled_at', 'desc')

显示“全部查看”链接

您可以链接到资源的索引

->viewAll()

或链接到附加到资源的透镜

->viewAllLens('most-popular-users')

页脚链接

您可以选择链接到 URL 而不是使用 viewAll

->footerLink('Google', 'https://google.com')

范围资源

检查卡片 URI 键在 IndexQuery 中

public static function indexQuery($request, $query)
{
    if($request->input('nova-list-card') == 'upcoming-tasks') {
        $query->whereNull('completed_at');
    }

    return $query;
}

CSS 类

如果您有自己主题的 theme.css，则可以轻松定制样式

.nova-list-card {}
.nova-list-card-heading {}
.nova-list-card-body {}
.nova-list-card-item {}
.nova-list-card-title {}
.nova-list-card-subtitle {}
.nova-list-card-timestamp {}
.nova-list-card-value {}
.nova-list-card-footer-link {}

还包括特定资源的类等

.nova-list-card.users.most-tasks

还可以针对特定行

.nova-list-card-item-1 {}
.nova-list-card-item-2 {}
.nova-list-card-item-3 {}

URI 键添加到卡片中

#upcoming-tasks {}

您还可以手动添加类

->classes('font-bold text-red some-custom-class')

您还可以添加备选行格式化

->zebra()

示例

->resource(Contact::class)
->heading('Recent Contacts')
->subtitle('email')
->timestamp()
->limit(3)
->viewAll(),

->resource(Contact::class)
->heading('Contacts: Most tasks', 'Tasks')
->orderBy('tasks_count', 'desc')
->subtitle('email')
->value('tasks_count')
->withCount('tasks')
->zebra()
->viewAll(),

->resource(Contact::class)
->heading('Top Opportunities', 'Estimates')
->withSum('opportunities', 'estimate')
->value('opportunities_sum', '0.0a')
->viewAllLens('top-opportunities')
->orderBy('opportunities_sum', 'desc'),

方法