README

这是一个Plates 模板引擎扩展，用于轻松构建可重用组件。

我喜欢 Laravel 的模板系统 Blade。Blade 很好，原生 PHP 更好。但是，Blade 缺少 Plates 中的一个功能。那就是组件和插槽。有了这个功能，构建可重用组件变得更加容易。当然，没有这个功能你也可以构建组件。但是对于很多人，包括我，用组件和插槽来思考会更熟悉。就像在前端系统 vue.js 中一样。

使用方法

为了展示组件有多酷，让我们在 tachyons 和 Font Awesome 的基础上创建一个空的容器组件。

演示文件

结构

/app
 |-- /templates
 |    |-- /main-layout.php
 |    `-- /empty-state-container.php
 `-- /index.php

文件： index.php

<?php
// Composer autoloader
require_once 'vendor/autoload.php';

// Create an instance of the template engine
$templateEngine = new \League\Plates\Engine('templates');

// Load the components extension
$templateEngine->loadExtension(new \DailyFive\PlatesExtensions\Components());

// Render the template
echo $templateEngine->render('main-layout', array());

文件： templates/main-layout.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Plates Components are cool</title>
    <link rel="stylesheet" href="https://unpkg.com/tachyons@4.9.1/css/tachyons.min.css"/>
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body>
    <div class="mw6 center pv4">
        <?= $this->component('empty-state-container') ?>
            <?= $this->slot('icon') ?>
                <i class="fas fa-check"></i>
            <?= $this->endSlot() ?>

            <?= $this->slot('title') ?>
                Greate Job
            <?= $this->endSlot() ?>

            <?= $this->slot('message') ?>
                You've done all your work today!
            <?= $this->endSlot() ?>
        <?= $this->endComponent() ?>

        <?= $this->component('empty-state-container') ?>
            <?= $this->slot('icon') ?>
                <i class="fas fa-inbox"></i>
            <?= $this->endSlot() ?>

            <?= $this->slot('title') ?>
                Empty
            <?= $this->endSlot() ?>

            <?= $this->slot('message') ?>
                There are no projects you can handle!
            <?= $this->endSlot() ?>

            <?= $this->slot('action') ?>
                <a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-dark-green" href="#0">Create a new project</a>
            <?= $this->endSlot() ?>
        <?= $this->endComponent() ?>
    </div>
</body>
</html>

文件： templates/empty-state-container.php

<div class="sans-serif ba b--black-20 mb4">
    <?php if (isset($icon)): ?>
        <div class="tc f-headline black-40 mt4"><?= $icon ?></div>
    <?php endif; ?>
    <?php if (isset($title)): ?>
        <div class="tc f1 black-50 mt4"><?= $title ?></div>
    <?php endif; ?>
    <?php if (isset($message)): ?>
        <div class="tc f3 mt3 mb5"><?= $message ?></div>
    <?php endif; ?>
    <?php if (isset($action)): ?>
        <div class="tc mb5"><?= $action ?></div>
    <?php endif; ?>
    <?= isset($slot) ? $slot : '' ?>
</div>

安装

通过 CLI 安装...

composer require daily-five/plates-components

...或者在 composer.json 中添加

{
    "require": {
        "daily-five/plates-components": "^1.0"
    }
}

如果在安装时遇到权限问题，请尝试这个解决方案

要求

这是一个独立的扩展。不需要第三方库。

贡献

请参阅CONTRIBUTING以获取详细信息。

许可协议

Plates 扩展采用 MIT 许可协议。

daily-five / plates-components

维护者

详细信息

README

目录

使用方法

安装

要求

贡献

许可协议