aozen/customizable-image-card

此包为您提供具有一些选项的自定义卡片。包括：内容区域、图片、重定向URL、文字颜色、图片大小以及图文并排选项。

维护者

详情

github.com/aozen/customizable-image-card

源代码

问题

安装: 40

依赖: 0

建议者: 0

安全: 0

星标: 0

关注者: 1

分支: 0

公开问题: 0

dev-master 2019-01-16 09:08 UTC

Requires

MIT 04adbf7447db19a16e4fc4ced03f97459cfa1ef7

  • Ali Özen <aliozendev.woop@gmail.com>

imageredirectnovalaravelcardcustomtitlecustomizable

This package is auto-updated.

Last update: 2024-09-20 02:27:24 UTC

README

此包为您提供自定义卡片选项。包括：'内容区域、图片、重定向URL、文字颜色、图片大小、文字大小、卡片高度和位置'选项。

安装

使用Composer

composer require aozen/customizable-image-card

用法

在资源文件中添加新的CustomizableImageCard

public function cards(Request $request)
    {
        return [
            (new CustomizableImageCard)
            ->content("Your text is coming here. There is no limitation for this.")
            ->image("https://picsum.photos/600/120")
            ->url("https://github.com/aozen/customizable-image-card")
            ->color("#CD5C5C")
            ->sizeOfImage(30)
            ->panelheight("75px")
            ->fontsize("1.875rem")
        ];
    }

内容

卡片文字在这里。需要更改。为了使新安装的用户更容易理解，默认文本不为空。

图片

图片URL在这里。需要更改。默认图片来自picsum.photos

URL

URL选项用于href。图片和文字位于锚标签中。默认为空。

颜色

文字颜色。这是inlice css :style="{'color': color}" 默认为 #B22222

图片大小

这个值应该是整数。可用的值有10及其倍数。10 20 30 40 50 60 70 80 90。还有100。但如果使用->sizeOfImage(100)，则文本不会出现在图片旁边，而是出现在图片底部。图片大小选项使用百分比。->sizeOfImage(60)表示是width: 60% 默认为30

面板高度

如果您正在使用具有宽度的卡片

(new CustomizableImageCard)->width("1/2")

有时需要添加面板高度选项，因为CSS出现问题。因为当图片的高度小于文本div的高度时，填充值非常大。卡片大小比默认值大得多，看起来真的很糟糕。解决方案很简单。使用CSS强制更改卡片高度

(new CustomizableImageCard)->width("1/2")->panelheight("75px")

默认为空

字体大小

文字字体大小。对此没有限制。可以使用rem、px等。:style="{ 'font-size': card.fontsize }" 默认为nova的 default: 1.875rem.

示例

演示图片： alt text

演示图片2

alt text