bladewindUI

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.

  • image
    Michael K. Ocansey
    mike@bladewindui.com
  • image
    Anonymous Jackson
    fake@person.com
  • image
    Catherine Gerald
    kate.gee@gmail.com
  • image
    Audrey Munyiva
    audrey@munyiva.com

                    
                        <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>
                    
                

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.

  • image
    Michael K. Ocansey
    mike@bladewindui.com
  • image
    Anonymous Jackson
    fake@person.com
  • image
    Catherine Gerald
    kate.gee@gmail.com
  • image
    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