Download the PHP package edulazaro/wirelist without Composer
On this page you can find all versions of the php package edulazaro/wirelist. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download edulazaro/wirelist
More information about edulazaro/wirelist
Files in edulazaro/wirelist
Package wirelist
Short Description Lists for Laravel, Livewire and Alpine: records as divided rows, separate cards or a grid, each opening its record, with the row actions menu and load more of wiretables. Pure CSS, themed with the wire* family.
License MIT
FAQ
Example:
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 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.
Informations about the package wirelist
wirelist
Lists for Laravel, Livewire and Alpine: records as divided rows, separate cards or a grid, each one opening its record, with a row actions menu and load more. Pure CSS, no Tailwind or Bootstrap needed. Built on wiretables and part of the wire* family: themeable through the shared data-wire-theme attribute, coherent with wiremodal, wiretoast and wirepicker.
Divided, separated or grid · the whole card opens the record · badges, aside, actions · load more · 12 themes · 0 runtime deps.
When a list and when a table
Use wiretables when the records share the same data and are compared down a column: dates, statuses, amounts, with headers to sort by. Use wirelist when each record reads as a card: a title with its badges, a muted line, a figure or a status on the right, and when you want them side by side in a grid. Both share the menu, the footer, load more, the traits and the themes, so they sit together on one screen.
Install
It requires wiretables, whose tokens it draws with. Load wiretables' core, then the list's core, and, if you want one, the same theme from both:
Or with Vite:
wirelist.css holds the core and every theme in one file. Adding themes never makes wirelist-core.css bigger.
A list
Three shapes, one markup
items="divided"(the default): one frame, a line between records. A queue, a feed of short items, a dashboard list.items="separated": each record a card of its own, with a little room between them.layout="grid": cards side by side, as many as fit (--wtl-grid-min, 16rem by default). Theleadingslot becomes a cover: an image runs edge to edge on top, and theasidesits at the foot of the card, aligned across the row.
The markup does not change between them, so a list/grid switch is a Livewire property:
flush drops the frame, for a list inside a card of its own.
The item
<x-wirelist.item> takes a title (or a title slot when it needs markup), a muted subtitle, and slots for everything around them:
| Slot | |
|---|---|
leading |
An avatar or an icon on the left; in a grid, the cover image |
badges |
Beside the title: tags, a "draft", a category |
aside |
On the right: counts, a status, a date |
actions |
The "⋯" (x-wiretable.menu) or a button |
header |
A strip above the record: a status band, a date |
| default | More lines under the subtitle |
With href the whole item opens the record (navigate adds wire:navigate); with action, an Alpine expression, it opens in place. The title's link is stretched over the item, while the badges, the aside, the actions and any link or button in the content keep their own clicks. Nothing interactive is nested inside a link, which HTML does not allow and which breaks keyboards and screen readers.
On a phone the actions stay beside the title and the aside goes under both.
Load more and sorting
wiretables' traits work the same here:
Options
| Component | Attribute | |
|---|---|---|
x-wirelist |
items |
divided or separated |
layout |
list or grid |
|
flush |
No frame, for a list inside a card | |
slot footer |
Under the records | |
x-wirelist.item |
title, subtitle, href, action, navigate |
The record; slots above |
x-wirelist.empty |
The item shown when the list is empty |
Any other attribute (class, wire:key, data-*) lands on the element.
Themes
The family's 12 themes, by the same data-wire-theme attribute on <html>: soft, glass, gradient, neon, minimal, claude, chatgpt, studio, synthwave, megaflow, brutalist and toxic, each with its dark mode (toxic, like neon, is dark only). wiretables' theme file brings the colours tables and lists share; this package's file of the same name adds what only a list needs: minimal's and gradient's stripe on the left, claude's line on top, glass's blur, synthwave's gradient, toxic's lime titles and lit edge, the header strip's colours.
Custom look
Colours, radius, lines and the menu come from wiretables' tokens (--wtb-bg, --wtb-text, --wtb-muted, --wtb-line, --wtb-row-hover, --wtb-radius, --wtb-shadow…), so one setting reaches tables and lists alike. The list's own shape:
| Token | |
|---|---|
--wtl-item-padding |
Inside an item |
--wtl-item-gap |
Between separated items |
--wtl-subtitle-font-size |
The muted line and the aside |
--wtl-grid-min, --wtl-grid-gap |
The grid's narrowest card and the room between cards |
--wtl-cover-ratio |
A grid card's cover, 16 / 10 by default |
Anatomy
Tests
Sponsors
wirelist is supported by the following sponsors. Thank you for keeping it growing:
Author
Created by Edu Lazaro
License
wirelist is open-sourced software licensed under the MIT license.
All versions of wirelist with dependencies
illuminate/support Version >=11.0
illuminate/view Version >=11.0
edulazaro/wiretables Version ^1.0