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: card): grid and tabs has wrong styles (#627)

Browse Source
This commit is contained in:
James Yeung 2020-09-20 10:43:40 +08:00 committed by GitHub
parent 143b16335b
commit 95c54a4461
17 changed files with 226 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
components/card/Card.razor
View File

@ -3,27 +3,35 @@
<CascadingValue Value="this">
<div class="@ClassMapper.Class" style="@Style" id="@Id">
@if (TitleTemplate != null || Title != null || Extra != null || AntCardTab != null)
@if (TitleTemplate != null || Title != null || Extra != null || CardTabs != null)
{
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
@if (TitleTemplate != null || Title != null)
{
<div class="ant-card-head-title">
@if (TitleTemplate != null)@TitleTemplate else @Title
</div>
}
@if (Extra != null)
{
<div class="ant-card-extra">
@Extra
@if (TitleTemplate != null)
{
@TitleTemplate
}
else
{
@Title
}
</div>
@if (Extra != null)
{
<div class="ant-card-extra">
@Extra
</div>
}
}
</div>
@if (AntCardTab != null)
@if (CardTabs != null)
{
@AntCardTab
@CardTabs
}
</div>
}
@ -35,18 +43,20 @@
</div>
}
<div class="ant-card-body" style="@BodyStyle">
@if (!Loading)
{
@Body
@ChildContent
}
else
{
<CardLoading></CardLoading>
}
</div>
@if (Body != null || ChildContent != null)
{
<div class="ant-card-body" style="@BodyStyle">
@if (!Loading)
{
@Body
@ChildContent
}
else
{
<CardLoading></CardLoading>
}
</div>
}
@if (Actions.Count > 0)
{
<ul class="ant-card-actions">

24
components/card/Card.razor.cs
View File

@ -13,7 +13,7 @@ namespace AntDesign
public RenderFragment Body { get; set; }
[Parameter]
public bool Bordered { get; set; } = false;
public bool Bordered { get; set; } = true;
[Parameter]
public bool Hoverable { get; set; } = false;
@ -46,21 +46,21 @@ namespace AntDesign
public RenderFragment Extra { get; set; }
[Parameter]
public RenderFragment AntCardTab { get; set; }
public RenderFragment CardTabs { get; set; }
internal IList<CardGrid> Grids { get; set; } = new List<CardGrid>();
private bool _hasGrids;
protected void SetClassMap()
{
this.ClassMapper.Clear()
this.ClassMapper
.Add("ant-card")
.If("ant-card-loading", () => Loading)
.If("ant-card-bordered", () => Bordered)
.If("ant-card-hoverable", () => Hoverable)
.If("ant-card-small", () => Size == "small")
.If("ant-card-contain-grid", () => Grids.Count > 0)
.If("ant-card-contain-grid", () => _hasGrids)
.If("ant-card-type-inner", () => Type == "inner")
.If("ant-card-contain-tabs", () => AntCardTab != null)
.If("ant-card-contain-tabs", () => CardTabs != null)
;
}
@ -69,5 +69,17 @@ namespace AntDesign
base.OnInitialized();
SetClassMap();
}
internal void MarkHasGrid()
{
_hasGrids = true;
StateHasChanged();
}
internal void SetBody(RenderFragment body)
{
this.Body = body;
StateHasChanged();
}
}
}

16
components/card/CardGrid.razor
View File

@ -4,19 +4,3 @@
<div class="@ClassMapper.Class" style="@Style" id="@Id">
@ChildContent
</div>
@code {
[Parameter]
public RenderFragment ChildContent { get; set; }
[Parameter]
public bool Hoverable { get; set; }
protected override void OnInitialized()
{
base.OnInitialized();
ClassMapper.Add("ant-card-grid")
.If("ant-card-hoverable", () => Hoverable);
}
}

34
components/card/CardGrid.razor.cs Normal file
View File

@ -0,0 +1,34 @@
using System;
using System.Collections.Generic;
using System.Text;
using Microsoft.AspNetCore.Components;
namespace AntDesign
{
public partial class CardGrid : AntDomComponentBase
{
[Parameter]
public RenderFragment ChildContent { get; set; }
[Parameter]
public bool Hoverable { get; set; }
[CascadingParameter]
public Card Parent { get; set; }
protected override void OnInitialized()
{
Parent?.MarkHasGrid();
ClassMapper.Add("ant-card-grid")
.If("ant-card-hoverable", () => Hoverable);
base.OnInitialized();
}
protected override void Dispose(bool disposing)
{
base.Dispose(disposing);
}
}
}

47
components/card/CardMeta.razor
View File

@ -2,22 +2,42 @@
@inherits AntDomComponentBase
<div class="@ClassMapper.Class" style="@Style" id="@Id">
@if (Avatar != null)
@if (!string.IsNullOrWhiteSpace(Avatar) || AvatarTemplate != null)
{
<div class="ant-card-meta-avatar">
@Avatar
@if (AvatarTemplate != null)
{
@AvatarTemplate
}
else
{
<Avatar Src="@Avatar" />
}
</div>
}
@if (Title != null || Description != null)
@if (!string.IsNullOrWhiteSpace(Title) || TitleTemplate != null
|| !string.IsNullOrWhiteSpace(Description) || DescriptionTemplate != null)
{
<div class="ant-card-meta-detail">
@if (Title != null)
@if (!string.IsNullOrWhiteSpace(Title) || TitleTemplate != null)
{
<div class="ant-card-meta-title">
@Title
@if (TitleTemplate != null)
{
@TitleTemplate
}
else
{
@Title
}
</div>
}
@if (Description != null)
@if (DescriptionTemplate != null)
{
@DescriptionTemplate
}
else
{
@Description
}
@ -28,13 +48,22 @@
@code{
[Parameter]
public RenderFragment Title { get; set; }
public string Title { get; set; }
[Parameter]
public RenderFragment Description { get; set; }
public RenderFragment TitleTemplate { get; set; }
[Parameter]
public RenderFragment Avatar { get; set; }
public string Description { get; set; }
[Parameter]
public RenderFragment DescriptionTemplate { get; set; }
[Parameter]
public string Avatar { get; set; }
[Parameter]
public RenderFragment AvatarTemplate { get; set; }
protected override void OnInitialized()
{

54
components/tabs/Tabs.razor
View File

@ -14,11 +14,11 @@
if (pane.IsActive)
{
<button @ref="_activeTabBar" type="button" role="tab" aria-selected="@(pane.IsActive)" tabindex="0" class="@pane._classMapper.Class" id="@($"rc-tabs-{Id}-tab-{pane.Key}")" aria-controls="@($"rc-tabs-{Id}-tab-{pane.Key}")"
draggable="@Draggable.ToString()"
@ondragover:preventDefault
ondragover="event.preventDefault();"
@ondragstart="(e)=>HandleDragStart(e, pane)"
@ondrop="(e)=>HandleDrop(pane)">
draggable="@Draggable.ToString()"
@ondragover:preventDefault
ondragover="event.preventDefault();"
@ondragstart="(e)=>HandleDragStart(e, pane)"
@ondrop="(e)=>HandleDrop(pane)">
@if (Type == TabType.EditableCard && pane.Closable)
{
@pane.Tab
@ -72,10 +72,10 @@
<div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated" style="@_inkStyle"></div>
</div>
</div>
@if (TabBarExtraContent != null)
@if (TabBarExtraContent != null || (Card?.Extra != null && Card?.Title == null && Card?.TitleTemplate == null))
{
<div class="ant-tabs-extra-content">
@TabBarExtraContent
@(TabBarExtraContent?? Card?.Extra)
</div>
}
<Dropdown>
@ -85,7 +85,7 @@
{
<li class="ant-tabs-dropdown-menu-item @(pane.Disabled?$"ant-tabs-dropdown-menu-item-disabled":string.Empty)" id="@($"rc-tabs-{Id}-more-popup-{pane.Key}")" role="option" aria-disabled="false" aria-selected="false" aria-controls="@($"rc-tabs-{Id}-more-popup-{pane.Key}")"
@onclick="(e)=>HandleTabClick(pane,e)">@pane.Tab</li>
}
}
</ul>
</Overlay>
<ChildContent>
@ -101,28 +101,30 @@
</Dropdown>
</div>
<!--Tab content-->
<div class="ant-tabs-content-holder ">
<div class="ant-tabs-content ant-tabs-content-@TabPosition">
@foreach (var pane in _panes)
{
if (pane.IsActive || pane.ForceRender || pane.HasRendered)
@if (Card == null)
{
<div class="ant-tabs-content-holder ">
<div class="ant-tabs-content ant-tabs-content-@TabPosition">
@foreach (var pane in _panes)
{
pane.HasRendered = true;
if (pane.IsActive || pane.ForceRender || pane.HasRendered)
{
pane.HasRendered = true;
<div
@key="pane.Id"
tabindex="@(pane.IsActive ? "0" : "-1")"
class="ant-tabs-tabpane @(pane.IsActive ? "ant-tabs-tabpane-active" : "")"
id="@($"rc-tabs-{Id}-panel-{pane.Key}")"
role="tabpanel" aria-hidden="@(pane.IsActive ? "false" : "true")"
aria-labelledby="@($"rc-tabs-{Id}-panel-{pane.Key}")"
style="@(pane.IsActive ? "" : "display: none;")">
@pane.ChildContent
</div>
<div @key="pane.Id"
tabindex="@(pane.IsActive ? "0" : "-1")"
class="ant-tabs-tabpane @(pane.IsActive ? "ant-tabs-tabpane-active" : "")"
id="@($"rc-tabs-{Id}-panel-{pane.Key}")"
role="tabpanel" aria-hidden="@(pane.IsActive ? "false" : "true")"
aria-labelledby="@($"rc-tabs-{Id}-panel-{pane.Key}")"
style="@(pane.IsActive ? "" : "display: none;")">
@pane.ChildContent
</div>
}
}
}
</div>
</div>
</div>
}
</div>

5
components/tabs/Tabs.razor.cs
View File

@ -183,6 +183,9 @@ namespace AntDesign
[Parameter]
public bool Draggable { get; set; }
[CascadingParameter]
public Card Card { get; set; }
#endregion Parameters
public override Task SetParametersAsync(ParameterView parameters)
@ -369,6 +372,8 @@ namespace AntDesign
_activeKey = _activePane.Key;
}
Card?.SetBody(_activePane.ChildContent);
StateHasChanged();
}
}

8
site/AntBlazor.Docs/Demos/Components/Card/demo/Basic.razor
View File

@ -1,5 +1,5 @@
<div>
<Card Bordered Title="Default size card">
<Card Title="Default size card" Style="width:300px;">
<Extra>
<a>More</a>
</Extra>
@ -8,7 +8,7 @@
</Body>
</Card>
<br />
<Card Bordered Size="small" Title="Small size card">
<Card Size="small" Title="Small size card" Style="width:300px;">
<Extra>
<a>More</a>
</Extra>
@ -17,7 +17,7 @@
</Body>
</Card>
<br />
<Card Bordered>
<Card Style="width:300px;">
<TitleTemplate>
<Icon Type="credit-card" Theme="outline" /> Title is Template
</TitleTemplate>
@ -29,7 +29,7 @@
</Body>
</Card>
<br />
<Card Bordered Size="small" TitleTemplate="titleTemplate">
<Card Size="small" TitleTemplate="titleTemplate" Style="width:300px;">
<Extra>
<a>More</a>
</Extra>

7
site/AntBlazor.Docs/Demos/Components/Card/demo/Customized.razor
View File

@ -1,11 +1,6 @@
<div>
<Card Hoverable Style="width: 240px" Cover="coverTemplate">
<CardMeta>
<Title>
Europe Street beat
</Title>
<Description> www.instagram.com</Description>
</CardMeta>
<CardMeta Title="Europe Street beat" Description="www.instagram.com"/>
</Card>
</div>

44
site/AntBlazor.Docs/Demos/Components/Card/demo/Loading.razor
View File

@ -1,22 +1,46 @@
<div>
<Card Loading="loading" Title=@("Card title")>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>
<Button Style="margin-top: 16px" OnClick="handleClick">
<Switch Checked="!loading" OnChange="OnChange">
Toggle loading
</Button>
</Switch>
<Card Loading="loading" Style="width: 300px; margin-top: 16px">
<CardMeta Avatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
Title="Card title"
Description="This is the description" />
</Card>
<Card Style="width: 300px; margin-top: 16px"
Actions="new[] { actionSetting, actionEdit, actionEllipsis }">
<Skeleton Loading="loading" Avatar Active>
<CardMeta Title="Card title"
Description="This is the description"
Avatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
</Skeleton>
</Card>
</div>
@code
{
bool loading { get; set; } = true;
void handleClick()
bool loading = true;
void OnChange()
{
loading = !loading;
}
private RenderFragment actionSetting =@<Template>
<Icon Type="setting" />
</Template>;
private RenderFragment actionEdit =@<Template>
<Icon Type="edit" />
</Template>;
private RenderFragment actionEllipsis =@<Template>
<Icon Type="ellipsis" />
</Template>;
}

2
site/AntBlazor.Docs/Demos/Components/Card/demo/Noborder.razor
View File

@ -1,5 +1,5 @@
<div style="background:#ECECEC; padding:30px">
<Card Title=@("Card title") Style="width: 300px">
<Card Bordered="false" Title=@("Card title") Style="width: 300px">
<Body>
<p>Card content</p>
<p>Card content</p>

5
site/AntBlazor.Docs/Demos/Components/Card/demo/Support.razor
View File

@ -1,9 +1,6 @@
<div>
<Card Style="width:300px;" Bordered Cover="coverTemplate" Actions="new[] { actionSetting, actionEdit, actionEllipsis }">
<CardMeta Avatar="avatarTemplate">
<Title>Meta Card</Title>
<Description>This is the description</Description>
</CardMeta>
<CardMeta Avatar="avatarTemplate" Title="Meta Card" Description="This is the description" />
</Card>
</div>

42
site/AntBlazor.Docs/Demos/Components/Card/demo/Tabs1.razor
View File

@ -1,9 +1,9 @@
<div>
<Card Style="width:100%" Title=@("Card title")>
<Card Title=@("Card title")>
<Extra>
<a>More</a>
</Extra>
<Body>
<CardTabs>
<Tabs DefaultActiveKey="1">
<TabPane Key="1">
<Tab>Tab 1</Tab>
@ -18,31 +18,33 @@
<ChildContent>Content of Tab Pane 3</ChildContent>
</TabPane>
</Tabs>
</Body>
</CardTabs>
</Card>
<Card Style="width:100%" >
<br />
<br />
<Card>
<Extra>
<a>More</a>
</Extra>
<Body>
<CardTabs>
<Tabs DefaultActiveKey="1">
<TabPane Key="1">
<Tab>Article</Tab>
<ChildContent>Content of Tab Pane 1</ChildContent>
</TabPane>
<TabPane Key="2">
<Tab>App</Tab>
<ChildContent>Content of Tab Pane 2</ChildContent>
</TabPane>
<TabPane Key="3">
<Tab>Project</Tab>
<ChildContent>Content of Tab Pane 3</ChildContent>
</TabPane>
<ChildContent>
<TabPane Key="1">
<Tab>Article</Tab>
<ChildContent>Content of Tab Pane 1</ChildContent>
</TabPane>
<TabPane Key="2">
<Tab>App</Tab>
<ChildContent>Content of Tab Pane 2</ChildContent>
</TabPane>
<TabPane Key="3">
<Tab>Project</Tab>
<ChildContent>Content of Tab Pane 3</ChildContent>
</TabPane>
</ChildContent>
</Tabs>
</Body>
</CardTabs>
</Card>
</div>

1
site/AntBlazor.Docs/Demos/Components/Card/doc/index.en-US.md
View File

@ -2,6 +2,7 @@
category: Components
type: Data Display
title: Card
cols: 1
cover: https://gw.alipayobjects.com/zos/antfincdn/NqXt8DJhky/Card.svg
---

1
site/AntBlazor.Docs/Demos/Components/Card/doc/index.zh-CN.md
View File

@ -3,6 +3,7 @@ category: Components
type: 数据展示
title: Card
subtitle: 卡片
cols: 1
cover: https://gw.alipayobjects.com/zos/antfincdn/NqXt8DJhky/Card.svg
---

18
site/AntBlazor.Docs/Pages/Index.razor
View File

@ -103,14 +103,7 @@
<img alt="@item.Title" src="@item.Img">
</Cover>
<Body>
<CardMeta>
<Title>
@item.Title
</Title>
<Description>
@language.Resources[item.Description]
</Description>
</CardMeta>
<CardMeta Title="@item.Title" Description="@language.Resources[item.Description]" />
</Body>
</Card>
</a>
@ -138,14 +131,7 @@
<img alt="@item.Title" src="@item.Img">
</Cover>
<Body>
<CardMeta>
<Title>
@item.Title
</Title>
<Description>
@item.Description
</Description>
</CardMeta>
<CardMeta Title="@item.Title" Description="@item.Description" />
<div>
@item.Date
<span class="more-card-source">

5
site/AntBlazor.Docs/Services/DemoService.cs
View File

@ -42,7 +42,6 @@ namespace AntDesign.Docs.Services
await _menuCache.GetOrAdd(language, async (currentLanguage) =>
{
var menuItems = await _httpClient.GetFromJsonAsync<DemoMenuItem[]>(new Uri(_baseUrl, $"_content/AntDesign.Docs/meta/menu.{language}.json").ToString());
return menuItems;
});
@ -50,7 +49,6 @@ namespace AntDesign.Docs.Services
await _componentCache.GetOrAdd(language, async (currentLanguage) =>
{
var components = await _httpClient.GetFromJsonAsync<DemoComponent[]>(new Uri(_baseUrl, $"_content/AntDesign.Docs/meta/components.{language}.json").ToString());
return components.ToDictionary(x => x.Title.ToLower(), x => x);
});
@ -58,7 +56,6 @@ namespace AntDesign.Docs.Services
await _demoMenuCache.GetOrAdd(language, async (currentLanguage) =>
{
var menuItems = await _httpClient.GetFromJsonAsync<DemoMenuItem[]>(new Uri(_baseUrl, $"_content/AntDesign.Docs/meta/demos.{language}.json").ToString());
return menuItems;
});
@ -126,7 +123,7 @@ namespace AntDesign.Docs.Services
public async Task<DemoMenuItem[]> GetPrevNextMenu(string type, string currentTitle)
{
await InitializeAsync(CurrentLanguage);
var items = Array.Empty<DemoMenuItem>();
if (type.ToLowerInvariant() == "docs")