TRMNL Blade

https://github.com/bnussbau/trmnl-blade
Admin
Blade Components on top of the TRMNL Design System. It helps you generate markup code using native...
Tokens:4,120
Snippets:44
Trust Score:8.1
License:MIT
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install TRMNL Blade Package

Source: https://github.com/bnussbau/trmnl-blade/blob/main/README.md

Installs the TRMNL Blade package using Composer. Ensure you have Composer installed and configured for your project.

```bash
composer require bnussbau/trmnl-blade
```

--------------------------------

### Title Bar Component Example

Source: https://github.com/bnussbau/trmnl-blade/blob/main/resources/views/components/README.md

Implement the Title Bar component for headers. It requires a 'title' and can optionally include an 'image' and 'instance' identifier.

```blade
<x-trmnl::title-bar title="My App" image="https://trmnl.com/images/plugins/trmnl--render.svg" instance="Instance Name">
    <!-- Optional inline content when image="inline" -->
</x-trmnl::title-bar>
```

--------------------------------

### Rich Text Quote Example

Source: https://github.com/bnussbau/trmnl-blade/blob/main/README.md

Illustrates how to use the richtext component to display a motivational quote with a title, content, and a label for the author. It also includes screen, view, layout, and title-bar components.

```blade
<x-trmnl::screen>
    <x-trmnl::view>
        <x-trmnl::layout>
            <x-trmnl::richtext gapSize="large" align="center">
                <x-trmnl::title>Motivational Quote</x-trmnl::title>
                <x-trmnl::content>“I love inside jokes. I hope to be a part of one someday.”</x-trmnl::content>
                <x-trmnl::label variant="underline">Michael Scott</x-trmnl::label>
            </x-trmnl::richtext>
        </x-trmnl::layout>
        <x-trmnl::title-bar/>
    </x-trmnl::view>
</x-trmnl::screen>
```

--------------------------------

### Complex Components Usage

Source: https://github.com/bnussbau/trmnl-blade/blob/main/resources/views/components/README.md

Examples for complex TRMNL components including Rich Text, Item, and Table. Configure alignment and gap size for Rich Text, and size for Table.

```blade
<x-trmnl::richtext align="center" gapSize="large">
    <!-- Rich text content -->
</x-trmnl::richtext>

<x-trmnl::item>
    <!-- Item content -->
</x-trmnl::item>

<x-trmnl::table size="condensed">
    <!-- Table content -->
</x-trmnl::table>
```

--------------------------------

### Text Stroke Styling

Source: https://github.com/bnussbau/trmnl-blade/blob/main/resources/views/components/README.md

Apply text stroke effects to text-based components using the 'textStroke' prop. Example shown on a 'value' component.

```blade
<x-trmnl::value textStroke="small">Stroked Text</x-trmnl::value>
```

--------------------------------

### Basic Layout Component

Source: https://github.com/bnussbau/trmnl-blade/blob/main/README.md

Demonstrates the basic structure for a screen layout using TRMNL Blade components. This includes screen, view, and layout components.

```blade
<x-trmnl::screen>
    <x-trmnl::view>
        <x-trmnl::layout>
            <!-- Your content here -->
        </x-trmnl::layout>
        <x-trmnl::title-bar/>
    </x-trmnl::view>
</x-trmnl::screen>
```

--------------------------------

### Dense Table with Clamp and Index

Source: https://github.com/bnussbau/trmnl-blade/blob/main/resources/boost/skills/trmnl-blade-development/SKILL.md

Use this snippet to create a dense table with indexed rows and clamped content for long account names. Ensure the table has 'table--small' and 'table--indexed' classes.

```blade
<table class="table table--small table--indexed">
    <thead>
        <tr>
            <th></th>
            <th>Account</th>
            <th class="text--right">MRR</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($accounts as $account)
            <tr>
                <td>
                    <x-trmnl::meta>
                        <span class="index">{{ $loop->iteration }}</span>
                    </x-trmnl::meta>
                </td>
                <td><span data-clamp="1">{{ $account->name }}</span></td>
                <td class="text--right">${{ number_format($account->mrr) }}</td>
                <td><x-trmnl::label variant="outline">{{ $account->status }}</x-trmnl::label></td>
            </tr>
        @endforeach
    </tbody>
</table>
```

--------------------------------

### Basic Elements Composition

Source: https://github.com/bnussbau/trmnl-blade/blob/main/resources/views/components/README.md

Combine basic TRMNL elements like text, title, value, label, description, and clamp to build interface content. Configure alignment and size as needed.

```blade
<x-trmnl::text alignment="center">
    <x-trmnl::title size="small">Section Title</x-trmnl::title>
    <x-trmnl::value size="large">42</x-trmnl::value>
    <x-trmnl::label variant="primary">Status</x-trmnl::label>
    <x-trmnl::description>Detailed description here</x-trmnl::description>
    <x-trmnl::clamp lines="2">Long text that will be clamped...</x-trmnl::clamp>
</x-trmnl::text>
```

--------------------------------

### View Container Component

Source: https://github.com/bnussbau/trmnl-blade/blob/main/resources/views/components/README.md

Use the View component as a container for view layouts. Control its size with the 'size' prop.

```blade
<x-trmnl::view size="full">
    <!-- Your content here -->
</x-trmnl::view>
```

--------------------------------

### Layout Component Configuration

Source: https://github.com/bnussbau/trmnl-blade/blob/main/resources/views/components/README.md

The Layout component provides flexible content organization. Configure direction, alignment, and stretch behavior using props.

```blade
<x-trmnl::layout direction="col" alignment="center">
    <!-- Your content here -->
</x-trmnl::layout>
```

--------------------------------

### Run TRMNL Blade Tests

Source: https://github.com/bnussbau/trmnl-blade/blob/main/README.md

Executes the test suite for the TRMNL Blade package using Composer. This command verifies the functionality and stability of the components.

```bash
composer test
```

--------------------------------

### KPI Grid with Spans

Source: https://github.com/bnussbau/trmnl-blade/blob/main/resources/boost/skills/trmnl-blade-development/SKILL.md

Use this snippet to create a KPI grid with defined column spans within a TRMNL layout. It demonstrates how to use `<x-trmnl::grid>` and `<x-trmnl::col>` components for structured data display.

```blade
<x-trmnl::layout direction="col" stretch="default">
    <x-trmnl::grid cols="4" class="gap--medium">
        <x-trmnl::col span="2">
            <x-trmnl::item>
                <x-trmnl::label>Revenue</x-trmnl::label>
                <x-trmnl::value size="large">$12,840</x-trmnl::value>
            </x-trmnl::item>
        </x-trmnl::col>

        <x-trmnl::col>
            <x-trmnl::item>
                <x-trmnl::label>Orders</x-trmnl::label>
                <x-trmnl::value>384</x-trmnl::value>
            </x-trmnl::item>
        </x-trmnl::col>

        <x-trmnl::col>
            <x-trmnl::item>
                <x-trmnl::label>Refunds</x-trmnl::label>
                <x-trmnl::value>7</x-trmnl::value>
            </x-trmnl::item>
        </x-trmnl::col>
    </x-trmnl::grid>
</x-trmnl::layout>
```

--------------------------------

### Chart Screen Skeleton with Highcharts

Source: https://github.com/bnussbau/trmnl-blade/blob/main/resources/boost/skills/trmnl-blade-development/SKILL.md

This snippet provides a basic structure for a chart screen using TRMNL layout components and Highcharts. It includes stat displays and a placeholder for the chart, with specific configurations for TRMNL renders like disabling animations and tooltips.

```blade
<x-trmnl::layout direction="col" stretch="default">
    <x-trmnl::grid cols="3" class="gap--medium">
        <x-trmnl::item>
            <x-trmnl::value>{{ number_format($pageviews) }}</x-trmnl::value>
            <x-trmnl::label>Pageviews</x-trmnl::label>
        </x-trmnl::item>
        <x-trmnl::item>
            <x-trmnl::value>{{ number_format($visitors) }}</x-trmnl::value>
            <x-trmnl::label>Visitors</x-trmnl::label>
        </x-trmnl::item>
        <x-trmnl::item>
            <x-trmnl::value>{{ $conversionRate }}%</x-trmnl::value>
            <x-trmnl::label>Conversion</x-trmnl::label>
        </x-trmnl::item>
    </x-trmnl::grid>

    <div id="traffic-chart"></div>
</x-trmnl::layout>

<script>
document.addEventListener('DOMContentLoaded', () => {
    Highcharts.chart('traffic-chart', {
        chart: { type: 'spline', animation: false, backgroundColor: 'transparent', height: 260 },
        title: { text: null },
        legend: { enabled: false },
        tooltip: { enabled: false },
        credits: { enabled: false },
        plotOptions: { series: { animation: false, enableMouseTracking: false, marker: { enabled: false } } },
        series: [{ data: @json($series), color: '#000000', lineWidth: 4 }]
    });
});
</script>
```

--------------------------------

### Screen Component Usage

Source: https://github.com/bnussbau/trmnl-blade/blob/main/resources/views/components/README.md

Use the Screen component to wrap the entire application. It accepts a 'noBleed' prop to remove default padding.

```blade
<x-trmnl::screen>
    <!-- Your content here -->
</x-trmnl::screen>
```

--------------------------------

### Publish TRMNL Blade Views

Source: https://github.com/bnussbau/trmnl-blade/blob/main/README.md

Optionally publishes the view files for TRMNL Blade components. This allows for customization of the component views.

```bash
php artisan vendor:publish --tag="trmnl-views"
```

--------------------------------

### Columns Grid Layout

Source: https://github.com/bnussbau/trmnl-blade/blob/main/resources/views/components/README.md

Utilize the Columns component for a grid-based layout system. Place content within individual 'column' components.

```blade
<x-trmnl::columns>
    <x-trmnl::column>
        <!-- Column 1 content -->
    </x-trmnl::column>
    <x-trmnl::column>
        <!-- Column 2 content -->
    </x-trmnl::column>
</x-trmnl::columns>
```

--------------------------------

### Publish TRMNL Blade Configuration

Source: https://github.com/bnussbau/trmnl-blade/blob/main/README.md

Publishes the configuration file for TRMNL Blade. This allows you to customize settings like framework version and URLs.

```bash
php artisan vendor:publish --tag="trmnl-blade-config"
```

--------------------------------

### Mashup Layout Component

Source: https://github.com/bnussbau/trmnl-blade/blob/main/resources/views/components/README.md

The Mashup component is for creating mixed content layouts. Specify the layout pattern using the 'mashupLayout' prop.

```blade
<x-trmnl::mashup mashupLayout="1Lx1R">
    <!-- Your content here -->
</x-trmnl::mashup>
```

--------------------------------

### TRMNL Blade Default Configuration

Source: https://github.com/bnussbau/trmnl-blade/blob/main/README.md

This is the default content of the published TRMNL Blade configuration file. It defines versions and URLs for the TRMNL Design System assets.

```php
return [
    'framework_version' => env('TRMNL_BLADE_FRAMEWORK_VERSION', '3.0.3'),
    'framework_css_version' => env('TRMNL_BLADE_FRAMEWORK_CSS_VERSION', null),
    'framework_js_version' => env('TRMNL_BLADE_FRAMEWORK_JS_VERSION', null),
    'framework_css_url' => env('TRMNL_BLADE_FRAMEWORK_CSS_URL', null),
    'framework_js_url' => env('TRMNL_BLADE_FRAMEWORK_JS_URL', null),
];
```
Tokens:
Raw