README

为 Laravel Nova 提供更好的 URL 输入和链接字段。版本 2.0 现已支持 Nova 4.0 和 Vue 3.0！

安装

使用 Composer 将包安装到使用 Nova 的 Laravel 应用中

composer require inspheric/nova-url-field

用法

在资源的 fields 方法中添加字段

use Inspheric\Fields\Url;

Url::make('Homepage')
    ->rules('url', /* ... */),

该字段扩展了 Laravel\Nova\Fields\Text 字段，因此所有常规方法都可用。

支持只读、占位符和覆盖默认 type="url"（如果您不希望在浏览器中进行验证）。这来自标准的 Nova Text 字段，因此此处未做文档说明。

建议您包含标准的 url 和/或 active_url 验证规则，因为它们不会自动添加。

选项

术语：标签、标题、值

术语 "标签"、"标题" 和 "值" 用于描述以下选项。它们应该在生成的 HTML 中理解为以下内容

<a href="{{ $value }}" title="{{ $title }}">{{ $label }}</a>

标签

使字段在详情或索引页上以标签的形式显示，而不是显示 URL 值本身

Url::make('Homepage')
    ->label('External Link'),

当然，您可以使用 Laravel 的 trans() 或 __() 函数来翻译标签。

如果链接可点击，则仅显示标签，否则显示 URL 值。

使用标签

使用回调函数使字段显示标签

Url::make('Homepage')
    ->labelUsing(function($value, $resource) {
        return $this->title;
    }),

参数 $value 和 $resource 的传递方式与 resolveUsing() 的回调相同，但都是可选的。

HTML 标签

如果您想使用自定义 HTML 作为标签，请记住也要使用 asHtml() 选项。

Url::make('Homepage')
    ->label('<strong>External</strong> Link')
    ->asHtml(),

域名标签

一个简写方法，用于仅将 URL 的域名部分（即不带 https?://www.）作为标签显示

Url::make('Homepage')
    ->domainLabel(),

例如，字段值 https://www.example.com/path?query=value&another=true#fragment 的标签将简单地显示为 example.com。

如果在 displayUsing() 回调中有修改，则此方法将在修改后解析，因此如果以某种方式修改了 URL 的显示，则修改后的值将传递给此标签。

名称标签

一个简写方法，用于将字段的名称作为标签显示

Url::make('Homepage')
    ->nameLabel(),

标签将显示为 主页。

标题

设置链接的 title 属性，当鼠标悬停时会显示

Url::make('Homepage')
    ->title('Link title'),

当然，您可以使用 Laravel 的 trans() 或 __() 函数来翻译标签。如果没有设置自定义标题，则将使用完整的 URL 值。

如果链接可点击，则仅使用标题。

使用标题

使用回调函数设置标题

Url::make('Homepage')
    ->titleUsing(function($value, $resource) {
        return $this->title;
    }),

可点击

使字段在详情页上显示为链接

Url::make('Homepage')
    ->clickable(bool $clickable = true),

索引页上的可点击

使字段在索引页上显示为链接

Url::make('Homepage')
    ->clickableOnIndex(bool $clickable = true),

始终可点击

上述两个函数的组合，以提高简洁性

Url::make('Homepage')
    ->alwaysClickable(bool $clickable = true),

在同一选项卡中打开

默认情况下，可点击链接将在新选项卡中打开（使用 target="_blank"）。您可以修改此行为，使链接在同一选项卡中打开

Url::make('Homepage')
    ->sameTab(bool $sameTab = true),

rel=noopener 和 rel=noreferrer

默认情况下，可点击链接将在新选项卡中打开，并将设置 rel=noopener 属性。如果您使用上述 sameTab()，则将取消设置 rel=noopener。

要覆盖默认行为，您可以选择使用以下方法设置或取消设置 rel=noopener 和/或 rel=noreferrer

Url::make('Homepage')
    ->noopener(bool $noopener = true),

Url::make('Homepage')
    ->noreferrer(bool $noreferrer = true),

如果在同一字段上同时使用 sameTab() 和 noopener()，请确保 noopener() 在 之后 sameTab()，否则这两个设置将互相抵消。

* 有关解释，请参阅这篇文章。

自定义HTML

如果您不希望链接以默认图标和文本显示，可以设置自定义HTML，这将替换默认模板的全部内容

Url::make('Homepage')
    ->customHtml('<span class="my-class">Click here!</span>'),

如果链接是可点击的，此内容将被包裹在一个未加样式的 <a> 标签中，该标签实现了您指定的所有其他选项，例如 sameTab、title 等。

如果您 想要 链接以链接样式文本的形式显示，可以在您指定的HTML中添加类 dim text-primary。

重要！ 在将用户提供的任何数据作为原始HTML显示之前，您有责任对其进行转义或清理。此包不会为您执行此操作。

使用自定义HTML

使用回调设置自定义HTML

Url::make('Homepage')
    ->customHtmlUsing(function($value, $resource, $label) {
        return view('partials.link_text', [
            'url'   => $value,
            'label' => $label,
        ])->render();
    }),

请注意，回调有一个第三个参数 $label，它将包含基于您在字段上设置的哪个 label()、labelUsing()、nameLabel()、domainLabel() 等选项的相应标签。

请记住，如果链接是可点击的，您指定的自定义HTML已经包裹在一个 <a href=""> 标签中，因此您不应在自己的自定义HTML中包含 <a> 标签。

外观

索引（默认）

字段以纯 <span> 元素的形式显示。

索引（可点击）

字段以带图标的 <a href="..."> 元素的形式显示。

索引（带标签的可点击）

字段以带图标和自定义标签的 <a href="..."> 元素的形式显示。

详情（默认）

字段以纯 <span> 元素的形式显示。

详情（可点击）

字段以带图标的 <a href="..."> 元素的形式显示。

详情（带标签的可点击）

字段以带图标和自定义标签的 <a href="..."> 元素的形式显示。

表单

字段以 <input type="url"> 元素的形式显示。