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

卡片

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


概述

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

大眼鱼 翻译于 3年前

定义卡片

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

artisan nova:card acme/analytics
大眼鱼 翻译于 3年前

生成卡片时, Nova 讲提示你去安装卡片所需要的npm依赖包, 编译资源, 和更新项目的 composer.json 文件. 所有的自定义卡片都会通过 Composer "path" 仓库注册到你的应用。

Nova卡包括构建卡所需的所有脚手架。每张卡甚至都包含其自己 composer.json 文件,并可以在GitHub或您选择的源代码控制提供商上与世界共享。

zenil8 翻译于 2年前

注册卡片

Nova 卡片可以在你的 Resource 类中的 cards 方法中注册。此方法返回资源可用的卡片数组。将你的卡片添加到由这个方法返回的卡片数组中,对卡片进行注册:

use Acme\Analytics\Analytics;

/**
 * 获取可用的资源卡片.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return array
 */
public function cards(Request $request)
{
    return [new Analytics];
}
琴玖-klein 翻译于 1个月前

卡片选项

通常,您需要允许您卡片的消费者自定义卡上的运行时配置选项。您可以通过在您的card类中公开方法来实现这一点。这些方法可能会调用卡片的底层withMeta方法来添加信息到卡片的元数据中,这些元数据将应用在您的Card.vue的组件。withMeta方法接受一个 键/值 选项数组:

<?php

namespace Acme\Analytics;

use Laravel\Nova\Card;

class Analytics extends Card
{
    /**
     * 卡片的宽度(1/3, 1/2, or full)。
     *
     * @var string
     */
    public $width = '1/3';

    /**
     * 指示分析应该显示当前的访问者。
     *
     * @return $this
     */
    public function currentVisitors()
    {
        return $this->withMeta(['currentVisitors' => true]);
    }

    /**
     * 获取卡片的组件名称。
     *
     * @return string
     */
    public function component()
    {
        return 'analytics';
    }
}
琴玖-klein 翻译于 1个月前

构建卡片

Nova 生成的每张卡片都包含自己的服务提供商和“卡片”类,以使用 analytics 卡片为例,卡片类位于 src/Analytics.php

卡片的服务提供者也位于卡片的 src 目录中,并在卡片的 composer.json 文件中注册,以便 Laravel 框架自动加载。

laradocs 翻译于 1个月前

授权

如果您只想向特定用户公开指定的卡片,可以将canSee方法链到您指定的卡片上。canSee方法接受一个闭包,该闭包应该返回truefalse。闭包将接收传入的HTTP请求:

use Acme\Analytics\Analytics;

/**
 * 获得可用的资源卡片.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return array
 */
public function cards(Request $request)
{
    return [
        (new Analytics)->canSee(function ($request) {
            return false;
        }),
    ];
}
琴玖-klein 翻译于 1个月前

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 翻译于 2年前

本文章首发在 LearnKu.com 网站上。

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

《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
贡献者:7
讨论数量: 0
发起讨论 只看当前版本


暂无话题~