样式的复用和【源码】


本章节目录

    样式的复用

    Tailwind CSS 内置的指令 @apply 可以帮我们实现代码的复用,抽取出共用组件。

    优化项目代码

    在我们重写的样式里,我们很容易发现 input、button 和消息提示框架的样式是可以抽取出来的,而 table 的样式是可以优化的。

    input 复用

    打开 resources/css/app.css 文件,我们编写一个 input 组件样式:

    .malajiang-input {
        @apply border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 rounded shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-green-600 text-green-600;
    }
    

    其实就是把 resources/views/index.blade.php 页面中 input 的 class 给复制过来 使用 @apply 指令声明了一下。

    细心的朋友会发现【留言内容】有一个差异样式 text-yellow-600,用于定义 textarea 的文本颜色。同时使用

    class="malajiang-input text-yellow-600"
    

    即可,text-yellow-600 会覆盖掉 .malajiang-input 中的 text-gray-700 样式的。

    button 复用

    提交按钮,在首页和编辑页都可以使用

    .malajiang-button {
        @apply py-2 px-4  bg-green-600 hover:bg-green-700 focus:ring-green-500 focus:ring-offset-green-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2  rounded-lg
    }
    

    table 样式优化

    .malajiang-table {
        @apply border w-full;
    }
    .malajiang-table th {
        @apply bg-gray-50 p-2 border;
    }
    .malajiang-table tr {
        @apply border text-center;
    }
    .malajiang-table td  {
        @apply p-2 border;
    }
    

    消息提示框

    .malajiang-tips {
        @apply border border-green-400 bg-green-50 text-green-800 p-4 rounded;
    }
    

    编辑和删除按钮

    细心的朋友可能会发现,上一节,我们没有对留言列表中的编辑和删除按钮进行任何处理。这是因为我们要说一个特性,做样式复用的时候,可以继续使用复用组件。看以下代码。

    .malajiang-btn {
        @apply px-4 py-2 rounded-sm text-white;
    }
    .malajiang-btn-primary {
       @apply  malajiang-btn bg-green-600 hover:bg-green-700;
    }
    .malajiang-btn-danger {
        @apply malajiang-btn bg-red-600 hover:bg-red-700;
    }
    

    .malajiang-btn-primary.malajiang-btn-danger 样式复用了 .malajiang-btn 样式。

    当然,直接使用两个样式去修饰按钮也是可以的。比如:

    <a href="" class="btn btn-danger"></a>
    

    btn 样式是公共样式,btn-danger 是差异化样式。

    好了,至此我们已经利用复用特性重构了界面,看下完整代码。

    首页 resources/views/edit.blade.php

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>麻辣讲留言板系统</title>
        <link rel="shortcut icon" type="image/x-icon" href="https://img.malajiang.com/assets/web/img/favicon.png"/>
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    {{--    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">--}}
    </head>
    <body>
    <div class="container mx-auto p-5">
        <h2 class="text-center text-4xl">麻辣讲留言板系统</h2>
        <h6 class="text-center p-4 text-xl text-gray-500">Laravel + Tailwind CSS 开发实战</h6>
        @if(Session::has('message'))
            <div class="malajiang-tips" role="alert">{{ Session::get('message') }}</div>
        @endif
        <hr>
        <form action="{{ route("store") }}" class="mt-5" method="post">
            @csrf
            <div class="py-3">
                <label for="">您的姓名</label>
                <input type="text" name="name" class="malajiang-input" id="name" placeholder="请输入您的姓名">
            </div>
            <div class="py-3">
                <label for="phone">您的手机</label>
                <input type="text" class="malajiang-input" name="phone" id="phone" placeholder="请输入您的手机号码">
            </div>
            <div class="py-3">
                <label for="title">留言标题</label>
                <input type="text" class="malajiang-input" name="title" id="title" placeholder="请输入您的留言标题">
            </div>
            <div class="py-3">
                <label for="content">留言内容</label>
                <textarea class="malajiang-input text-yellow-600" name="content" rows="5" placeholder="在这里输入您的留言内容"></textarea>
            </div>
            <hr>
            <button type="submit" class="malajiang-button">提交</button>
        </form>
        <h4 class="mt-10 text-gray-500">已经有留言({{ $records->count() }} 条)</h4>
        <hr class="my-2">
        <table class="malajiang-table">
            <thead>
            <tr>
                <th>ID</th>
                <th>留言者</th>
                <th>手机号码</th>
                <th>标题</th>
                <th>内容</th>
                <th>留言时间</th>
                <th width="180">操作</th>
            </tr>
            </thead>
            <tbody>
            @forelse($records as $record)
                <tr>
                    <td>{{ $record->id }}</td>
                    <td>{{ $record->name }}</td>
                    <td>{{ $record->phone }}</td>
                    <td>{{ $record->title }}</td>
                    <td>{{ $record->content }}</td>
                    <td>{{ $record->created_at }}</td>
                    <td>
                        <a href="{{ route("edit", $record->id) }}" class="malajiang-btn-primary">编辑</a>
                        <form action="{{ route('destroy', $record->id)}}" class="inline" method="post">
                            @CSRF
                            @method("delete")
                            <button type="submit" class="malajiang-btn-danger" onclick="return confirm('确认删除?')">删除</button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="100" class="text-center text-gray-400 p-3">暂无留言</td>
                </tr>
            @endforelse
            </tbody>
        </table>
        {{ $records->links() }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    </body>
    </html>
    

    编辑页 resources/views/edit.blade.php

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>编辑留言</title>
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    </head>
    <body>
    <div class="container mx-auto p-5">
        <h4 class="text-center text-2xl mb-4">编辑留言 <a href="{{ route("index") }}" class="ml-2 text-base text-gray-400">返回留言</a></h4>
        @if(Session::has('message'))
            <div class="malajiang-tips" role="alert">{{ Session::get('message') }}</div>
        @endif
        <hr>
        <form action="{{ route("update", $record->id) }}" class="mt-5" method="post">
            @csrf
            @method("put")
            <div class="form-group">
                <label for="name">您的姓名</label>
                <input type="text" name="name" class="malajiang-input" id="name" placeholder="请输入您的姓名" value="{{ $record->name }}">
            </div>
            <div class="py-3">
                <label for="phone">您的手机</label>
                <input type="text" class="malajiang-input" name="phone" id="phone" placeholder="请输入您的手机号码" value="{{ $record->phone }}">
            </div>
            <div class="py-3">
                <label for="title">留言标题</label>
                <input type="text" class="malajiang-input" name="title" id="title" placeholder="请输入您的留言标题" value="{{ $record->title }}">
            </div>
            <div class="py-3">
                <label for="content">留言内容</label>
                <textarea class="malajiang-input text-yellow-600" name="content" rows="5" placeholder="在这里输入您的留言内容">{{ $record->content }}</textarea>
            </div>
            <hr>
            <button type="submit" class="malajiang-button">提交</button>
        </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    </body>
    </html>
    

    app.css 文件 resources/css/app.css

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    .malajiang-input {
        @apply border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 rounded shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-green-600 text-green-600;
    }
    .malajiang-button {
        @apply py-2 px-4  bg-green-600 hover:bg-green-700 focus:ring-green-500 focus:ring-offset-green-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2  rounded-lg
    }
    .malajiang-table {
        @apply border w-full;
    }
    .malajiang-table th {
        @apply bg-gray-50 p-2 border;
    }
    .malajiang-table tr {
        @apply border text-center;
    }
    .malajiang-table td  {
        @apply p-2 border;
    }
    .malajiang-tips {
        @apply border border-green-400 bg-green-50 text-green-800 p-4 rounded;
    }
    .malajiang-btn {
        @apply px-4 py-2 rounded-sm text-white;
    }
    .malajiang-btn-primary {
       @apply  malajiang-btn bg-green-600 hover:bg-green-700;
    }
    .malajiang-btn-danger {
        @apply malajiang-btn bg-red-600 hover:bg-red-700;
    }
    

    最后,按照惯例,我们也会给出源码。

    Gitee 地址:https://gitee.com/malajiang/laravel/tree/master/laravel-feedback-tailwindcss
    Github 地址:https://github.com/malajiang/laravel/tree/master/laravel-feedback-tailwindcss

    下一篇: 没了

    请先 登录
    审核后显示
    讨论记录(0 条)
    暂时还没有讨论

    © 2024 麻辣讲 豫ICP备19017310号-2