phacil/html

Phacil PHP 框架 HTML 类

1.1.2 2019-07-18 19:45 UTC

This package is auto-updated.

Last update: 2024-09-19 06:56:17 UTC


README

HTML 类是 Phacil PHP 框架的一个组件

安装

https://github.com/phacil/html 下载 zip 文件,解压文件并在文件夹内使用 composer update

现在你可以使用静态方法以链式模式编写 HTML 标签及其属性。

加载 HTML 类

<?php
include 'vendor/autoload.php';
use Phacil\Component\HTML\HTML;

编写元素

/* You can echo this code */
echo HTML::h1('This is a title');
/* or call output() function */
HTML::h2('This is a second title')->output();
/* and use chain mode to set attributes */
echo HTML::a('A link to google.com')->href('http:://google.com.br')->class('link');

开始一个块

echo HTML::begin('div')->class('block')->id('content');
echo HTML::p(There is some content);
echo HTML::end('div');
/* or */
echo HTML::div(function(){
	echo HTML::p(There is some content);
})->class('block')->id('content');
/* or */	
echo HTML::div([
 	HTML::p(There is some content),
HTML::p(Another content)
]);

特殊标签函数

你可以编写任何与上面相同结构的标签,除了这些

/* Let's use this list */
$list = ["1"=>"First","Second","Third"];

选择

echo HTML::select($list, "2", $empty="Position")->id("select")->name("select");

单选按钮

echo HTML::radio($list, "2")->id("radios")->name("radios")->class("hotizontal");

复选框

echo HTML::checkbox($list, ["1" , "2"])->id("checkbox")->name("checkbox")->class("hotizontal");

样式

现在,我们将编写一些 CSS。这段代码

$style = ['.btn-group' => [
               ' .btn'=> [                    
                        'color'=>'#ccc',
                        'padding'=>'0',
                        '.primary'=>[
                                    'color'=>'#08c',
                                    '.active'=>['color'=>'#08c'],
                        ],
                        '.danger'=>['color'=>'#F66']
                ],
            ],
        ];
echo HTML::style($style)

出这个

<style>
     .btn-group{
      }
     .btn-group .btn{
          color:#ccc;
          padding:0;
      }
     .btn-group .btn.primary{
          color:#08c;
      }
     .btn-group .btn.primary.active{
          color:#081;
      }
     .btn-group .btn.danger{
          color:#08c;
      }
</style>