Skip to content

add chips examples #701

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tabacitu merged 7 commits into from
Jun 25, 2025
Merged

add chips examples #701

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8874928
add chips examples
tabacitu Jun 21, 2025
3e6c20d
remove a dd
tabacitu Jun 24, 2025
8fceaa1
change chip syntax
tabacitu Jun 25, 2025
0a37795
ran composer update
tabacitu Jun 25, 2025
af9c162
ran composer update
tabacitu Jun 25, 2025
4759d46
Merge branch 'next' into chips
tabacitu Jun 25, 2025
16b1806
proper order of new items in new page
tabacitu Jun 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
change chip syntax
  • Loading branch information
@tabacitu
tabacitu committed Jun 25, 2025
commit 8fceaa151ca95fe6aaf376f07f954547a193d834
2 changes: 1 addition & 1 deletion resources/views/admin/new-in-v7.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
<div class="col">
<div class="page-pretitle">Views</div>
<h2 class="page-title">Chips</h2>
<p class="mt-2 mb-2">Include more information about an Eloquent model, in a small space. Hover over the links to understand more about the examples.</p>
<p class="mt-2 mb-2">Include more information about an Eloquent model, in a small space. Hover over the headings to understand more about the examples.</p>
</div>
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
Expand Down
149 changes: 54 additions & 95 deletions resources/views/admin/partials/chip-examples.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@php
$users = \App\User::inRandomOrder()->take(6)->get();
$invoices = \App\Models\PetShop\Invoice::inRandomOrder()->take(6)->get();
$products = \App\Models\Product::inRandomOrder()->take(6)->get();
$owners = \App\Models\PetShop\Owner::inRandomOrder()->take(6)->get();
$user = \App\User::inRandomOrder()->first();
$invoices = \App\Models\PetShop\Invoice::inRandomOrder()->take(3)->get();
$products = \App\Models\Product::inRandomOrder()->take(3)->get();
$owners = \App\Models\PetShop\Owner::inRandomOrder()->take(3)->get();
@endphp

<div class="row">
Expand All @@ -14,27 +14,35 @@

{{-- Example of General chip for a person, with hardcoded complete data --}}
@include('crud::chips.general', [
'text' => 'John Doe',
'title' => 'Example of a chip without URL',
'url' => 'https://google.com',
'target' => '_blank',
'image' => asset('uploads/person1.jpg'),
'heading' => [
'content' => 'John Doe',
'href' => 'https://google.com',
'target' => '_blank',
'title' => 'Example of a chip without URL',
],
'image' => [
'content' => asset('uploads/person1.jpg'),
'element' => 'a',
'href' => 'https://chatgpt.com',
'target' => '_blank',
'title' => 'Image can have its own URL, but why?! Falls back to the one in the heading',
],
'details' => [
[
'icon' => 'la la-hashtag',
'text' => '8AH13A7',
'content' => '8AH13A7',
'url' => 'mailto:[email protected]',
'title' => 'Click to email',
],
[
'icon' => 'la la-envelope',
'text' => '[email protected]',
'content' => '[email protected]',
'url' => 'mailto:[email protected]',
'title' => 'Click to email',
],
[
'icon' => 'la la-phone',
'text' => '+1 (555) 123-4567',
'content' => '+1 (555) 123-4567',
'url' => 'tel:+15551234567',
'title' => 'Click to call',
]
Expand All @@ -51,28 +59,29 @@
<div class="card mb-2">
<div class="card-body">

{{-- Example of General chip for a person, with hardcoded data, missing URL --}}
{{-- Example of General chip for a person, with hardcoded data, missing URL and image --}}
@include('crud::chips.general', [
'text' => 'Adam Mancinello',
'title' => 'Example of a chip without URL',
// 'url' => '#',
'showImage' => true,
'heading' => [
'content' => 'Adam Mancinello',
'title' => 'Example of a chip without URL or image',
'element' => 'span', // can be a span, a div, or an anchor
],
'details' => [
[
'icon' => 'la la-hashtag',
'text' => '8AH13A7',
'content' => '8AH13A7',
'url' => 'mailto:[email protected]',
'title' => 'Click to email',
],
[
'icon' => 'la la-envelope',
'text' => '[email protected]',
'content' => '[email protected]',
'url' => 'mailto:[email protected]',
'title' => 'Click to email',
],
[
'icon' => 'la la-phone',
'text' => '+1 (555) 123-4567',
'content' => '+1 (555) 123-4567',
'url' => 'tel:+15551234567',
'title' => 'Click to call',
]
Expand All @@ -84,55 +93,6 @@

</div>

<div class="col-md-4">

<div class="card mb-2">
<div class="card-body">

{{-- Example of General chip for a person, with hardcoded data, missing image --}}
@include('crud::chips.general', [
'text' => 'John Doe',
'title' => 'Example of a chip without an image',
'url' => 'https://example.com',
'showImage' => false,
'details' => [
[
'icon' => 'la la-hashtag',
'text' => '8AH13A7',
'url' => 'mailto:[email protected]',
'title' => 'Click to email',
],
[
'icon' => 'la la-envelope',
'text' => '[email protected]',
'url' => 'mailto:[email protected]',
'title' => 'Click to email',
],
[
'icon' => 'la la-phone',
'text' => '+1 (555) 123-4567',
'url' => 'tel:+15551234567',
'title' => 'Click to call',
]
]
])

</div>
</div>

</div>

</div>

<div class="row">
<div class="col">
<p class="mt-2 mb-2">Works well to show off people - eg. Users, Customers:</p>
</div>
</div>

<div class="row">

@foreach ($users as $user)

<div class="col-md-4">

Expand All @@ -141,26 +101,33 @@

{{-- Example of General chip for a person, with data from Eloquent model --}}
@include('crud::chips.general', [
'text' => $user->name,
'url' => backpack_url('user/'.$user->id.'/show'),
'showImage' => false,
// 'image' => backpack_avatar_url($user), // doesn't work well with dummy data
'heading' => [
'content' => $user->name,
'href' => backpack_url('user/'.$user->id.'/show'),
'title' => 'Click to preview',
],
'image' => [
'content' => backpack_avatar_url($user), // doesn't work well with dummy data
'element' => 'a',
'href' => backpack_url('user/'.$user->id.'/show'),
'title' => 'Because of dummy data, this image is not available, but it would show a profile image',
],
'details' => [
[
'icon' => 'la la-hashtag',
'text' => $user->id,
'content' => $user->id,
'url' => backpack_url('user/'.$user->id.'/show'),
'title' => 'Click to preview',
],
[
'icon' => 'la la-envelope',
'text' => $user->email,
'content' => $user->email,
'url' => 'mailto:'.$user->email,
'title' => 'Click to email',
],
[
'icon' => 'la la-calendar',
'text' => $user->created_at->format('F j, Y'),
'content' => $user->created_at->format('F j, Y'),
'title' => 'Created at '.$user->created_at,
]
]
Expand All @@ -171,12 +138,11 @@

</div>

@endforeach
</div>

<div class="row">
<div class="col">
<p class="mt-2 mb-2">In this demo, the most obvious example is pet owners:</p>
<p class="mt-2 mb-2">Works well for people - in this demo, the most obvious example is pet owners:</p>
</div>
</div>

Expand All @@ -202,7 +168,7 @@

<div class="row">
<div class="col">
<p class="mt-2 mb-2">But it works particularly well for entities where the name alone can't identify an entity, eg. Invoice:</p>
<p class="mt-2 mb-2">But it's particularly useful for entities where the name alone can't identify an entity, eg. Invoice:</p>
</div>
</div>

Expand Down Expand Up @@ -245,29 +211,31 @@

{{-- Example of General chip for a person, with data from Eloquent model --}}
@include('crud::chips.general', [
'text' => $product->name,
'url' => backpack_url('product/'.$product->id.'/show'),
// 'showImage' => false,
'heading' => [
'content' => $product->name,
'href' => backpack_url('product/'.$product->id.'/show'),
'title' => 'Click to preview',
],
'details' => [
[
'icon' => 'la la-dollar',
'text' => $product->price,
'content' => $product->price,
'title' => 'Priced at $'.$product->price,
],
[
'icon' => 'la la-tag',
'text' => $product->category->name,
'content' => $product->category->name,
'url' => backpack_url('category/'.$product->category->id.'/show'),
'title' => 'Product category: '.$product->category->name,
],
[
'icon' => 'la la-tag',
'text' => $product->status,
'content' => $product->status,
'title' => 'Product status: '.$product->status->value,
],
[
'icon' => 'la la-traffic-light',
'text' => $product->condition,
'content' => $product->condition,
'title' => 'Production condition: '.$product->condition,
]
]
Expand All @@ -280,12 +248,3 @@

@endforeach
</div>

<div class="row">
<div class="col">
<p class="mt-2 mb-2">
The beauty of chips is that they are simple blade files, so you can create your own chips for any entity you want.
You can even use them in your own widgets, in your own custom views or... in your datatables! <a href="{{ backpack_url('pet-shop/invoice') }}">Check out the Invoice datatable</a> to see how we use chips in the List operation, and <a href="{{ backpack_url('pet-shop/invoice/1/show') }}">an Invoice item</a> to see how we use chips inside a Show operation (using the chip widget).
</p>
</div>
</div>
13 changes: 7 additions & 6 deletions resources/views/vendor/backpack/crud/chips/invoice.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
@include('crud::chips.general', [
'text' => 'Invoice '.$entry->series.' '.$entry->number.' - '.$entry->owner->name,
'url' => backpack_url('pet-shop/invoice/'.$entry->id.'/show'),
// 'showImage' => false,
'heading' => [
'content' => 'Invoice '.$entry->series.' '.$entry->number.' - '.$entry->owner->name,
'href' => backpack_url('pet-shop/invoice/'.$entry->id.'/show'),
],
'details' => [
[
'icon' => 'la la-dollar',
'text' => $entry->total,
'content' => $entry->total,
'title' => 'Total invoice amount $'.$entry->total,
],
[
'icon' => 'la la-tags',
'text' => $entry->items->count().' items',
'content' => $entry->items->count().' items',
],
[
'icon' => 'la la-calendar',
'text' => $entry->issuance_date->format('F j, Y'),
'content' => $entry->issuance_date->format('F j, Y'),
'title' => 'Issuance date: '.$entry->issuance_date,
]
]
Expand Down
17 changes: 10 additions & 7 deletions resources/views/vendor/backpack/crud/chips/owner.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,27 @@
@endphp

@include('crud::chips.general', [
'text' => $entry->name,
'url' => backpack_url('pet-shop/owner/'.$entry->id.'/show'),
'image' => asset($entry->avatar->url),
// 'showImage' => false,
'heading' => [
'content' => $entry->name,
'href' => backpack_url('pet-shop/owner/'.$entry->id.'/show'),
],
'image' => [
'content' => asset($entry->avatar->url),
],
'details' => [
[
'icon' => 'la la-dog',
'text' => $entry->pets->count().' pets',
'content' => $entry->pets->count().' pets',
'title' => 'Number of pets: '.$entry->pets->count(),
],
[
'icon' => 'la la-shopping-cart',
'text' => $entry->invoices->count(). ' purchases',
'content' => $entry->invoices->count(). ' purchases',
'title' => 'Number of purchases: '.$entry->invoices->count(),
],
[
'icon' => 'la la-calendar',
'text' => $last_purchase->format('F j, Y'),
'content' => $last_purchase->format('F j, Y'),
'title' => 'Last purchase: '.$last_purchase,
]
]
Expand Down