Web Components

These are PHP classes that provides both presentation and behavior. Examples are the sitemap or download classes that let us define properties before scanning and once rendered, they provides user interaction.

Site local

Two site local components exist under the source directory. The first is the download class that simplifies generating a download page. The second is the content specification scanner that creates a table of content gallery.

The download component

Use the download class to render a download page. Use add() method to define sub directories containing download files:

<?php

$download = new BMCIT\Download("Project1");
$download->add("stable");
$download->add("testing");
$download->render();

Additional arguments can be passed if required (i.e. description or filename extension).

<?php

$download = new BMCIT\Download("Partial files");
$download->add("partials", null, "inc", "Code fragment files used in the site guide");
$download->render();

Composer package

The package bmc/uup-web-components defines additional web components, for example cards:

<?php
$card = new UUP\Web\Component\Container\Card();

$card->title = "Title";
$card->text = "Use cards for displaying an image with some text and an action button";
$card->image = "../assets/img/nature-bird-flying-red.jpeg";

$card->button->event->onclick = "alert('You just clicked me!')";
$card->button->props->hover->back = "teal";
$card->button->text = "Click";

?>

<div class="w3-row">
    <div class="w3-third"><?php $card->render() ?></div>
    <div class="w3-third"><?php $card->render() ?></div>
    <div class="w3-third"><?php $card->render() ?></div>
</div>

Rendering this code fragment will create a responsive, three column grid layout:

Title

Use cards for displaying an image with some text and an action button

Title

Use cards for displaying an image with some text and an action button

Title

Use cards for displaying an image with some text and an action button

Try out

Try out

For more examples, visit the online demo setup of uup-web-component

Try out

Click on the run code button to test the download code fragment from above live.