Coder Social home page Coder Social logo

laravel-html's Introduction

Painless html generation

Latest Version on Packagist Software License Build Status Quality Score StyleCI Total Downloads

This package helps you generate HTML using a clean, simple and easy to read API. All elements can be dynamically generated and put together. The HTML builder helps you generate dynamically assigned form elements based on your selected model, the session or a default value.

Documentation

You'll find full documentation here.

Upgrading to 2.0

Version 2.0 was tagged because it could break some very specific cases, but you most likely don't have any work upgrading! Check out "Upgrading" for a detailed explanation.

Generating elements

For example creating a new span element with a class is super easy with the fluent methods for elements:

html()->span()->text('Hello world!')->class('fa fa-eye');

Building forms

Here's a quick example that builds a basic form with an e-mail input:

{{ html()->form('PUT', '/post')->open() }}

{{ html()->email('email')->placeholder('Your e-mail address') }}

{{ html()->form()->close() }}

The generated HTML will look like this:

<form method="POST" action="/post">
    <input type="hidden" name="_method" id="_method" value="PUT">
    <input type="hidden" name="_token" id="_token" value="csrf_token_will_be_here">
    <input type="email" name="email" id="email" placeholder="Your e-mail address">
</form>

Notice how the hidden _method and _token fields were automatically added and filled? You'll never forget to add csrf_field() again because now you simply wont have to anymore!

Another common use case might be to fill an input element based on the value that was previously submitted (using $request->old()). Worry no more, this has been taken care of as well. The above code will automatically fill in the email field if $session->old('email') exists. Amazing.

Models in the HTML builder

The HTML builder can also generate elements based on a model:

{{ html()->modelForm($user)->open() }}

{{ html()->input('name') }}

{{ html()->closeModelForm() }}

The value of the name field will automatically be filled with the model's name property if available:

<form method="POST">

<input type="text" name="name" id="name" value="John">

</form>

A "model" can be any object that implements ArrayAccess — anything from a complex Eloquent model to a plain array.

Postcardware

You're free to use this package (it's MIT-licensed), but if it makes it to your production environment we highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using.

Our address is: Spatie, Samberstraat 69D, 2060 Antwerp, Belgium.

All postcards are published on our website.

Installation

You can install the package via composer:

composer require spatie/laravel-html

Next, you must install the service provider:

// config/app.php
'providers' => [
    ...
    Spatie\Html\HtmlServiceProvider::class,
];

And optionally register an alias for the facade.

// config/app.php
'aliases' => [
    ...
    'Html' => Spatie\Html\Facades\Html::class,
];

Usage

Concepts

Elements—classes under the Spatie\Html\Elements namespace—are generally created via a Spatie\Html\Html builder instance.

html()->span()->text('Hello world!');

Element attributes and contents are modified via with fluent methods which return a new instance. This means element instances are immutable.

$icon = html()->span()->class('fa');

$icon->class('fa-eye'); // '<span class="fa fa-eye"></span>'
$icon->class('fa-eye-slash'); // '<span class="fa fa-eye-slash"></span>'

Element classes don't have any knowledge of the outside world. Any coupling to other concepts, like requests and sessions, should happen in the builder class, not on the element classes.

By convention, we assume that builder methods will modify values to our advantage (like pulling old values from the session on a failed form request), and element methods will be deterministic.

// This will try to resolve an initial value, and fall back to '[email protected]'
$email = html()->email('email', '[email protected]');

// This will always have '[email protected]' as it's value
$email = html()->email('email')->value('[email protected]');

Upgrading

From v1 to v2

Version 2 was created because the typehints in version 1 was holding the package back in some cases (like multiple select which requires an array of values instead of a string which was assumed).

Luckily, bumping the version number in composer.json and running composer update should be non-breaking. Here are some caveats to look out for:

  • The package now ships with a html() function by default, which returns an instance of the Html builder class. If you've defined your own method, you'll need to remove it.
  • Various type hints have been removed throughout the package, if you've extended a class to override its methods, you'll need to update them accordingly (everything still behaves the same!)

Changelog

Please see CHANGELOG for more information what has changed recently.

Testing

$ composer test

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email [email protected] instead of using the issue tracker.

Credits

About Spatie

Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.

License

The MIT License (MIT). Please see License File for more information.

laravel-html's People

Contributors

sebastiandedeyne avatar freekmurze avatar flyingluscas avatar rickselby avatar sebastiaanluca avatar wesleyhf avatar alexvanderbist avatar bmichotte avatar paulredmond avatar andrewxtsang avatar peter279k avatar roblui avatar propaganistas avatar mortenbergset avatar m1guelpf avatar axyr avatar maldechavda avatar johnathan avatar johanleroux avatar carusogabriel avatar aykutcan avatar

Watchers

James Cloos avatar Colorwalf avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.