翻译进度
12
分块数量
3
参与人数

卡片

这是一篇协同翻译的文章,你可以点击『我来翻译』按钮来参与翻译。

概述

卡片类似于资源工具,但却是一种更小、更微型的工具,它们可以被放置在仪表盘中,用来显示或提示各类资源的简要信息或明细信息。事实上,如果你已经使用过 Nova metrics 的话,说明你已经尝试过卡片。同时,可以通过自定义卡片来创建属于你自己的资源工具。

Chinkiver 翻译于 1年前

定义卡片

卡片可以使用 Artisan 命令 nova:card 来创建。默认情况下,所有新创建的卡片都将被保持在你应用根目录下的 nova-components 文件夹中。当使用 Artisan 命令 nova:card 创建卡片时,所传递的卡片名称因遵从 Composer vendor/package 格式。因此,如果我们要创建一个叫『流量分析』的卡片时,我们应该运行如下命令:

artisan nova:card acme/analytics
Chinkiver 翻译于 1年前

When generating a card, Nova will prompt you to install the card's NPM dependencies, compile its assets, and update your application's composer.json file. All custom cards are registered with your application as a Composer "path" repository.

Nova cards include all of the scaffolding necessary to build your card. Each card even contains its own composer.json file and is ready to be shared with the world on GitHub or the source control provider of your choice.

Registering Cards

Nova cards may be registered in your resource's cards method. This method returns an array of cards available to the resource. To register your card, add your card to the array of cards returned by this method:

use Acme\Analytics\Analytics;

/**
 * Get the cards available for the resource.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return array
 */
public function cards(Request $request)
{
    return [new Analytics];
}

Card Options

Often, you will need to allow the consumer's of your card to customize run-time configuration options on the card. You may do this by exposing methods on your card class. These methods may call the card's underlying withMeta method to add information to the card's metadata, which will be available within your Card.vue component. The withMeta method accepts an array of key / value options:

<?php

namespace Acme\Analytics;

use Laravel\Nova\Card;

class Analytics extends Card
{
    /**
     * The width of the card (1/3, 1/2, or full).
     *
     * @var string
     */
    public $width = '1/3';

    /**
     * Indicates that the analytics should show current visitors.
     *
     * @return $this
     */
    public function currentVisitors()
    {
        return $this->withMeta(['currentVisitors' => true]);
    }

    /**
     * Get the component name for the card.
     *
     * @return string
     */
    public function component()
    {
        return 'analytics';
    }
}

Building Cards

Each card generated by Nova includes its own service provider and "card" class. Using the analytics card as an example, the card class will be located at src/Analytics.php.

The card's service provider is also located within the src directory of the card, and is registered in your card's composer.json file so that it will be auto-loaded by the Laravel framework.

Authorization

If you would like to only expose a given card to certain users, you may chain the canSee method onto your card's registration. The canSee method accepts a Closure which should return true or false. The Closure will receive the incoming HTTP request:

use Acme\Analytics\Analytics;

/**
 * Get the cards available for the resource.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return array
 */
public function cards(Request $request)
{
    return [
        (new Analytics)->canSee(function ($request) {
            return false;
        }),
    ];
}

Routing

Often, you will need to define Laravel routes that are called by your card. When Nova generates your card, it creates a routes/api.php routes file. If needed, you may use this file to define any routes your card requires.

All routes within this file are automatically defined inside a route group by your card's CardServiceProvider. The route group specifies that all routes within the group should receive a /nova-vendor/card-name prefix, where card-name is the "kebab-case" name of your card. So, for example, /nova-vendor/analytics. You are free to modify this route group definition, but take care to make sure your Nova card will co-exist with other Nova packages.

Routing Authorization

When building routes for your card, you should always add authorization to these routes using Laravel gates or policies.

Assets

When Nova generates your card, resources/js and resources/sass directories are generated for you. These directories contain your card's JavaScript and Sass stylesheets. The primary files of interest in these directories are: resources/js/components/Card.vue and resources/sass/card.scss.

The Card.vue file is a single-file Vue component that contains your card's front-end. From this file, you are free to build your card however you want. Your card can make HTTP requests using Axios, which is available globally. In addition, the moment.js and underscore.js libraries are globally available.

Card Properties

Your card's Card.vue component receives a card Vue prop. This property provides access to any card options that may be available:

const issuesRefunds = this.card.issuesRefunds;

Registering Assets

Your Nova card's service provider registers your card's compiled assets so that they will be available to the Nova front-end:

/**
 * Bootstrap any application services.
 *
 * @return void
 */
public function boot()
{
    $this->app->booted(function () {
        $this->routes();
    });

    Nova::serving(function (ServingNova $event) {
        Nova::script('{{ component }}', __DIR__.'/../dist/js/card.js');
        Nova::style('{{ component }}', __DIR__.'/../dist/css/card.css');
    });
}

JavaScript Bootstrap & Routing

Your component is bootstrapped and registered in the resources/js/card.js file. You are free to modify this file or register additional components here as needed.

编译资源

Nova 创建卡片的同时生成一个 webpack.mix.js 文件。你可以使用 NPM devprod 命令构建卡片:

// 在本地开发环境下编译资源...
npm run dev

// 编译并压缩资源...
npm run prod

此外,你还可以运行 NPM watch 命令在文件改动时自动编译:

npm run watch
sunnykevin 翻译于 8个月前

本文章首发在 LearnKu.com 网站上。
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
贡献者:3
讨论数量: 0
发起讨论 只看当前版本


暂无话题~