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

C#

[PersistenceMode(PersistenceMode.InnerProperty)]
public BootstrapFABActionCollection Items { get; }

VB.NET

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

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

ASPX

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

C#

function onFloatingActionButtonActionItemClick(s, e) {
    dxbsDemo.showToast("The '" + e.actionName + "' action item has been clicked.");
}
function onActionGroupInit(s, e) {
    s.SetActionContext("c1", true);
}