Blade Components

Laravolt provides a comprehensive set of Blade Components that help you build consistent, accessible, and beautiful user interfaces with minimal effort.

Overview

Blade Components are a powerful feature in Laravel that allows you to create reusable, encapsulated UI elements. Laravolt extends this functionality with a set of pre-designed components that follow best practices for web design and accessibility.

These components help you:

• Maintain design consistency across your application
• Reduce duplication of HTML and CSS code
• Implement complex UI patterns with minimal effort
• Create accessible interfaces that work for all users

Basic Usage

Laravolt Blade Components use Laravel's component syntax. Here's a basic example:

<x-volt-button>Click Me</x-volt-button>

Most components accept attributes that modify their appearance or behavior:

<x-volt-button color="primary" size="large" icon="save">
    Save Changes
</x-volt-button>

Component Prefixing

All Laravolt components use the volt- prefix to avoid conflicts with your own components or those from other packages. For example:

• <x-volt-button> for buttons
• <x-volt-card> for cards
• <x-volt-icon> for icons

Available Components

Button

The Button component provides a consistent way to trigger actions across your application.

<x-volt-button
    icon="plus"
    class="pink"
>
    Export
</x-volt-button>

Button Properties

Card

The Card component is used to group related content in a flexible container.

<x-volt-card
    title="Card Title"
    cover="https://via.placeholder.com/300"
    meta.before="foo"
    content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
    meta.after="foo"
/>

Card Properties

Card with Slots

For more complex cards, you can use slots:

<x-volt-card>
    <x-slot name="header">Card Header</x-slot>
    <p>This is the main content of the card.</p>
    <p>You can include any HTML here.</p>
    <x-slot name="footer">Card Footer</x-slot>
</x-volt-card>

Brand Image

The Brand Image component helps maintain consistent branding across your application.

<x-volt-brand-image
    src="/path/to/logo.png"
    alt="Company Name"
/>

Brand Image Properties

Breadcrumb

The Breadcrumb component shows the hierarchical path to the current page.

<x-volt-breadcrumb>
    <x-volt-breadcrumb-item label="Home" link="/" />
    <x-volt-breadcrumb-item label="Products" link="/products" />
    <x-volt-breadcrumb-item label="Current Product" />
</x-volt-breadcrumb>

Breadcrumb Item Properties

Icon

The Icon component provides an easy way to include SVG icons in your interface.

<x-volt-icon name="user" class="large" />

Icon Properties

Link

The Link component provides consistent styling for text links.

<x-volt-link href="/dashboard" icon="home">
    Go to Dashboard
</x-volt-link>

Link Properties

Link Button

The Link Button component creates links that are styled as buttons.

<x-volt-link-button href="/dashboard" icon="home" color="primary">
    Dashboard
</x-volt-link-button>

Link Button Properties

Form

The Form component provides a standardized way to create forms.

<x-volt-form action="/users" method="POST">
    <!-- Form fields go here -->
    <x-volt-button type="submit">Save</x-volt-button>
</x-volt-form>

Form Properties

Media Library

The Media Library component helps manage and display media content.

<x-volt-media-library
    name="attachments"
    :collection="$mediaLibrary"
    multiple
    accept="image/*"
/>

Media Library Properties

Panel

The Panel component groups content in collapsible sections.

<x-volt-panel title="Settings">
    <p>Panel content goes here.</p>
</x-volt-panel>

Panel Properties

Tab

The Tab component organizes content into tabbed interfaces.

<x-volt-tab>
    <x-volt-tab-panel title="First Tab" active>
        Content for the first tab
    </x-volt-tab-panel>
    <x-volt-tab-panel title="Second Tab">
        Content for the second tab
    </x-volt-tab-panel>
</x-volt-tab>

Tab Panel Properties

Customization

Styling

Most components accept styling attributes like class, color, and size:

<x-volt-button class="my-custom-class" color="red">
    Custom Button
</x-volt-button>

Slots

Components that wrap content use Laravel's slot system:

<x-volt-card>
    <x-slot name="header">Card Title</x-slot>
    <p>Card content goes here</p>
    <x-slot name="footer">Card Footer</x-slot>
</x-volt-card>

Attributes

Additional HTML attributes are passed through to the root element:

<x-volt-button id="submit-btn" data-action="save">
    Save
</x-volt-button>

Best Practices

Consistency

Use components consistently throughout your application to maintain a uniform look and feel.

Accessibility

Laravolt components are designed with accessibility in mind, but you should ensure that your implementation follows accessibility best practices:

• Provide descriptive labels for buttons and links
• Use appropriate heading levels in cards and panels
• Ensure sufficient color contrast for text and background colors

Performance

While components make development easier, excessive nesting of complex components can impact performance. Monitor your page load times and optimize where necessary.

Related Documentation

• Form Components - Advanced form handling capabilities
• Menu Components - Navigation menu components
• Table Components - Data table components