README

Web组件是具有CSS和JS属性的组件。

Sy\Component\WebComponent 类继承自 Sy\Component

安装

使用以下命令安装最新版本

$ composer require sy/webcomponent

CSS/JS管理

CSS/JS链接

使用 addCssLink 和 addJsLink 指定样式表和JavaScript源路径。

示例

<?php

use Sy\Component\WebComponent;

class MyComponent extends WebComponent {

	public function __construct() {
		parent::__construct();

		// Add CSS links
		$this->addCssLink('/web/path/to/style1.css');
		$this->addCssLink('/web/path/to/style2.css');

		// Add CSS links with media parameter
		$this->addCssLink('/web/path/to/screen_style1.css', 'screen');
		$this->addCssLink('/web/path/to/screen_style2.css', 'screen');
		$this->addCssLink('/web/path/to/print_style1.css' , 'print');
		$this->addCssLink('/web/path/to/print_style2.css' , 'print');

		// Add JS links
		$this->addJsLink('/web/path/to/script1.js');
		$this->addJsLink('/web/path/to/script2.js');
	}

}

$myComponent = new MyComponent();
$css = $myComponent->getCssLinks();
$js  = $myComponent->getJsLinks();

print_r($css);
print_r($js);

输出

Array
(
    [] => Array
        (
            [0] => /web/path/to/style1.css
            [1] => /web/path/to/style2.css
        )

    [screen] => Array
        (
            [0] => /web/path/to/screen_style1.css
            [1] => /web/path/to/screen_style2.css
        )

    [print] => Array
        (
            [0] => /web/path/to/print_style1.css
            [1] => /web/path/to/print_style2.css
        )

)
Array
(
    [0] => /web/path/to/script1.js
    [1] => /web/path/to/script2.js
)

CSS/JS代码

使用 addCssCode 和 addJsCode 指定样式表和JavaScript代码。

示例

<?php

use Sy\Component\WebComponent;

class MyComponent extends WebComponent {

	public function __construct() {
		parent::__construct();

		// Add CSS code
		$this->addCssCode(file_get_contents(__DIR__) . '/style.css');

		// Add JS code
		$this->addJsCode(file_get_contents(__DIR__) . '/script.js');

		// You can also do that but it's not very clean
		$this->addJsCode('
			function javaScriptTest() {
				alert("Test");
			}
		');
	}

}

CSS/JS传递给父组件

当你在另一个组件A上添加组件B时，B的所有CSS和JS属性都会传递给A。

示例

<?php

use Sy\Component\WebComponent;

// Component A
class A extends WebComponent {

	public function __construct() {
		parent::__construct();

		// Add CSS/JS links
		$this->addCssLink('/web/path/to/A/style.css');
		$this->addJsLink('/web/path/to/A/script.js');

		// Add the component B
		$this->setComponent('SOMEWHERE', new B());
	}

}

// Component B
class B extends WebComponent {

	public function __construct() {
		parent::__construct();

		// Add CSS/JS links
		$this->addCssLink('/web/path/to/B/style.css');
		$this->addJsLink('/web/path/to/B/script.js');
	}

}

$a = new A();

$css = $a->getCssLinks();
$js  = $a->getJsLinks();

print_r($css);
print_r($js);

输出

Array
(
    [] => Array
        (
            [0] => /web/path/to/A/style.css
            [1] => /web/path/to/B/style.css
        )

)
Array
(
    [0] => /web/path/to/A/script.js
    [1] => /web/path/to/B/script.js
)