Download the PHP package bjnstnkvc/mail-components without Composer

On this page you can find all versions of the php package bjnstnkvc/mail-components. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Example code of bjnstnkvc/mail-components

Informations about the package mail-components

Laravel Mail Components Library

A collection of pre-made simple Laravel Blade mail components.

Installation & setup

You can install the package via composer:

composer require bjnstnkvc/mail-components

The package will automatically register its service provider.

Usage

Config

Publish the components' config file with:

php artisan vendor:publish --provider="Bjnstnkvc\MailComponents\MailComponentsServiceProvider" --tag=mail-config

This will publish a file called in your config-directory.

Styles

Publish the components' css file with:

php artisan vendor:publish --provider="Bjnstnkvc\MailComponents\MailComponentsServiceProvider" --tag=mail-styles

This will publish a mail-components.css to resources/views/vendor/mail/html/themes directory.

Theme

If you like to render an email via Markdown, you'll need to set Mailable theme property to mail-components.

or set theme property to mail-components in your config/mail.php file:

Mail Components

In order to use the Mail components, use standard Blade Component syntax from the docs. By the default, the Mail components can be used with the mail prefix.

Layout

Layout component is a base of every mail. Besides creating a boilerplate table that will hold mail content, it also handles media queries for responsiveness.

List of all properties Layout component accepts is as follows:

Property Description
background Layout Background color (accepts all color values).
title Layout title.
font Layout font url.
font-family Layout font family
is-markdown Determine whether the email is Markdown formatted or not. If set to true, all classes except media queries from style tag will be omitted from the email.

In order to render the component, use the following syntax:

If you'd like to add additional content to the <head> tag of the layout, use the following syntax:

Header

List of all properties Header component accepts is as follows:

Property Description
app-url Header logo app url (defaults to APP_URL property from .env).
logo Header logo (accepts image url or asset path as an argument).
width Header logo width.
height Header logo height.
show-logo Determine whether to show Header Logo (defaults to true).

In order to render the component, use the following syntax:

If you'd like to add additional content to the header, use the following syntax:

Footer

List of all properties Footer component accepts is as follows:

Property Description
email Footer Email address.
country Footer country.
state Footer state.
city Footer city.
address Footer street address.
zip Footer zip code.
phone Footer phone number.
show Determine whether to display the Footer (defaults to true).
show-copyright Determine whether to display the Footer copyright (defaults to true).

In order to render the component, use the following syntax:

If you'd like to add additional content to the header, use the following syntax:

Content

Content component creates a boilerplate HTML structure suitable for any injected content outside of other Mail components.

List of all properties Footer component accepts is as follows:

Property Description
background Content Background color.

In order to render the component, use the following syntax:

Grid

Grid component creates a boilerplate HTML structure suitable for any injected 'grid-like' content. It can create up to 4 grid columns that are fully responsive.

List of all properties Grid component accepts is as follows:

Property Description
background Grid Background color.
columns Number of Grid Columns (defaults to 1).
spacing Grid Grid spacing (options: top, bottom, top, bottom).
one Grid Column first Slot.
two Grid Column second Slot.
three Grid Column third Slot.
four Grid Column fourth Slot.

In order to render a Grid component with different number of columns, simply add columns property to the component followed by number of columns.

If your columns are containing simple text, you can pass them as a property as well using the following syntax:

However, if you'd like to inject more complex HTML, use the standard Blade Slot syntax:

Hero

Hero component creates a boilerplate HTML structure suitable for any injected 'hero-like' content.

List of all properties Hero component accepts is as follows:

Property Description
background Hero section background Image.
height Hero section height (default is 400).
title Hero section Title.
subtitle Hero section Subtitle.
button Hero section button.
button-url Hero section button url.

In order to render a Hero component use the following syntax:

However, if you'd like to inject more complex syntax, use the standard Blade Slot syntax:

Subcopy

List of all properties Subcopy component accepts is as follows:

Property Description
background Subcopy Background color.

In order to render the component, use the following syntax:

Table

List of all properties Table component accepts is as follows:

Property Description
background Table background color.
header-background Table Header background color.
row-index Determine whether to show table row index column.
model Table Eloquent model.
columns Table headers.
headers Table columns.

Table component comes with three ways in which you can populate the table with data:

String
Array

In both cases, following table would be generated:

Model

Let's say we have users table with the following data:

id first_name last_name email email_verified_at created_at updated_at role_id
1 John Doe [email protected] 2022-09-01 12:00:00 2022-09-30 22:00:00 2022-09-01 12:00:00 2
2 Jane Doe [email protected] 2022-09-01 10:00:00 2022-09-30 23:00:00 2022-09-01 12:00:00 3

passed from the controller:

In order to use it with Table component, following syntax is used:

will generate following table:

Table generated with model will create a header for each property of the model. For example, if we'd pass following data:

to the same blade from the example above, we'll ge the following output:

Table component comes with an option to render the content with Row Index cell by adding row-index property and setting it to true.

Component above will render following table:

Image

List of all properties Image component accepts is as follows:

Property Description
src Image source.
alt Image Alternative text description.
width Image width (defaults to auto).
height Image height (defaults to auto).
is-responsive Determine whether the Image is Responsive (defaults to false).
as-section Determine whether to display Image as a section (defaults to true).

In order to render the component, use the following syntax:

By default, rendered image will not take more than it's width, no matter the screen size. If you add is-responsive property, and set it to true, image will take full screen width on smaller size screens.

Image component by default is rendered as a mail section, meaning img tag is wrapped within Mail Content component which will result in an image taking its own table row.

In case you'd like to include an image as a part of another component or simply render it as it is, add is-section property and set it to false.

Button

List of all properties Button component accepts is as follows:

Property Description
url Button link.
title Button title.
width Button width (defaults to 200).
height Button height (defaults to 40).
color Button color (defaults to black).

In order to render the component, use the following syntax:

If your Button is containing simple text/title, you can pass is as a property using the following syntax:

However, if you'd like to inject more complex HTML, use the standard Blade Slot syntax:

New Line

List of all properties New Line component accepts is as follows:

Property Description
height New Line Break height.
background New Line Break background color.

In order to render the component, use the following syntax:

Examples

Verify Email

Let's say we want to create a Verification Email that gets sent when the user successfully registers.

First, we'll create a Mail class using following artisan command:

php artisan make:mail VerificationMail

Command above will create a VerificationMail.php Mail class with the same name in app\Mail directory.

Next step would be to attach data that we'll use to the class.

Next step would be to create a view. For this example, we'll create verify-email.blade.php file in resources/views/emails directory.

Finally, we'll use Mail Components to create an HTML for aforementioned email.

Let's start with creating our basic Layout with Header and Footer. Blade syntax below:

will render following HTML:

Next, we'll add email content:

which will generate following HTML:

We'll add a Subcopy with verification link as a string in case the user has trouble verifying an email via button.

now, our email looks as follows:

Customisation

Config

Note: You might need to clear config cache using php artisan cache:clear command after you make changes to .env file.

Publishing

You can publish all components class and view using artisan the following command:

php artisan components:publish

Optionally, you can pass component name as an argument, which will publish only those components.

php artisan components:publish Header Footer Table

From this point on, you can change the published component class and view to your liking.

Restoring

If by any chance you'd like to restore the components default settings, use the following artisan command:

php artisan components:restore

Optionally, you can pass component name as an argument, which will restore only those components.

php artisan components:restore Header Footer Table

Additionally, if you'd like to remove previously published components class and views, you can attach --delete option:

php artisan components:restore --delete

or

php artisan components:restore Header Footer Table --delete

Note: You might need to clear config cache using php artisan cache:clear command after you publish or restore the components.

License

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

All versions of mail-components with dependencies

PHP Build Version
Package Version
Requires illuminate/filesystem Version ^7.0|^8.0|^9.0|^10.0|^11.0|^12.0
illuminate/support Version ^7.0|^8.0|^9.0|^10.0|^11.0|^12.0
illuminate/view Version ^7.0|^8.0|^9.0|^10.0|^11.0|^12.0
illuminate/console Version ^7.0|^8.0|^9.0|^10.0|^11.0|^12.0
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package bjnstnkvc/mail-components contains the following files

Loading the files please wait ....