README

Infolist Carousel entry that allows you to add a slide carousel to any of you Filament v3 projects.

屏幕截图

安装

您可以通过 composer 安装此包

composer require tuto1902/infolist-carousel

在您的 tailwind.config.js 文件的“内容”部分添加以下行

export default {
  presets: [preset],
  content: [
+    './vendor/tuto1902/carousel/resources/**/*.blade.php',
+    './vendor/tuto1902/infolist-carousel/resources/**/*.blade.php',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

可选地，您可以使用以下方式发布视图

php artisan vendor:publish --tag="infolist-carousel-views"

您还可以使用以下方式发布轮播组件

php artisan vendor:publish --tag="carousel-views"

用法

简单导入 Carousel 组件并将其包含在您的 Infolist 模式中。以下是一个使用面板构建器资源的示例

use Tuto1902\InfolistCarousel\Infolists\Components\Carousel;
use Filament\Infolists\Infolist;

public static function infolist(Infolist $infolist): Infolist
{
    return $infolist
        ->schema([
            Carousel::make('slides.file_name')
        ]);
}

默认情况下，幻灯片将显示列值（或您的模型的主键）。您可以使用以下方式提供自己的幻灯片视图

public static function infolist(Infolist $infolist): Infolist
{
    return $infolist
        ->schema([
            Carousel::make('slides.file_name')
                ->slideView('my-slide-template')
        ]);
}

视图应创建在您的项目 resources/views 文件夹内。以下是一个简单方形幻灯片带有图片背景的示例。

<div
    class="aspect-square bg-cover bg-center bg-no-repeat w-full h-full rounded-md"
    style="background-image: url('/{{ $state }}');"
>
    <!-- // -->
</div>

在此场景中，$state 变量指向 slides.file_name 列的值。如果没有提供列值，则 $state 变量将是模型实例。例如，假设您有一个 Carousel 模型（以及相应的资源，具有信息列表页面）。在这个模型中，您有一个与 Slide 模型的 HasMany 关系。因此，您可以使用 Carousel 模型类的 ->slides 属性获取所有轮播幻灯片的列表。如果您只向 Carousle::make 方法提供关系名称，则 $state 变量将是一个 Slide 模型实例。这样，您就可以在幻灯片模板中访问 Slide 模型中的所有信息。

public static function infolist(Infolist $infolist): Infolist
{
    return $infolist
        ->schema([
            Carousel::make('slides')
                ->slideView('my-slide-template')
        ]);
}

<div
    class="..."
    style="background-image: url('/{{ $state->file_name }}');"
>
    <!-- // -->
</div>

定制

您可以使用以下选项定制轮播的外观和感觉。

循环

轮播将返回到幻灯片的开始/结束。

    Carousel::make('slides.file_name')
        ->loop()

方向

更改轮播的方向。您可以选择垂直和水平（默认）。

    use Tuto1902\InfolistCarousel\Infolists\Components\Carousel\CarouselOrientation;

    Carousel::make('slides.file_name')
        ->orientation(CarouselOrientation::Vertical)

大小

更改轮播框架的大小。您可以选择小、中和大。此外，您还可以提供任何有效的 TailwindCSS size-* 类作为字符串。

    use Tuto1902\InfolistCarousel\Infolists\Components\Carousel\CarouselSize;

    Carousel::make('slides.file_name')
        ->size(CarouselSize::Large)
        // or
        ->size('size-96')

重要

为了向 size 函数提供 TailwindCSS 类，您需要在 tailwind.config.js 文件的“内容”部分添加以下行。

export default {
  presets: [preset],
  content: [
    './vendor/tuto1902/carousel/resources/**/*.blade.php',
    './vendor/tuto1902/infolist-carousel/resources/**/*.blade.php',
+    './vendor/tuto1902/infolist-carousel/src/Infolists/Components/**/*.php',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

自动播放 & 延迟

幻灯片将使用指定的延迟（以毫秒为单位）自动导航。如果没有提供延迟，默认值为 4000（4 秒）。

    Carousel::make('slides.file_name')
        ->autoplay()
        ->delay(2000)

变更日志

请参阅 CHANGELOG 了解最近更改的详细信息。

鸣谢

• Arturo Rojas

许可

MIT 许可证 (MIT)。有关更多信息，请参阅 许可文件。