corneltek/webui

Web UI Components Library

Maintainers

Details

github.com/c9s/WebUI

Source

Issues

Installs: 354

Dependents: 8

Suggesters: 0

Security: 0

Stars: 22

Watchers: 5

Forks: 1

Open Issues: 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-11-29 04:41:21 UTC

README

WebUI aims to provide a PHP interface to build HTML components with microdata.

Synopsis

$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();

And we will get:

<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>

Components

ReactComponent

Rendering ReactComponent initializer from PHP settings:

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

The code above renders the html below:

<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>