laravel 添加css样式如果开关是启用的

wfypjpf4  于 2023-03-04  发布在  其他
关注(0)|答案(1)|浏览(105)

bounty将在6天后过期。回答此问题可获得+50的声望奖励。broken heart正在寻找规范答案

我有一个要添加图像的表

public function up()
    {
        Schema::create('blog_images', function (Blueprint $table) {
            $table->BigIncrements('id');
            $table->string('image', 128);
            $table->timestamps();
        });
    }

在此表中,我添加了一列,您可以在其中更改true或false的值

$table->boolean('border')->default(true);

然后,在控制器中,我将添加一个开关,以便可以更改此值

protected function grid()
    {
        $grid = new Grid(new BlogImage());
     
        $grid->column('border', __('Border'))->switch();

        $grid->column('image', __('Image'))->image();

        return $grid;
    }

这应该很清楚了,我有一个要切换的字段,在数据库中,该字段的值为0或1
接下来,在页面上显示这些图像

@foreach($blog_images as $blog_image)
<div class="main-image">
  <img src="/storage/{{ $blog_image->image }}">
</div>
@endforeach

这里我有一个主图像类,它有以下样式:

.main-image {
    position: relative;

    img {
      width: 100%;
    }
    &::before {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 3px solid red;
    }
  }

这里是样式border: 3px solid red;
我需要使它在border字段为true时,将此样式应用于该类,如果为false,则不应相应应用
但是我还不知道在哪里做
有没有可能在控制器中完成这个操作,或者我需要使用javascript。在这里如何做得更好?

rkue9o1l

rkue9o1l1#

这可以通过检查$blog_image->border来完成,如果为真,则添加第二个类。

@foreach($blog_images as $blog_image)
<div class="main-image{{ $blog_image->border ? ' main-image-border' : '' }}">
  <img src="/storage/{{ $blog_image->image }}">
</div>
@endforeach

从原始main-image中删除边框,然后添加main-image-border,如下所示。

.main-image {
    position: relative;

    img {
      width: 100%;
    }
    &::before {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 3px solid red;
    }
}

.main-image-border {
    &::before {
        border: 3px solid red;
    }
}

现在,所有包含div的图像都将具有main-image类,只有border属性为true的图像才会接收main-image-border并应用红色边框。

相关问题