All docs
V19.2
19.2
19.1
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

BootstrapFloatingActionButton.Items Property

Gets the collection of items that belong to a Floating Action Button.

Namespace: DevExpress.Web.Bootstrap

Assembly: DevExpress.Web.Bootstrap.v19.2.dll

Declaration

[PersistenceMode(PersistenceMode.InnerProperty)]
public BootstrapFABActionCollection Items { get; }
<PersistenceMode(PersistenceMode.InnerProperty)>
Public ReadOnly Property Items As BootstrapFABActionCollection

Property Value

Type Description
BootstrapFABActionCollection

An BootstrapFABActionCollection instance that specifies the collection of items.

Remarks

Use the Items property to access a collection of items (actions) within the floating action button. The collection provides methods and properties that allow you to add new items and remove existing ones, access individual items, etc.

The are two available Floating Action Button's item types:

  • Action that executes the specified action once users click the button.

BootstrapFAB_Action

<dx:BootstrapFloatingActionButton runat="server" ContainerCssSelector="#default-fab">
    <Items>
        <dx:BootstrapFABAction ActionName="a1" ContextName="context1" Text="Create Item"/>
    </Items>
</dx:BootstrapFloatingActionButton>
  • Action Group that serves as a container for multiple actions (action items).

BootstrapFAB_ActionGroup

<dx:BootstrapFloatingActionButton ID="FABActionGroup" runat="server" ContainerCssSelector="#action-group">
    <ClientSideEvents Init="onActionGroupInit" />
    <Items>
        <dx:BootstrapFABActionGroup ContextName="c1">
            <Items>
                <dx:BootstrapFABActionItem ActionName="comment" Text="Comment" IconCssClass="far fa-comment"></dx:BootstrapFABActionItem>
                <dx:BootstrapFABActionItem ActionName="like" Text="Like" IconCssClass="far fa-thumbs-up"></dx:BootstrapFABActionItem>
            </Items>
        </dx:BootstrapFABActionGroup>
    </Items>
    <ClientSideEvents ActionItemClick="onFloatingActionButtonActionItemClick"  />
</dx:BootstrapFloatingActionButton>
See Also