ImageGallerySettings.SettingsBreakpointsLayout Property
Provides access to the Image Gallery’s Breakpoint layout mode settings.
Namespace: DevExpress.Web.Mvc
Assembly: DevExpress.Web.Mvc5.v24.2.dll
NuGet Package: DevExpress.Web.Mvc5
#Declaration
public ImageGalleryBreakpointsLayoutSettings SettingsBreakpointsLayout { get; }
#Property Value
Type | Description |
---|---|
Image |
A Image |
#Remarks
Use the SettingsBreakpointsLayout property to access the Image Gallery settings related to the Breakpoints layout mode (the ImageGallerySettings.Layout property is set to Layout.Breakpoints).
Refer to the Layout Modes topic for more information.
#Online Demo
Image Gallery - Adaptive Layout
#Example
The following example illustrates the programmatic and declarative approaches on how to implement three different layout scenarios for three different browser sizes (Small, Medium, Large) as shown on the image below.
@Html.DevExpress().ImageGallery(settings => {
...
settings.Layout = DevExpress.Web.Layout.Breakpoints;
settings.SettingsBreakpointsLayout.ItemsPerRow = 5;
settings.SettingsBreakpointsLayout.Breakpoints.Add(BreakpointsLayoutDeviceSizes.Small, 3);
settings.SettingsBreakpointsLayout.Breakpoints.Add(BreakpointsLayoutDeviceSizes.Custom, 1300, 4);
...
}).GetHtml()