Skip to content

Latest commit

 

History

History
165 lines (127 loc) · 6.95 KB

README.md

File metadata and controls

165 lines (127 loc) · 6.95 KB
Raw

Rapidez Blade Components

This package includes some Tailwind CSS styled Blade components, the components do not need or require Rapidez. This package is only used within Rapidez by default, but can be used in any Laravel project.

The idea with these components is to have a good starting point and centralized styling. Most of the components use a Anonymous Index, this way you have a default and variants can be added next to it. We're using the (currently undocumented) component name guessing here.

We don't provide a input + label combination component as you'll end up with attribute merging issues. We can't guess where the attribute should go; the input or the label. We could provide a 99% use case but you'll eventually end up with exceptions and complexity within the components. But; we do provide it for the checkbox and radio as you can see within those components. If you don't need the label you can use the base component as you can find within the examples.

The base button doesn't have any styling; here, we only use the x-rapidez::tag. All other buttons use the button/button, which contains the basic styling for buttons, such as padding, hover effects, and the disabled state. The button variants contain styling for the background and text color. There is only one exception: the button/slider, which has more custom styling than the other button variants.

Installation

composer require rapidez/blade-components

Make sure these colors are present in your tailwind.config.js file:

colors: {
    colors: {
        primary: {
            DEFAULT: color('--primary', '#2FBC85'),
            text: color('--primary-text', colors.white),
        },
        secondary: {
            DEFAULT: color('--secondary', '#202F60'),
            text: color('--secondary-text', colors.white),
        },
        conversion: {
            DEFAULT: color('--conversion', '#36B422'),
            text: color('--conversion-text', colors.white),
        },
        foreground: {
            emphasis: color('--foreground-emphasis', colors.slate[900]),
            DEFAULT: color('--foreground', colors.slate[800]),
            muted: color('--foreground-muted', colors.slate[600]),
        },
        border: {
            emphasis: color('--border-emphasis', colors.slate[500]),
            DEFAULT: color('--border', colors.slate[200]),
            muted: color('--border-muted', colors.slate[100]),
        },
        background: {
            emphasis: color('--background-emphasis', colors.slate[200]),
            DEFAULT: color('--background', colors.slate[100]),
            muted: color('--background-muted', colors.slate[50]),
        },
    },
    textColor: (theme) => theme('colors.foreground'),
    borderColor: (theme) => ({
        default: theme('colors.border'),
        ...theme('colors.border'),
    }),
    backgroundColor: (theme) => theme('colors.background'),
}

And make sure you add this in your tailwind.config.js file:

import colors from 'tailwindcss/colors'

function color(variable, fallback) {
    return 'color-mix(in srgb, var(' + variable + ', ' + fallback + ') calc(100% * <alpha-value>), transparent)'
}

Views

If you like to change the components you can publish the views with:

php artisan vendor:publish --tag=rapidez-blade-components-views

Usage

Just like any other Blade component, check out the Laravel Blade docs and the examples within the components code linked above. All components are prefixed with x-rapidez:: to avoid any conflicts with existing Blade components within your project.

Basic examples

Input with a label

<label>
    <x-rapidez::label>Something</x-rapidez::label>
    <x-rapidez::input name="something" class="extra-styling" />
</label>

Checkbox

<x-rapidez::input.checkbox name="something">
    @lang('Translatable label')
</x-rapidez::input.checkbox>

Accordion

<x-rapidez::accordion>
    <x-slot:label>Accordion Title</x-slot:label>
    <x-slot:content>
        Accordion content goes here
    </x-slot:content>
</x-rapidez::accordion>

Tag

It is a Blade version of a dynamic Vue component

Usage
<x-rapidez::tag is="span" class="font-bold">
    Something
</x-rapidez::tag>

which will result in

<span class="font-bold">
    Something
</span>

Preview

There is a preview Blade file included with all the components, to view that in your project you could register a route for it within routes/web.php and visit the /components route from your browser:

Route::view('components', 'rapidez::components-preview');

Development

When you're working on this package you can use composer preview-demo to get a preview in the browser. There is also another script: generate-demo which runs automatically on push.

License

GNU General Public License v3. Please see License File for more information.