Back to Docs

Html

In general we'd prefer to keep most of our HTML where in belongs in blade components and files. However, there are various cases where it can be nice to autogenerate the HTML needed for a component automagically. This package is intended for those exact circumstances.

Blade Directives

Similar to our Forms package we have some simple directives for loading any needed assets for the components.

<!-- Html Styles -->
<style >

</style>
<!-- Html Scripts -->
<script type="module" >
 window.HtmlJS = () => {  };
 window.HtmlJS();
</script>
<!-- Html Styles -->
<style >

</style>
<!-- Html Scripts -->
<script type="module" >
 window.HtmlJS = () => {  };
 window.HtmlJS();
</script>
<script src="https://cdn.usefathom.com/script.js" data-site="" defer></script>

Just place that below any of your JavaScript file references and you can easily load the html assets when the content is being rendered on screen.

As for the Fathom directive, ensure that you have the following added to your services:

'fathom' => [
    'key' => env('FATHOM_KEY'),
],

There are also a few string-formatting directives. Each replaces underscores with spaces before applying the transformation:

@when($condition, $value) // echo the value only when the condition is true
@title($string)           // convert to Title Case
@headline($string)        // convert to Headline Case
@limit($string)           // truncate to 40 characters
@plural($string)          // pluralize the string
@singular($string)        // singularize the string

Components

Accordion
ActionDropdown
ActionDropdownGroup
Admonition
Alert
Animation
Announcement
Avatar
Badge
Breadcrumbs
Calendar
Card
Carousel
Code
Confetti
Countdown
Divider
Dock
DropdownDivider
DropdownItem
DropdownItemButton
Feed
FeedItem
Gauge
GithubGraph
GradientBackground
GridPattern
Hero
HtmlComponent
Image
ImageCompare
Kbd
LightBar
Lightbox
ListGroup
ListGroupItem
Lottie
MagneticButton
Marquee
Modal
Nav
NavButton
NavDropdown
NavLink
Offcanvas
Parallax
Popover
Progress
Rating
Skeleton
Sparkline
Spinner
Status
Swap
Table
Tag
Text
Tilt
Video
WordSwitcher
Animations/Hamster
Animations/Pulse
Animations/Spaceman
Animations/Typewriter

A number of components are also available only as blade tags, including Map, NavBar, and SortTextWithIcon (see the properties below and the components gallery).

The HtmlTagComponent

This class base lets us create our own global components for any needs in our application. These are single-file components, containing JavaScript, Styles and HTML content.

Below is an example of an overlay component.

namespace App\View\Components\Global;

use Grafite\Html\Tags\HtmlTagComponent;

class PendingOverlay extends HtmlTagComponent
{
    public static function template()
    {
        return HTML
            <div id="_componentPendingOverlay" class="overlay d-none bg-dark">
                <div class="spinner-container">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>
        HTML;
    }

    public static function styles()
    {
        return CSS
            .overlay {
                width: 100%;
                height: 100vh;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 30000;
                opacity: .8;
            }
            .spinner-container {
                position: absolute;
                top: 49%;
                left: calc(50% - 15px);
            }
        CSS;
    }

    public static function js()
    {
        return JS
            window.pending = (button) => {
                if (button &amp;&amp; button.form.checkValidity()) {
                    button.form.submit();
                    button.disabled = true;
                    document.getElementById('_componentPendingOverlay').classList.remove('d-none');
                }

                if (! button) {
                    document.getElementById('_componentPendingOverlay').classList.remove('d-none');
                }

                return false;
            };

            window.pendingHide = () => {
                document.getElementById('_componentPendingOverlay').classList.add('d-none');
            };
        JS;
    }
}

Component Methods Available

To generate any component you must first call the make method statically. Alert::make(). Subsequently, you need to end all component chains with the render() method or the renderWhen method.

Between those methods you can call any of these global methods to set various values in the component.

id() => $id
css() => $css
url() => $url
text() => $text
onClick() => $onClick
items() => $items
attributes() => $attributes

Some components have unique properties which have unique methods to call each of them to set their values. Below is a list of any unique properties that can be set for the components.

Accordion

  • show() // start by showing all open

Admonition

  • body(string $value) // admonition content
  • title(string $value) // heading text
  • icon(string $value) // icon markup
  • color(string $value) // color/theme

Alert

  • background(string $value) // color
  • heading(string $value) // text
  • dismiss() // enables dismiss button

Announcement

  • background(string $value) // color
  • heading(string $value) // text
  • dismiss() // enables dismiss button
  • timeout(int $value) // ms before auto-dismiss
  • position(string $value) // top or bottom

Avatar

  • image($string) // a url path to an image

Badge

  • name(string $value) // label text
  • status(string $value) // status text
  • color(string $value) // badge color
  • theme(string $value) // flat, flat-square, for-the-badge, plastic

Calendar

  • initialView(string $value) // FullCalendar view, e.g. dayGridMonth
  • dayOfWeekStart(int $value) // first day of week (0 = Sunday)

Card

  • body(string $value) // text
  • title(string $value) // text
  • header(string $value) // text
  • footer(string $value) // text
  • image(string $value, string $alt) // source and alt
  • shadow(string $value) // shadow css class

Code

  • body(string $value) // code content
  • language(string $value) // syntax highlighting language

Confetti

  • content(string $value) // trigger element content
  • trigger(string $value) // click, hover, or auto
  • particleCount(int $value) // number of confetti particles
  • spread(int $value) // spread angle
  • colors(array $value) // confetti colors
  • duration(int $value) // animation duration in ms

Countdown

  • time(string $value) // target date/time to count down to

Dock

  • position(string $value) // bottom, top, left, right
  • size(string $value) // sm, md, lg
  • magnify(bool $value) // enable hover magnification
  • fixed(bool $value) // fix the dock in place

Feed

  • borderColor(string $value) // color for item borders

FeedItem

  • content(string $value) // body content for the item
  • date(string $value) // date for the item
  • icon(string $value, string $value) // an icon (fontawesome?) and a css color

Gauge

  • value(int $value) // current value
  • min(int $value) // minimum value
  • max(int $value) // maximum value
  • size(string $value) // sm, md, lg
  • thickness(string $value) // arc thickness
  • color(string $value) // arc color
  • label(string $value) // label text
  • unit(string $value) // unit suffix, e.g. °C
  • showValue(bool $value) // show the numeric value
  • thresholds(array $value) // color thresholds, e.g. [['from' => 60, 'color' => 'warning']]

GithubGraph

  • eventType(string $value) // gradient or count
  • title(string $value) // graph title
  • events(array $value) // event data to render
  • colors(array $value) // color scale
  • linkUrl(string $value) // link for the graph
  • linkTitle(string $value) // link text
  • linkTarget(string $value) // link target attribute
  • enablePastEntries(bool $value) // allow entries in the past
  • localStoragePrefix(string $value) // prefix for local storage keys
  • remoteStorageUrl(string $value) // remote endpoint for storing entries

GradientBackground

  • content(string $value) // wrapped content
  • colors(array $value) // gradient colors
  • direction(string $value) // gradient direction
  • animate() // animate the gradient
  • duration(int $value) // animation duration

GridPattern

  • content(string $value) // wrapped content
  • variant(string $value) // pattern variant
  • size(int $value) // grid cell size
  • color(string $value) // line color
  • strokeWidth(int $value) // line width

Hero

  • content(string $value) // wrapped content
  • effect(string $value) // Vanta.js effect, e.g. waves, net, birds
  • color(string $value) // effect color
  • backgroundColor(string $value) // background color
  • mouseControls(bool $value) // enable mouse controls
  • touchControls(bool $value) // enable touch controls
  • gyroControls(bool $value) // enable gyroscope controls
  • minHeight(string $value) // minimum height
  • minWidth(string $value) // minimum width
  • scale(float $value) // effect scale
  • scaleMobile(float $value) // effect scale on mobile
  • speed(float $value) // animation speed
  • zoom(float $value) // camera zoom
  • options(array $value) // additional Vanta.js options

Image

  • alt(string $value) // alt text
  • source(string $value) // image source
  • thumbnail() // renders as a thumbnail
  • lazy() // lazy loads the image
  • placeholder() // shows a placeholder while loading
  • fluid() // makes the image responsive

ImageCompare

  • imageA(string $value) // first image source
  • imageB(string $value) // second image source
  • width(string $value) // width
  • height(string $value) // height
  • color(string $value) // slider handle color

Kbd

  • size(string $value) // sm, lg

LightBar

  • content(string $value) // wrapped content
  • color(string $value) // light color
  • position(string $value) // top or bottom
  • height(string $value) // bar height
  • blur(string $value) // blur radius

Lightbox

  • gallery(string $value) // gallery grouping name
  • thumbnailCss(string $value) // css classes for thumbnails

Lottie

  • icon(string $value) // built-in icon name
  • image(string $value) // custom Lottie JSON source
  • trigger(string $value) // hover or click
  • color(string $value) // primary color
  • stroke(string $value) // stroke color
  • speed(float $value) // playback speed

MagneticButton

  • content(string $value) // button content
  • strength(int $value) // magnetic pull strength
  • radius(int $value) // magnetic pull radius

Map

  • marker($x, $y, $tooltip = null, $click = null) // a marker for the map
  • center($x, $y) // the center of the map
  • skin($url) // a URL for a LeafletJS map tiles string
  • bubbles(array [ [ 'x' => null, 'y' => null, 'color' => null, 'fill' => null, 'opacity' => null, 'radius' => null, 'tooltip' => null, 'click' => null, ] ])
  • zoom(int $int) // starting zoom level
  • maxZoom(int $int) // max level of the zoom

Marquee

  • content(string $value) // marquee content
  • reverse() // reverses the direction
  • pauseOnHover() // pauses on hover
  • vertical() // scrolls vertically
  • repeat(int $value) // number of repeats
  • duration(int $value) // animation duration

Modal

  • content(string $value) // content for the modal body
  • isStatic() // is the modal static
  • dismiss() // can the modal be dismissed
  • footer(string $value) // modal footer content
  • title(string $value) // modal title

Nav

  • pills() // set the nav to pills
  • tabs() // set the nav to tabs

NavBar

  • brand(string $value) // content for the navbar brand link

Offcanvas

  • position(string $value) // start or end
  • backdrop(string $value) // true, false, or static
  • width(string $value) // panel width

Parallax

  • image(string $value) // image source
  • scale(float $value) // parallax scale
  • delay(int $value) // effect delay
  • orientation(string $value) // scroll orientation

Popover

  • title(string $value) // popover title
  • trigger(string $value) // hover, click, focus
  • content(string $value) // popover body content

Progress

  • now(string $value) // what is the progress now
  • max(string $value) // min value of the progress
  • min(string $value) // max value of the progress

Rating

  • value(int $value) // current rating
  • max(int $value) // max number of stars

Skeleton

  • width(string $value) // placeholder width
  • height(string $value) // placeholder height
  • rounded(string $value) // border radius, e.g. circle
  • animation(string $value) // pulse or wave

SortTextWithIcon

  • field(string $value) // the field value for sorting

Sparkline

  • data(array $value) // data points
  • width(int $value) // chart width
  • height(int $value) // chart height
  • strokeWidth(int $value) // line thickness
  • color(string $value) // line color
  • area() // fills the area under the line
  • showDot() // shows a dot at the last point
  • type(string $value) // line or bar
  • label(string $value) // accessible label

Status

  • color(string $value) // indicator color
  • thickness(string $value) // border thickness
  • style(string $value) // indicator style
  • offset(string $value) // position offset
  • state(string $value) // status label text

Swap

  • on(string $value) // content shown when active
  • off(string $value) // content shown when inactive
  • active() // starts in the active state
  • rotate() // rotates between states
  • flip() // flips between states

Table

  • collection(collection $value) // the collection for the table
  • keys(collection $value) // keys which can be used for headers
  • headers(collection $value) // headers which can override the keys
  • sortable(string $value) // a JS method which is triggered onclick

Text

  • effect(string $value) // fade-in or other animation effect

Tilt

  • startX(int $value) // the X angle to start at
  • startY(int $value) // the Y angle to start at
  • glare(bool $value) // if the panel has a glare

Video

  • type(string $value) // video, audio, youtube, vimeo
  • source(string $value) // the source url
  • poster(string $value) // a poster image for loading

WordSwitcher

  • duration(int $value) // the duration of the animation (default: 0)
  • delay(int $value) // the delay between strings (default: 3000)
  • random(bool $value) // if the words are random

As Blade Tags

Nearly all components have corresponding blade tags which can also be used. Many of which can be seen here

Core Methods

There are a few core component methods which we should discuss.

render

Renders the component as a string

renderWhen(callback)

Renders the component as a string when the callback is true.

make

Intiates the build of the html component.

styles

Sends some CSS to the HtmlAssets which are minified and pushed to the blade directive styles.

scripts

Sends an array of CDN links to the HtmlAssets which are pushed to the blade directive scripts.

js

Sends JavaScript code to the HtmlAssets which are pushed to the blade directive scripts.