README

创建一个空文件夹

创建一个空文件夹，例如 my-adios-app-wireframe。

Composer

1. 创建 composer.json 文件，见下文
2. 在那个文件夹中运行 composer install。
3. 创建 config.php 文件，见下文。
4. 创建 index.php 文件，见下文。
5. 复制一个包含您项目标志的 logo.png 文件。
6. 对于Apache网络浏览器，创建 .htaccess 文件，见下文。
7. 在您的浏览器中打开 index.php。
8. 创建 wireframes 文件夹并添加您的线框TWIG文件。从 index.twig 开始，见下文示例。

composer.json

{
  "require": {
    "wai-blue/adios-wireframe": "dev-main"
  }
}

config.php

$config = [];
$config['skin'] = 'wireframe'; // Optional. If empty, default skin will be used. Options: blue, cyan, green, wireframe
$config['projectName'] = 'My ADIOS app';
$config['rewriteBase'] = '/my-adios-app-wireframe';
$config['sidebarItems'] = [
  '' => ['text' => 'Home', 'icon' => 'fas fa-home'],
  'contacts' => ['text' => 'Contacts', 'icon' => 'fas fa-user'],
  'calendar' => ['text' => 'Calendar', 'icon' => 'fas fa-calendar'],
];

index.php

require('vendor/autoload.php');
require('config.php');

$wireframe = $_REQUEST['wireframe'] ?? 'index';

$options = [
  'wireframesDir' => __DIR__ . '/wireframes',
  'isWindow' => (bool) ($_REQUEST['__IS_WINDOW__'] ?? false),
];

$loader = new \AdiosWireframe\Loader($options, $config);
echo $loader->render($wireframe);

wireframes/index.twig

<div class="row">
  <div class="col-6">
    <div class="row">
      {{ include('components/card.twig', {
        'title': 'Most active contacts',
        'content': include('components/table.twig', {
          'columns': [
            'Given Name',
            'Last Name',
            'Age'
          ]
        })
      }) }}
    </div>
  </div>
  <div class="col-6">
  </div>
</div>

.htaccess

RewriteEngine On

RewriteRule ^assets/(.*)$ vendor/wai-blue/adios-wireframe/src/assets/$1

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?wireframe=$1&%{QUERY_STRING}