CardViewPagerState.SettingsBreakpointsLayout Property
In This Article
Provides access to the Card View’s Breakpoint layout mode settings.
Namespace: DevExpress.Web.Mvc
Assembly: DevExpress.Web.Mvc5.v24.2.dll
NuGet Package: DevExpress.Web.Mvc5
#Declaration
public CardViewBreakpointsLayoutSettings SettingsBreakpointsLayout { get; }
#Property Value
Type | Description |
---|---|
Card |
A Card |
#Remarks
Use the SettingsBreakpointsLayout property to access the Card View settings related to the Breakpoints layout mode (the CardViewModel.LayoutMode property is set to Layout.Breakpoints).
Refer to the Adaptivity topic for more information.
#Online Demo
#Example
The following example illustrates how to implement three different layout scenarios for three different browser sizes (Small, Medium, Large) as shown on the image below.
@Html.DevExpress().CardView(settings => {
...
settings.Settings.LayoutMode = DevExpress.Web.Layout.Breakpoints;
settings.SettingsAdaptivity.BreakpointsLayoutSettings.CardsPerRow = 5;
settings.SettingsAdaptivity.BreakpointsLayoutSettings.Breakpoints.Add(BreakpointsLayoutDeviceSizes.Small, 3);
settings.SettingsAdaptivity.BreakpointsLayoutSettings.Breakpoints.Add(BreakpointsLayoutDeviceSizes.Custom, 1300, 4);
...
}).Bind(Model).GetHtml()
See Also