corneltek/webui

Web UI 组件库

维护者

详细信息

github.com/c9s/WebUI

源代码

问题

安装: 352

依赖: 8

建议者: 0

安全性: 0

星标: 22

关注者: 5

分支: 1

公开问题: 14

2.0.0 2016-05-04 03:56 UTC

Requires (Dev)

MIT 2153d3a8bea3e8f3c65c839858af90e9992b617a

  • c9s <cornelius.howl.woop@gmail.com>

This package is auto-updated.

Last update: 2024-08-29 04:08:48 UTC

README

WebUI 旨在提供一个 PHP 接口，用于构建带有微数据的 HTML 组件。

概要

$el = new Element('span');
$el->append('&#62;');
$el->addClass('separator');

$breadcrumbs = new Breadcrumbs;

$breadcrumbs->setSeparatorElement($el);

$breadcrumbs->appendLink('Home', '/', 'The Home Page');
$breadcrumbs->appendLink('Product', '/', 'All Products');
$html = $breadcrumbs->render();

我们将得到

<div class="breadcrumbs">
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a title="The Home Page" itemprop="url" href="/">
      <span itemprop="title">Home</span>
    </a>
  </span>
  <span class="separator">&#62;</span>
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a title="All Products" itemprop="url" href="/">
      <span itemprop="title">Product</span>
    </a>
  </span>
</div>

组件

ReactComponent

从 PHP 设置中渲染 ReactComponent 初始化器

$component = new ReactComponent('CRUDListApp', array( 'prop1' => 'setting' ));
$out = $component->render();

上面的代码渲染以下 html

<div class="react-component react-app" id="CRUDListApp56faad9210df6"></div>
<script>
document.addEventListener('load', function(evt) {
var app56faad9210e79 = React.createElement(CRUDListApp,{
    "prop1": "setting"
});
React.render(app56faad9210e79, document.getElementById('CRUDListApp56faad9210df6'));
});
</script>