jey/livewire-styleable

此包的最新版本（v1.0）没有可用的许可信息。

用于在Livewire组件中定义作用域样式的包（支持Scss）

维护者

详细信息

github.com/LordDeveloper/livewire-styleable

源代码

问题

安装: 29

依赖项: 0

建议者: 0

安全: 0

星标: 5

关注者: 1

分支: 0

开放问题: 0

类型：包

v1.0 2022-03-16 12:06 UTC

Requires

Unknown License 5c28ff181056c9565c4e34af8cb3daaa6c646892

This package is not auto-updated.

Last update: 2024-09-26 23:10:05 UTC

README

安装

composer require jey/livewire-styleable

使用

在组件类中

<?php

namespace App\View\Component;

use App\Models\Post;
use Jey\LivewireStyleable\HasStyle;
use Livewire\Component;

class LatestPosts extends Component
{

    use HasStyle;

    public function render()
    {
        return view('components.latest-posts', [
            'posts' => Post::published()
                ->latest()
                ->take(3)
                ->get(),
        ]);
    }
}

在Blade模板（latest-posts.blade.php）中

<div>
    <div class="row">
        @foreach($posts as $post)
            <div class="col-xs-1 col-md-3 col-lg-4 mb-3">
                <div class="card">
                    <img src="{{ $post->image_url }}" alt="" class="card-img">
                    <div class="card-body" style="">
                        {{ $post->description }}
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>
<style scoped lang="scss">
    .card {
        border-radius: 1rem;
        overflow: hidden;
        $card-color: red;
        .card-body {
            color: $card-color;
        }
    }
</style>

模块导入支持（非Webpack包）

<style scoped lang="scss">
    @module('LatestPosts')
</style>