gen component styles
This commit is contained in:
zhaowenkai
Родитель
b9ec5ce7e1
Коммит
4f002f2d13
|
|
@ -324,7 +324,7 @@
|
|||
</ul>
|
||||
}
|
||||
}
|
||||
|
||||
@_styleContent
|
||||
@code {
|
||||
|
||||
private void SetIcon()
|
||||
|
|
|
|||
|
|
@ -204,26 +204,32 @@ namespace AntDesign
|
|||
|
||||
private void SetClass()
|
||||
{
|
||||
var hashId = UseStyle(PrefixCls);
|
||||
ClassMapper
|
||||
.Add(PrefixCls)
|
||||
.Add(hashId)
|
||||
.If($"{PrefixCls}-simple", () => Simple)
|
||||
.If($"{PrefixCls}-disabled", () => Disabled)
|
||||
.If($"{PrefixCls}-mini", () => !Simple && Size == PaginationSize.Small)
|
||||
.If($"{PrefixCls}-rtl", () => RTL);
|
||||
|
||||
_prevClass
|
||||
.Add(hashId)
|
||||
.Add($"{PrefixCls}-prev")
|
||||
.If($"{PrefixCls}-disabled", () => !HasPrev());
|
||||
|
||||
_nextClass
|
||||
.Add(hashId)
|
||||
.Add($"{PrefixCls}-next")
|
||||
.If($"{PrefixCls}-disabled", () => !HasNext());
|
||||
|
||||
_jumpPrevClass
|
||||
.Add(hashId)
|
||||
.Add($"{PrefixCls}-jump-prev")
|
||||
.If($"{PrefixCls}-jump-prev-custom-icon", () => JumpPrevIcon != null);
|
||||
|
||||
_jumpNextClass
|
||||
.Add(hashId)
|
||||
.Add($"{PrefixCls}-jump-next")
|
||||
.If($"{PrefixCls}-jump-next-custom-icon", () => JumpNextIcon != null);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,858 @@
|
|||
using System;
|
||||
using CssInCSharp;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
using static AntDesign.StyleUtil;
|
||||
using static AntDesign.InputStyle;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class PaginationToken
|
||||
{
|
||||
public string ItemBg
|
||||
{
|
||||
get => (string)_tokens["itemBg"];
|
||||
set => _tokens["itemBg"] = value;
|
||||
}
|
||||
|
||||
public double ItemSize
|
||||
{
|
||||
get => (double)_tokens["itemSize"];
|
||||
set => _tokens["itemSize"] = value;
|
||||
}
|
||||
|
||||
public string ItemActiveBg
|
||||
{
|
||||
get => (string)_tokens["itemActiveBg"];
|
||||
set => _tokens["itemActiveBg"] = value;
|
||||
}
|
||||
|
||||
public double ItemSizeSM
|
||||
{
|
||||
get => (double)_tokens["itemSizeSM"];
|
||||
set => _tokens["itemSizeSM"] = value;
|
||||
}
|
||||
|
||||
public string ItemLinkBg
|
||||
{
|
||||
get => (string)_tokens["itemLinkBg"];
|
||||
set => _tokens["itemLinkBg"] = value;
|
||||
}
|
||||
|
||||
public string ItemActiveBgDisabled
|
||||
{
|
||||
get => (string)_tokens["itemActiveBgDisabled"];
|
||||
set => _tokens["itemActiveBgDisabled"] = value;
|
||||
}
|
||||
|
||||
public string ItemActiveColorDisabled
|
||||
{
|
||||
get => (string)_tokens["itemActiveColorDisabled"];
|
||||
set => _tokens["itemActiveColorDisabled"] = value;
|
||||
}
|
||||
|
||||
public string ItemInputBg
|
||||
{
|
||||
get => (string)_tokens["itemInputBg"];
|
||||
set => _tokens["itemInputBg"] = value;
|
||||
}
|
||||
|
||||
public double MiniOptionsSizeChangerTop
|
||||
{
|
||||
get => (double)_tokens["miniOptionsSizeChangerTop"];
|
||||
set => _tokens["miniOptionsSizeChangerTop"] = value;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public partial class PaginationToken : InputToken
|
||||
{
|
||||
public double InputOutlineOffset
|
||||
{
|
||||
get => (double)_tokens["inputOutlineOffset"];
|
||||
set => _tokens["inputOutlineOffset"] = value;
|
||||
}
|
||||
|
||||
public double PaginationMiniOptionsMarginInlineStart
|
||||
{
|
||||
get => (double)_tokens["paginationMiniOptionsMarginInlineStart"];
|
||||
set => _tokens["paginationMiniOptionsMarginInlineStart"] = value;
|
||||
}
|
||||
|
||||
public double PaginationMiniQuickJumperInputWidth
|
||||
{
|
||||
get => (double)_tokens["paginationMiniQuickJumperInputWidth"];
|
||||
set => _tokens["paginationMiniQuickJumperInputWidth"] = value;
|
||||
}
|
||||
|
||||
public double PaginationItemPaddingInline
|
||||
{
|
||||
get => (double)_tokens["paginationItemPaddingInline"];
|
||||
set => _tokens["paginationItemPaddingInline"] = value;
|
||||
}
|
||||
|
||||
public double PaginationEllipsisLetterSpacing
|
||||
{
|
||||
get => (double)_tokens["paginationEllipsisLetterSpacing"];
|
||||
set => _tokens["paginationEllipsisLetterSpacing"] = value;
|
||||
}
|
||||
|
||||
public string PaginationEllipsisTextIndent
|
||||
{
|
||||
get => (string)_tokens["paginationEllipsisTextIndent"];
|
||||
set => _tokens["paginationEllipsisTextIndent"] = value;
|
||||
}
|
||||
|
||||
public double PaginationSlashMarginInlineStart
|
||||
{
|
||||
get => (double)_tokens["paginationSlashMarginInlineStart"];
|
||||
set => _tokens["paginationSlashMarginInlineStart"] = value;
|
||||
}
|
||||
|
||||
public double PaginationSlashMarginInlineEnd
|
||||
{
|
||||
get => (double)_tokens["paginationSlashMarginInlineEnd"];
|
||||
set => _tokens["paginationSlashMarginInlineEnd"] = value;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public partial class Pagination
|
||||
{
|
||||
public CSSObject GenPaginationDisabledStyle(PaginationToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-disabled"] = new CSSObject()
|
||||
{
|
||||
["&, &:hover"] = new CSSObject()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
[$"{componentCls}-item-link"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
},
|
||||
["&:focus-visible"] = new CSSObject()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
[$"{componentCls}-item-link"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-disabled"] = new CSSObject()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
[$"{componentCls}-item"] = new CSSObject()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
["&:hover, &:active"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
},
|
||||
["a"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
BackgroundColor = "transparent",
|
||||
Border = "none",
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
["&-active"] = new CSSObject()
|
||||
{
|
||||
BorderColor = token.ColorBorder,
|
||||
BackgroundColor = token.ItemActiveBgDisabled,
|
||||
["&:hover, &:active"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ItemActiveBgDisabled,
|
||||
},
|
||||
["a"] = new CSSObject()
|
||||
{
|
||||
Color = token.ItemActiveColorDisabled,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item-link"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
Cursor = "not-allowed",
|
||||
["&:hover, &:active"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
},
|
||||
[$"{componentCls}-simple&"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
["&:hover, &:active"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-simple-pager"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
},
|
||||
[$"{componentCls}-jump-prev, {componentCls}-jump-next"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-item-link-icon"] = new CSSObject()
|
||||
{
|
||||
Opacity = 0,
|
||||
},
|
||||
[$"{componentCls}-item-ellipsis"] = new CSSObject()
|
||||
{
|
||||
Opacity = 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-simple"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-prev, {componentCls}-next"] = new CSSObject()
|
||||
{
|
||||
[$"&{componentCls}-disabled {componentCls}-item-link"] = new CSSObject()
|
||||
{
|
||||
["&:hover, &:active"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenPaginationMiniStyle(PaginationToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"&{componentCls}-mini {componentCls}-total-text, &{componentCls}-mini {componentCls}-simple-pager"] = new CSSObject()
|
||||
{
|
||||
Height = token.ItemSizeSM,
|
||||
LineHeight = @$"{token.ItemSizeSM}px",
|
||||
},
|
||||
[$"&{componentCls}-mini {componentCls}-item"] = new CSSObject()
|
||||
{
|
||||
MinWidth = token.ItemSizeSM,
|
||||
Height = token.ItemSizeSM,
|
||||
Margin = 0,
|
||||
LineHeight = @$"{token.ItemSizeSM - 2}px",
|
||||
},
|
||||
[$"&{componentCls}-mini:not({componentCls}-disabled) {componentCls}-item:not({componentCls}-item-active)"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
BorderColor = "transparent",
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorBgTextHover,
|
||||
},
|
||||
["&:active"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorBgTextActive,
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-mini {componentCls}-prev, &{componentCls}-mini {componentCls}-next"] = new CSSObject()
|
||||
{
|
||||
MinWidth = token.ItemSizeSM,
|
||||
Height = token.ItemSizeSM,
|
||||
Margin = 0,
|
||||
LineHeight = @$"{token.ItemSizeSM}px",
|
||||
},
|
||||
[$"&{componentCls}-mini:not({componentCls}-disabled)"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-prev, {componentCls}-next"] = new CSSObject()
|
||||
{
|
||||
[$"&:hover {componentCls}-item-link"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorBgTextHover,
|
||||
},
|
||||
[$"&:active {componentCls}-item-link"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorBgTextActive,
|
||||
},
|
||||
[$"&{componentCls}-disabled:hover {componentCls}-item-link"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-mini{componentCls}-prev{componentCls}-item-link,&{componentCls}-mini{componentCls}-next{componentCls}-item-link"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
BorderColor = "transparent",
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
Height = token.ItemSizeSM,
|
||||
LineHeight = @$"{token.ItemSizeSM}px",
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-mini {componentCls}-jump-prev, &{componentCls}-mini {componentCls}-jump-next"] = new CSSObject()
|
||||
{
|
||||
Height = token.ItemSizeSM,
|
||||
MarginInlineEnd = 0,
|
||||
LineHeight = @$"{token.ItemSizeSM}px",
|
||||
},
|
||||
[$"&{componentCls}-mini {componentCls}-options"] = new CSSObject()
|
||||
{
|
||||
MarginInlineStart = token.PaginationMiniOptionsMarginInlineStart,
|
||||
["&-size-changer"] = new CSSObject()
|
||||
{
|
||||
Top = token.MiniOptionsSizeChangerTop,
|
||||
},
|
||||
["&-quick-jumper"] = new CSSObject()
|
||||
{
|
||||
Height = token.ItemSizeSM,
|
||||
LineHeight = @$"{token.ItemSizeSM}px",
|
||||
["input"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenInputSmallStyle(token),
|
||||
Width = token.PaginationMiniQuickJumperInputWidth,
|
||||
Height = token.ControlHeightSM,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenPaginationSimpleStyle(PaginationToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"&{componentCls}-simple{componentCls}-prev,&{componentCls}-simple{componentCls}-next"] = new CSSObject()
|
||||
{
|
||||
Height = token.ItemSizeSM,
|
||||
LineHeight = @$"{token.ItemSizeSM}px",
|
||||
VerticalAlign = "top",
|
||||
[$"{componentCls}-item-link"] = new CSSObject()
|
||||
{
|
||||
Height = token.ItemSizeSM,
|
||||
BackgroundColor = "transparent",
|
||||
Border = 0,
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorBgTextHover,
|
||||
},
|
||||
["&:active"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorBgTextActive,
|
||||
},
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
Height = token.ItemSizeSM,
|
||||
LineHeight = @$"{token.ItemSizeSM}px",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-simple {componentCls}-simple-pager"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Height = token.ItemSizeSM,
|
||||
MarginInlineEnd = token.MarginXS,
|
||||
["input"] = new CSSObject()
|
||||
{
|
||||
BoxSizing = "border-box",
|
||||
Height = "100%",
|
||||
MarginInlineEnd = token.MarginXS,
|
||||
Padding = @$"0 {token.PaginationItemPaddingInline}px",
|
||||
TextAlign = "center",
|
||||
BackgroundColor = token.ItemInputBg,
|
||||
Border = @$"{token.LineWidth}px {token.LineType} {token.ColorBorder}",
|
||||
BorderRadius = token.BorderRadius,
|
||||
Outline = "none",
|
||||
Transition = @$"border-color {token.MotionDurationMid}",
|
||||
Color = "inherit",
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
BorderColor = token.ColorPrimary,
|
||||
},
|
||||
["&:focus"] = new CSSObject()
|
||||
{
|
||||
BorderColor = token.ColorPrimaryHover,
|
||||
BoxShadow = @$"{token.InputOutlineOffset}px 0 {token.ControlOutlineWidth}px {token.ControlOutline}",
|
||||
},
|
||||
["&[disabled]"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
BackgroundColor = token.ColorBgContainerDisabled,
|
||||
BorderColor = token.ColorBorder,
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenPaginationJumpStyle(PaginationToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-jump-prev, {componentCls}-jump-next"] = new CSSObject()
|
||||
{
|
||||
Outline = 0,
|
||||
[$"{componentCls}-item-container"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
[$"{componentCls}-item-link-icon"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorPrimary,
|
||||
FontSize = token.FontSizeSM,
|
||||
Opacity = 0,
|
||||
Transition = @$"all {token.MotionDurationMid}",
|
||||
["&-svg"] = new CSSObject()
|
||||
{
|
||||
Top = 0,
|
||||
InsetInlineEnd = 0,
|
||||
Bottom = 0,
|
||||
InsetInlineStart = 0,
|
||||
Margin = "auto",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item-ellipsis"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = 0,
|
||||
InsetInlineEnd = 0,
|
||||
Bottom = 0,
|
||||
InsetInlineStart = 0,
|
||||
Display = "block",
|
||||
Margin = "auto",
|
||||
Color = token.ColorTextDisabled,
|
||||
FontFamily = "Arial, Helvetica, sans-serif",
|
||||
LetterSpacing = token.PaginationEllipsisLetterSpacing,
|
||||
TextAlign = "center",
|
||||
TextIndent = token.PaginationEllipsisTextIndent,
|
||||
Opacity = 1,
|
||||
Transition = @$"all {token.MotionDurationMid}",
|
||||
},
|
||||
},
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-item-link-icon"] = new CSSObject()
|
||||
{
|
||||
Opacity = 1,
|
||||
},
|
||||
[$"{componentCls}-item-ellipsis"] = new CSSObject()
|
||||
{
|
||||
Opacity = 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-prev,{componentCls}-jump-prev,{componentCls}-jump-next"] = new CSSObject()
|
||||
{
|
||||
MarginInlineEnd = token.MarginXS,
|
||||
},
|
||||
[$"{componentCls}-prev,{componentCls}-next,{componentCls}-jump-prev,{componentCls}-jump-next"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
MinWidth = token.ItemSize,
|
||||
Height = token.ItemSize,
|
||||
Color = token.ColorText,
|
||||
FontFamily = token.FontFamily,
|
||||
LineHeight = @$"{token.ItemSize}px",
|
||||
TextAlign = "center",
|
||||
VerticalAlign = "middle",
|
||||
ListStyle = "none",
|
||||
BorderRadius = token.BorderRadius,
|
||||
Cursor = "pointer",
|
||||
Transition = @$"all {token.MotionDurationMid}",
|
||||
},
|
||||
[$"{componentCls}-prev, {componentCls}-next"] = new CSSObject()
|
||||
{
|
||||
FontFamily = "Arial, Helvetica, sans-serif",
|
||||
Outline = 0,
|
||||
["button"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorText,
|
||||
Cursor = "pointer",
|
||||
UserSelect = "none",
|
||||
},
|
||||
[$"{componentCls}-item-link"] = new CSSObject()
|
||||
{
|
||||
Display = "block",
|
||||
Width = "100%",
|
||||
Height = "100%",
|
||||
Padding = 0,
|
||||
FontSize = token.FontSizeSM,
|
||||
TextAlign = "center",
|
||||
BackgroundColor = "transparent",
|
||||
Border = @$"{token.LineWidth}px {token.LineType} transparent",
|
||||
BorderRadius = token.BorderRadius,
|
||||
Outline = "none",
|
||||
Transition = @$"all {token.MotionDurationMid}",
|
||||
},
|
||||
[$"&:hover {componentCls}-item-link"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorBgTextHover,
|
||||
},
|
||||
[$"&:active {componentCls}-item-link"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorBgTextActive,
|
||||
},
|
||||
[$"&{componentCls}-disabled:hover"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-item-link"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-slash"] = new CSSObject()
|
||||
{
|
||||
MarginInlineEnd = token.PaginationSlashMarginInlineEnd,
|
||||
MarginInlineStart = token.PaginationSlashMarginInlineStart,
|
||||
},
|
||||
[$"{componentCls}-options"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
MarginInlineStart = token.Margin,
|
||||
VerticalAlign = "middle",
|
||||
["&-size-changer.-select"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Width = "auto",
|
||||
},
|
||||
["&-quick-jumper"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Height = token.ControlHeight,
|
||||
MarginInlineStart = token.MarginXS,
|
||||
LineHeight = @$"{token.ControlHeight}px",
|
||||
VerticalAlign = "top",
|
||||
["input"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenBasicInputStyle(token),
|
||||
Width = token.ControlHeightLG * 1.25,
|
||||
Height = token.ControlHeight,
|
||||
BoxSizing = "border-box",
|
||||
Margin = 0,
|
||||
MarginInlineStart = token.MarginXS,
|
||||
MarginInlineEnd = token.MarginXS,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenPaginationItemStyle(PaginationToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-item"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
MinWidth = token.ItemSize,
|
||||
Height = token.ItemSize,
|
||||
MarginInlineEnd = token.MarginXS,
|
||||
FontFamily = token.FontFamily,
|
||||
LineHeight = @$"{token.ItemSize - 2}px",
|
||||
TextAlign = "center",
|
||||
VerticalAlign = "middle",
|
||||
ListStyle = "none",
|
||||
BackgroundColor = "transparent",
|
||||
Border = @$"{token.LineWidth}px {token.LineType} transparent",
|
||||
BorderRadius = token.BorderRadius,
|
||||
Outline = 0,
|
||||
Cursor = "pointer",
|
||||
UserSelect = "none",
|
||||
["a"] = new CSSObject()
|
||||
{
|
||||
Display = "block",
|
||||
Padding = @$"0 {token.PaginationItemPaddingInline}px",
|
||||
Color = token.ColorText,
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
TextDecoration = "none",
|
||||
},
|
||||
},
|
||||
[$"&:not({componentCls}-item-active)"] = new CSSObject()
|
||||
{
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
Transition = @$"all {token.MotionDurationMid}",
|
||||
BackgroundColor = token.ColorBgTextHover,
|
||||
},
|
||||
["&:active"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorBgTextActive,
|
||||
},
|
||||
},
|
||||
["&-active"] = new CSSObject()
|
||||
{
|
||||
FontWeight = token.FontWeightStrong,
|
||||
BackgroundColor = token.ItemActiveBg,
|
||||
BorderColor = token.ColorPrimary,
|
||||
["a"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorPrimary,
|
||||
},
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
BorderColor = token.ColorPrimaryHover,
|
||||
},
|
||||
["&:hover a"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorPrimaryHover,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenPaginationStyle(PaginationToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
["ul, ol"] = new CSSObject()
|
||||
{
|
||||
Margin = 0,
|
||||
Padding = 0,
|
||||
ListStyle = "none",
|
||||
},
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
Display = "block",
|
||||
Clear = "both",
|
||||
Height = 0,
|
||||
Overflow = "hidden",
|
||||
Visibility = "hidden",
|
||||
Content = "\"\"",
|
||||
},
|
||||
[$"{componentCls}-total-text"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Height = token.ItemSize,
|
||||
MarginInlineEnd = token.MarginXS,
|
||||
LineHeight = @$"{token.ItemSize - 2}px",
|
||||
VerticalAlign = "middle",
|
||||
},
|
||||
["..."] = GenPaginationItemStyle(token),
|
||||
["..."] = GenPaginationJumpStyle(token),
|
||||
["..."] = GenPaginationSimpleStyle(token),
|
||||
["..."] = GenPaginationMiniStyle(token),
|
||||
["..."] = GenPaginationDisabledStyle(token),
|
||||
[$"@media only screen and (max-width: {token.ScreenLG}px)"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-item"] = new CSSObject()
|
||||
{
|
||||
["&-after-jump-prev, &-before-jump-next"] = new CSSObject()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"@media only screen and (max-width: {token.ScreenSM}px)"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-options"] = new CSSObject()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"&{token.ComponentCls}-rtl"] = new CSSObject()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenBorderedStyle(PaginationToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}{componentCls}-disabled:not({componentCls}-mini)"] = new CSSObject()
|
||||
{
|
||||
["&, &:hover"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-item-link"] = new CSSObject()
|
||||
{
|
||||
BorderColor = token.ColorBorder,
|
||||
},
|
||||
},
|
||||
["&:focus-visible"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-item-link"] = new CSSObject()
|
||||
{
|
||||
BorderColor = token.ColorBorder,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item, {componentCls}-item-link"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorBgContainerDisabled,
|
||||
BorderColor = token.ColorBorder,
|
||||
[$"&:hover:not({componentCls}-item-active)"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorBgContainerDisabled,
|
||||
BorderColor = token.ColorBorder,
|
||||
["a"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-item-active"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ItemActiveBgDisabled,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-prev, {componentCls}-next"] = new CSSObject()
|
||||
{
|
||||
["&:hover button"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorBgContainerDisabled,
|
||||
BorderColor = token.ColorBorder,
|
||||
Color = token.ColorTextDisabled,
|
||||
},
|
||||
[$"{componentCls}-item-link"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorBgContainerDisabled,
|
||||
BorderColor = token.ColorBorder,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}:not({componentCls}-mini)"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-prev, {componentCls}-next"] = new CSSObject()
|
||||
{
|
||||
["&:hover button"] = new CSSObject()
|
||||
{
|
||||
BorderColor = token.ColorPrimaryHover,
|
||||
BackgroundColor = token.ItemBg,
|
||||
},
|
||||
[$"{componentCls}-item-link"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ItemLinkBg,
|
||||
BorderColor = token.ColorBorder,
|
||||
},
|
||||
[$"&:hover {componentCls}-item-link"] = new CSSObject()
|
||||
{
|
||||
BorderColor = token.ColorPrimary,
|
||||
BackgroundColor = token.ItemBg,
|
||||
Color = token.ColorPrimary,
|
||||
},
|
||||
[$"&{componentCls}-disabled"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-item-link"] = new CSSObject()
|
||||
{
|
||||
BorderColor = token.ColorBorder,
|
||||
Color = token.ColorTextDisabled,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ItemBg,
|
||||
Border = @$"{token.LineWidth}px {token.LineType} {token.ColorBorder}",
|
||||
[$"&:hover:not({componentCls}-item-active)"] = new CSSObject()
|
||||
{
|
||||
BorderColor = token.ColorPrimary,
|
||||
BackgroundColor = token.ItemBg,
|
||||
["a"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorPrimary,
|
||||
},
|
||||
},
|
||||
["&-active"] = new CSSObject()
|
||||
{
|
||||
BorderColor = token.ColorPrimary,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenPaginationFocusStyle(PaginationToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}:not({componentCls}-disabled)"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-item"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenFocusStyle(token)
|
||||
},
|
||||
[$"{componentCls}-jump-prev, {componentCls}-jump-next"] = new CSSObject()
|
||||
{
|
||||
["&:focus-visible"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-item-link-icon"] = new CSSObject()
|
||||
{
|
||||
Opacity = 1,
|
||||
},
|
||||
[$"{componentCls}-item-ellipsis"] = new CSSObject()
|
||||
{
|
||||
Opacity = 0,
|
||||
},
|
||||
["..."] = GenFocusOutline(token)
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-prev, {componentCls}-next"] = new CSSObject()
|
||||
{
|
||||
[$"&:focus-visible {componentCls}-item-link"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenFocusOutline(token)
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
protected override UseComponentStyleResult UseComponentStyle()
|
||||
{
|
||||
return GenComponentStyleHook(
|
||||
"Pagination",
|
||||
(token) =>
|
||||
{
|
||||
var paginationToken = MergeToken<PaginationToken>(
|
||||
token,
|
||||
new PaginationToken()
|
||||
{
|
||||
InputOutlineOffset = 0,
|
||||
PaginationMiniOptionsMarginInlineStart = token.MarginXXS / 2,
|
||||
PaginationMiniQuickJumperInputWidth = token.ControlHeightLG * 1.1,
|
||||
PaginationItemPaddingInline = token.MarginXXS * 1.5,
|
||||
PaginationEllipsisLetterSpacing = token.MarginXXS / 2,
|
||||
PaginationSlashMarginInlineStart = token.MarginXXS,
|
||||
PaginationSlashMarginInlineEnd = token.MarginSM,
|
||||
PaginationEllipsisTextIndent = "0.13em",
|
||||
},
|
||||
InitInputToken(token),
|
||||
InitComponentToken(token));
|
||||
return new CSSInterpolation[]
|
||||
{
|
||||
GenPaginationStyle(paginationToken),
|
||||
GenPaginationFocusStyle(paginationToken),
|
||||
token.Wireframe ? GenBorderedStyle(paginationToken) : null
|
||||
};
|
||||
},
|
||||
(token) =>
|
||||
{
|
||||
return new PaginationToken()
|
||||
{
|
||||
ItemBg = token.ColorBgContainer,
|
||||
ItemSize = token.ControlHeight,
|
||||
ItemSizeSM = token.ControlHeightSM,
|
||||
ItemActiveBg = token.ColorBgContainer,
|
||||
ItemLinkBg = token.ColorBgContainer,
|
||||
ItemActiveColorDisabled = token.ColorTextDisabled,
|
||||
ItemActiveBgDisabled = token.ControlItemBgActiveDisabled,
|
||||
ItemInputBg = token.ColorBgContainer,
|
||||
MiniOptionsSizeChangerTop = 0,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -96,4 +96,5 @@
|
|||
</div>
|
||||
</Overlay>
|
||||
</CascadingValue>
|
||||
</CascadingValue>
|
||||
</CascadingValue>
|
||||
@_styleContent
|
||||
|
|
@ -65,6 +65,7 @@ namespace AntDesign
|
|||
{
|
||||
OkText ??= Locale.OkText ?? "Ok";
|
||||
CancelText ??= Locale.CancelText ?? "Cancel";
|
||||
var hashId = UseStyle(PrefixCls);
|
||||
}
|
||||
|
||||
internal override async Task Show(int? overlayLeft = null, int? overlayTop = null)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,112 @@
|
|||
using System;
|
||||
using CssInCSharp;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
using static AntDesign.StyleUtil;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class PopconfirmToken
|
||||
{
|
||||
public double ZIndexPopup
|
||||
{
|
||||
get => (double)_tokens["zIndexPopup"];
|
||||
set => _tokens["zIndexPopup"] = value;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public partial class PopconfirmToken : TokenWithCommonCls
|
||||
{
|
||||
}
|
||||
|
||||
public partial class Popconfirm
|
||||
{
|
||||
public CSSObject GenBaseStyle(PopconfirmToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var iconCls = token.IconCls;
|
||||
var antCls = token.AntCls;
|
||||
var zIndexPopup = token.ZIndexPopup;
|
||||
var colorText = token.ColorText;
|
||||
var colorWarning = token.ColorWarning;
|
||||
var marginXXS = token.MarginXXS;
|
||||
var marginXS = token.MarginXS;
|
||||
var fontSize = token.FontSize;
|
||||
var fontWeightStrong = token.FontWeightStrong;
|
||||
var colorTextHeading = token.ColorTextHeading;
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
ZIndex = zIndexPopup,
|
||||
[$"&{antCls}-popover"] = new CSSObject()
|
||||
{
|
||||
FontSize = fontSize,
|
||||
},
|
||||
[$"{componentCls}-message"] = new CSSObject()
|
||||
{
|
||||
MarginBottom = marginXS,
|
||||
Display = "flex",
|
||||
FlexWrap = "nowrap",
|
||||
AlignItems = "start",
|
||||
[$"> {componentCls}-message-icon {iconCls}"] = new CSSObject()
|
||||
{
|
||||
Color = colorWarning,
|
||||
FontSize = fontSize,
|
||||
LineHeight = 1,
|
||||
MarginInlineEnd = marginXS,
|
||||
},
|
||||
[$"{componentCls}-title"] = new CSSObject()
|
||||
{
|
||||
FontWeight = fontWeightStrong,
|
||||
Color = colorTextHeading,
|
||||
["&:only-child"] = new CSSObject()
|
||||
{
|
||||
FontWeight = "normal",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-description"] = new CSSObject()
|
||||
{
|
||||
MarginTop = marginXXS,
|
||||
Color = colorText,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-buttons"] = new CSSObject()
|
||||
{
|
||||
TextAlign = "end",
|
||||
WhiteSpace = "nowrap",
|
||||
["button"] = new CSSObject()
|
||||
{
|
||||
MarginInlineStart = marginXS,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
protected override UseComponentStyleResult UseComponentStyle()
|
||||
{
|
||||
return GenComponentStyleHook(
|
||||
"Popconfirm",
|
||||
(token) =>
|
||||
{
|
||||
return GenBaseStyle(token);
|
||||
},
|
||||
(token) =>
|
||||
{
|
||||
var zIndexPopupBase = token.ZIndexPopupBase;
|
||||
return new PopconfirmToken()
|
||||
{
|
||||
ZIndexPopup = zIndexPopupBase + 60,
|
||||
};
|
||||
},
|
||||
new GenOptions()
|
||||
{
|
||||
ResetStyle = false,
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -48,4 +48,5 @@
|
|||
</div>
|
||||
</Overlay>
|
||||
</CascadingValue>
|
||||
</CascadingValue>
|
||||
</CascadingValue>
|
||||
@_styleContent
|
||||
|
|
@ -35,6 +35,11 @@ namespace AntDesign
|
|||
Placement = Placement.Top;
|
||||
}
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
var hashId = UseStyle(PrefixCls);
|
||||
}
|
||||
|
||||
internal override string GetOverlayEnterClass()
|
||||
{
|
||||
return "ant-zoom-big-enter ant-zoom-big-enter-active ant-zoom-big";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,271 @@
|
|||
using System;
|
||||
using System.Linq;
|
||||
using CssInCSharp;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
using static AntDesign.StyleUtil;
|
||||
using static AntDesign.Zoom;
|
||||
using static AntDesign.PlacementArrow;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class PopoverToken
|
||||
{
|
||||
public double Width
|
||||
{
|
||||
get => (double)_tokens["width"];
|
||||
set => _tokens["width"] = value;
|
||||
}
|
||||
|
||||
public double MinWidth
|
||||
{
|
||||
get => (double)_tokens["minWidth"];
|
||||
set => _tokens["minWidth"] = value;
|
||||
}
|
||||
|
||||
public double TitleMinWidth
|
||||
{
|
||||
get => (double)_tokens["titleMinWidth"];
|
||||
set => _tokens["titleMinWidth"] = value;
|
||||
}
|
||||
|
||||
public double ZIndexPopup
|
||||
{
|
||||
get => (double)_tokens["zIndexPopup"];
|
||||
set => _tokens["zIndexPopup"] = value;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public partial class PopoverToken : TokenWithCommonCls
|
||||
{
|
||||
public string PopoverBg
|
||||
{
|
||||
get => (string)_tokens["popoverBg"];
|
||||
set => _tokens["popoverBg"] = value;
|
||||
}
|
||||
|
||||
public string PopoverColor
|
||||
{
|
||||
get => (string)_tokens["popoverColor"];
|
||||
set => _tokens["popoverColor"] = value;
|
||||
}
|
||||
|
||||
public double PopoverPadding
|
||||
{
|
||||
get => (double)_tokens["popoverPadding"];
|
||||
set => _tokens["popoverPadding"] = value;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public partial class Popover
|
||||
{
|
||||
public CSSInterpolation[] GenBaseStyle(PopoverToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var popoverColor = token.PopoverColor;
|
||||
var titleMinWidth = token.TitleMinWidth;
|
||||
var fontWeightStrong = token.FontWeightStrong;
|
||||
var popoverPadding = token.PopoverPadding;
|
||||
var boxShadowSecondary = token.BoxShadowSecondary;
|
||||
var colorTextHeading = token.ColorTextHeading;
|
||||
var borderRadius = token.BorderRadiusLG;
|
||||
var zIndexPopup = token.ZIndexPopup;
|
||||
var marginXS = token.MarginXS;
|
||||
var colorBgElevated = token.ColorBgElevated;
|
||||
var popoverBg = token.PopoverBg;
|
||||
return new CSSInterpolation[]
|
||||
{
|
||||
new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Position = "absolute",
|
||||
Top = 0,
|
||||
Left = new PropertySkip()
|
||||
{
|
||||
SkipCheck = true,
|
||||
Value = 0,
|
||||
},
|
||||
ZIndex = zIndexPopup,
|
||||
FontWeight = "normal",
|
||||
WhiteSpace = "normal",
|
||||
TextAlign = "start",
|
||||
Cursor = "auto",
|
||||
UserSelect = "text",
|
||||
TransformOrigin = @$"var(--arrow-x, 50%) var(--arrow-y, 50%)",
|
||||
["--antd-arrow-background-color"] = colorBgElevated,
|
||||
["&-rtl"] = new CSSObject()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
["&-hidden"] = new CSSObject()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
[$"{componentCls}-content"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
},
|
||||
[$"{componentCls}-inner"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = popoverBg,
|
||||
BackgroundClip = "padding-box",
|
||||
BorderRadius = borderRadius,
|
||||
BoxShadow = boxShadowSecondary,
|
||||
Padding = popoverPadding,
|
||||
},
|
||||
[$"{componentCls}-title"] = new CSSObject()
|
||||
{
|
||||
MinWidth = titleMinWidth,
|
||||
MarginBottom = marginXS,
|
||||
Color = colorTextHeading,
|
||||
FontWeight = fontWeightStrong,
|
||||
},
|
||||
[$"{componentCls}-inner-content"] = new CSSObject()
|
||||
{
|
||||
Color = popoverColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
GetArrowStyle(
|
||||
token,
|
||||
new PlacementArrowOptions()
|
||||
{
|
||||
ColorBg = "var(--antd-arrow-background-color)",
|
||||
}),
|
||||
new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-pure"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
MaxWidth = "none",
|
||||
Margin = token.SizePopupArrow,
|
||||
Display = "inline-block",
|
||||
[$"{componentCls}-content"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenColorStyle(PopoverToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = Enum.GetNames(typeof(PresetColor)).Select(x =>
|
||||
{
|
||||
var colorKey = x.ToLower();
|
||||
var lightColor = token[$"{colorKey}6"].ToString();
|
||||
CSSInterpolation css = new CSSObject()
|
||||
{
|
||||
[$"&{componentCls}-{colorKey}"] = new CSSObject()
|
||||
{
|
||||
["--antd-arrow-background-color"] = lightColor,
|
||||
[$"{componentCls}-inner"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = lightColor,
|
||||
},
|
||||
[$"{componentCls}-arrow"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
},
|
||||
}
|
||||
};
|
||||
return css;
|
||||
}).ToArray(),
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenWireframeStyle(PopoverToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var lineWidth = token.LineWidth;
|
||||
var lineType = token.LineType;
|
||||
var colorSplit = token.ColorSplit;
|
||||
var paddingSM = token.PaddingSM;
|
||||
var controlHeight = token.ControlHeight;
|
||||
var fontSize = token.FontSize;
|
||||
var lineHeight = token.LineHeight;
|
||||
var padding = token.Padding;
|
||||
var titlePaddingBlockDist = controlHeight - Math.Round(fontSize * lineHeight);
|
||||
var popoverTitlePaddingBlockTop = titlePaddingBlockDist / 2;
|
||||
var popoverTitlePaddingBlockBottom = titlePaddingBlockDist / 2 - lineWidth;
|
||||
var popoverPaddingHorizontal = padding;
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-inner"] = new CSSObject()
|
||||
{
|
||||
Padding = 0,
|
||||
},
|
||||
[$"{componentCls}-title"] = new CSSObject()
|
||||
{
|
||||
Margin = 0,
|
||||
Padding = @$"{popoverTitlePaddingBlockTop}px {popoverPaddingHorizontal}px {popoverTitlePaddingBlockBottom}px",
|
||||
BorderBottom = @$"{lineWidth}px {lineType} {colorSplit}",
|
||||
},
|
||||
[$"{componentCls}-inner-content"] = new CSSObject()
|
||||
{
|
||||
Padding = @$"{paddingSM}px {popoverPaddingHorizontal}px",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
protected override UseComponentStyleResult UseComponentStyle()
|
||||
{
|
||||
return GenComponentStyleHook(
|
||||
"Popover",
|
||||
(token) =>
|
||||
{
|
||||
var colorBgElevated = token.ColorBgElevated;
|
||||
var colorText = token.ColorText;
|
||||
var wireframe = token.Wireframe;
|
||||
var popoverToken = MergeToken(
|
||||
token,
|
||||
new PopoverToken()
|
||||
{
|
||||
PopoverPadding = 12,
|
||||
PopoverBg = colorBgElevated,
|
||||
PopoverColor = colorText,
|
||||
});
|
||||
return new CSSInterpolation[]
|
||||
{
|
||||
GenBaseStyle(popoverToken),
|
||||
GenColorStyle(popoverToken),
|
||||
wireframe ? GenWireframeStyle(popoverToken) : null,
|
||||
InitZoomMotion(popoverToken, "zoom-big"),
|
||||
};
|
||||
},
|
||||
(token) =>
|
||||
{
|
||||
return new PopoverToken()
|
||||
{
|
||||
Width = 177,
|
||||
MinWidth = 177,
|
||||
TitleMinWidth = 177,
|
||||
ZIndexPopup = token.ZIndexPopupBase + 30,
|
||||
};
|
||||
},
|
||||
new GenOptions()
|
||||
{
|
||||
ResetStyle = false,
|
||||
DeprecatedTokens = new ()
|
||||
{
|
||||
("width", "titleMinWidth"),
|
||||
("minWidth", "titleMinWidth"),
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -141,4 +141,5 @@
|
|||
<span title="@Format(Percent)" class="ant-progress-text">@Format(Percent)</span>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@_styleContent
|
||||
|
|
@ -155,8 +155,10 @@ namespace AntDesign
|
|||
|
||||
private void SetClasses()
|
||||
{
|
||||
var hashId = UseStyle(PrefixCls);
|
||||
ClassMapper
|
||||
.Add(PrefixCls)
|
||||
.Add(hashId)
|
||||
.Get(() => $"{PrefixCls}-{Size.Name}")
|
||||
.GetIf(() => $"{PrefixCls}-{Type.Name}", () => Type != ProgressType.Dashboard)
|
||||
.GetIf(() => $"{PrefixCls}-{ProgressType.Circle.Name}", () => Type == ProgressType.Dashboard)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,387 @@
|
|||
using System;
|
||||
using CssInCSharp;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
using static AntDesign.StyleUtil;
|
||||
using Keyframes = CssInCSharp.Keyframe;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class ProgressToken
|
||||
{
|
||||
public string DefaultColor
|
||||
{
|
||||
get => (string)_tokens["defaultColor"];
|
||||
set => _tokens["defaultColor"] = value;
|
||||
}
|
||||
|
||||
public string RemainingColor
|
||||
{
|
||||
get => (string)_tokens["remainingColor"];
|
||||
set => _tokens["remainingColor"] = value;
|
||||
}
|
||||
|
||||
public string CircleTextColor
|
||||
{
|
||||
get => (string)_tokens["circleTextColor"];
|
||||
set => _tokens["circleTextColor"] = value;
|
||||
}
|
||||
|
||||
public double LineBorderRadius
|
||||
{
|
||||
get => (double)_tokens["lineBorderRadius"];
|
||||
set => _tokens["lineBorderRadius"] = value;
|
||||
}
|
||||
|
||||
public string CircleTextFontSize
|
||||
{
|
||||
get => (string)_tokens["circleTextFontSize"];
|
||||
set => _tokens["circleTextFontSize"] = value;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public partial class ProgressToken : TokenWithCommonCls
|
||||
{
|
||||
public double ProgressStepMinWidth
|
||||
{
|
||||
get => (double)_tokens["progressStepMinWidth"];
|
||||
set => _tokens["progressStepMinWidth"] = value;
|
||||
}
|
||||
|
||||
public double ProgressStepMarginInlineEnd
|
||||
{
|
||||
get => (double)_tokens["progressStepMarginInlineEnd"];
|
||||
set => _tokens["progressStepMarginInlineEnd"] = value;
|
||||
}
|
||||
|
||||
public string ProgressActiveMotionDuration
|
||||
{
|
||||
get => (string)_tokens["progressActiveMotionDuration"];
|
||||
set => _tokens["progressActiveMotionDuration"] = value;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public partial class Progress
|
||||
{
|
||||
public Keyframes GenAntProgressActive(bool isRtl = false)
|
||||
{
|
||||
var direction = isRtl ? "100%" : "-100%";
|
||||
return new Keyframes($"antProgress{(isRtl ? "RTL" : "LTR")}Active",
|
||||
new CSSObject()
|
||||
{
|
||||
["0%"] = new CSSObject()
|
||||
{
|
||||
Transform = @$"translateX({direction}) scaleX(0)",
|
||||
Opacity = 0.1f,
|
||||
},
|
||||
["20%"] = new CSSObject()
|
||||
{
|
||||
Transform = @$"translateX({direction}) scaleX(0)",
|
||||
Opacity = 0.5f,
|
||||
},
|
||||
["to"] = new CSSObject()
|
||||
{
|
||||
Transform = "translateX(0) scaleX(1)",
|
||||
Opacity = 0,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
public CSSObject GenBaseStyle(ProgressToken token)
|
||||
{
|
||||
var progressCls = token.ComponentCls;
|
||||
var iconPrefixCls = token.IconCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[progressCls] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Display = "inline-block",
|
||||
["&-rtl"] = new CSSObject()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
["&-line"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Width = "100%",
|
||||
FontSize = token.FontSize,
|
||||
MarginInlineEnd = token.MarginXS,
|
||||
MarginBottom = token.MarginXS,
|
||||
},
|
||||
[$"{progressCls}-outer"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Width = "100%",
|
||||
},
|
||||
[$"&{progressCls}-show-info"] = new CSSObject()
|
||||
{
|
||||
[$"{progressCls}-outer"] = new CSSObject()
|
||||
{
|
||||
MarginInlineEnd = @$"calc(-2em - {token.MarginXS}px)",
|
||||
PaddingInlineEnd = @$"calc(2em + {token.PaddingXS}px)",
|
||||
},
|
||||
},
|
||||
[$"{progressCls}-inner"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "inline-block",
|
||||
Width = "100%",
|
||||
Overflow = "hidden",
|
||||
VerticalAlign = "middle",
|
||||
BackgroundColor = token.RemainingColor,
|
||||
BorderRadius = token.LineBorderRadius,
|
||||
},
|
||||
[$"{progressCls}-inner:not({progressCls}-circle-gradient)"] = new CSSObject()
|
||||
{
|
||||
[$"{progressCls}-circle-path"] = new CSSObject()
|
||||
{
|
||||
["stroke"] = token.DefaultColor,
|
||||
},
|
||||
},
|
||||
[$"{progressCls}-success-bg, {progressCls}-bg"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
BackgroundColor = token.DefaultColor,
|
||||
BorderRadius = token.LineBorderRadius,
|
||||
Transition = @$"all {token.MotionDurationSlow} {token.MotionEaseInOutCirc}",
|
||||
},
|
||||
[$"{progressCls}-success-bg"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetBlockStart = 0,
|
||||
InsetInlineStart = 0,
|
||||
BackgroundColor = token.ColorSuccess,
|
||||
},
|
||||
[$"{progressCls}-text"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Width = "2em",
|
||||
MarginInlineStart = token.MarginXS,
|
||||
Color = token.ColorText,
|
||||
LineHeight = 1,
|
||||
WhiteSpace = "nowrap",
|
||||
TextAlign = "start",
|
||||
VerticalAlign = "middle",
|
||||
WordBreak = "normal",
|
||||
[iconPrefixCls] = new CSSObject()
|
||||
{
|
||||
FontSize = token.FontSize,
|
||||
},
|
||||
},
|
||||
[$"&{progressCls}-status-active"] = new CSSObject()
|
||||
{
|
||||
[$"{progressCls}-bg::before"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Inset = 0,
|
||||
BackgroundColor = token.ColorBgContainer,
|
||||
BorderRadius = token.LineBorderRadius,
|
||||
Opacity = 0,
|
||||
AnimationName = GenAntProgressActive(),
|
||||
AnimationDuration = token.ProgressActiveMotionDuration,
|
||||
AnimationTimingFunction = token.MotionEaseOutQuint,
|
||||
AnimationIterationCount = "infinite",
|
||||
Content = "\"\"",
|
||||
},
|
||||
},
|
||||
[$"&{progressCls}-rtl{progressCls}-status-active"] = new CSSObject()
|
||||
{
|
||||
[$"{progressCls}-bg::before"] = new CSSObject()
|
||||
{
|
||||
AnimationName = GenAntProgressActive(true)
|
||||
},
|
||||
},
|
||||
[$"&{progressCls}-status-exception"] = new CSSObject()
|
||||
{
|
||||
[$"{progressCls}-bg"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorError,
|
||||
},
|
||||
[$"{progressCls}-text"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorError,
|
||||
},
|
||||
},
|
||||
[$"&{progressCls}-status-exception {progressCls}-inner:not({progressCls}-circle-gradient)"] = new CSSObject()
|
||||
{
|
||||
[$"{progressCls}-circle-path"] = new CSSObject()
|
||||
{
|
||||
["stroke"] = token.ColorError,
|
||||
},
|
||||
},
|
||||
[$"&{progressCls}-status-success"] = new CSSObject()
|
||||
{
|
||||
[$"{progressCls}-bg"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorSuccess,
|
||||
},
|
||||
[$"{progressCls}-text"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorSuccess,
|
||||
},
|
||||
},
|
||||
[$"&{progressCls}-status-success {progressCls}-inner:not({progressCls}-circle-gradient)"] = new CSSObject()
|
||||
{
|
||||
[$"{progressCls}-circle-path"] = new CSSObject()
|
||||
{
|
||||
["stroke"] = token.ColorSuccess,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenCircleStyle(ProgressToken token)
|
||||
{
|
||||
var progressCls = token.ComponentCls;
|
||||
var iconPrefixCls = token.IconCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[progressCls] = new CSSObject()
|
||||
{
|
||||
[$"{progressCls}-circle-trail"] = new CSSObject()
|
||||
{
|
||||
["stroke"] = token.RemainingColor,
|
||||
},
|
||||
[$"&{progressCls}-circle {progressCls}-inner"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
LineHeight = 1,
|
||||
BackgroundColor = "transparent",
|
||||
},
|
||||
[$"&{progressCls}-circle {progressCls}-text"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetBlockStart = "50%",
|
||||
InsetInlineStart = 0,
|
||||
Width = "100%",
|
||||
Margin = 0,
|
||||
Padding = 0,
|
||||
Color = token.CircleTextColor,
|
||||
FontSize = token.CircleTextFontSize,
|
||||
LineHeight = 1,
|
||||
WhiteSpace = "normal",
|
||||
TextAlign = "center",
|
||||
Transform = "translateY(-50%)",
|
||||
[iconPrefixCls] = new CSSObject()
|
||||
{
|
||||
FontSize = @$"{token.FontSize / token.FontSizeSM}em",
|
||||
},
|
||||
},
|
||||
[$"{progressCls}-circle&-status-exception"] = new CSSObject()
|
||||
{
|
||||
[$"{progressCls}-text"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorError,
|
||||
},
|
||||
},
|
||||
[$"{progressCls}-circle&-status-success"] = new CSSObject()
|
||||
{
|
||||
[$"{progressCls}-text"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorSuccess,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{progressCls}-inline-circle"] = new CSSObject()
|
||||
{
|
||||
LineHeight = 1,
|
||||
[$"{progressCls}-inner"] = new CSSObject()
|
||||
{
|
||||
VerticalAlign = "bottom",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenStepStyle(ProgressToken token)
|
||||
{
|
||||
var progressCls = token.ComponentCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[progressCls] = new CSSObject()
|
||||
{
|
||||
[$"{progressCls}-steps"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
["&-outer"] = new CSSObject()
|
||||
{
|
||||
Display = "flex",
|
||||
FlexDirection = "row",
|
||||
AlignItems = "center",
|
||||
},
|
||||
["&-item"] = new CSSObject()
|
||||
{
|
||||
FlexShrink = 0,
|
||||
MinWidth = token.ProgressStepMinWidth,
|
||||
MarginInlineEnd = token.ProgressStepMarginInlineEnd,
|
||||
BackgroundColor = token.RemainingColor,
|
||||
Transition = @$"all {token.MotionDurationSlow}",
|
||||
["&-active"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.DefaultColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSmallLine(ProgressToken token)
|
||||
{
|
||||
var progressCls = token.ComponentCls;
|
||||
var iconPrefixCls = token.IconCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[progressCls] = new CSSObject()
|
||||
{
|
||||
[$"{progressCls}-small&-line, {progressCls}-small&-line {progressCls}-text {iconPrefixCls}"] = new CSSObject()
|
||||
{
|
||||
FontSize = token.FontSizeSM,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
protected override UseComponentStyleResult UseComponentStyle()
|
||||
{
|
||||
return GenComponentStyleHook(
|
||||
"Progress",
|
||||
(token) =>
|
||||
{
|
||||
var progressStepMarginInlineEnd = token.MarginXXS / 2;
|
||||
var progressToken = MergeToken(
|
||||
token,
|
||||
new ProgressToken()
|
||||
{
|
||||
ProgressStepMarginInlineEnd = progressStepMarginInlineEnd,
|
||||
ProgressStepMinWidth = progressStepMarginInlineEnd,
|
||||
ProgressActiveMotionDuration = "2.4s",
|
||||
});
|
||||
return new CSSInterpolation[]
|
||||
{
|
||||
GenBaseStyle(progressToken),
|
||||
GenCircleStyle(progressToken),
|
||||
GenStepStyle(progressToken),
|
||||
GenSmallLine(progressToken),
|
||||
};
|
||||
},
|
||||
(token) =>
|
||||
{
|
||||
return new ProgressToken()
|
||||
{
|
||||
CircleTextColor = token.ColorText,
|
||||
DefaultColor = token.ColorInfo,
|
||||
RemainingColor = token.ColorFillSecondary,
|
||||
LineBorderRadius = 100,
|
||||
CircleTextFontSize = "1em",
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -21,4 +21,5 @@
|
|||
</CascadingValue>
|
||||
}
|
||||
|
||||
</ul>
|
||||
</ul>
|
||||
@_styleContent
|
||||
|
|
@ -200,9 +200,10 @@ namespace AntDesign
|
|||
protected void SetClass()
|
||||
{
|
||||
var clsPrefix = "ant-rate";
|
||||
|
||||
var hashId = UseStyle(clsPrefix);
|
||||
ClassMapper.Clear()
|
||||
.Add(clsPrefix)
|
||||
.Add(hashId)
|
||||
.If($"{clsPrefix}-disabled", () => Disabled)
|
||||
.If($"{clsPrefix}-rtl", () => RTL);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,174 @@
|
|||
using System;
|
||||
using CssInCSharp;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
using static AntDesign.StyleUtil;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class RateToken
|
||||
{
|
||||
public string StarColor
|
||||
{
|
||||
get => (string)_tokens["starColor"];
|
||||
set => _tokens["starColor"] = value;
|
||||
}
|
||||
|
||||
public double StarSize
|
||||
{
|
||||
get => (double)_tokens["starSize"];
|
||||
set => _tokens["starSize"] = value;
|
||||
}
|
||||
|
||||
public string StarHoverScale
|
||||
{
|
||||
get => (string)_tokens["starHoverScale"];
|
||||
set => _tokens["starHoverScale"] = value;
|
||||
}
|
||||
|
||||
public string StarBg
|
||||
{
|
||||
get => (string)_tokens["starBg"];
|
||||
set => _tokens["starBg"] = value;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public partial class RateToken : TokenWithCommonCls
|
||||
{
|
||||
}
|
||||
|
||||
public partial class Rate
|
||||
{
|
||||
public CSSObject GenRateStarStyle(RateToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-star"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "inline-block",
|
||||
Color = "inherit",
|
||||
Cursor = "pointer",
|
||||
["&:not(:last-child)"] = new CSSObject()
|
||||
{
|
||||
MarginInlineEnd = token.MarginXS,
|
||||
},
|
||||
["> div"] = new CSSObject()
|
||||
{
|
||||
Transition = @$"all {token.MotionDurationMid}, outline 0s",
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
Transform = token.StarHoverScale,
|
||||
},
|
||||
["&:focus"] = new CSSObject()
|
||||
{
|
||||
Outline = 0,
|
||||
},
|
||||
["&:focus-visible"] = new CSSObject()
|
||||
{
|
||||
Outline = @$"{token.LineWidth}px dashed {token.StarColor}",
|
||||
Transform = token.StarHoverScale,
|
||||
},
|
||||
},
|
||||
["&-first, &-second"] = new CSSObject()
|
||||
{
|
||||
Color = token.StarBg,
|
||||
Transition = @$"all {token.MotionDurationMid}",
|
||||
UserSelect = "none",
|
||||
},
|
||||
["&-first"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = 0,
|
||||
InsetInlineStart = 0,
|
||||
Width = "50%",
|
||||
Height = "100%",
|
||||
Overflow = "hidden",
|
||||
Opacity = 0,
|
||||
},
|
||||
[$"&-half {componentCls}-star-first, &-half {componentCls}-star-second"] = new CSSObject()
|
||||
{
|
||||
Opacity = 1,
|
||||
},
|
||||
[$"&-half {componentCls}-star-first, &-full {componentCls}-star-second"] = new CSSObject()
|
||||
{
|
||||
Color = "inherit",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenRateRtlStyle(RateToken token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"&-rtl{token.ComponentCls}"] = new CSSObject()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenRateStyle(RateToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Display = "inline-block",
|
||||
Margin = 0,
|
||||
Padding = 0,
|
||||
Color = token.StarColor,
|
||||
FontSize = token.StarSize,
|
||||
LineHeight = 1,
|
||||
ListStyle = "none",
|
||||
Outline = "none",
|
||||
[$"&-disabled{componentCls} {componentCls}-star"] = new CSSObject()
|
||||
{
|
||||
Cursor = "default",
|
||||
["> div:hover"] = new CSSObject()
|
||||
{
|
||||
Transform = "scale(1)",
|
||||
},
|
||||
},
|
||||
["..."] = GenRateStarStyle(token),
|
||||
["..."] = GenRateRtlStyle(token)
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
protected override UseComponentStyleResult UseComponentStyle()
|
||||
{
|
||||
return GenComponentStyleHook(
|
||||
"Rate",
|
||||
(token) =>
|
||||
{
|
||||
var rateToken = MergeToken(
|
||||
token,
|
||||
new RateToken()
|
||||
{
|
||||
});
|
||||
return new CSSInterpolation[]
|
||||
{
|
||||
GenRateStyle(rateToken),
|
||||
};
|
||||
},
|
||||
(token) =>
|
||||
{
|
||||
return new RateToken()
|
||||
{
|
||||
StarColor = token["yellow6"].ToString(),
|
||||
StarSize = token.ControlHeightLG * 0.5,
|
||||
StarHoverScale = "scale(1.1)",
|
||||
StarBg = token.ColorFillContent,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -33,4 +33,5 @@
|
|||
@Extra
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@_styleContent
|
||||
|
|
@ -104,7 +104,9 @@ namespace AntDesign
|
|||
|
||||
private void SetClass()
|
||||
{
|
||||
var hashId = UseStyle(PrefixCls);
|
||||
ClassMapper.Add(PrefixCls)
|
||||
.Add(hashId)
|
||||
.Get(() => $"{PrefixCls}-{Status}")
|
||||
.If($"{PrefixCls}-rtl", () => RTL);
|
||||
|
||||
|
|
@ -124,4 +126,4 @@ namespace AntDesign
|
|||
LoadImage();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,231 @@
|
|||
using System;
|
||||
using CssInCSharp;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
using static AntDesign.StyleUtil;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class ResultToken
|
||||
{
|
||||
public double TitleFontSize
|
||||
{
|
||||
get => (double)_tokens["titleFontSize"];
|
||||
set => _tokens["titleFontSize"] = value;
|
||||
}
|
||||
|
||||
public double SubtitleFontSize
|
||||
{
|
||||
get => (double)_tokens["subtitleFontSize"];
|
||||
set => _tokens["subtitleFontSize"] = value;
|
||||
}
|
||||
|
||||
public double IconFontSize
|
||||
{
|
||||
get => (double)_tokens["iconFontSize"];
|
||||
set => _tokens["iconFontSize"] = value;
|
||||
}
|
||||
|
||||
public string ExtraMargin
|
||||
{
|
||||
get => (string)_tokens["extraMargin"];
|
||||
set => _tokens["extraMargin"] = value;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public partial class ResultToken : TokenWithCommonCls
|
||||
{
|
||||
public double ImageWidth
|
||||
{
|
||||
get => (double)_tokens["imageWidth"];
|
||||
set => _tokens["imageWidth"] = value;
|
||||
}
|
||||
|
||||
public double ImageHeight
|
||||
{
|
||||
get => (double)_tokens["imageHeight"];
|
||||
set => _tokens["imageHeight"] = value;
|
||||
}
|
||||
|
||||
public string ResultInfoIconColor
|
||||
{
|
||||
get => (string)_tokens["resultInfoIconColor"];
|
||||
set => _tokens["resultInfoIconColor"] = value;
|
||||
}
|
||||
|
||||
public string ResultSuccessIconColor
|
||||
{
|
||||
get => (string)_tokens["resultSuccessIconColor"];
|
||||
set => _tokens["resultSuccessIconColor"] = value;
|
||||
}
|
||||
|
||||
public string ResultWarningIconColor
|
||||
{
|
||||
get => (string)_tokens["resultWarningIconColor"];
|
||||
set => _tokens["resultWarningIconColor"] = value;
|
||||
}
|
||||
|
||||
public string ResultErrorIconColor
|
||||
{
|
||||
get => (string)_tokens["resultErrorIconColor"];
|
||||
set => _tokens["resultErrorIconColor"] = value;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public partial class Result
|
||||
{
|
||||
public CSSObject GenBaseStyle(ResultToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var lineHeightHeading3 = token.LineHeightHeading3;
|
||||
var iconCls = token.IconCls;
|
||||
var padding = token.Padding;
|
||||
var paddingXL = token.PaddingXL;
|
||||
var paddingXS = token.PaddingXS;
|
||||
var paddingLG = token.PaddingLG;
|
||||
var marginXS = token.MarginXS;
|
||||
var lineHeight = token.LineHeight;
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
Padding = @$"{paddingLG * 2}px {paddingXL}px",
|
||||
["&-rtl"] = new CSSObject()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
},
|
||||
[$"{componentCls} {componentCls}-image"] = new CSSObject()
|
||||
{
|
||||
Width = token.ImageWidth,
|
||||
Height = token.ImageHeight,
|
||||
Margin = "auto",
|
||||
},
|
||||
[$"{componentCls} {componentCls}-icon"] = new CSSObject()
|
||||
{
|
||||
MarginBottom = paddingLG,
|
||||
TextAlign = "center",
|
||||
[$"& > {iconCls}"] = new CSSObject()
|
||||
{
|
||||
FontSize = token.IconFontSize,
|
||||
},
|
||||
},
|
||||
[$"{componentCls} {componentCls}-title"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextHeading,
|
||||
FontSize = token.TitleFontSize,
|
||||
LineHeight = lineHeightHeading3,
|
||||
MarginBlock = marginXS,
|
||||
TextAlign = "center",
|
||||
},
|
||||
[$"{componentCls} {componentCls}-subtitle"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextDescription,
|
||||
FontSize = token.SubtitleFontSize,
|
||||
LineHeight = lineHeight,
|
||||
TextAlign = "center",
|
||||
},
|
||||
[$"{componentCls} {componentCls}-content"] = new CSSObject()
|
||||
{
|
||||
MarginTop = paddingLG,
|
||||
Padding = @$"{paddingLG}px {padding * 2.5}px",
|
||||
BackgroundColor = token.ColorFillAlter,
|
||||
},
|
||||
[$"{componentCls} {componentCls}-extra"] = new CSSObject()
|
||||
{
|
||||
Margin = token.ExtraMargin,
|
||||
TextAlign = "center",
|
||||
["& > *"] = new CSSObject()
|
||||
{
|
||||
MarginInlineEnd = paddingXS,
|
||||
["&:last-child"] = new CSSObject()
|
||||
{
|
||||
MarginInlineEnd = 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenStatusIconStyle(ResultToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var iconCls = token.IconCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-success {componentCls}-icon > {iconCls}"] = new CSSObject()
|
||||
{
|
||||
Color = token.ResultSuccessIconColor,
|
||||
},
|
||||
[$"{componentCls}-error {componentCls}-icon > {iconCls}"] = new CSSObject()
|
||||
{
|
||||
Color = token.ResultErrorIconColor,
|
||||
},
|
||||
[$"{componentCls}-info {componentCls}-icon > {iconCls}"] = new CSSObject()
|
||||
{
|
||||
Color = token.ResultInfoIconColor,
|
||||
},
|
||||
[$"{componentCls}-warning {componentCls}-icon > {iconCls}"] = new CSSObject()
|
||||
{
|
||||
Color = token.ResultWarningIconColor,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSInterpolation[] GenResultStyle(ResultToken token)
|
||||
{
|
||||
return new CSSInterpolation[]
|
||||
{
|
||||
GenBaseStyle(token),
|
||||
GenStatusIconStyle(token),
|
||||
};
|
||||
}
|
||||
|
||||
public CSSInterpolation[] GetStyle(ResultToken token)
|
||||
{
|
||||
return GenResultStyle(token);
|
||||
}
|
||||
|
||||
protected override UseComponentStyleResult UseComponentStyle()
|
||||
{
|
||||
return GenComponentStyleHook(
|
||||
"Result",
|
||||
(token) =>
|
||||
{
|
||||
var resultInfoIconColor = token.ColorInfo;
|
||||
var resultErrorIconColor = token.ColorError;
|
||||
var resultSuccessIconColor = token.ColorSuccess;
|
||||
var resultWarningIconColor = token.ColorWarning;
|
||||
var resultToken = MergeToken(
|
||||
token,
|
||||
new ResultToken()
|
||||
{
|
||||
ResultInfoIconColor = resultInfoIconColor,
|
||||
ResultErrorIconColor = resultErrorIconColor,
|
||||
ResultSuccessIconColor = resultSuccessIconColor,
|
||||
ResultWarningIconColor = resultWarningIconColor,
|
||||
ImageWidth = 250,
|
||||
ImageHeight = 295,
|
||||
});
|
||||
return new CSSInterpolation[]
|
||||
{
|
||||
GetStyle(resultToken),
|
||||
};
|
||||
},
|
||||
(token) =>
|
||||
{
|
||||
return new ResultToken()
|
||||
{
|
||||
TitleFontSize = token.FontSizeHeading3,
|
||||
SubtitleFontSize = token.FontSize,
|
||||
IconFontSize = token.FontSizeHeading3 * 3,
|
||||
ExtraMargin = @$"{token.PaddingLG}px 0 0 0",
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -29,4 +29,5 @@
|
|||
}
|
||||
</CascadingValue>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@_styleContent
|
||||
|
|
@ -135,8 +135,9 @@ namespace AntDesign
|
|||
protected override void OnInitialized()
|
||||
{
|
||||
base.OnInitialized();
|
||||
|
||||
var hashId = UseStyle(PrefixCls);
|
||||
ClassMapper.Add(PrefixCls)
|
||||
.Add(hashId)
|
||||
.If($"{PrefixCls}-lg", () => Size == SegmentedSize.Large)
|
||||
.If($"{PrefixCls}-sm", () => Size == SegmentedSize.Small)
|
||||
.If($"{PrefixCls}-disabled", () => Disabled)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,297 @@
|
|||
using System;
|
||||
using CssInCSharp;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
using static AntDesign.StyleUtil;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class SegmentedToken
|
||||
{
|
||||
public string ItemColor
|
||||
{
|
||||
get => (string)_tokens["itemColor"];
|
||||
set => _tokens["itemColor"] = value;
|
||||
}
|
||||
|
||||
public string ItemHoverColor
|
||||
{
|
||||
get => (string)_tokens["itemHoverColor"];
|
||||
set => _tokens["itemHoverColor"] = value;
|
||||
}
|
||||
|
||||
public string ItemHoverBg
|
||||
{
|
||||
get => (string)_tokens["itemHoverBg"];
|
||||
set => _tokens["itemHoverBg"] = value;
|
||||
}
|
||||
|
||||
public string ItemActiveBg
|
||||
{
|
||||
get => (string)_tokens["itemActiveBg"];
|
||||
set => _tokens["itemActiveBg"] = value;
|
||||
}
|
||||
|
||||
public string ItemSelectedBg
|
||||
{
|
||||
get => (string)_tokens["itemSelectedBg"];
|
||||
set => _tokens["itemSelectedBg"] = value;
|
||||
}
|
||||
|
||||
public string ItemSelectedColor
|
||||
{
|
||||
get => (string)_tokens["itemSelectedColor"];
|
||||
set => _tokens["itemSelectedColor"] = value;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public partial class SegmentedToken : TokenWithCommonCls
|
||||
{
|
||||
public double SegmentedPadding
|
||||
{
|
||||
get => (double)_tokens["segmentedPadding"];
|
||||
set => _tokens["segmentedPadding"] = value;
|
||||
}
|
||||
|
||||
public string SegmentedBgColor
|
||||
{
|
||||
get => (string)_tokens["segmentedBgColor"];
|
||||
set => _tokens["segmentedBgColor"] = value;
|
||||
}
|
||||
|
||||
public double SegmentedPaddingHorizontal
|
||||
{
|
||||
get => (double)_tokens["segmentedPaddingHorizontal"];
|
||||
set => _tokens["segmentedPaddingHorizontal"] = value;
|
||||
}
|
||||
|
||||
public double SegmentedPaddingHorizontalSM
|
||||
{
|
||||
get => (double)_tokens["segmentedPaddingHorizontalSM"];
|
||||
set => _tokens["segmentedPaddingHorizontalSM"] = value;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public partial class Segmented<TValue>
|
||||
{
|
||||
public CSSObject GetItemDisabledStyle(string cls, SegmentedToken token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{cls}, {cls}:hover, {cls}:focus"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GetItemSelectedStyle(SegmentedToken token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ItemSelectedBg,
|
||||
BoxShadow = token.BoxShadowTertiary,
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSegmentedStyle(SegmentedToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Display = "inline-block",
|
||||
Padding = token.SegmentedPadding,
|
||||
Color = token.ItemColor,
|
||||
BackgroundColor = token.SegmentedBgColor,
|
||||
BorderRadius = token.BorderRadius,
|
||||
Transition = @$"all {token.MotionDurationMid} {token.MotionEaseInOut}",
|
||||
[$"{componentCls}-group"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "flex",
|
||||
AlignItems = "stretch",
|
||||
JustifyItems = "flex-start",
|
||||
Width = "100%",
|
||||
},
|
||||
[$"&{componentCls}-rtl"] = new CSSObject()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
[$"&{componentCls}-block"] = new CSSObject()
|
||||
{
|
||||
Display = "flex",
|
||||
},
|
||||
[$"&{componentCls}-block {componentCls}-item"] = new CSSObject()
|
||||
{
|
||||
Flex = 1,
|
||||
MinWidth = 0,
|
||||
},
|
||||
[$"{componentCls}-item"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
TextAlign = "center",
|
||||
Cursor = "pointer",
|
||||
Transition = @$"color {token.MotionDurationMid} {token.MotionEaseInOut}",
|
||||
BorderRadius = token.BorderRadiusSM,
|
||||
Transform = "translateZ(0)",
|
||||
["&-selected"] = new CSSObject()
|
||||
{
|
||||
["..."] = GetItemSelectedStyle(token),
|
||||
Color = token.ItemSelectedColor,
|
||||
},
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
Content = "\"\"",
|
||||
Position = "absolute",
|
||||
Width = "100%",
|
||||
Height = "100%",
|
||||
Top = 0,
|
||||
InsetInlineStart = 0,
|
||||
BorderRadius = "inherit",
|
||||
Transition = @$"background-color {token.MotionDurationMid}",
|
||||
PointerEvents = "none",
|
||||
},
|
||||
[$"&:hover:not({componentCls}-item-selected):not({componentCls}-item-disabled)"] = new CSSObject()
|
||||
{
|
||||
Color = token.ItemHoverColor,
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ItemHoverBg,
|
||||
},
|
||||
},
|
||||
[$"&:active:not({componentCls}-item-selected):not({componentCls}-item-disabled)"] = new CSSObject()
|
||||
{
|
||||
Color = token.ItemHoverColor,
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ItemActiveBg,
|
||||
},
|
||||
},
|
||||
["&-label"] = new CSSObject()
|
||||
{
|
||||
MinHeight = token.ControlHeight - token.SegmentedPadding * 2,
|
||||
LineHeight = @$"{token.ControlHeight - token.SegmentedPadding * 2}px",
|
||||
Padding = @$"0 {token.SegmentedPaddingHorizontal}px",
|
||||
["..."] = SegmentedTextEllipsisCss,
|
||||
},
|
||||
["&-icon + *"] = new CSSObject()
|
||||
{
|
||||
MarginInlineStart = token.MarginSM / 2,
|
||||
},
|
||||
["&-input"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetBlockStart = 0,
|
||||
InsetInlineStart = 0,
|
||||
Width = 0,
|
||||
Height = 0,
|
||||
Opacity = 0,
|
||||
PointerEvents = "none",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-thumb"] = new CSSObject()
|
||||
{
|
||||
["..."] = GetItemSelectedStyle(token),
|
||||
Position = "absolute",
|
||||
InsetBlockStart = 0,
|
||||
InsetInlineStart = 0,
|
||||
Width = 0,
|
||||
Height = "100%",
|
||||
Padding = @$"{token.PaddingXXS}px 0",
|
||||
BorderRadius = token.BorderRadiusSM,
|
||||
[$"& ~ {componentCls}-item:not({componentCls}-item-selected):not({componentCls}-item-disabled)::after"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-lg"] = new CSSObject()
|
||||
{
|
||||
BorderRadius = token.BorderRadiusLG,
|
||||
[$"{componentCls}-item-label"] = new CSSObject()
|
||||
{
|
||||
MinHeight = token.ControlHeightLG - token.SegmentedPadding * 2,
|
||||
LineHeight = @$"{token.ControlHeightLG - token.SegmentedPadding * 2}px",
|
||||
Padding = @$"0 {token.SegmentedPaddingHorizontal}px",
|
||||
FontSize = token.FontSizeLG,
|
||||
},
|
||||
[$"{componentCls}-item, {componentCls}-thumb"] = new CSSObject()
|
||||
{
|
||||
BorderRadius = token.BorderRadius,
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-sm"] = new CSSObject()
|
||||
{
|
||||
BorderRadius = token.BorderRadiusSM,
|
||||
[$"{componentCls}-item-label"] = new CSSObject()
|
||||
{
|
||||
MinHeight = token.ControlHeightSM - token.SegmentedPadding * 2,
|
||||
LineHeight = @$"{token.ControlHeightSM - token.SegmentedPadding * 2}px",
|
||||
Padding = @$"0 {token.SegmentedPaddingHorizontalSM}px",
|
||||
},
|
||||
[$"{componentCls}-item, {componentCls}-thumb"] = new CSSObject()
|
||||
{
|
||||
BorderRadius = token.BorderRadiusXS,
|
||||
},
|
||||
},
|
||||
["..."] = GetItemDisabledStyle($"&-disabled {componentCls}-item", token),
|
||||
["..."] = GetItemDisabledStyle($"{componentCls}-item-disabled", token),
|
||||
[$"{componentCls}-thumb-motion-appear-active"] = new CSSObject()
|
||||
{
|
||||
Transition = @$"transform {token.MotionDurationSlow} {token.MotionEaseInOut}, width {token.MotionDurationSlow} {token.MotionEaseInOut}",
|
||||
WillChange = "transform, width",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
protected override UseComponentStyleResult UseComponentStyle()
|
||||
{
|
||||
return GenComponentStyleHook(
|
||||
"Segmented",
|
||||
(token) =>
|
||||
{
|
||||
var lineWidth = token.LineWidth;
|
||||
var lineWidthBold = token.LineWidthBold;
|
||||
var colorBgLayout = token.ColorBgLayout;
|
||||
var segmentedToken = MergeToken(
|
||||
token,
|
||||
new SegmentedToken()
|
||||
{
|
||||
SegmentedPadding = lineWidthBold,
|
||||
SegmentedBgColor = colorBgLayout,
|
||||
SegmentedPaddingHorizontal = token.ControlPaddingHorizontal - lineWidth,
|
||||
SegmentedPaddingHorizontalSM = token.ControlPaddingHorizontalSM - lineWidth,
|
||||
});
|
||||
return new CSSInterpolation[]
|
||||
{
|
||||
GenSegmentedStyle(segmentedToken),
|
||||
};
|
||||
},
|
||||
(token) =>
|
||||
{
|
||||
var colorTextLabel = token.ColorTextLabel;
|
||||
var colorText = token.ColorText;
|
||||
var colorFillSecondary = token.ColorFillSecondary;
|
||||
var colorBgElevated = token.ColorBgElevated;
|
||||
var colorFill = token.ColorFill;
|
||||
return new SegmentedToken()
|
||||
{
|
||||
ItemColor = colorTextLabel,
|
||||
ItemHoverColor = colorText,
|
||||
ItemHoverBg = colorFillSecondary,
|
||||
ItemSelectedBg = colorBgElevated,
|
||||
ItemActiveBg = colorFill,
|
||||
ItemSelectedColor = colorText,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -32,4 +32,5 @@
|
|||
@ChildContent
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@_styleContent
|
||||
|
|
@ -59,11 +59,14 @@ namespace AntDesign
|
|||
|
||||
private void SetClassMap()
|
||||
{
|
||||
var prefixCls = "ant-skeleton";
|
||||
var hashId = UseStyle(prefixCls);
|
||||
ClassMapper
|
||||
.Add("ant-skeleton")
|
||||
.If("ant-skeleton-with-avatar", () => this.Avatar)
|
||||
.If("ant-skeleton-active", () => this.Active)
|
||||
.If("ant-skeleton-rtl", () => RTL);
|
||||
.Add(prefixCls)
|
||||
.Add(hashId)
|
||||
.If($"{prefixCls}-with-avatar", () => this.Avatar)
|
||||
.If($"{prefixCls}-active", () => this.Active)
|
||||
.If($"{prefixCls}-rtl", () => RTL);
|
||||
}
|
||||
|
||||
protected override void OnInitialized()
|
||||
|
|
|
|||
|
|
@ -0,0 +1,548 @@
|
|||
using System;
|
||||
using CssInCSharp;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
using static AntDesign.StyleUtil;
|
||||
using Keyframes = CssInCSharp.Keyframe;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class SkeletonToken
|
||||
{
|
||||
public string Color
|
||||
{
|
||||
get => (string)_tokens["color"];
|
||||
set => _tokens["color"] = value;
|
||||
}
|
||||
|
||||
public string ColorGradientEnd
|
||||
{
|
||||
get => (string)_tokens["colorGradientEnd"];
|
||||
set => _tokens["colorGradientEnd"] = value;
|
||||
}
|
||||
|
||||
public string GradientFromColor
|
||||
{
|
||||
get => (string)_tokens["gradientFromColor"];
|
||||
set => _tokens["gradientFromColor"] = value;
|
||||
}
|
||||
|
||||
public string GradientToColor
|
||||
{
|
||||
get => (string)_tokens["gradientToColor"];
|
||||
set => _tokens["gradientToColor"] = value;
|
||||
}
|
||||
|
||||
public double TitleHeight
|
||||
{
|
||||
get => (double)_tokens["titleHeight"];
|
||||
set => _tokens["titleHeight"] = value;
|
||||
}
|
||||
|
||||
public double BlockRadius
|
||||
{
|
||||
get => (double)_tokens["blockRadius"];
|
||||
set => _tokens["blockRadius"] = value;
|
||||
}
|
||||
|
||||
public double ParagraphMarginTop
|
||||
{
|
||||
get => (double)_tokens["paragraphMarginTop"];
|
||||
set => _tokens["paragraphMarginTop"] = value;
|
||||
}
|
||||
|
||||
public double ParagraphLiHeight
|
||||
{
|
||||
get => (double)_tokens["paragraphLiHeight"];
|
||||
set => _tokens["paragraphLiHeight"] = value;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public partial class Skeleton
|
||||
{
|
||||
private Keyframes _skeletonClsLoading = new Keyframes($"ant-skeleton-loading",
|
||||
new CSSObject()
|
||||
{
|
||||
["0%"] = new CSSObject()
|
||||
{
|
||||
BackgroundPosition = "100% 50%",
|
||||
},
|
||||
["100%"] = new CSSObject()
|
||||
{
|
||||
BackgroundPosition = "0 50%",
|
||||
},
|
||||
});
|
||||
|
||||
public CSSObject GenSkeletonElementCommonSize(double size)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
Height = size,
|
||||
LineHeight = @$"{size}px",
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSkeletonElementAvatarSize(double size)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
Width = size,
|
||||
["..."] = GenSkeletonElementCommonSize(size)
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSkeletonColor(SkeletonToken token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
Background = token.SkeletonLoadingBackground,
|
||||
BackgroundSize = "400% 100%",
|
||||
AnimationName = _skeletonClsLoading,
|
||||
AnimationDuration = token.SkeletonLoadingMotionDuration,
|
||||
AnimationTimingFunction = "ease",
|
||||
AnimationIterationCount = "infinite",
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSkeletonElementInputSize(double size)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
Width = size * 5,
|
||||
MinWidth = size * 5,
|
||||
["..."] = GenSkeletonElementCommonSize(size)
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSkeletonElementAvatar(SkeletonToken token)
|
||||
{
|
||||
var skeletonAvatarCls = token.SkeletonAvatarCls;
|
||||
var gradientFromColor = token.GradientFromColor;
|
||||
var controlHeight = token.ControlHeight;
|
||||
var controlHeightLG = token.ControlHeightLG;
|
||||
var controlHeightSM = token.ControlHeightSM;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{skeletonAvatarCls}"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
VerticalAlign = "top",
|
||||
Background = gradientFromColor,
|
||||
["..."] = GenSkeletonElementAvatarSize(controlHeight)
|
||||
},
|
||||
[$"{skeletonAvatarCls}{skeletonAvatarCls}-circle"] = new CSSObject()
|
||||
{
|
||||
BorderRadius = "50%",
|
||||
},
|
||||
[$"{skeletonAvatarCls}{skeletonAvatarCls}-lg"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenSkeletonElementAvatarSize(controlHeightLG)
|
||||
},
|
||||
[$"{skeletonAvatarCls}{skeletonAvatarCls}-sm"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenSkeletonElementAvatarSize(controlHeightSM)
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSkeletonElementInput(SkeletonToken token)
|
||||
{
|
||||
var controlHeight = token.ControlHeight;
|
||||
var borderRadiusSM = token.BorderRadiusSM;
|
||||
var skeletonInputCls = token.SkeletonInputCls;
|
||||
var controlHeightLG = token.ControlHeightLG;
|
||||
var controlHeightSM = token.ControlHeightSM;
|
||||
var gradientFromColor = token.GradientFromColor;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{skeletonInputCls}"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
VerticalAlign = "top",
|
||||
Background = gradientFromColor,
|
||||
BorderRadius = borderRadiusSM,
|
||||
["..."] = GenSkeletonElementInputSize(controlHeight)
|
||||
},
|
||||
[$"{skeletonInputCls}-lg"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenSkeletonElementInputSize(controlHeightLG)
|
||||
},
|
||||
[$"{skeletonInputCls}-sm"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenSkeletonElementInputSize(controlHeightSM)
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSkeletonElementImageSize(double size)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
Width = size,
|
||||
["..."] = GenSkeletonElementCommonSize(size)
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSkeletonElementImage(SkeletonToken token)
|
||||
{
|
||||
var skeletonImageCls = token.SkeletonImageCls;
|
||||
var imageSizeBase = token.ImageSizeBase;
|
||||
var gradientFromColor = token.GradientFromColor;
|
||||
var borderRadiusSM = token.BorderRadiusSM;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{skeletonImageCls}"] = new CSSObject()
|
||||
{
|
||||
Display = "flex",
|
||||
AlignItems = "center",
|
||||
JustifyContent = "center",
|
||||
VerticalAlign = "top",
|
||||
Background = gradientFromColor,
|
||||
BorderRadius = borderRadiusSM,
|
||||
["..."] = GenSkeletonElementImageSize(imageSizeBase * 2),
|
||||
[$"{skeletonImageCls}-path"] = new CSSObject()
|
||||
{
|
||||
["fill"] = "#bfbfbf",
|
||||
},
|
||||
[$"{skeletonImageCls}-svg"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenSkeletonElementImageSize(imageSizeBase),
|
||||
MaxWidth = imageSizeBase * 4,
|
||||
MaxHeight = imageSizeBase * 4,
|
||||
},
|
||||
[$"{skeletonImageCls}-svg{skeletonImageCls}-svg-circle"] = new CSSObject()
|
||||
{
|
||||
BorderRadius = "50%",
|
||||
},
|
||||
},
|
||||
[$"{skeletonImageCls}{skeletonImageCls}-circle"] = new CSSObject()
|
||||
{
|
||||
BorderRadius = "50%",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSkeletonElementButtonShape(SkeletonToken token, double size, string buttonCls)
|
||||
{
|
||||
var skeletonButtonCls = token.SkeletonButtonCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{buttonCls}{skeletonButtonCls}-circle"] = new CSSObject()
|
||||
{
|
||||
Width = size,
|
||||
MinWidth = size,
|
||||
BorderRadius = "50%",
|
||||
},
|
||||
[$"{buttonCls}{skeletonButtonCls}-round"] = new CSSObject()
|
||||
{
|
||||
BorderRadius = size,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSkeletonElementButtonSize(double size)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
Width = size * 2,
|
||||
MinWidth = size * 2,
|
||||
["..."] = GenSkeletonElementCommonSize(size)
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSkeletonElementButton(SkeletonToken token)
|
||||
{
|
||||
var borderRadiusSM = token.BorderRadiusSM;
|
||||
var skeletonButtonCls = token.SkeletonButtonCls;
|
||||
var controlHeight = token.ControlHeight;
|
||||
var controlHeightLG = token.ControlHeightLG;
|
||||
var controlHeightSM = token.ControlHeightSM;
|
||||
var gradientFromColor = token.GradientFromColor;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{skeletonButtonCls}"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
VerticalAlign = "top",
|
||||
Background = gradientFromColor,
|
||||
BorderRadius = borderRadiusSM,
|
||||
Width = controlHeight * 2,
|
||||
MinWidth = controlHeight * 2,
|
||||
["..."] = GenSkeletonElementButtonSize(controlHeight)
|
||||
},
|
||||
["..."] = GenSkeletonElementButtonShape(token, controlHeight, skeletonButtonCls),
|
||||
[$"{skeletonButtonCls}-lg"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenSkeletonElementButtonSize(controlHeightLG)
|
||||
},
|
||||
["..."] = GenSkeletonElementButtonShape(token, controlHeightLG, $"{skeletonButtonCls}-lg"),
|
||||
[$"{skeletonButtonCls}-sm"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenSkeletonElementButtonSize(controlHeightSM)
|
||||
},
|
||||
["..."] = GenSkeletonElementButtonShape(token, controlHeightSM, $"{skeletonButtonCls}-sm")
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenBaseStyle(SkeletonToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var skeletonAvatarCls = token.SkeletonAvatarCls;
|
||||
var skeletonTitleCls = token.SkeletonTitleCls;
|
||||
var skeletonParagraphCls = token.SkeletonParagraphCls;
|
||||
var skeletonButtonCls = token.SkeletonButtonCls;
|
||||
var skeletonInputCls = token.SkeletonInputCls;
|
||||
var skeletonImageCls = token.SkeletonImageCls;
|
||||
var controlHeight = token.ControlHeight;
|
||||
var controlHeightLG = token.ControlHeightLG;
|
||||
var controlHeightSM = token.ControlHeightSM;
|
||||
var gradientFromColor = token.GradientFromColor;
|
||||
var padding = token.Padding;
|
||||
var marginSM = token.MarginSM;
|
||||
var borderRadius = token.BorderRadius;
|
||||
var titleHeight = token.TitleHeight;
|
||||
var blockRadius = token.BlockRadius;
|
||||
var paragraphLiHeight = token.ParagraphLiHeight;
|
||||
var controlHeightXS = token.ControlHeightXS;
|
||||
var paragraphMarginTop = token.ParagraphMarginTop;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}"] = new CSSObject()
|
||||
{
|
||||
Display = "table",
|
||||
Width = "100%",
|
||||
[$"{componentCls}-header"] = new CSSObject()
|
||||
{
|
||||
Display = "table-cell",
|
||||
PaddingInlineEnd = padding,
|
||||
VerticalAlign = "top",
|
||||
[$"{skeletonAvatarCls}"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
VerticalAlign = "top",
|
||||
Background = gradientFromColor,
|
||||
["..."] = GenSkeletonElementAvatarSize(controlHeight)
|
||||
},
|
||||
[$"{skeletonAvatarCls}-circle"] = new CSSObject()
|
||||
{
|
||||
BorderRadius = "50%",
|
||||
},
|
||||
[$"{skeletonAvatarCls}-lg"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenSkeletonElementAvatarSize(controlHeightLG)
|
||||
},
|
||||
[$"{skeletonAvatarCls}-sm"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenSkeletonElementAvatarSize(controlHeightSM)
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-content"] = new CSSObject()
|
||||
{
|
||||
Display = "table-cell",
|
||||
Width = "100%",
|
||||
VerticalAlign = "top",
|
||||
[$"{skeletonTitleCls}"] = new CSSObject()
|
||||
{
|
||||
Width = "100%",
|
||||
Height = titleHeight,
|
||||
Background = gradientFromColor,
|
||||
BorderRadius = blockRadius,
|
||||
[$"+ {skeletonParagraphCls}"] = new CSSObject()
|
||||
{
|
||||
MarginBlockStart = controlHeightSM,
|
||||
},
|
||||
},
|
||||
[$"{skeletonParagraphCls}"] = new CSSObject()
|
||||
{
|
||||
Padding = 0,
|
||||
["> li"] = new CSSObject()
|
||||
{
|
||||
Width = "100%",
|
||||
Height = paragraphLiHeight,
|
||||
ListStyle = "none",
|
||||
Background = gradientFromColor,
|
||||
BorderRadius = blockRadius,
|
||||
["+ li"] = new CSSObject()
|
||||
{
|
||||
MarginBlockStart = controlHeightXS,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{skeletonParagraphCls}> li:last-child:not(:first-child):not(:nth-child(2))"] = new CSSObject()
|
||||
{
|
||||
Width = "61%",
|
||||
},
|
||||
},
|
||||
[$"&-round {componentCls}-content"] = new CSSObject()
|
||||
{
|
||||
[$"{skeletonTitleCls}, {skeletonParagraphCls} > li"] = new CSSObject()
|
||||
{
|
||||
BorderRadius = borderRadius,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-with-avatar {componentCls}-content"] = new CSSObject()
|
||||
{
|
||||
[$"{skeletonTitleCls}"] = new CSSObject()
|
||||
{
|
||||
MarginBlockStart = marginSM,
|
||||
[$"+ {skeletonParagraphCls}"] = new CSSObject()
|
||||
{
|
||||
MarginBlockStart = paragraphMarginTop,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}{componentCls}-element"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Width = "auto",
|
||||
["..."] = GenSkeletonElementButton(token),
|
||||
["..."] = GenSkeletonElementAvatar(token),
|
||||
["..."] = GenSkeletonElementInput(token),
|
||||
["..."] = GenSkeletonElementImage(token)
|
||||
},
|
||||
[$"{componentCls}{componentCls}-block"] = new CSSObject()
|
||||
{
|
||||
Width = "100%",
|
||||
[$"{skeletonButtonCls}"] = new CSSObject()
|
||||
{
|
||||
Width = "100%",
|
||||
},
|
||||
[$"{skeletonInputCls}"] = new CSSObject()
|
||||
{
|
||||
Width = "100%",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}{componentCls}-active"] = new CSSObject()
|
||||
{
|
||||
[$"{skeletonTitleCls},{skeletonParagraphCls}>li,{skeletonAvatarCls},{skeletonButtonCls},{skeletonInputCls},{skeletonImageCls}"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenSkeletonColor(token)
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
protected override UseComponentStyleResult UseComponentStyle()
|
||||
{
|
||||
return GenComponentStyleHook(
|
||||
"Skeleton",
|
||||
(token) =>
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var skeletonToken = MergeToken(
|
||||
token,
|
||||
new SkeletonToken()
|
||||
{
|
||||
SkeletonAvatarCls = @$"{componentCls}-avatar",
|
||||
SkeletonTitleCls = @$"{componentCls}-title",
|
||||
SkeletonParagraphCls = @$"{componentCls}-paragraph",
|
||||
SkeletonButtonCls = @$"{componentCls}-button",
|
||||
SkeletonInputCls = @$"{componentCls}-input",
|
||||
SkeletonImageCls = @$"{componentCls}-image",
|
||||
ImageSizeBase = token.ControlHeight * 1.5,
|
||||
BorderRadius = 100,
|
||||
SkeletonLoadingBackground = @$"linear-gradient(90deg, {token.GradientFromColor} 25%, {token.GradientToColor} 37%, {token.GradientFromColor} 63%)",
|
||||
SkeletonLoadingMotionDuration = "1.4s",
|
||||
});
|
||||
return new CSSInterpolation[]
|
||||
{
|
||||
GenBaseStyle(skeletonToken),
|
||||
};
|
||||
},
|
||||
(token) =>
|
||||
{
|
||||
var colorFillContent = token.ColorFillContent;
|
||||
var colorFill = token.ColorFill;
|
||||
var gradientFromColor = colorFillContent;
|
||||
var gradientToColor = colorFill;
|
||||
return new SkeletonToken()
|
||||
{
|
||||
Color = gradientFromColor,
|
||||
ColorGradientEnd = gradientToColor,
|
||||
GradientFromColor = gradientFromColor,
|
||||
GradientToColor = gradientToColor,
|
||||
TitleHeight = token.ControlHeight / 2,
|
||||
BlockRadius = token.BorderRadiusSM,
|
||||
ParagraphMarginTop = token.MarginLG + token.MarginXXS,
|
||||
ParagraphLiHeight = token.ControlHeight / 2,
|
||||
};
|
||||
},
|
||||
new GenOptions()
|
||||
{
|
||||
DeprecatedTokens = new ()
|
||||
{
|
||||
("color", "gradientFromColor"),
|
||||
("colorGradientEnd", "gradientToColor"),
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public partial class SkeletonToken : TokenWithCommonCls
|
||||
{
|
||||
public string SkeletonAvatarCls
|
||||
{
|
||||
get => (string)_tokens["skeletonAvatarCls"];
|
||||
set => _tokens["skeletonAvatarCls"] = value;
|
||||
}
|
||||
|
||||
public string SkeletonTitleCls
|
||||
{
|
||||
get => (string)_tokens["skeletonTitleCls"];
|
||||
set => _tokens["skeletonTitleCls"] = value;
|
||||
}
|
||||
|
||||
public string SkeletonParagraphCls
|
||||
{
|
||||
get => (string)_tokens["skeletonParagraphCls"];
|
||||
set => _tokens["skeletonParagraphCls"] = value;
|
||||
}
|
||||
|
||||
public string SkeletonButtonCls
|
||||
{
|
||||
get => (string)_tokens["skeletonButtonCls"];
|
||||
set => _tokens["skeletonButtonCls"] = value;
|
||||
}
|
||||
|
||||
public string SkeletonInputCls
|
||||
{
|
||||
get => (string)_tokens["skeletonInputCls"];
|
||||
set => _tokens["skeletonInputCls"] = value;
|
||||
}
|
||||
|
||||
public string SkeletonImageCls
|
||||
{
|
||||
get => (string)_tokens["skeletonImageCls"];
|
||||
set => _tokens["skeletonImageCls"] = value;
|
||||
}
|
||||
|
||||
public double ImageSizeBase
|
||||
{
|
||||
get => (double)_tokens["imageSizeBase"];
|
||||
set => _tokens["imageSizeBase"] = value;
|
||||
}
|
||||
|
||||
public string SkeletonLoadingBackground
|
||||
{
|
||||
get => (string)_tokens["skeletonLoadingBackground"];
|
||||
set => _tokens["skeletonLoadingBackground"] = value;
|
||||
}
|
||||
|
||||
public string SkeletonLoadingMotionDuration
|
||||
{
|
||||
get => (string)_tokens["skeletonLoadingMotionDuration"];
|
||||
set => _tokens["skeletonLoadingMotionDuration"] = value;
|
||||
}
|
||||
|
||||
public double BorderRadius
|
||||
{
|
||||
get => (double)_tokens["borderRadius"];
|
||||
set => _tokens["borderRadius"] = value;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,422 @@
|
|||
using System;
|
||||
using CssInCSharp;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
using static AntDesign.StyleUtil;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class SliderToken
|
||||
{
|
||||
public double ControlSize { get; set; }
|
||||
|
||||
public double RailSize { get; set; }
|
||||
|
||||
public double HandleSize { get; set; }
|
||||
|
||||
public double HandleSizeHover { get; set; }
|
||||
|
||||
public double HandleLineWidth { get; set; }
|
||||
|
||||
public double HandleLineWidthHover { get; set; }
|
||||
|
||||
public double DotSize { get; set; }
|
||||
|
||||
public string RailBg { get; set; }
|
||||
|
||||
public string RailHoverBg { get; set; }
|
||||
|
||||
public string TrackBg { get; set; }
|
||||
|
||||
public string TrackHoverBg { get; set; }
|
||||
|
||||
public string HandleColor { get; set; }
|
||||
|
||||
public string HandleActiveColor { get; set; }
|
||||
|
||||
public string DotBorderColor { get; set; }
|
||||
|
||||
public string DotActiveBorderColor { get; set; }
|
||||
|
||||
public string TrackBgDisabled { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class SliderToken : TokenWithCommonCls
|
||||
{
|
||||
public double MarginFull { get; set; }
|
||||
|
||||
public double MarginPart { get; set; }
|
||||
|
||||
public double MarginPartWithMark { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Slider
|
||||
{
|
||||
public CSSObject GenBaseStyle(SliderToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var antCls = token.AntCls;
|
||||
var controlSize = token.ControlSize;
|
||||
var dotSize = token.DotSize;
|
||||
var marginFull = token.MarginFull;
|
||||
var marginPart = token.MarginPart;
|
||||
var colorFillContentHover = token.ColorFillContentHover;
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Position = "relative",
|
||||
Height = controlSize,
|
||||
Margin = @$"{marginPart}px {marginFull}px",
|
||||
Padding = 0,
|
||||
Cursor = "pointer",
|
||||
TouchAction = "none",
|
||||
["&-vertical"] = new CSSObject()
|
||||
{
|
||||
Margin = @$"{marginFull}px {marginPart}px",
|
||||
},
|
||||
[$"{componentCls}-rail"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
BackgroundColor = token.RailBg,
|
||||
BorderRadius = token.BorderRadiusXS,
|
||||
Transition = @$"background-color {token.MotionDurationMid}",
|
||||
},
|
||||
[$"{componentCls}-track,{componentCls}-tracks"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Transition = @$"background-color {token.MotionDurationMid}",
|
||||
},
|
||||
[$"{componentCls}-track"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.TrackBg,
|
||||
BorderRadius = token.BorderRadiusXS,
|
||||
},
|
||||
[$"{componentCls}-track-draggable"] = new CSSObject()
|
||||
{
|
||||
BoxSizing = "content-box",
|
||||
BackgroundClip = "content-box",
|
||||
Border = "solid rgba(0,0,0,0)",
|
||||
},
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-rail"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.RailHoverBg,
|
||||
},
|
||||
[$"{componentCls}-track"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.TrackHoverBg,
|
||||
},
|
||||
[$"{componentCls}-dot"] = new CSSObject()
|
||||
{
|
||||
BorderColor = colorFillContentHover,
|
||||
},
|
||||
[$"{componentCls}-handle::after"] = new CSSObject()
|
||||
{
|
||||
BoxShadow = @$"0 0 0 {token.HandleLineWidth}px {token.ColorPrimaryBorderHover}",
|
||||
},
|
||||
[$"{componentCls}-dot-active"] = new CSSObject()
|
||||
{
|
||||
BorderColor = token.DotActiveBorderColor,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-handle"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Width = token.HandleSize,
|
||||
Height = token.HandleSize,
|
||||
Outline = "none",
|
||||
["&::before"] = new CSSObject()
|
||||
{
|
||||
Content = "\"\"",
|
||||
Position = "absolute",
|
||||
InsetInlineStart = -token.HandleLineWidth,
|
||||
InsetBlockStart = -token.HandleLineWidth,
|
||||
Width = token.HandleSize + token.HandleLineWidth * 2,
|
||||
Height = token.HandleSize + token.HandleLineWidth * 2,
|
||||
BackgroundColor = "transparent",
|
||||
},
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
Content = "\"\"",
|
||||
Position = "absolute",
|
||||
InsetBlockStart = 0,
|
||||
InsetInlineStart = 0,
|
||||
Width = token.HandleSize,
|
||||
Height = token.HandleSize,
|
||||
BackgroundColor = token.ColorBgElevated,
|
||||
BoxShadow = @$"0 0 0 {token.HandleLineWidth}px {token.HandleColor}",
|
||||
BorderRadius = "50%",
|
||||
Cursor = "pointer",
|
||||
Transition = @$"
|
||||
inset-inline-start {token.MotionDurationMid},
|
||||
inset-block-start {token.MotionDurationMid},
|
||||
width {token.MotionDurationMid},
|
||||
height {token.MotionDurationMid},
|
||||
box-shadow {token.MotionDurationMid}
|
||||
",
|
||||
},
|
||||
["&:hover, &:active, &:focus"] = new CSSObject()
|
||||
{
|
||||
["&::before"] = new CSSObject()
|
||||
{
|
||||
InsetInlineStart = -(
|
||||
(token.HandleSizeHover - token.HandleSize) / 2 +
|
||||
token.HandleLineWidthHover
|
||||
),
|
||||
InsetBlockStart = -(
|
||||
(token.HandleSizeHover - token.HandleSize) / 2 +
|
||||
token.HandleLineWidthHover
|
||||
),
|
||||
Width = token.HandleSizeHover + token.HandleLineWidthHover * 2,
|
||||
Height = token.HandleSizeHover + token.HandleLineWidthHover * 2,
|
||||
},
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
BoxShadow = @$"0 0 0 {token.HandleLineWidthHover}px {token.HandleActiveColor}",
|
||||
Width = token.HandleSizeHover,
|
||||
Height = token.HandleSizeHover,
|
||||
InsetInlineStart = (token.HandleSize - token.HandleSizeHover) / 2,
|
||||
InsetBlockStart = (token.HandleSize - token.HandleSizeHover) / 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-mark"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
FontSize = token.FontSize,
|
||||
},
|
||||
[$"{componentCls}-mark-text"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Display = "inline-block",
|
||||
Color = token.ColorTextDescription,
|
||||
TextAlign = "center",
|
||||
WordBreak = "keep-all",
|
||||
Cursor = "pointer",
|
||||
UserSelect = "none",
|
||||
["&-active"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorText,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-step"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Background = "transparent",
|
||||
PointerEvents = "none",
|
||||
},
|
||||
[$"{componentCls}-dot"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Width = dotSize,
|
||||
Height = dotSize,
|
||||
BackgroundColor = token.ColorBgElevated,
|
||||
Border = @$"{token.HandleLineWidth}px solid {token.DotBorderColor}",
|
||||
BorderRadius = "50%",
|
||||
Cursor = "pointer",
|
||||
Transition = @$"border-color {token.MotionDurationSlow}",
|
||||
PointerEvents = "auto",
|
||||
["&-active"] = new CSSObject()
|
||||
{
|
||||
BorderColor = token.DotActiveBorderColor,
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-disabled"] = new CSSObject()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
[$"{componentCls}-rail"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = @$"{token.RailBg} !important",
|
||||
},
|
||||
[$"{componentCls}-track"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = @$"{token.TrackBgDisabled} !important",
|
||||
},
|
||||
[$"{componentCls}-dot"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorBgElevated,
|
||||
BorderColor = token.TrackBgDisabled,
|
||||
BoxShadow = "none",
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
[$"{componentCls}-handle::after"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorBgElevated,
|
||||
Cursor = "not-allowed",
|
||||
Width = token.HandleSize,
|
||||
Height = token.HandleSize,
|
||||
BoxShadow = @$"0 0 0 {token.HandleLineWidth}px {new TinyColor(token.ColorTextDisabled)
|
||||
.onBackground(token.ColorBgContainer)
|
||||
.toHexShortString()}",
|
||||
InsetInlineStart = 0,
|
||||
InsetBlockStart = 0,
|
||||
},
|
||||
[$"{componentCls}-mark-text,{componentCls}-dot"] = new CSSObject()
|
||||
{
|
||||
Cursor = @$"not-allowed !important",
|
||||
},
|
||||
},
|
||||
[$"&-tooltip {antCls}-tooltip-inner"] = new CSSObject()
|
||||
{
|
||||
MinWidth = "unset",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenDirectionStyle(SliderToken token, bool horizontal)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var railSize = token.RailSize;
|
||||
var handleSize = token.HandleSize;
|
||||
var dotSize = token.DotSize;
|
||||
var railPadding = horizontal ? "paddingBlock" : "paddingInline";
|
||||
var full = horizontal ? "width" : "height";
|
||||
var part = horizontal ? "height" : "width";
|
||||
var handlePos = horizontal ? "insetBlockStart" : "insetInlineStart";
|
||||
var markInset = horizontal ? "top" : "insetInlineStart";
|
||||
var handlePosSize = (railSize * 3 - handleSize) / 2;
|
||||
var draggableBorderSize = (handleSize - railSize) / 2;
|
||||
var draggableBorder = horizontal
|
||||
? new Unknown2_1()
|
||||
{
|
||||
BorderWidth = @$"{draggableBorderSize}px 0",
|
||||
Transform = @$"translateY(-{draggableBorderSize}px)",
|
||||
}
|
||||
: new Unknown2_2()
|
||||
{
|
||||
BorderWidth = @$"0 {draggableBorderSize}px",
|
||||
Transform = @$"translateX(-{draggableBorderSize}px)",
|
||||
};
|
||||
return new CSSObject()
|
||||
{
|
||||
[railPadding] = railSize,
|
||||
[part] = railSize * 3,
|
||||
[$"{componentCls}-rail"] = new CSSObject()
|
||||
{
|
||||
[full] = "100%",
|
||||
[part] = railSize,
|
||||
},
|
||||
[$"{componentCls}-track,{componentCls}-tracks"] = new CSSObject()
|
||||
{
|
||||
[part] = railSize,
|
||||
},
|
||||
[$"{componentCls}-track-draggable"] = new CSSObject()
|
||||
{
|
||||
["..."] = draggableBorder,
|
||||
},
|
||||
[$"{componentCls}-handle"] = new CSSObject()
|
||||
{
|
||||
[handlePos] = handlePosSize,
|
||||
},
|
||||
[$"{componentCls}-mark"] = new CSSObject()
|
||||
{
|
||||
InsetInlineStart = 0,
|
||||
Top = 0,
|
||||
[markInset] = railSize * 3 + (horizontal ? 0 : token.MarginFull),
|
||||
[full] = "100%",
|
||||
},
|
||||
[$"{componentCls}-step"] = new CSSObject()
|
||||
{
|
||||
InsetInlineStart = 0,
|
||||
Top = 0,
|
||||
[markInset] = railSize,
|
||||
[full] = "100%",
|
||||
[part] = railSize,
|
||||
},
|
||||
[$"{componentCls}-dot"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
[handlePos] = (railSize - dotSize) / 2,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown3_1 GenHorizontalStyle(Unknown3_2 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var marginPartWithMark = token.MarginPartWithMark;
|
||||
return new Unknown3_3()
|
||||
{
|
||||
[$"{componentCls}-horizontal"] = new Unknown3_4()
|
||||
{
|
||||
["..."] = GenDirectionStyle(token, true),
|
||||
[$"&{componentCls}-with-marks"] = new Unknown3_5()
|
||||
{
|
||||
MarginBottom = marginPartWithMark,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown4_1 GenVerticalStyle(Unknown4_2 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown4_3()
|
||||
{
|
||||
[$"{componentCls}-vertical"] = new Unknown4_4()
|
||||
{
|
||||
["..."] = GenDirectionStyle(token, false),
|
||||
Height = "100%",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
protected override UseComponentStyleResult UseComponentStyle()
|
||||
{
|
||||
return GenComponentStyleHook(
|
||||
"Slider",
|
||||
(token) =>
|
||||
{
|
||||
var sliderToken = MergeToken(
|
||||
token,
|
||||
new Unknown5_1()
|
||||
{
|
||||
MarginPart = (token.ControlHeight - token.ControlSize) / 2,
|
||||
MarginFull = token.ControlSize / 2,
|
||||
MarginPartWithMark = token.ControlHeightLG - token.ControlSize,
|
||||
});
|
||||
return new Unknown5_2
|
||||
{
|
||||
GenBaseStyle(sliderToken),
|
||||
GenHorizontalStyle(sliderToken),
|
||||
GenVerticalStyle(sliderToken),
|
||||
};
|
||||
},
|
||||
(token) =>
|
||||
{
|
||||
var increaseHandleWidth = 1;
|
||||
var controlSize = token.ControlHeightLG / 4;
|
||||
var controlSizeHover = token.ControlHeightSM / 2;
|
||||
var handleLineWidth = token.LineWidth + increaseHandleWidth;
|
||||
var handleLineWidthHover = token.LineWidth + increaseHandleWidth * 3;
|
||||
return new Unknown5_3()
|
||||
{
|
||||
ControlSize = controlSize,
|
||||
RailSize = 4,
|
||||
HandleSize = controlSize,
|
||||
HandleSizeHover = controlSizeHover,
|
||||
DotSize = 8,
|
||||
HandleLineWidth = handleLineWidth,
|
||||
HandleLineWidthHover = handleLineWidthHover,
|
||||
RailBg = token.ColorFillTertiary,
|
||||
RailHoverBg = token.ColorFillSecondary,
|
||||
TrackBg = token.ColorPrimaryBorder,
|
||||
TrackHoverBg = token.ColorPrimaryBorderHover,
|
||||
HandleColor = token.ColorPrimaryBorder,
|
||||
HandleActiveColor = token.ColorPrimary,
|
||||
DotBorderColor = token.ColorBorderSecondary,
|
||||
DotActiveBorderColor = token.ColorPrimaryBorder,
|
||||
TrackBgDisabled = token.ColorBgContainerDisabled,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -15,6 +15,13 @@ namespace AntDesign
|
|||
TextOverflow = "ellipsis"
|
||||
};
|
||||
|
||||
public static CSSObject SegmentedTextEllipsisCss = new()
|
||||
{
|
||||
Overflow = "hidden",
|
||||
// handle text ellipsis
|
||||
["..."] = TextEllipsis,
|
||||
};
|
||||
|
||||
public static CSSObject ResetComponent(GlobalToken token)
|
||||
{
|
||||
return new CSSObject();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
// Licensed to the .NET Foundation under one or more agreements.
|
||||
// The .NET Foundation licenses this file to you under the MIT license.
|
||||
// See the LICENSE file in the project root for more information.
|
||||
|
||||
using CssInCSharp;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public class PlacementArrowOptions
|
||||
{
|
||||
public string ColorBg { get; set; }
|
||||
}
|
||||
|
||||
public class PlacementArrow
|
||||
{
|
||||
public static CSSObject GetArrowStyle(TokenWithCommonCls token, PlacementArrowOptions options)
|
||||
{
|
||||
return new CSSObject();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
// Licensed to the .NET Foundation under one or more agreements.
|
||||
// The .NET Foundation licenses this file to you under the MIT license.
|
||||
// See the LICENSE file in the project root for more information.
|
||||
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Text;
|
||||
using CssInCSharp;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public class Zoom
|
||||
{
|
||||
public static CSSObject InitZoomMotion(TokenWithCommonCls token, string motionName)
|
||||
{
|
||||
return new CSSObject();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -131,8 +131,8 @@ const token: Component[] = [
|
|||
}
|
||||
]
|
||||
|
||||
// 字母A所有组件
|
||||
const letterA: Component[] = [
|
||||
// 已完成迁移
|
||||
const completed: Component[] = [
|
||||
{
|
||||
name: 'Affix',
|
||||
src: ['components/affix/style/index.ts'],
|
||||
|
|
@ -225,10 +225,6 @@ const letterA: Component[] = [
|
|||
]
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
// 字母B所有组件
|
||||
const letterB: Component[] = [
|
||||
{
|
||||
name: 'BackTop',
|
||||
src: ['components/back-top/style/index.ts'],
|
||||
|
|
@ -377,10 +373,6 @@ const letterB: Component[] = [
|
|||
]
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
// 字母C所有组件
|
||||
const letterC: Component[] = [
|
||||
{
|
||||
name: 'Calendar',
|
||||
src: ['components/calendar/style/index.ts'],
|
||||
|
|
@ -555,40 +547,6 @@ const letterC: Component[] = [
|
|||
]
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
// 字母D所有组件
|
||||
const letterD: Component[] = [
|
||||
{
|
||||
name: 'DatePicker',
|
||||
src: ['components/date-picker/style/index.ts'],
|
||||
dist: 'components/date-picker/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
usings: defaultOptions.usings.concat([
|
||||
'using static AntDesign.Slide;',
|
||||
'using static AntDesign.Move;',
|
||||
]),
|
||||
defaultClass: 'DatePicker',
|
||||
propertyMap: '_tokens',
|
||||
typeMap: [
|
||||
{ from: 'Unknown4', to: 'CSSObject', ranges: [[1, 14]] },
|
||||
{ from: 'Unknown4', to: 'DatePickerToken', includes: [2] },
|
||||
{ from: 'Unknown5', to: 'CSSObject', ranges: [[1, 80]] },
|
||||
{ from: 'Unknown5', to: 'CSSInterpolation[]', includes: [1, 3] },
|
||||
{ from: 'Unknown5', to: 'DatePickerToken', includes: [2] },
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class DatePickerToken : TokenWithCommonCls' },
|
||||
{ source: 'class PickerPanelToken', target: 'class PickerPanelToken : InputToken' },
|
||||
{ source: 'class PickerToken', target: 'class PickerToken : PickerPanelToken' },
|
||||
{ source: 'class SharedPickerToken', target: 'class SharedPickerToken : PickerToken' },
|
||||
{ source: 'class DatePickerToken', target: 'partial class DatePickerToken' },
|
||||
{ source: 'class DatePicker', target: 'partial class DatePicker' },
|
||||
{ source: 'public UseComponentStyleResult ExportDefault', target: 'protected override UseComponentStyleResult UseComponentStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Descriptions',
|
||||
src: ['components/descriptions/style/index.ts'],
|
||||
|
|
@ -663,41 +621,6 @@ const letterD: Component[] = [
|
|||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Dropdown',
|
||||
src: [
|
||||
'components/dropdown/style/index.ts',
|
||||
'components/dropdown/style/status.ts',
|
||||
],
|
||||
dist: 'components/dropdown/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
defaultClass: 'Dropdown',
|
||||
propertyMap: '_tokens',
|
||||
typeMap: [
|
||||
{ from: 'Unknown1', to: 'CSSInterpolation[]', includes: [1, 3] },
|
||||
{ from: 'Unknown1', to: 'CSSObject', ranges: [[4, 50]] },
|
||||
{ from: 'Unknown1', to: 'DropdownToken', includes: [2] },
|
||||
{ from: 'Unknown1', to: 'PropertySkip', includes: [6] },
|
||||
{ from: 'Unknown1', to: 'TokenWithCommonCls', includes: [20] },
|
||||
{ from: 'Unknown2', to: 'arrowToken', includes: [1, 3] },
|
||||
{ from: 'Unknown2', to: 'TokenWithCommonCls', includes: [2] },
|
||||
{ from: 'Unknown2', to: 'DropdownToken', includes: [4, 6] },
|
||||
{ from: 'Unknown2', to: 'CSSInterpolation[]', includes: [5] },
|
||||
{ from: 'Unknown3', to: 'CSSObject', ranges: [[1, 7]] },
|
||||
{ from: 'Unknown3', to: 'DropdownToken', includes: [2] },
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class DropdownToken' },
|
||||
{ source: 'class DropdownToken', target: 'partial class DropdownToken : TokenWithCommonCls' },
|
||||
{ source: 'class Dropdown', target: 'partial class Dropdown' },
|
||||
{ source: 'public UseComponentStyleResult ExportDefault', target: 'protected override UseComponentStyleResult UseComponentStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
const letterE_G: Component[] = [
|
||||
{
|
||||
name: 'Empty',
|
||||
src: ['components/empty/style/index.ts'],
|
||||
|
|
@ -719,27 +642,6 @@ const letterE_G: Component[] = [
|
|||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Form',
|
||||
src: [
|
||||
'components/form/style/index.ts',
|
||||
'components/form/style/explain.ts',
|
||||
],
|
||||
dist: 'components/form/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
defaultClass: 'Form',
|
||||
propertyMap: '_tokens',
|
||||
typeMap: [
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class FormToken' },
|
||||
{ source: 'class FormToken', target: 'partial class FormToken : TokenWithCommonCls' },
|
||||
{ source: 'class Form', target: 'partial class Form' },
|
||||
{ source: 'public CSSInterpolation[] GenComponentStyleHook', target: 'protected override CSSInterpolation[] UseStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Grid',
|
||||
src: ['components/grid/style/index.ts'],
|
||||
|
|
@ -760,9 +662,6 @@ const letterE_G: Component[] = [
|
|||
]
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
const letterI: Component[] = [
|
||||
{
|
||||
name: 'Image',
|
||||
src: ['components/image/style/index.ts'],
|
||||
|
|
@ -852,7 +751,6 @@ const letterI: Component[] = [
|
|||
]
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Layout',
|
||||
src: [
|
||||
|
|
@ -968,6 +866,157 @@ const letterI: Component[] = [
|
|||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Message',
|
||||
src: ['components/message/style/index.tsx'],
|
||||
dist: 'components/message/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
usings: defaultOptions.usings.concat(['using Keyframes = CssInCSharp.Keyframe;']),
|
||||
defaultClass: 'Message',
|
||||
typeMap: [
|
||||
{ from: 'Padding<string | number>', to: 'string' },
|
||||
{ from: 'Unknown1', to: 'CSSObject', ranges: [[1, 30]] },
|
||||
{ from: 'Unknown1', to: 'MessageToken', includes: [2] },
|
||||
{ from: 'Unknown1', to: 'CSSInterpolation[]', includes: [1, 16] },
|
||||
{ from: 'Unknown2', to: 'MessageToken', includes: [1, 3] },
|
||||
{ from: 'Unknown2', to: 'CSSInterpolation[]', includes: [2] },
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class MessageToken' },
|
||||
{ source: 'class MessageToken', target: 'partial class MessageToken : TokenWithCommonCls' },
|
||||
{ source: 'class Message', target: 'partial class Message' },
|
||||
{ source: 'CONTAINER_MAX_OFFSET', target: '1000' },
|
||||
{ source: 'public CSSInterpolation[] GenComponentStyleHook', target: 'protected override CSSInterpolation[] UseStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Pagination',
|
||||
src: ['components/pagination/style/index.ts'],
|
||||
dist: 'components/pagination/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
usings: defaultOptions.usings.concat(['using static AntDesign.InputStyle;']),
|
||||
defaultClass: 'Pagination',
|
||||
propertyMap: '_tokens',
|
||||
typeMap: [
|
||||
{ from: 'Unknown1', to: 'CSSObject', ranges: [[1, 27]] },
|
||||
{ from: 'Unknown1', to: 'PaginationToken', includes: [2] },
|
||||
{ from: 'Unknown2', to: 'CSSObject', ranges: [[1, 28]] },
|
||||
{ from: 'Unknown2', to: 'PaginationToken', includes: [2] },
|
||||
{ from: 'Unknown3', to: 'CSSObject', ranges: [[1, 13]] },
|
||||
{ from: 'Unknown3', to: 'PaginationToken', includes: [2] },
|
||||
{ from: 'Unknown4', to: 'CSSObject', ranges: [[1, 25]] },
|
||||
{ from: 'Unknown4', to: 'PaginationToken', includes: [2] },
|
||||
{ from: 'Unknown5', to: 'CSSObject', ranges: [[1, 13]] },
|
||||
{ from: 'Unknown5', to: 'PaginationToken', includes: [2] },
|
||||
{ from: 'Unknown6', to: 'CSSObject', ranges: [[1, 13]] },
|
||||
{ from: 'Unknown6', to: 'PaginationToken', includes: [2] },
|
||||
{ from: 'Unknown7', to: 'CSSObject', ranges: [[1, 26]] },
|
||||
{ from: 'Unknown7', to: 'PaginationToken', includes: [2] },
|
||||
{ from: 'Unknown8', to: 'CSSObject', ranges: [[1, 11]] },
|
||||
{ from: 'Unknown8', to: 'PaginationToken', includes: [2] },
|
||||
{ from: 'Unknown9', to: 'PaginationToken', includes: [1, 3] },
|
||||
{ from: 'Unknown9', to: 'CSSInterpolation[]', includes: [2] },
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class PaginationToken' },
|
||||
{ source: 'class PaginationToken', target: 'partial class PaginationToken : InputToken' },
|
||||
{ source: 'class Pagination', target: 'partial class Pagination' },
|
||||
{ source: 'public UseComponentStyleResult ExportDefault', target: 'protected override UseComponentStyleResult UseComponentStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Popconfirm',
|
||||
src: ['components/popconfirm/style/index.tsx'],
|
||||
dist: 'components/popconfirm/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
defaultClass: 'Popconfirm',
|
||||
propertyMap: '_tokens',
|
||||
typeMap: [
|
||||
{ from: 'Unknown1', to: 'CSSObject', ranges: [[1, 12]] },
|
||||
{ from: 'Unknown1', to: 'PopconfirmToken', includes: [2] },
|
||||
{ from: 'Unknown2', to: 'PopconfirmToken', includes: [1] },
|
||||
{ from: 'Unknown2', to: 'GenOptions', includes: [2] },
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class PopconfirmToken' },
|
||||
{ source: 'class PopconfirmToken', target: 'partial class PopconfirmToken : TokenWithCommonCls' },
|
||||
{ source: 'class Popconfirm', target: 'partial class Popconfirm' },
|
||||
{ source: 'public UseComponentStyleResult ExportDefault', target: 'protected override UseComponentStyleResult UseComponentStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Popover',
|
||||
src: ['components/popover/style/index.tsx'],
|
||||
dist: 'components/popover/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
usings: defaultOptions.usings.concat([
|
||||
'using static AntDesign.Zoom;',
|
||||
'using static AntDesign.PlacementArrow;',
|
||||
]),
|
||||
defaultClass: 'Popover',
|
||||
propertyMap: '_tokens',
|
||||
typeMap: [
|
||||
{ from: 'string | number', to: 'double' },
|
||||
{ from: 'Unknown1', to: 'CSSInterpolation[]', includes: [1, 3] },
|
||||
{ from: 'Unknown1', to: 'PopoverToken', includes: [2] },
|
||||
{ from: 'Unknown1', to: 'CSSObject', ranges: [[4, 16]] },
|
||||
{ from: 'Unknown1', to: 'PlacementArrowOptions', includes: [13] },
|
||||
{ from: 'Unknown1', to: 'PropertySkip', includes: [6] },
|
||||
{ from: 'Unknown2', to: 'CSSObject', includes: [1, 3] },
|
||||
{ from: 'Unknown2', to: 'PopoverToken', includes: [2] },
|
||||
{ from: 'Unknown3', to: 'CSSObject', ranges: [[1, 7]] },
|
||||
{ from: 'Unknown3', to: 'PopoverToken', includes: [2] },
|
||||
{ from: 'Unknown4', to: 'PopoverToken', includes: [1, 3] },
|
||||
{ from: 'Unknown4', to: 'CSSInterpolation[]', includes: [2] },
|
||||
{ from: 'Unknown4', to: 'GenOptions', includes: [4] },
|
||||
{ from: 'Unknown4', to: '()', includes: [5] },
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class PopoverToken' },
|
||||
{ source: 'class PopoverToken', target: 'partial class PopoverToken : TokenWithCommonCls' },
|
||||
{ source: 'class Popover', target: 'partial class Popover' },
|
||||
{ source: 'ControlHeight -', target: 'controlHeight -' },
|
||||
{ source: 'Wireframe && genWireframeStyle(popoverToken),', target: 'wireframe ? GenWireframeStyle(popoverToken) : null,' },
|
||||
{ source: 'public UseComponentStyleResult ExportDefault', target: 'protected override UseComponentStyleResult UseComponentStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Progress',
|
||||
src: ['components/progress/style/index.tsx'],
|
||||
dist: 'components/progress/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
usings: defaultOptions.usings.concat(['using Keyframes = CssInCSharp.Keyframe;']),
|
||||
defaultClass: 'Progress',
|
||||
propertyMap: '_tokens',
|
||||
typeMap: [
|
||||
{ from: 'Unknown1', to: 'Keyframes', includes: [1] },
|
||||
{ from: 'Unknown1', to: 'CSSObject', ranges: [[2, 5]] },
|
||||
{ from: 'Unknown2', to: 'CSSObject', ranges: [[1, 30]] },
|
||||
{ from: 'Unknown2', to: 'ProgressToken', includes: [2] },
|
||||
{ from: 'Unknown3', to: 'CSSObject', ranges: [[1, 14]] },
|
||||
{ from: 'Unknown3', to: 'ProgressToken', includes: [2] },
|
||||
{ from: 'Unknown6', to: 'ProgressToken', includes: [1, 3] },
|
||||
{ from: 'Unknown6', to: 'CSSInterpolation[]', includes: [2] },
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class ProgressToken' },
|
||||
{ source: 'class ProgressToken', target: 'partial class ProgressToken : TokenWithCommonCls' },
|
||||
{ source: 'class Progress', target: 'partial class Progress' },
|
||||
{ source: 'isRtl ? "RTL" : "LTR"', target: '(isRtl ? "RTL" : "LTR")' },
|
||||
{ source: 'GenAntProgressActive(bool isRtl)', target: 'GenAntProgressActive(bool isRtl = false)' },
|
||||
{ source: 'public UseComponentStyleResult ExportDefault', target: 'protected override UseComponentStyleResult UseComponentStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Radio',
|
||||
src: ['components/radio/style/index.tsx'],
|
||||
|
|
@ -997,11 +1046,195 @@ const letterI: Component[] = [
|
|||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Rate',
|
||||
src: ['components/rate/style/index.tsx'],
|
||||
dist: 'components/rate/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
defaultClass: 'Rate',
|
||||
propertyMap: '_tokens',
|
||||
typeMap: [
|
||||
{ from: 'Transform | string[] | Transform[] | { value: Transform | string[] | (Transform | string[])[]; _skip_check_?: boolean; _multi_value_?: boolean; }', to: 'string' },
|
||||
{ from: 'Unknown1', to: 'CSSObject', ranges: [[1, 13]] },
|
||||
{ from: 'Unknown1', to: 'RateToken', includes: [2] },
|
||||
{ from: 'Unknown3', to: 'CSSObject', ranges: [[1, 6]] },
|
||||
{ from: 'Unknown3', to: 'RateToken', includes: [2] },
|
||||
{ from: 'Unknown4', to: 'RateToken', includes: [1, 3] },
|
||||
{ from: 'Unknown4', to: 'CSSInterpolation[]', includes: [2] },
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class RateToken' },
|
||||
{ source: 'class RateToken', target: 'partial class RateToken : TokenWithCommonCls' },
|
||||
{ source: 'class Rate', target: 'partial class Rate' },
|
||||
{ source: 'token.Yellow6', target: 'token["yellow6"].ToString()' },
|
||||
{ source: 'public UseComponentStyleResult ExportDefault', target: 'protected override UseComponentStyleResult UseComponentStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Result',
|
||||
src: ['components/result/style/index.tsx'],
|
||||
dist: 'components/result/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
defaultClass: 'Result',
|
||||
propertyMap: '_tokens',
|
||||
typeMap: [
|
||||
{ from: 'Margin<string | number>', to: 'string', },
|
||||
{ from: 'Unknown1', to: 'ResultToken', includes: [1] },
|
||||
{ from: 'Unknown2', to: 'CSSObject', ranges: [[1, 7]] },
|
||||
{ from: 'Unknown2', to: 'ResultToken', includes: [2] },
|
||||
{ from: 'Unknown3', to: 'CSSInterpolation[]', includes: [1, 3] },
|
||||
{ from: 'Unknown3', to: 'ResultToken', includes: [2] },
|
||||
{ from: 'Unknown4', to: 'CSSInterpolation[]', includes: [1] },
|
||||
{ from: 'Unknown4', to: 'ResultToken', includes: [2] },
|
||||
{ from: 'Unknown5', to: 'ResultToken', includes: [1, 3] },
|
||||
{ from: 'Unknown5', to: 'CSSInterpolation[]', includes: [2] },
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class ResultToken' },
|
||||
{ source: 'class ResultToken', target: 'partial class ResultToken : TokenWithCommonCls' },
|
||||
{ source: 'class Result', target: 'partial class Result' },
|
||||
{ source: 'public UseComponentStyleResult ExportDefault', target: 'protected override UseComponentStyleResult UseComponentStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Segmented',
|
||||
src: ['components/segmented/style/index.tsx'],
|
||||
dist: 'components/segmented/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
defaultClass: 'Segmented',
|
||||
propertyMap: '_tokens',
|
||||
typeMap: [
|
||||
{ from: 'Unknown3', to: 'CSSObject', ranges: [[1, 26]] },
|
||||
{ from: 'Unknown4', to: 'SegmentedToken', includes: [1, 3] },
|
||||
{ from: 'Unknown4', to: 'CSSInterpolation[]', includes: [2] },
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class SegmentedToken' },
|
||||
{ source: 'class SegmentedToken', target: 'partial class SegmentedToken : TokenWithCommonCls' },
|
||||
{ source: 'class Segmented', target: 'partial class Segmented<TValue>' },
|
||||
{ source: 'segmentedTextEllipsisCss', target: 'SegmentedTextEllipsisCss' },
|
||||
{ source: 'public UseComponentStyleResult ExportDefault', target: 'protected override UseComponentStyleResult UseComponentStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Skeleton',
|
||||
src: ['components/skeleton/style/index.tsx'],
|
||||
dist: 'components/skeleton/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
usings: defaultOptions.usings.concat(['using Keyframes = CssInCSharp.Keyframe;']),
|
||||
defaultClass: 'Skeleton',
|
||||
propertyMap: '_tokens',
|
||||
typeMap: [
|
||||
{ from: 'Unknown1', to: 'CSSObject', includes: [1, 2, 3] },
|
||||
{ from: 'Unknown13', to: 'CSSObject', ranges: [[1, 26]] },
|
||||
{ from: 'Unknown14', to: 'SkeletonToken', includes: [1, 3] },
|
||||
{ from: 'Unknown14', to: 'CSSInterpolation[]', includes: [2] },
|
||||
{ from: 'Unknown14', to: 'GenOptions', includes: [4] },
|
||||
{ from: 'Unknown14', to: '()', includes: [5] },
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class SkeletonToken' },
|
||||
{ source: 'class SkeletonToken', target: 'partial class SkeletonToken : TokenWithCommonCls' },
|
||||
{ source: 'class Skeleton', target: 'partial class Skeleton' },
|
||||
{ source: 'skeletonClsLoading', target: '_skeletonClsLoading' },
|
||||
{ source: 'public UseComponentStyleResult ExportDefault', target: 'protected override UseComponentStyleResult UseComponentStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
// 未完成测试的组件
|
||||
export const data1: Component[] = [
|
||||
|
||||
// 未完成迁移
|
||||
const uncompleted: Component[] = [
|
||||
{
|
||||
name: 'DatePicker',
|
||||
src: ['components/date-picker/style/index.ts'],
|
||||
dist: 'components/date-picker/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
usings: defaultOptions.usings.concat([
|
||||
'using static AntDesign.Slide;',
|
||||
'using static AntDesign.Move;',
|
||||
]),
|
||||
defaultClass: 'DatePicker',
|
||||
propertyMap: '_tokens',
|
||||
typeMap: [
|
||||
{ from: 'Unknown4', to: 'CSSObject', ranges: [[1, 14]] },
|
||||
{ from: 'Unknown4', to: 'DatePickerToken', includes: [2] },
|
||||
{ from: 'Unknown5', to: 'CSSObject', ranges: [[1, 80]] },
|
||||
{ from: 'Unknown5', to: 'CSSInterpolation[]', includes: [1, 3] },
|
||||
{ from: 'Unknown5', to: 'DatePickerToken', includes: [2] },
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class DatePickerToken : TokenWithCommonCls' },
|
||||
{ source: 'class PickerPanelToken', target: 'class PickerPanelToken : InputToken' },
|
||||
{ source: 'class PickerToken', target: 'class PickerToken : PickerPanelToken' },
|
||||
{ source: 'class SharedPickerToken', target: 'class SharedPickerToken : PickerToken' },
|
||||
{ source: 'class DatePickerToken', target: 'partial class DatePickerToken' },
|
||||
{ source: 'class DatePicker', target: 'partial class DatePicker' },
|
||||
{ source: 'public UseComponentStyleResult ExportDefault', target: 'protected override UseComponentStyleResult UseComponentStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Dropdown',
|
||||
src: [
|
||||
'components/dropdown/style/index.ts',
|
||||
'components/dropdown/style/status.ts',
|
||||
],
|
||||
dist: 'components/dropdown/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
defaultClass: 'Dropdown',
|
||||
propertyMap: '_tokens',
|
||||
typeMap: [
|
||||
{ from: 'Unknown1', to: 'CSSInterpolation[]', includes: [1, 3] },
|
||||
{ from: 'Unknown1', to: 'CSSObject', ranges: [[4, 50]] },
|
||||
{ from: 'Unknown1', to: 'DropdownToken', includes: [2] },
|
||||
{ from: 'Unknown1', to: 'PropertySkip', includes: [6] },
|
||||
{ from: 'Unknown1', to: 'TokenWithCommonCls', includes: [20] },
|
||||
{ from: 'Unknown2', to: 'arrowToken', includes: [1, 3] },
|
||||
{ from: 'Unknown2', to: 'TokenWithCommonCls', includes: [2] },
|
||||
{ from: 'Unknown2', to: 'DropdownToken', includes: [4, 6] },
|
||||
{ from: 'Unknown2', to: 'CSSInterpolation[]', includes: [5] },
|
||||
{ from: 'Unknown3', to: 'CSSObject', ranges: [[1, 7]] },
|
||||
{ from: 'Unknown3', to: 'DropdownToken', includes: [2] },
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class DropdownToken' },
|
||||
{ source: 'class DropdownToken', target: 'partial class DropdownToken : TokenWithCommonCls' },
|
||||
{ source: 'class Dropdown', target: 'partial class Dropdown' },
|
||||
{ source: 'public UseComponentStyleResult ExportDefault', target: 'protected override UseComponentStyleResult UseComponentStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Form',
|
||||
src: [
|
||||
'components/form/style/index.ts',
|
||||
'components/form/style/explain.ts',
|
||||
],
|
||||
dist: 'components/form/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
defaultClass: 'Form',
|
||||
propertyMap: '_tokens',
|
||||
typeMap: [
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class FormToken' },
|
||||
{ source: 'class FormToken', target: 'partial class FormToken : TokenWithCommonCls' },
|
||||
{ source: 'class Form', target: 'partial class Form' },
|
||||
{ source: 'public CSSInterpolation[] GenComponentStyleHook', target: 'protected override CSSInterpolation[] UseStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'List',
|
||||
src: ['components/list/style/index.ts'],
|
||||
|
|
@ -1019,9 +1252,6 @@ export const data1: Component[] = [
|
|||
]
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
{
|
||||
name: 'Modal',
|
||||
src: ['components/modal/style/index.tsx'],
|
||||
|
|
@ -1059,143 +1289,6 @@ export const data1: Component[] = [
|
|||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Pagination',
|
||||
src: ['components/pagination/style/index.tsx'],
|
||||
dist: 'components/pagination/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
defaultClass: 'Pagination',
|
||||
typeMap: [
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class PaginationToken' },
|
||||
{ source: 'class PaginationToken', target: 'partial class PaginationToken : TokenWithCommonCls' },
|
||||
{ source: 'class Pagination', target: 'partial class Pagination' },
|
||||
{ source: 'public CSSInterpolation[] GenComponentStyleHook', target: 'protected override CSSInterpolation[] UseStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Popconfirm',
|
||||
src: ['components/popconfirm/style/index.tsx'],
|
||||
dist: 'components/popconfirm/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
defaultClass: 'Popconfirm',
|
||||
typeMap: [
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class PopconfirmToken' },
|
||||
{ source: 'class PopconfirmToken', target: 'partial class PopconfirmToken : TokenWithCommonCls' },
|
||||
{ source: 'class Popconfirm', target: 'partial class Popconfirm' },
|
||||
{ source: 'public CSSInterpolation[] GenComponentStyleHook', target: 'protected override CSSInterpolation[] UseStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Popover',
|
||||
src: ['components/popover/style/index.tsx'],
|
||||
dist: 'components/popover/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
defaultClass: 'Popover',
|
||||
typeMap: [
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class PopoverToken' },
|
||||
{ source: 'class PopoverToken', target: 'partial class PopoverToken : TokenWithCommonCls' },
|
||||
{ source: 'class Popover', target: 'partial class Popover' },
|
||||
{ source: 'public CSSInterpolation[] GenComponentStyleHook', target: 'protected override CSSInterpolation[] UseStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Progress',
|
||||
src: ['components/progress/style/index.tsx'],
|
||||
dist: 'components/progress/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
defaultClass: 'Progress',
|
||||
typeMap: [
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class ProgressToken' },
|
||||
{ source: 'class ProgressToken', target: 'partial class ProgressToken : TokenWithCommonCls' },
|
||||
{ source: 'class Progress', target: 'partial class Progress' },
|
||||
{ source: 'public CSSInterpolation[] GenComponentStyleHook', target: 'protected override CSSInterpolation[] UseStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Rate',
|
||||
src: ['components/rate/style/index.tsx'],
|
||||
dist: 'components/rate/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
defaultClass: 'Rate',
|
||||
typeMap: [
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class RateToken' },
|
||||
{ source: 'class RateToken', target: 'partial class RateToken : TokenWithCommonCls' },
|
||||
{ source: 'class Rate', target: 'partial class Rate' },
|
||||
{ source: 'public CSSInterpolation[] GenComponentStyleHook', target: 'protected override CSSInterpolation[] UseStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Result',
|
||||
src: ['components/result/style/index.tsx'],
|
||||
dist: 'components/result/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
defaultClass: 'Result',
|
||||
typeMap: [
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class ResultToken' },
|
||||
{ source: 'class ResultToken', target: 'partial class ResultToken : TokenWithCommonCls' },
|
||||
{ source: 'class Result', target: 'partial class Result' },
|
||||
{ source: 'public CSSInterpolation[] GenComponentStyleHook', target: 'protected override CSSInterpolation[] UseStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Segmented',
|
||||
src: ['components/segmented/style/index.tsx'],
|
||||
dist: 'components/segmented/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
defaultClass: 'Segmented',
|
||||
typeMap: [
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class SegmentedToken' },
|
||||
{ source: 'class SegmentedToken', target: 'partial class SegmentedToken : TokenWithCommonCls' },
|
||||
{ source: 'class Segmented', target: 'partial class Segmented' },
|
||||
{ source: 'public CSSInterpolation[] GenComponentStyleHook', target: 'protected override CSSInterpolation[] UseStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Select',
|
||||
src: ['components/select/style/index.tsx'],
|
||||
dist: 'components/select/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
defaultClass: 'Select',
|
||||
typeMap: [
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class SelectToken' },
|
||||
{ source: 'class SelectToken', target: 'partial class SelectToken : TokenWithCommonCls' },
|
||||
{ source: 'class Select', target: 'partial class Select' },
|
||||
{ source: 'public CSSInterpolation[] GenComponentStyleHook', target: 'protected override CSSInterpolation[] UseStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Select',
|
||||
src: [
|
||||
|
|
@ -1218,40 +1311,8 @@ export const data1: Component[] = [
|
|||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Skeleton',
|
||||
src: ['components/skeleton/style/index.tsx'],
|
||||
dist: 'components/skeleton/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
defaultClass: 'Skeleton',
|
||||
typeMap: [
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class SkeletonToken' },
|
||||
{ source: 'class SkeletonToken', target: 'partial class SkeletonToken : TokenWithCommonCls' },
|
||||
{ source: 'class Skeleton', target: 'partial class Skeleton' },
|
||||
{ source: 'public CSSInterpolation[] GenComponentStyleHook', target: 'protected override CSSInterpolation[] UseStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Slider',
|
||||
src: ['components/slider/style/index.tsx'],
|
||||
dist: 'components/slider/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
defaultClass: 'Slider',
|
||||
typeMap: [
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class SliderToken' },
|
||||
{ source: 'class SliderToken', target: 'partial class SliderToken : TokenWithCommonCls' },
|
||||
{ source: 'class Slider', target: 'partial class Slider' },
|
||||
{ source: 'public CSSInterpolation[] GenComponentStyleHook', target: 'protected override CSSInterpolation[] UseStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
name: 'Space',
|
||||
src: [
|
||||
|
|
@ -1555,27 +1616,21 @@ export const data1: Component[] = [
|
|||
// 用于生成的实例，将需要生成的组件配置放到这里
|
||||
export const components: Component[] = [
|
||||
{
|
||||
name: 'Message',
|
||||
src: ['components/message/style/index.tsx'],
|
||||
dist: 'components/message/Style.cs',
|
||||
name: 'Slider',
|
||||
src: ['components/slider/style/index.tsx'],
|
||||
dist: 'components/slider/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
usings: defaultOptions.usings.concat(['using Keyframes = CssInCSharp.Keyframe;']),
|
||||
defaultClass: 'Message',
|
||||
defaultClass: 'Slider',
|
||||
typeMap: [
|
||||
{ from: 'Padding<string | number>', to: 'string' },
|
||||
{ from: 'Unknown1', to: 'CSSObject', ranges: [[1, 30]] },
|
||||
{ from: 'Unknown1', to: 'MessageToken', includes: [2] },
|
||||
{ from: 'Unknown1', to: 'CSSInterpolation[]', includes: [1, 16] },
|
||||
{ from: 'Unknown2', to: 'MessageToken', includes: [1, 3] },
|
||||
{ from: 'Unknown2', to: 'CSSInterpolation[]', includes: [2] },
|
||||
{ from: 'Unknown1', to: 'CSSObject', ranges: [[1, 34]] },
|
||||
{ from: 'Unknown1', to: 'SliderToken', includes: [2] },
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class MessageToken' },
|
||||
{ source: 'class MessageToken', target: 'partial class MessageToken : TokenWithCommonCls' },
|
||||
{ source: 'class Message', target: 'partial class Message' },
|
||||
{ source: 'CONTAINER_MAX_OFFSET', target: '1000' },
|
||||
{ source: 'public CSSInterpolation[] GenComponentStyleHook', target: 'protected override CSSInterpolation[] UseStyle' },
|
||||
{ source: 'class ComponentToken', target: 'partial class SliderToken' },
|
||||
{ source: 'class SliderToken', target: 'partial class SliderToken : TokenWithCommonCls' },
|
||||
{ source: 'class Slider', target: 'partial class Slider' },
|
||||
{ source: 'public UseComponentStyleResult ExportDefault', target: 'protected override UseComponentStyleResult UseComponentStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -136,6 +136,9 @@ export class CsVariable {
|
|||
case CsKinds.ObjectExpression:
|
||||
codes.push(...this.createObjectExpression(tab, this.value));
|
||||
break;
|
||||
case CsKinds.NewExpression:
|
||||
codes.push(...this.createNewExpression(tab, tab, this.value, '', ';'));
|
||||
break;
|
||||
}
|
||||
}
|
||||
return codes;
|
||||
|
|
@ -166,6 +169,39 @@ export class CsVariable {
|
|||
recursion(tab, '', objectExpression);
|
||||
return codes;
|
||||
}
|
||||
|
||||
private createNewExpression(tab: string, initialTab: string, newExpression: NewExpression, returnFlag: string, end: string): string[] {
|
||||
const codes: string[] = [];
|
||||
const fun = new CsFunction("", [], "", { statements: [] });
|
||||
if (newExpression.args && newExpression.args.length > 0) {
|
||||
const inlineArgs: string[] = [];
|
||||
const multilineArgs: string[] = [];
|
||||
for (const arg of newExpression.args) {
|
||||
if (isString(arg)) {
|
||||
inlineArgs.push(castParameter(arg));
|
||||
} else {
|
||||
switch (arg.kind) {
|
||||
case CsKinds.ObjectExpression:
|
||||
const objCodes = fun.createObjectExpression(initialTab + ' ', arg as ObjectExpression, '', '');
|
||||
multilineArgs.push(...objCodes);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (multilineArgs.length <= 0) {
|
||||
codes.push(`${tab}${returnFlag}new ${newExpression.type}(${inlineArgs.join(', ')})${end}`);
|
||||
} else {
|
||||
codes.push(`${tab}${returnFlag}new ${newExpression.type}(${inlineArgs.join(', ')},`);
|
||||
codes.push(...multilineArgs);
|
||||
const last = codes.length - 1;
|
||||
codes[last] = `${codes[last]})${end}`;
|
||||
}
|
||||
}
|
||||
|
||||
const last = codes.length - 1;
|
||||
codes[0] = `${tab}private ${this.type} ${this.name} = ${codes[0].trim()}`;
|
||||
return codes;
|
||||
}
|
||||
}
|
||||
|
||||
export class CsProperty {
|
||||
|
|
@ -281,6 +317,9 @@ export class CsFunction {
|
|||
case CsKinds.Block:
|
||||
codes.push(...this.createBlock(tab, x));
|
||||
break;
|
||||
case CsKinds.NewExpression:
|
||||
codes.push(...this.createNewExpression(tab, tab, x, ";", "return "));
|
||||
break;
|
||||
}
|
||||
});
|
||||
return codes;
|
||||
|
|
@ -300,7 +339,7 @@ export class CsFunction {
|
|||
return codes;
|
||||
}
|
||||
|
||||
private createObjectExpression(tab: string, objectExpression: ObjectExpression, rootEnd: string = ';', returnFlag: string = 'return '): string[] {
|
||||
public createObjectExpression(tab: string, objectExpression: ObjectExpression, rootEnd: string = ';', returnFlag: string = 'return '): string[] {
|
||||
const codes: string[] = [];
|
||||
const recursion = (rootTab: string, fieldName: string, exp: ObjectExpression) => {
|
||||
const end = fieldName ? ',' : rootEnd;
|
||||
|
|
@ -489,7 +528,7 @@ export class CsFunction {
|
|||
if (conditional.condition) {
|
||||
codes.push(`${conditional.condition}`);
|
||||
} else {
|
||||
codes.push(`${tab}${conditional.left} ${castOperator(conditional.operator!)} ${castParameter(conditional.right!)}`);
|
||||
codes.push(`${tab}${castParameter(conditional.left!)} ${castOperator(conditional.operator!)} ${castParameter(conditional.right!)}`);
|
||||
}
|
||||
const parse = (when: any, operator: string) => {
|
||||
if (!when) return;
|
||||
|
|
@ -506,7 +545,7 @@ export class CsFunction {
|
|||
|
||||
if (isString(conditional.whenTrue) && isString(conditional.whenFalse)) {
|
||||
const condLine = codes.length - 1;
|
||||
codes[condLine] = `${codes[condLine]} ? ${conditional.whenTrue} : ${conditional.whenFalse}`;
|
||||
codes[condLine] = `${codes[condLine]} ? ${castParameter(conditional.whenTrue)} : ${castParameter(conditional.whenFalse)}`;
|
||||
} else {
|
||||
parse(conditional.whenTrue, '?');
|
||||
parse(conditional.whenFalse, ':');
|
||||
|
|
@ -523,7 +562,7 @@ export class CsFunction {
|
|||
return codes;
|
||||
}
|
||||
|
||||
private createNewExpression(tab: string, initialTab: string, newExpression: NewExpression, end: string = ';'): string[] {
|
||||
private createNewExpression(tab: string, initialTab: string, newExpression: NewExpression, end: string = ';', returnFlag: string = ''): string[] {
|
||||
const codes: string[] = [];
|
||||
if (newExpression.args && newExpression.args.length > 0) {
|
||||
const inlineArgs: string[] = [];
|
||||
|
|
@ -541,9 +580,9 @@ export class CsFunction {
|
|||
}
|
||||
}
|
||||
if (multilineArgs.length <= 0) {
|
||||
codes.push(`${tab}new ${newExpression.type}(${inlineArgs.join(', ')})${end}`);
|
||||
codes.push(`${tab}${returnFlag}new ${newExpression.type}(${inlineArgs.join(', ')})${end}`);
|
||||
} else {
|
||||
codes.push(`${tab}new ${newExpression.type}(${inlineArgs.join(', ')},`);
|
||||
codes.push(`${tab}${returnFlag}new ${newExpression.type}(${inlineArgs.join(', ')},`);
|
||||
codes.push(...multilineArgs);
|
||||
const last = codes.length - 1;
|
||||
codes[last] = `${codes[last]})${end}`;
|
||||
|
|
|
|||
|
|
@ -344,6 +344,8 @@ function createArrowFunction(funcName: string, arrowFunc: ts.ArrowFunction, kind
|
|||
statements.push(createArrayExpression(returnType, (rs.expression as any).elements));
|
||||
} else if (rs.expression?.kind === ts.SyntaxKind.CallExpression) {
|
||||
statements.push(createCallExpression('', '', rs.expression as ts.CallExpression, 'return '));
|
||||
} else if (rs.expression?.kind === ts.SyntaxKind.NewExpression) {
|
||||
statements.push(createNewExpression(rs.expression as ts.NewExpression));
|
||||
} else {
|
||||
statements.push({ kind: CsKinds.Identifier, text: x.getText() });
|
||||
}
|
||||
|
|
@ -392,15 +394,15 @@ function convertVariableStatement(context: Context<ts.VariableStatement>) {
|
|||
const name = declaration.name.getText();
|
||||
const initializer = declaration.initializer as ts.NewExpression;
|
||||
const type = initializer.expression.getText();
|
||||
let value: any;
|
||||
let args: string[] = [];
|
||||
initializer.arguments?.forEach(x => {
|
||||
if (x.kind === ts.SyntaxKind.ObjectLiteralExpression) {
|
||||
value = createObjectExpression(type, x as ts.ObjectLiteralExpression, args);
|
||||
} else if (x.kind === ts.SyntaxKind.StringLiteral) {
|
||||
args.push(x.getText());
|
||||
}
|
||||
});
|
||||
const value = createNewExpression(initializer);
|
||||
// let args: string[] = [];
|
||||
// initializer.arguments?.forEach(x => {
|
||||
// if (x.kind === ts.SyntaxKind.ObjectLiteralExpression) {
|
||||
// value = createObjectExpression(type, x as ts.ObjectLiteralExpression, args);
|
||||
// } else if (x.kind === ts.SyntaxKind.StringLiteral) {
|
||||
// args.push(x.getText());
|
||||
// }
|
||||
// });
|
||||
context.csBuilder.addVariable(new CsVariable(name, type, value));
|
||||
break;
|
||||
default:
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@ let htmlTag: { [key: string]: string } = {
|
|||
'table': `["table"]`,
|
||||
'bdi': `["bdi"]`,
|
||||
'span': `["span"]`,
|
||||
'input': `["input"]`,
|
||||
'to': `["to"]`,
|
||||
'stroke': `["stroke"]`,
|
||||
'fill': `["fill"]`,
|
||||
}
|
||||
|
||||
let operatorMap: { [key: string]: string } = {
|
||||
|
|
@ -51,8 +55,8 @@ export const init = (ops: CsOptions) => {
|
|||
'string': 'string',
|
||||
'boolean': 'bool',
|
||||
// todo: add union type support.
|
||||
'string | number': 'string',
|
||||
'string | false': 'string',
|
||||
// 'string | number': 'string',
|
||||
// 'string | false': 'string',
|
||||
}
|
||||
if (options.typeMap) {
|
||||
for (const item of options.typeMap) {
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче