test/ant-design-blazor
1
0
Fork 0
mirror of https://gitee.com/ant-design-blazor/ant-design-blazor.git synced 2024-12-02 03:57:38 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

fix(module: grid): gutter (#1158)

Browse Source 
* fix(module:row): grid gutter switch to row-gap

* docs(module:grid): gutter docs in sync with react antDesign

* add DefaultBreakpoint

Co-authored-by: ElderJames <shunjiey@hotmail.com>
This commit is contained in:
Andrzej Bakun 2021-02-23 06:38:05 +01:00 committed by GitHub
parent 3209c088a6
commit 1082a29941
5 changed files with 122 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/grid/Col.razor.cs
View File

@ -72,11 +72,7 @@ namespace AntDesign
GutterStyle = "";
if (gutter.horizontalGutter > 0)
{
GutterStyle = $"padding-left: {gutter.horizontalGutter / 2}px;padding-right: {gutter.horizontalGutter / 2}px;";
}
if (gutter.verticalGutter > 0)
{
GutterStyle += $"padding-top: {gutter.verticalGutter / 2}px;padding-bottom: {gutter.verticalGutter / 2}px;";
GutterStyle = $"padding-left: {gutter.horizontalGutter / 2}px; padding-right: {gutter.horizontalGutter / 2}px;";
}
}

45
components/grid/Row.razor.cs
View File

@ -7,7 +7,17 @@ using OneOf;
namespace AntDesign
{
using GutterType = OneOf<int, Dictionary<string, int>, (int, int)>;
/*
* Possible values and meaning
* int - horizontal gutter
* Dictionary<string, int> - horizontal gutters for different screen sizes
* (int, int) - horizontal gutter, vertical gutter
* (Dictionary<string, int>, int) - horizontal gutters for different screen sizes, vertical gutter
* (int, Dictionary<string, int>) - horizontal gutter, vertical gutter for different screen sizes
* (Dictionary<string, int>, Dictionary<string, int>) - horizontal gutters for different screen sizes, vertical gutter for different screen sizes
*/
using GutterType = OneOf<int, Dictionary<string, int>, (int, int), (Dictionary<string, int>, int), (int, Dictionary<string, int>), (Dictionary<string, int>, Dictionary<string, int>)>;
public partial class Row : AntDomComponentBase
{
@ -35,6 +45,12 @@ namespace AntDesign
[Parameter]
public EventCallback<BreakpointType> OnBreakpoint { get; set; }
/// <summary>
/// Used to set gutter during pre-rendering
/// </summary>
[Parameter]
public BreakpointType DefaultBreakpoint { get; set; }
[Inject]
public DomEventService DomEventService { get; set; }
@ -42,16 +58,6 @@ namespace AntDesign
public IList<Col> Cols { get; } = new List<Col>();
private static Hashtable _gridResponsiveMap = new Hashtable()
{
[nameof(BreakpointType.Xs)] = "(max-width: 575px)",
[nameof(BreakpointType.Sm)] = "(max-width: 576px)",
[nameof(BreakpointType.Md)] = "(max-width: 768px)",
[nameof(BreakpointType.Lg)] = "(max-width: 992px)",
[nameof(BreakpointType.Xl)] = "(max-width: 1200px)",
[nameof(BreakpointType.Xxl)] = "(max-width: 1600px)",
};
private static BreakpointType[] _breakpoints = new[] {
BreakpointType.Xs,
BreakpointType.Sm,
@ -75,6 +81,11 @@ namespace AntDesign
.If($"{prefixCls}-space-between", () => Justify == "space-between")
;
if (DefaultBreakpoint != null)
{
SetGutterStyle(DefaultBreakpoint.Name);
}
await base.OnInitializedAsync();
}
@ -124,12 +135,9 @@ namespace AntDesign
GutterStyle = "";
if (gutter.horizontalGutter > 0)
{
GutterStyle = $"margin-left: -{gutter.horizontalGutter / 2}px;margin-right: -{gutter.horizontalGutter / 2}px;";
}
if (gutter.verticalGutter > 0)
{
GutterStyle += $"margin-top: -{gutter.verticalGutter / 2}px;margin-bottom: -{gutter.verticalGutter / 2}px;";
GutterStyle = $"margin-left: -{gutter.horizontalGutter / 2}px; margin-right: -{gutter.horizontalGutter / 2}px; ";
}
GutterStyle += $"row-gap: {gutter.verticalGutter}px; ";
StateHasChanged();
}
@ -143,7 +151,10 @@ namespace AntDesign
return gutter.Match(
num => (num, 0),
dic => breakPoint != null && dic.ContainsKey(breakPoint) ? (dic[breakPoint], 0) : (0, 0),
tuple => tuple
tuple => tuple,
tupleDicInt => (tupleDicInt.Item1.ContainsKey(breakPoint) ? tupleDicInt.Item1[breakPoint] : 0, tupleDicInt.Item2),
tupleIntDic => (tupleIntDic.Item1, tupleIntDic.Item2.ContainsKey(breakPoint) ? tupleIntDic.Item2[breakPoint] : 0),
tupleDicDic => (tupleDicDic.Item1.ContainsKey(breakPoint) ? tupleDicDic.Item1[breakPoint] : 0, tupleDicDic.Item2.ContainsKey(breakPoint) ? tupleDicDic.Item2[breakPoint] : 0)
);
}

93
site/AntDesign.Docs/Demos/Components/Grid/demo/Gutter.razor Normal file
View File

@ -0,0 +1,93 @@
<div>
<style>
.Gutter-box {
background: rgb(0, 146, 255);
padding: 8px 0;
color: #fff;
text-align: center;
}
</style>
<AntDesign.Divider Orientation="left" Style="color: #333; font-weight:normal">
Horizontal
</AntDesign.Divider>
<div class="Gutter-example">
<AntDesign.Row Gutter="16">
<AntDesign.Col class="gutter-row" Span="6">
<div class="Gutter-box">col-6</div>
</AntDesign.Col>
<AntDesign.Col class="gutter-row" Span="6">
<div class="Gutter-box">col-6</div>
</AntDesign.Col>
<AntDesign.Col class="gutter-row" Span="6">
<div class="Gutter-box">col-6</div>
</AntDesign.Col>
<AntDesign.Col class="gutter-row" Span="6">
<div class="Gutter-box">col-6</div>
</AntDesign.Col>
</AntDesign.Row>
</div>
<Divider Orientation="left" Style="color: #333; font-weight:normal">
Responsive
</Divider>
<div class="Gutter-example">
<AntDesign.Row Gutter="@Gutter1">
<AntDesign.Col class="gutter-row" Span="6">
<div class="Gutter-box">col-6</div>
</AntDesign.Col>
<AntDesign.Col class="gutter-row" Span="6">
<div class="Gutter-box">col-6</div>
</AntDesign.Col>
<AntDesign.Col class="gutter-row" Span="6">
<div class="Gutter-box">col-6</div>
</AntDesign.Col>
<AntDesign.Col class="gutter-row" Span="6">
<div class="Gutter-box">col-6</div>
</AntDesign.Col>
</AntDesign.Row>
</div>
<Divider Orientation="left" Style="color: #333; font-weight:normal">
Vertical
</Divider>
<div class="Gutter-example">
<AntDesign.Row Gutter="(16,24)">
<AntDesign.Col class="gutter-row" Span="6">
<div class="Gutter-box">col-6</div>
</AntDesign.Col>
<AntDesign.Col class="gutter-row" Span="6">
<div class="Gutter-box">col-6</div>
</AntDesign.Col>
<AntDesign.Col class="gutter-row" Span="6">
<div class="Gutter-box">col-6</div>
</AntDesign.Col>
<AntDesign.Col class="gutter-row" Span="6">
<div class="Gutter-box">col-6</div>
</AntDesign.Col>
<AntDesign.Col class="gutter-row" Span="6">
<div class="Gutter-box">col-6</div>
</AntDesign.Col>
<AntDesign.Col class="gutter-row" Span="6">
<div class="Gutter-box">col-6</div>
</AntDesign.Col>
<AntDesign.Col class="gutter-row" Span="6">
<div class="Gutter-box">col-6</div>
</AntDesign.Col>
<AntDesign.Col class="gutter-row" Span="6">
<div class="Gutter-box">col-6</div>
</AntDesign.Col>
</AntDesign.Row>
</div>
</div>
@code{
Dictionary<string, int> Gutter1 = new Dictionary<string, int>()
{
["xs"] = 8,
["sm"] = 16,
["md"] = 24,
["lg"] = 32,
["xl"] = 48,
["xxl"] = 64
};
}

91
site/AntDesign.Docs/Demos/Components/Grid/demo/Gutterx.razor
View File

@ -1,91 +0,0 @@
<div>
<style>
.Gutter-box {
background: #00a0e9;
padding: 5px 0;
}
</style>
<Divider Orientation="left" Style="color: #333; font-weight:normal">
Horizontal
</Divider>
<div class="Gutter-example">
<Row Gutter="16">
<Col class="Gutter-row" Span="6">
<div >col-6</div>
</Col>
<Col class="Gutter-row" Span="6">
<div >col-6</div>
</Col>
<Col class="Gutter-row" Span="6">
<div >col-6</div>
</Col>
<Col class="Gutter-row" Span="6">
<div >col-6</div>
</Col>
</Row>
</div>
<Divider Orientation="left" Style="color: #333; font-weight:normal">
Responsive
</Divider>
<div class="Gutter-example">
<Row Gutter="@Gutter1">
<Col class="Gutter-row" Span="6">
<div >col-6</div>
</Col>
<Col class="Gutter-row" Span="6">
<div >col-6</div>
</Col>
<Col class="Gutter-row" Span="6">
<div >col-6</div>
</Col>
<Col class="Gutter-row" Span="6">
<div>col-6</div>
</Col>
</Row>
</div>
<Divider Orientation="left" Style="color: #333; font-weight:normal">
Vertical
</Divider>
<div class="Gutter-example">
<Row Gutter="(8,24)">
<Col class="Gutter-row" Span="6">
<div >col-6</div>
</Col>
<Col class="Gutter-row" Span="6">
<div >col-6</div>
</Col>
<Col class="Gutter-row" Span="6">
<div >col-6</div>
</Col>
<Col class="Gutter-row" Span="6">
<div >col-6</div>
</Col>
<Col class="Gutter-row" Span="6">
<div >col-6</div>
</Col>
<Col class="Gutter-row" Span="6">
<div >col-6</div>
</Col>
<Col class="Gutter-row" Span="6">
<div >col-6</div>
</Col>
<Col class="Gutter-row" Span="6">
<div >col-6</div>
</Col>
</Row>
</div>
</div>
@code{
Dictionary<string, int> Gutter1 = new Dictionary<string, int>()
{
["xs"] = 8,
["sm"] = 16,
["md"] = 24,
["lg"] = 32,
["xl"] = 48,
["xxl"] = 64
};
}

0
site/AntDesign.Docs/Demos/Components/Grid/demo/Gutterx.md → site/AntDesign.Docs/Demos/Components/Grid/demo/gutter.md
View File