Skip to content

Commit

Permalink
added _bar && _bars components
Browse files Browse the repository at this point in the history
mychidarko committed May 23, 2020
1 parent 8a58f79 commit 5e0e563
Showing 4 changed files with 55 additions and 12 deletions.
14 changes: 10 additions & 4 deletions example.php
Original file line number Diff line number Diff line change
@@ -96,13 +96,19 @@
$ui::_chip("Food", [
$ui::a(["href" => "#", "wyn:btn-clear" => "", "aria-label" => "Close", "role" => "button"])
]),
$ui::hr(),
$ui::h2("Carousel"),
$ui::_carousel([
$ui::_carouselItem("", "", $ui::img("./1.jpg", ["class" => "img-responsive rounded", "style" => "width: 100%;height: 100% !important;"])),
$ui::_carouselItem("", "", $ui::img("./2.jpg", ["class" => "img-responsive rounded", "style" => "width: 100%;height: 100% !important;"])),
$ui::_carouselItem("", "", $ui::img("./1.jpg", ["class" => "img-responsive rounded", "style" => "width: 100%;height: 100% !important;"])),
$ui::_carouselItem("", "", $ui::img("./2.jpg", ["class" => "img-responsive rounded", "style" => "width: 100%;height: 100% !important;"])),
$ui::_carouselItem("slide-4", "slide-2", $ui::img("./1.jpg", ["style" => "width: 100%;height: 100% !important;"])),
$ui::_carouselItem("slide-1", "slide-3", $ui::img("./2.jpg", ["style" => "width: 100%;height: 100% !important;"])),
$ui::_carouselItem("slide-2", "slide-4", $ui::img("./1.jpg", ["style" => "width: 100%;height: 100% !important;"])),
$ui::_carouselItem("slide-3", "slide-1", $ui::img("./2.jpg", ["style" => "width: 100%;height: 100% !important;"])),
]),
$ui::hr(),
$ui::h2("Bars"),
$ui::_bars([
$ui::_bar(["value" => "25", "tooltip" => "25 referrals"])
]),
$ui::br(),
$ui::br(),
])
4 changes: 2 additions & 2 deletions readme.md
Original file line number Diff line number Diff line change
@@ -58,11 +58,11 @@ This method let's you create a plain HTML structure consisting which looks somew
Usage:

```js
$html = ((
$html = (
$ui::_template("Title Here", [
// Body Components here
])
));
);

$ui::render($html);
```
6 changes: 3 additions & 3 deletions src/UI.php
Original file line number Diff line number Diff line change
@@ -20,13 +20,13 @@ class UI {
public const SINGLE_TAG = "single-tag";
public const SELF_CLOSING = "self-closing";

public static function random_id($possible = "") {
$seed = str_split('abcdefghijklmnopqrstuvwxyz'.'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.'0123456789!_-');
public static function random_id($element = "") {
$seed = str_split('abcdefghijklmnopqrstuvwxyz'.'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.'0123456789_-');
shuffle($seed);
$rand = '';
foreach (array_rand($seed, 5) as $k) $rand .= $seed[$k];

return $rand;
return "$rand-$element";
}

/**
43 changes: 40 additions & 3 deletions src/UI/WynterCSS.php
Original file line number Diff line number Diff line change
@@ -54,6 +54,43 @@ public static function _badge(string $badge, array $props = [], $children = [])
return self::span($props, $children);
}

public static function _bars(array $children, array $props = [])
{
if (!isset($props["class"])) $props["class"] = "";
$props["class"] .= " bar";
if (isset($props["variant"])) {
$props["class"] .= " bar-{$props["variant"]}";
unset($props["variant"]);
}
return self::div($props, $children);
}

public static function _bar(array $props = [])
{
if (!isset($props["class"])) $props["class"] = "";
$props["class"] .= " bar-item";
$props["role"] = "progressbar";

if (!isset($props["style"])) $props["style"] = "";
$value = $props["value"];
$props["style"] .= "width:{$value}% !important;";
$props["aria-valuenow"] = $value;
unset($props["value"]);

$props["aria-valuemin"] = isset($props["min"]) ? $props["min"] : "0";
if(isset($props["min"])) unset($props["min"]);

$props["aria-valuemax"] = isset($props["max"]) ? $props["max"] : "100";
if(isset($props["max"])) unset($props["max"]);

if (isset($props["tooltip"])) {
$props["class"] .= " tooltip";
$props["data-tooltip"] = $value;
}
$show = isset($props["show-value"]) ? $value : "";
return self::div($props, $show);
}

public static function _breadcrumb(array $breadcrumbs)
{
$links = "";
@@ -88,15 +125,15 @@ public static function _card(array $props = [], array $children = [])
return self::div($props, $children);
}

public static function _carousel(array $children, array $props = [])
public static function _carousel(array $children, array $ids = ["slide-1", "slide-2", "slide-3", "slide-4"], array $props = [])
{
$props["class"] = isset($props["class"]) ? $props["class"] . " carousel" : "carousel";

return self::div($props, [
self::loop($children, function() {
self::loop($ids, function($id) {
return self::input("radio", "carousel-radio", [
"class" => "carousel-locator",
"id" => "slide-1",
"id" => $id,
"hidden" => "",
"checked" => "",
"name" => "carousel-radio"

0 comments on commit 5e0e563

Please sign in to comment.