组件/网格布局

新Blazor的Telerik UI?下载30天免费试用

项目

你可以用GridLayout中的参数来控制它们:

行

的行属性所在的行GridLayoutItem将驻留。组件中的行索引为基于．如果未定义行，则项将显示在R = I / c行,地点:

  • r是行数;

  • 我是项目的数量;

  • c是列数;

在行中分布GridLayout项。下面的代码片段的结果。

行示例

@*以自定义方式将GridLayout项分布在行中。* @ < TelerikGridLayout > < GridLayoutRows > < GridLayoutRow > < / GridLayoutRow > < GridLayoutRow > < / GridLayoutRow > < GridLayoutRow > < / GridLayoutRow > < / GridLayoutRows > < GridLayoutItems > < GridLayoutItem行= " 1 " > < div >第1项< / div > < / GridLayoutItem > < GridLayoutItem行= " 2 " > < div >第二项< / div > < / GridLayoutItem > < GridLayoutItem行= " 2 " > < div >项3 < / div > < / GridLayoutItem > < GridLayoutItem行=“3”> < div >第四项< / div > < / GridLayoutItem > < GridLayoutItem行=“3”> < div >第五项< / div > < / GridLayoutItem > 
 item 6

列

的列控件在哪个列中GridLayoutItem将驻留。组件中的列索引为基于．如果没有定义列，GridLayout项将显示在一列中。

在列之间分布GridLayout项。下面的代码片段的结果。

行示例

@*以自定义方式在列中分布GridLayout项。* @ < TelerikGridLayout > < GridLayoutColumns > < GridLayoutColumn宽度= " 200 px " > < / GridLayoutColumn > < GridLayoutColumn宽度= " 150 px " > < / GridLayoutColumn > < GridLayoutColumn宽度= " 150 px " > < / GridLayoutColumn > < / GridLayoutColumns > < GridLayoutItems > < GridLayoutItem列= " 1 " > < div >第1项< / div > < / GridLayoutItem > < GridLayoutItem列= " 1 " > < div >第二项< / div > < / GridLayoutItem > < GridLayoutItem列= " 2 " > < div >项3 < / div > < / GridLayoutItem > < GridLayoutItem列=“3”> < div >第四项< / div >  
 item 5 
   
 item 6

ColumnSpan

的ColumnSpan参数定义项将占用多少列。

使用数字文本框更改第一项的列跨度

@*更改第一项的列跨度。* @ < TelerikNumericTextBox @bind-Value = " @ColumnSpan " > < / TelerikNumericTextBox > < TelerikGridLayout > < GridLayoutColumns > < GridLayoutColumn宽度= " 200 px " > < / GridLayoutColumn > < GridLayoutColumn宽度= " 150 px " > < / GridLayoutColumn > < / GridLayoutColumns > < GridLayoutItems > < GridLayoutItem列=“1”ColumnSpan =“@ColumnSpan”> < div >第1项< / div > < / GridLayoutItem > < GridLayoutItem列= " 1 " > < div >第二项< / div > < / GridLayoutItem > < GridLayoutItem列= " 2 " > < div >项3 < / div > < / GridLayoutItem > < GridLayoutItemColumn="2"> 
 item 4 
    @code{公共int?ColumnSpan {get;设置;}}

行宽

的行宽参数定义项将占用多少行。

使用数字文本框更改第一项的行跨度

@*更改第一项的列跨度。* @ < TelerikNumericTextBox @bind-Value = " @RowSpan " > < / TelerikNumericTextBox > < TelerikGridLayout > < GridLayoutRows > < GridLayoutRow > < / GridLayoutRow > < GridLayoutRow > < / GridLayoutRow > < GridLayoutRow > < / GridLayoutRow > < / GridLayoutRows > < GridLayoutItems > < GridLayoutItem列=“1”行宽=“@RowSpan”> < div >第1项< / div > < / GridLayoutItem > < GridLayoutItem列= " 1 " > < div >第二项< / div > < / GridLayoutItem > < GridLayoutItem列= " 2 " > < div >项3 < / div > < / GridLayoutItem > < GridLayoutItem列= " 2 " > < div >第四项
@code { public int? RowSpan { get; set; } }

示例:复杂网格布局

您可以使用GridLayout项的公开参数来创建更复杂的布局。

使用GridLayout组件创建页面布局

复杂的布局

@ *创建一个页面布局与Telerik组件* @ < TelerikGridLayout > < GridLayoutColumns > < GridLayoutColumn宽度=“200 px”> < / GridLayoutColumn > < GridLayoutColumn宽度=“500 px”> < / GridLayoutColumn > < GridLayoutColumn宽度=“200 px”> < / GridLayoutColumn > < / GridLayoutColumns > < GridLayoutRows > < GridLayoutRow高度=“50 px”> < / GridLayoutRow > < GridLayoutRow高度=“400 px”> < / GridLayoutRow > < GridLayoutRow高度=“100 px”> < / GridLayoutRow > < / GridLayoutRows > < GridLayoutItems > < GridLayoutItem列=“1”行=“1”ColumnSpan="3">  拨动抽屉    
   
                   @code {public bool likedLayout {get;设置;} = true;public List TreeViewData {get; set; } protected override void OnInitialized() { GenerateData(); } public void GenerateData() { TreeViewData = new List(); TreeViewData.Add(new TreeViewModel() { Id = 1, Text = "Company", ParentId = null, HasChildren = true, TelerikIcon = "home" }); TreeViewData.Add(new TreeViewModel() { Id = 2, Text = "Contact us", ParentId = 1, HasChildren = false, MyIconClass = "oi oi-envelope-closed" }); TreeViewData.Add(new TreeViewModel() { Id = 3, Text = "Audio", ParentId = null, MyImageUrl = "https://docs.telerik.com/blazor-ui/images/speaker.png" }); } public class TreeViewModel { public int Id { get; set; } public string Text { get; set; } public bool HasChildren { get; set; } public int? ParentId { get; set; } public string TelerikIcon { get; set; } public string MyIconClass { get; set; } public string MyImageUrl { get; set; } } public IEnumerable GridData = Enumerable.Range(1, 30).Select(x => new SampleData { Id = x, Name = "name " + x, Team = "team " + x % 5, HireDate = DateTime.Now.AddDays(-x).Date }); public class SampleData { public int Id { get; set; } public string Name { get; set; } public string Team { get; set; } public DateTime HireDate { get; set; } } TelerikDrawer DrawerRef { get; set; } DrawerItem SelectedItem { get; set; } IEnumerable DrawerData { get; set; } = new List { new DrawerItem { Text = "Counter", Icon = "plus"}, new DrawerItem { Text = "FetchData", Icon = "grid-layout"}, }; public class DrawerItem { public string Text { get; set; } public string Icon { get; set; } } }

另请参阅

在本文中
相关文章
找不到你需要的帮助?
联络支持
改进这篇文章
Baidu
map