List View

Display a list of items. The list view component mimicks the <ul><li>...</li></ul> tags. The component makes use of two tags to render the list of items. Just like when using a <li></li>, the user is completely in charge of what content goes in there. All the list view component does is draw fine lines between your items. Every top level block element is flexed into its own column. The first top level block element has no left padding so you'll need to factor that into your design when using this component.

Michael K. Ocansey

mike@bladewindui.com
Anonymous Jackson

fake@person.com
Catherine Gerald

kate.gee@gmail.com
Audrey Munyiva

audrey@munyiva.com

        
            <x-bladewind::card>

                <x-bladewind::list-view>

                    <x-bladewind::list-item>

                        <x-bladewind::avatar
                            size="small"
                            image="/path/to/the/image/file" />
                        <div class="ml-3">
                            <div class="text-sm font-medium text-slate-900">
                                Michael K. Ocansey
                            </div>
                            <div class="text-sm text-slate-500 truncate">
                                kabutey@gmail.com
                            </div>
                        </div>

                    </x-bladewind::list-item>

                    <x-bladewind::list-item>
                        <x-bladewind::avatar
                            size="small"
                            image="/path/to/the/image/file"
                        <div class="ml-3">
                            <div class="text-sm font-medium text-slate-900">
                                Michael K. Ocansey
                            </div>
                            <div class="text-sm text-slate-500 truncate">
                                kabutey@gmail.com
                            </div>
                        </div>
                    </x-bladewind::list-item>
                    ...
                </x-bladewind::list-view>

            </x-bladewind::card>

The <x-bladewind::list-item> component creates a flex container.

By default the list view component sits on a white background. You can remove this by setting the transparent="true" attribute. You can then set a different background colour using the class attribute.

Michael K. Ocansey

mike@bladewindui.com
Anonymous Jackson

fake@person.com
Catherine Gerald

kate.gee@gmail.com
Audrey Munyiva

audrey@munyiva.com

        
            <x-bladewind::list-view transparent="true">

                <x-bladewind::list-item>

                    <x-bladewind::avatar
                        size="small"
                        image="/path/to/the/image/file" />
                    <div class="ml-3">
                        <div class="text-sm font-medium text-slate-900">
                            Michael K. Ocansey
                        </div>
                        <div class="text-sm text-slate-500 truncate">
                            kabutey@gmail.com
                        </div>
                    </div>

                </x-bladewind::list-item>
                ...
            </x-bladewind::list-view>

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the List View component.

IMPORTANT: Projects running Laravel 8 please read this

Option	Default	Available Values
transparent	false	Should the background of the component be transparent or placed on a white background. `true` `false`
compact	false	If set to true, the spacing between the list items are reduced from 16px to 8px. `true` `false`
class	blank	Any additional css you wish to add.

List View with all attributes defined

        
            <x-bladewind::list-view compact="true" transparent="true" class="bg-yellow-50">

                <x-bladewind::list-item>

                    <x-bladewind::avatar
                        size="small"
                        image="/path/to/the/image/file" />
                    <div class="ml-3">
                        <div class="text-sm font-medium text-slate-900">
                            Michael K. Ocansey
                        </div>
                        <div class="text-sm text-slate-500 truncate">
                            kabutey@gmail.com
                        </div>
                    </div>

                </x-bladewind::list-item>
                ...
            </x-bladewind::list-view>

The source file for this component is available in resources > views > components > bladewind > list-view.blade.php and resources > views > components > bladewind > list-item.blade.php