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. Once rendered, they provides interaction with the end-user.

The download component

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

<?php

$downloads = new UUP\Web\Component\Container\Downloads();
$downloads->addLocation("stable");
$downloads->addLocation("testing");
$downloads->title = "Project1";
$downloads->render();

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

<?php

$downloads = new UUP\Web\Component\Container\Downloads();
$downloads->addLocation("partials", "Partial files", array("inc"));
$downloads->title = "Download";
$downloads->info = "From here you can download all code fragment files used by the guide.";
$downloads->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.