TOC => List

List Group

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.


This is a basic List Group with three list items in it.  You may add any number of list items to the list. This List Group is unordered, but the widget can render ordered lists as well

The List Group Admin Panel

The List Group's settings are organized into three tabs: Content, Layout and Style.

   The Content Tab


      Title

      The internal name of the List widget. This title is may be rendered with the control.

      Show Title

      Selecting this will display the Widget's title above the List Group.

      Flush

     Check 'Flush' to remove the default background-color, some borders and to render the list edge-to-edge with their parent container. Below is an example of a flush List Group:

Example Flush List Group [with Title]

      Numbered

     Selecting the Numbered checkbox will render your list as an ordered HTML list. Below is an example of an ordered List Group:

      Horizontal Trigger

      This sets Bootstrap breakpoint at which the List Group should begin rendering at full viewport width.  You may choose:

  • always
  • never
  • sm
  • md
  • lg
  • xl
  • xxl
     

      Item List Area

      This is the collection of items contained in the List . 

  • You may rearrange items by using the Drag-and-drop handles on the left of each section
  • You may delete an item by selecting its red trashcan icon
  • You may open an item for editing by selecting the > button just to the left of its title (List Items and their controls are discussed later in this document)

      Add Item button

      This will add either a List Item or a nested List Group to the bottom of the Item list.

   

   The Layout Tab


      Padding

      This will add space around the inside of the List Group. The following values are available:

  • p-1 thru p-5: pads all sides
  • py-1 thru py-5: pads the top and bottom
  • pt-1 thru pt-5: pads the top
  • pb-1 thru pb-5: pads the bottom
  • px-1 thru px-5: pads the right and left
  • ps-1 thru ps-5: pads the left
  • pe-1 thru pe-5: pads the right

       See the Bootstrap docs for details on spacing classes.

      Margin

     This will add space around the outside of the List Group. The following values are available:

  • m-1 thru m-5: pads all sides
  • my-1 thru my-5: pads the top and bottom
  • mt-1 thru mt-5: pads the top
  • mb-1 thru mb-5: pads the bottom
  • mx-1 thru mx-5: pads the right and left
  • ms-1 thru ms-5: pads the left
  • me-1 thru me-5: pads the right

      See the Bootstrap docs for details on spacing classes.

   
   The Style Tab


      DropShadow

      This will apply a drop shadow to the List Group.  you may choose between: no shadow, small shadow, default shadow or large shadow.


The List Item panel

List Items are managed using this panel


      Title

      The name of the item.  It is the text that will be rendered in the list

      Link URL

      If a URL is specified, then the List Item will render as a link.

      Background Color

      Sets a background color for the individual item.  you may choose between the standard Bootstrap Utility Color classes.

Page Contents
Back to TOC

The List Widget

add more things