gen radio style
This commit is contained in:
zhaowenkai
Родитель
7ea328c673
Коммит
b17f1966e1
|
|
@ -84,7 +84,7 @@
|
|||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="CssInCSharp" Version="0.1.0-nightly-231211073331" />
|
||||
<PackageReference Include="CssInCSharp" Version="0.1.0-nightly-231212143446" />
|
||||
<PackageReference Include="Microsoft.AspNetCore.Components.DataAnnotations.Validation" Version="3.2.0-rc1.20223.4" />
|
||||
<PackageReference Include="OneOf" Version="2.1.155" />
|
||||
<PackageReference Include="Microsoft.SourceLink.GitHub" Version="1.0.0" PrivateAssets="All" />
|
||||
|
|
|
|||
|
|
@ -139,11 +139,11 @@ namespace AntDesign
|
|||
gridColumnsStyle[@$"{componentCls}{sizeCls}-{i}"] = new CSSInterpolation []
|
||||
{
|
||||
new CSSObject {
|
||||
// ["--ant-display"] = "block",
|
||||
["--ant-display"] = "block",
|
||||
Display = "block",
|
||||
},
|
||||
new CSSObject {
|
||||
Display = "block", // "var(--ant-display)",
|
||||
Display = "var(--ant-display)",
|
||||
Flex = @$"0 0 {(i / gridColumns) * 100}%",
|
||||
MaxWidth = @$"{(i / gridColumns) * 100}%",
|
||||
},
|
||||
|
|
|
|||
|
|
@ -68,8 +68,10 @@ namespace AntDesign
|
|||
|
||||
protected void SetClass()
|
||||
{
|
||||
string prefixCls = "ant-radio";
|
||||
var prefixCls = "ant-radio";
|
||||
var hashId = UseStyle(prefixCls);
|
||||
ClassMapper
|
||||
.Add(hashId)
|
||||
.If($"{prefixCls}-wrapper", () => !RadioButton)
|
||||
.If($"{prefixCls}-button-wrapper", () => RadioButton)
|
||||
.If($"{prefixCls}-wrapper-checked", () => Checked && !RadioButton)
|
||||
|
|
@ -80,6 +82,7 @@ namespace AntDesign
|
|||
|
||||
_radioClassMapper
|
||||
.If(prefixCls, () => !RadioButton)
|
||||
.Add(hashId)
|
||||
.If($"{prefixCls}-checked", () => Checked && !RadioButton)
|
||||
.If($"{prefixCls}-disabled", () => Disabled && !RadioButton)
|
||||
.If($"{prefixCls}-button", () => RadioButton)
|
||||
|
|
@ -88,10 +91,12 @@ namespace AntDesign
|
|||
.If($"{prefixCls}-rtl", () => RTL);
|
||||
|
||||
_inputClassMapper
|
||||
.Add(hashId)
|
||||
.If($"{prefixCls}-input", () => !RadioButton)
|
||||
.If($"{prefixCls}-button-input", () => RadioButton);
|
||||
|
||||
_innerClassMapper
|
||||
.Add(hashId)
|
||||
.If($"{prefixCls}-inner", () => !RadioButton)
|
||||
.If($"{prefixCls}-button-inner", () => RadioButton);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,631 @@
|
|||
using System;
|
||||
using CssInCSharp;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
using static AntDesign.StyleUtil;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class RadioToken
|
||||
{
|
||||
public double RadioSize
|
||||
{
|
||||
get => (double)_tokens["radioSize"];
|
||||
set => _tokens["radioSize"] = value;
|
||||
}
|
||||
|
||||
public double DotSize
|
||||
{
|
||||
get => (double)_tokens["dotSize"];
|
||||
set => _tokens["dotSize"] = value;
|
||||
}
|
||||
|
||||
public string DotColorDisabled
|
||||
{
|
||||
get => (string)_tokens["dotColorDisabled"];
|
||||
set => _tokens["dotColorDisabled"] = value;
|
||||
}
|
||||
|
||||
public string ButtonBg
|
||||
{
|
||||
get => (string)_tokens["buttonBg"];
|
||||
set => _tokens["buttonBg"] = value;
|
||||
}
|
||||
|
||||
public string ButtonCheckedBg
|
||||
{
|
||||
get => (string)_tokens["buttonCheckedBg"];
|
||||
set => _tokens["buttonCheckedBg"] = value;
|
||||
}
|
||||
|
||||
public string ButtonColor
|
||||
{
|
||||
get => (string)_tokens["buttonColor"];
|
||||
set => _tokens["buttonColor"] = value;
|
||||
}
|
||||
|
||||
public double ButtonPaddingInline
|
||||
{
|
||||
get => (double)_tokens["buttonPaddingInline"];
|
||||
set => _tokens["buttonPaddingInline"] = value;
|
||||
}
|
||||
|
||||
public string ButtonCheckedBgDisabled
|
||||
{
|
||||
get => (string)_tokens["buttonCheckedBgDisabled"];
|
||||
set => _tokens["buttonCheckedBgDisabled"] = value;
|
||||
}
|
||||
|
||||
public string ButtonCheckedColorDisabled
|
||||
{
|
||||
get => (string)_tokens["buttonCheckedColorDisabled"];
|
||||
set => _tokens["buttonCheckedColorDisabled"] = value;
|
||||
}
|
||||
|
||||
public string ButtonSolidCheckedColor
|
||||
{
|
||||
get => (string)_tokens["buttonSolidCheckedColor"];
|
||||
set => _tokens["buttonSolidCheckedColor"] = value;
|
||||
}
|
||||
|
||||
public string ButtonSolidCheckedBg
|
||||
{
|
||||
get => (string)_tokens["buttonSolidCheckedBg"];
|
||||
set => _tokens["buttonSolidCheckedBg"] = value;
|
||||
}
|
||||
|
||||
public string ButtonSolidCheckedHoverBg
|
||||
{
|
||||
get => (string)_tokens["buttonSolidCheckedHoverBg"];
|
||||
set => _tokens["buttonSolidCheckedHoverBg"] = value;
|
||||
}
|
||||
|
||||
public string ButtonSolidCheckedActiveBg
|
||||
{
|
||||
get => (string)_tokens["buttonSolidCheckedActiveBg"];
|
||||
set => _tokens["buttonSolidCheckedActiveBg"] = value;
|
||||
}
|
||||
|
||||
public double WrapperMarginInlineEnd
|
||||
{
|
||||
get => (double)_tokens["wrapperMarginInlineEnd"];
|
||||
set => _tokens["wrapperMarginInlineEnd"] = value;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public partial class RadioToken : TokenWithCommonCls
|
||||
{
|
||||
public double RadioDotDisabledSize
|
||||
{
|
||||
get => (double)_tokens["radioDotDisabledSize"];
|
||||
set => _tokens["radioDotDisabledSize"] = value;
|
||||
}
|
||||
|
||||
public string RadioFocusShadow
|
||||
{
|
||||
get => (string)_tokens["radioFocusShadow"];
|
||||
set => _tokens["radioFocusShadow"] = value;
|
||||
}
|
||||
|
||||
public string RadioButtonFocusShadow
|
||||
{
|
||||
get => (string)_tokens["radioButtonFocusShadow"];
|
||||
set => _tokens["radioButtonFocusShadow"] = value;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public partial class Radio<TValue>
|
||||
{
|
||||
public CSSObject GetGroupRadioStyle(RadioToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var antCls = token.AntCls;
|
||||
var groupPrefixCls = @$"{componentCls}-group";
|
||||
return new CSSObject()
|
||||
{
|
||||
[groupPrefixCls] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Display = "inline-block",
|
||||
FontSize = 0,
|
||||
[$"&{groupPrefixCls}-rtl"] = new CSSObject()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
[$"{antCls}-badge {antCls}-badge-count"] = new CSSObject()
|
||||
{
|
||||
ZIndex = 1,
|
||||
},
|
||||
[$"> {antCls}-badge:not(:first-child) > {antCls}-button-wrapper"] = new CSSObject()
|
||||
{
|
||||
BorderInlineStart = "none",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GetRadioBasicStyle(RadioToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var wrapperMarginInlineEnd = token.WrapperMarginInlineEnd;
|
||||
var colorPrimary = token.ColorPrimary;
|
||||
var radioSize = token.RadioSize;
|
||||
var motionDurationSlow = token.MotionDurationSlow;
|
||||
var motionDurationMid = token.MotionDurationMid;
|
||||
var motionEaseInOutCirc = token.MotionEaseInOutCirc;
|
||||
var colorBgContainer = token.ColorBgContainer;
|
||||
var colorBorder = token.ColorBorder;
|
||||
var lineWidth = token.LineWidth;
|
||||
var dotSize = token.DotSize;
|
||||
var colorBgContainerDisabled = token.ColorBgContainerDisabled;
|
||||
var colorTextDisabled = token.ColorTextDisabled;
|
||||
var paddingXS = token.PaddingXS;
|
||||
var dotColorDisabled = token.DotColorDisabled;
|
||||
var lineType = token.LineType;
|
||||
var radioDotDisabledSize = token.RadioDotDisabledSize;
|
||||
var wireframe = token.Wireframe;
|
||||
var colorWhite = token.ColorWhite;
|
||||
var radioInnerPrefixCls = @$"{componentCls}-inner";
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-wrapper"] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Display = "inline-flex",
|
||||
AlignItems = "baseline",
|
||||
MarginInlineStart = 0,
|
||||
MarginInlineEnd = wrapperMarginInlineEnd,
|
||||
Cursor = "pointer",
|
||||
[$"&{componentCls}-wrapper-rtl"] = new CSSObject()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
["&-disabled"] = new CSSObject()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
Color = token.ColorTextDisabled,
|
||||
},
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Width = 0,
|
||||
Overflow = "hidden",
|
||||
Content = "'\\\\a0'",
|
||||
},
|
||||
[$"{componentCls}-checked::after"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetBlockStart = 0,
|
||||
InsetInlineStart = 0,
|
||||
Width = "100%",
|
||||
Height = "100%",
|
||||
Border = @$"{lineWidth}px {lineType} {colorPrimary}",
|
||||
BorderRadius = "50%",
|
||||
Visibility = "hidden",
|
||||
Content = "\"\"",
|
||||
},
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Position = "relative",
|
||||
Display = "inline-block",
|
||||
Outline = "none",
|
||||
Cursor = "pointer",
|
||||
AlignSelf = "center",
|
||||
BorderRadius = "50%",
|
||||
},
|
||||
[$"{componentCls}-wrapper:hover&,&:hover{radioInnerPrefixCls}"] = new CSSObject()
|
||||
{
|
||||
BorderColor = colorPrimary,
|
||||
},
|
||||
[$"{componentCls}-input:focus-visible + {radioInnerPrefixCls}"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenFocusOutline(token)
|
||||
},
|
||||
[$"{componentCls}:hover::after, {componentCls}-wrapper:hover &::after"] = new CSSObject()
|
||||
{
|
||||
Visibility = "visible",
|
||||
},
|
||||
[$"{componentCls}-inner"] = new CSSObject()
|
||||
{
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
BoxSizing = "border-box",
|
||||
Position = "absolute",
|
||||
InsetBlockStart = "50%",
|
||||
InsetInlineStart = "50%",
|
||||
Display = "block",
|
||||
Width = radioSize,
|
||||
Height = radioSize,
|
||||
MarginBlockStart = radioSize / -2,
|
||||
MarginInlineStart = radioSize / -2,
|
||||
BackgroundColor = wireframe ? colorPrimary : colorWhite,
|
||||
BorderBlockStart = 0,
|
||||
BorderInlineStart = 0,
|
||||
BorderRadius = radioSize,
|
||||
Transform = "scale(0)",
|
||||
Opacity = 0,
|
||||
Transition = @$"all {motionDurationSlow} {motionEaseInOutCirc}",
|
||||
Content = "\"\"",
|
||||
},
|
||||
BoxSizing = "border-box",
|
||||
Position = "relative",
|
||||
InsetBlockStart = 0,
|
||||
InsetInlineStart = 0,
|
||||
Display = "block",
|
||||
Width = radioSize,
|
||||
Height = radioSize,
|
||||
BackgroundColor = colorBgContainer,
|
||||
BorderColor = colorBorder,
|
||||
BorderStyle = "solid",
|
||||
BorderWidth = lineWidth,
|
||||
BorderRadius = "50%",
|
||||
Transition = @$"all {motionDurationMid}",
|
||||
},
|
||||
[$"{componentCls}-input"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Inset = 0,
|
||||
ZIndex = 1,
|
||||
Cursor = "pointer",
|
||||
Opacity = 0,
|
||||
},
|
||||
[$"{componentCls}-checked"] = new CSSObject()
|
||||
{
|
||||
[radioInnerPrefixCls] = new CSSObject()
|
||||
{
|
||||
BorderColor = colorPrimary,
|
||||
BackgroundColor = wireframe ? colorBgContainer : colorPrimary,
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
Transform = @$"scale({dotSize / radioSize})",
|
||||
Opacity = 1,
|
||||
Transition = @$"all {motionDurationSlow} {motionEaseInOutCirc}",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-disabled"] = new CSSObject()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
[radioInnerPrefixCls] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = colorBgContainerDisabled,
|
||||
BorderColor = colorBorder,
|
||||
Cursor = "not-allowed",
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = dotColorDisabled,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-input"] = new CSSObject()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
[$"{componentCls}-disabled + span"] = new CSSObject()
|
||||
{
|
||||
Color = colorTextDisabled,
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
[$"&{componentCls}-checked"] = new CSSObject()
|
||||
{
|
||||
[radioInnerPrefixCls] = new CSSObject()
|
||||
{
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
Transform = @$"scale({radioDotDisabledSize / radioSize})",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"span{componentCls} + *"] = new CSSObject()
|
||||
{
|
||||
PaddingInlineStart = paddingXS,
|
||||
PaddingInlineEnd = paddingXS,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GetRadioButtonStyle(RadioToken token)
|
||||
{
|
||||
var buttonColor = token.ButtonColor;
|
||||
var controlHeight = token.ControlHeight;
|
||||
var componentCls = token.ComponentCls;
|
||||
var lineWidth = token.LineWidth;
|
||||
var lineType = token.LineType;
|
||||
var colorBorder = token.ColorBorder;
|
||||
var motionDurationSlow = token.MotionDurationSlow;
|
||||
var motionDurationMid = token.MotionDurationMid;
|
||||
var buttonPaddingInline = token.ButtonPaddingInline;
|
||||
var fontSize = token.FontSize;
|
||||
var buttonBg = token.ButtonBg;
|
||||
var fontSizeLG = token.FontSizeLG;
|
||||
var controlHeightLG = token.ControlHeightLG;
|
||||
var controlHeightSM = token.ControlHeightSM;
|
||||
var paddingXS = token.PaddingXS;
|
||||
var borderRadius = token.BorderRadius;
|
||||
var borderRadiusSM = token.BorderRadiusSM;
|
||||
var borderRadiusLG = token.BorderRadiusLG;
|
||||
var buttonCheckedBg = token.ButtonCheckedBg;
|
||||
var buttonSolidCheckedColor = token.ButtonSolidCheckedColor;
|
||||
var colorTextDisabled = token.ColorTextDisabled;
|
||||
var colorBgContainerDisabled = token.ColorBgContainerDisabled;
|
||||
var buttonCheckedBgDisabled = token.ButtonCheckedBgDisabled;
|
||||
var buttonCheckedColorDisabled = token.ButtonCheckedColorDisabled;
|
||||
var colorPrimary = token.ColorPrimary;
|
||||
var colorPrimaryHover = token.ColorPrimaryHover;
|
||||
var colorPrimaryActive = token.ColorPrimaryActive;
|
||||
var buttonSolidCheckedBg = token.ButtonSolidCheckedBg;
|
||||
var buttonSolidCheckedHoverBg = token.ButtonSolidCheckedHoverBg;
|
||||
var buttonSolidCheckedActiveBg = token.ButtonSolidCheckedActiveBg;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-button-wrapper"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "inline-block",
|
||||
Height = controlHeight,
|
||||
Margin = 0,
|
||||
PaddingInline = buttonPaddingInline,
|
||||
PaddingBlock = 0,
|
||||
Color = buttonColor,
|
||||
FontSize = fontSize,
|
||||
LineHeight = @$"{controlHeight - lineWidth * 2}px",
|
||||
Background = buttonBg,
|
||||
Border = @$"{lineWidth}px {lineType} {colorBorder}",
|
||||
BorderBlockStartWidth = lineWidth + 0.02,
|
||||
BorderInlineStartWidth = 0,
|
||||
BorderInlineEndWidth = lineWidth,
|
||||
Cursor = "pointer",
|
||||
Transition = new string[]
|
||||
{
|
||||
$"color {motionDurationMid}",
|
||||
$"background {motionDurationMid}",
|
||||
$"box-shadow {motionDurationMid}"
|
||||
}.Join(","),
|
||||
["a"] = new CSSObject()
|
||||
{
|
||||
Color = buttonColor,
|
||||
},
|
||||
[$"> {componentCls}-button"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetBlockStart = 0,
|
||||
InsetInlineStart = 0,
|
||||
ZIndex = -1,
|
||||
Width = "100%",
|
||||
Height = "100%",
|
||||
},
|
||||
["&:not(:first-child)"] = new CSSObject()
|
||||
{
|
||||
["&::before"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetBlockStart = -lineWidth,
|
||||
InsetInlineStart = -lineWidth,
|
||||
Display = "block",
|
||||
BoxSizing = "content-box",
|
||||
Width = 1,
|
||||
Height = "100%",
|
||||
PaddingBlock = lineWidth,
|
||||
PaddingInline = 0,
|
||||
BackgroundColor = colorBorder,
|
||||
Transition = @$"background-color {motionDurationSlow}",
|
||||
Content = "\"\"",
|
||||
},
|
||||
},
|
||||
["&:first-child"] = new CSSObject()
|
||||
{
|
||||
BorderInlineStart = @$"{lineWidth}px {lineType} {colorBorder}",
|
||||
BorderStartStartRadius = borderRadius,
|
||||
BorderEndStartRadius = borderRadius,
|
||||
},
|
||||
["&:last-child"] = new CSSObject()
|
||||
{
|
||||
BorderStartEndRadius = borderRadius,
|
||||
BorderEndEndRadius = borderRadius,
|
||||
},
|
||||
["&:first-child:last-child"] = new CSSObject()
|
||||
{
|
||||
BorderRadius = borderRadius,
|
||||
},
|
||||
[$"{componentCls}-group-large &"] = new CSSObject()
|
||||
{
|
||||
Height = controlHeightLG,
|
||||
FontSize = fontSizeLG,
|
||||
LineHeight = @$"{controlHeightLG - lineWidth * 2}px",
|
||||
["&:first-child"] = new CSSObject()
|
||||
{
|
||||
BorderStartStartRadius = borderRadiusLG,
|
||||
BorderEndStartRadius = borderRadiusLG,
|
||||
},
|
||||
["&:last-child"] = new CSSObject()
|
||||
{
|
||||
BorderStartEndRadius = borderRadiusLG,
|
||||
BorderEndEndRadius = borderRadiusLG,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-group-small &"] = new CSSObject()
|
||||
{
|
||||
Height = controlHeightSM,
|
||||
PaddingInline = paddingXS - lineWidth,
|
||||
PaddingBlock = 0,
|
||||
LineHeight = @$"{controlHeightSM - lineWidth * 2}px",
|
||||
["&:first-child"] = new CSSObject()
|
||||
{
|
||||
BorderStartStartRadius = borderRadiusSM,
|
||||
BorderEndStartRadius = borderRadiusSM,
|
||||
},
|
||||
["&:last-child"] = new CSSObject()
|
||||
{
|
||||
BorderStartEndRadius = borderRadiusSM,
|
||||
BorderEndEndRadius = borderRadiusSM,
|
||||
},
|
||||
},
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Color = colorPrimary,
|
||||
},
|
||||
["&:has(:focus-visible)"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenFocusOutline(token)
|
||||
},
|
||||
[$"{componentCls}-inner, input[type=\"checkbox\"], input[type=\"radio\"]"] = new CSSObject()
|
||||
{
|
||||
Width = 0,
|
||||
Height = 0,
|
||||
Opacity = 0,
|
||||
PointerEvents = "none",
|
||||
},
|
||||
[$"&-checked:not({componentCls}-button-wrapper-disabled)"] = new CSSObject()
|
||||
{
|
||||
ZIndex = 1,
|
||||
Color = colorPrimary,
|
||||
Background = buttonCheckedBg,
|
||||
BorderColor = colorPrimary,
|
||||
["&::before"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = colorPrimary,
|
||||
},
|
||||
["&:first-child"] = new CSSObject()
|
||||
{
|
||||
BorderColor = colorPrimary,
|
||||
},
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
Color = colorPrimaryHover,
|
||||
BorderColor = colorPrimaryHover,
|
||||
["&::before"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = colorPrimaryHover,
|
||||
},
|
||||
},
|
||||
["&:active"] = new CSSObject()
|
||||
{
|
||||
Color = colorPrimaryActive,
|
||||
BorderColor = colorPrimaryActive,
|
||||
["&::before"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = colorPrimaryActive,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-group-solid &-checked:not({componentCls}-button-wrapper-disabled)"] = new CSSObject()
|
||||
{
|
||||
Color = buttonSolidCheckedColor,
|
||||
Background = buttonSolidCheckedBg,
|
||||
BorderColor = buttonSolidCheckedBg,
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
Color = buttonSolidCheckedColor,
|
||||
Background = buttonSolidCheckedHoverBg,
|
||||
BorderColor = buttonSolidCheckedHoverBg,
|
||||
},
|
||||
["&:active"] = new CSSObject()
|
||||
{
|
||||
Color = buttonSolidCheckedColor,
|
||||
Background = buttonSolidCheckedActiveBg,
|
||||
BorderColor = buttonSolidCheckedActiveBg,
|
||||
},
|
||||
},
|
||||
["&-disabled"] = new CSSObject()
|
||||
{
|
||||
Color = colorTextDisabled,
|
||||
BackgroundColor = colorBgContainerDisabled,
|
||||
BorderColor = colorBorder,
|
||||
Cursor = "not-allowed",
|
||||
["&:first-child, &:hover"] = new CSSObject()
|
||||
{
|
||||
Color = colorTextDisabled,
|
||||
BackgroundColor = colorBgContainerDisabled,
|
||||
BorderColor = colorBorder,
|
||||
},
|
||||
},
|
||||
[$"&-disabled{componentCls}-button-wrapper-checked"] = new CSSObject()
|
||||
{
|
||||
Color = buttonCheckedColorDisabled,
|
||||
BackgroundColor = buttonCheckedBgDisabled,
|
||||
BorderColor = colorBorder,
|
||||
BoxShadow = "none",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public double GetDotSize(double radioSize)
|
||||
{
|
||||
var dotPadding = 4;
|
||||
return radioSize - dotPadding * 2;
|
||||
}
|
||||
|
||||
protected override UseComponentStyleResult UseComponentStyle()
|
||||
{
|
||||
return GenComponentStyleHook(
|
||||
"Radio",
|
||||
(token) =>
|
||||
{
|
||||
var controlOutline = token.ControlOutline;
|
||||
var controlOutlineWidth = token.ControlOutlineWidth;
|
||||
var radioSize = token.RadioSize;
|
||||
var radioFocusShadow = @$"0 0 0 {controlOutlineWidth}px {controlOutline}";
|
||||
var radioButtonFocusShadow = radioFocusShadow;
|
||||
var radioDotDisabledSize = GetDotSize(radioSize);
|
||||
var radioToken = MergeToken(
|
||||
token,
|
||||
new RadioToken()
|
||||
{
|
||||
RadioDotDisabledSize = radioDotDisabledSize,
|
||||
RadioFocusShadow = radioFocusShadow,
|
||||
RadioButtonFocusShadow = radioButtonFocusShadow,
|
||||
});
|
||||
return new CSSInterpolation[]
|
||||
{
|
||||
GetGroupRadioStyle(radioToken),
|
||||
GetRadioBasicStyle(radioToken),
|
||||
GetRadioButtonStyle(radioToken),
|
||||
};
|
||||
},
|
||||
(token) =>
|
||||
{
|
||||
var wireframe = token.Wireframe;
|
||||
var padding = token.Padding;
|
||||
var marginXS = token.MarginXS;
|
||||
var lineWidth = token.LineWidth;
|
||||
var fontSizeLG = token.FontSizeLG;
|
||||
var colorText = token.ColorText;
|
||||
var colorBgContainer = token.ColorBgContainer;
|
||||
var colorTextDisabled = token.ColorTextDisabled;
|
||||
var controlItemBgActiveDisabled = token.ControlItemBgActiveDisabled;
|
||||
var colorTextLightSolid = token.ColorTextLightSolid;
|
||||
var colorPrimary = token.ColorPrimary;
|
||||
var colorPrimaryHover = token.ColorPrimaryHover;
|
||||
var colorPrimaryActive = token.ColorPrimaryActive;
|
||||
var dotPadding = 4;
|
||||
var radioSize = fontSizeLG;
|
||||
var radioDotSize = wireframe ? GetDotSize(radioSize) : radioSize - (dotPadding + lineWidth) * 2;
|
||||
return new RadioToken()
|
||||
{
|
||||
RadioSize = radioSize,
|
||||
DotSize = radioDotSize,
|
||||
DotColorDisabled = colorTextDisabled,
|
||||
ButtonSolidCheckedColor = colorTextLightSolid,
|
||||
ButtonSolidCheckedBg = colorPrimary,
|
||||
ButtonSolidCheckedHoverBg = colorPrimaryHover,
|
||||
ButtonSolidCheckedActiveBg = colorPrimaryActive,
|
||||
ButtonBg = colorBgContainer,
|
||||
ButtonCheckedBg = colorBgContainer,
|
||||
ButtonColor = colorText,
|
||||
ButtonCheckedBgDisabled = controlItemBgActiveDisabled,
|
||||
ButtonCheckedColorDisabled = colorTextDisabled,
|
||||
ButtonPaddingInline = padding - lineWidth,
|
||||
WrapperMarginInlineEnd = marginXS,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -21,8 +21,8 @@
|
|||
"url": "https://github.com/ElderJames/ant-design-blazor/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "dotnet watch -p ./site/AntDesign.Docs.Server run -f net7",
|
||||
"start:wasm": "dotnet watch -p ./site/AntDesign.Docs.Wasm run -f net7",
|
||||
"start": "dotnet watch -p ./site/AntDesign.Docs.Server run -f net8",
|
||||
"start:wasm": "dotnet watch -p ./site/AntDesign.Docs.Wasm run -f net8",
|
||||
"build:lib": "gulp build:library",
|
||||
"build:doc": "gulp build:preview --max-old-space-size=81920",
|
||||
"preinstall": "dotnet tool restore",
|
||||
|
|
|
|||
|
|
@ -740,7 +740,26 @@ const letterE_G: Component[] = [
|
|||
]
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Grid',
|
||||
src: ['components/grid/style/index.ts'],
|
||||
dist: 'components/grid/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
defaultClass: 'GridStyle',
|
||||
propertyMap: '_tokens',
|
||||
typeMap: [
|
||||
{ from: 'Unknown1', to: 'GridRowToken', includes: [1] },
|
||||
{ from: 'Unknown2', to: 'GridColToken', includes: [1] },
|
||||
{ from: 'Unknown3', to: 'CSSObject', includes: [1] },
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class GridRowToken', target: 'class GridRowToken : TokenWithCommonCls' },
|
||||
{ source: 'class GridColToken', target: 'class GridColToken : TokenWithCommonCls' },
|
||||
{ source: 'public CSSInterpolation[] GenComponentStyleHook', target: 'protected override CSSInterpolation[] UseStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
const letterI: Component[] = [
|
||||
|
|
@ -922,6 +941,36 @@ const letterI: Component[] = [
|
|||
]
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Radio',
|
||||
src: ['components/radio/style/index.tsx'],
|
||||
dist: 'components/radio/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
defaultClass: 'Radio',
|
||||
propertyMap: '_tokens',
|
||||
typeMap: [
|
||||
{ from: 'Unknown1', to: 'CSSObject', ranges: [[1, 7]] },
|
||||
{ from: 'Unknown1', to: 'RadioToken', includes: [2] },
|
||||
{ from: 'Unknown2', to: 'CSSObject', ranges: [[1, 27]] },
|
||||
{ from: 'Unknown2', to: 'RadioToken', includes: [2] },
|
||||
{ from: 'Unknown3', to: 'CSSObject', ranges: [[1, 34]] },
|
||||
{ from: 'Unknown3', to: 'RadioToken', includes: [2] },
|
||||
{ from: 'Unknown3', to: 'string[]', includes: [5] },
|
||||
{ from: 'Unknown5', to: 'RadioToken', includes: [1, 3] },
|
||||
{ from: 'Unknown5', to: 'CSSInterpolation[]', includes: [2] },
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class RadioToken' },
|
||||
{ source: 'class RadioToken', target: 'partial class RadioToken : TokenWithCommonCls' },
|
||||
{ source: 'class Radio', target: 'partial class Radio<TValue>' },
|
||||
{ source: `'"\\\\a0"'`, target: `"'\\\\\\\\a0'"`, },
|
||||
{ source: 'getDotSize', target: 'GetDotSize' },
|
||||
{ source: 'public UseComponentStyleResult ExportDefault', target: 'protected override UseComponentStyleResult UseComponentStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
// 未完成测试的组件
|
||||
|
|
@ -1084,23 +1133,7 @@ export const data1: Component[] = [
|
|||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Radio',
|
||||
src: ['components/radio/style/index.tsx'],
|
||||
dist: 'components/radio/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
defaultClass: 'Radio',
|
||||
typeMap: [
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class ComponentToken', target: 'partial class RadioToken' },
|
||||
{ source: 'class RadioToken', target: 'partial class RadioToken : TokenWithCommonCls' },
|
||||
{ source: 'class Radio', target: 'partial class Radio' },
|
||||
{ source: 'public CSSInterpolation[] GenComponentStyleHook', target: 'protected override CSSInterpolation[] UseStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Rate',
|
||||
src: ['components/rate/style/index.tsx'],
|
||||
|
|
@ -1527,24 +1560,4 @@ export const data1: Component[] = [
|
|||
|
||||
// 用于生成的实例，将需要生成的组件配置放到这里
|
||||
export const components: Component[] = [
|
||||
{
|
||||
name: 'Grid',
|
||||
src: ['components/grid/style/index.ts'],
|
||||
dist: 'components/grid/Style.cs',
|
||||
csOptions: {
|
||||
...defaultOptions,
|
||||
defaultClass: 'GridStyle',
|
||||
propertyMap: '_tokens',
|
||||
typeMap: [
|
||||
{ from: 'Unknown1', to: 'GridRowToken', includes: [1] },
|
||||
{ from: 'Unknown2', to: 'GridColToken', includes: [1] },
|
||||
{ from: 'Unknown3', to: 'CSSObject', includes: [1] },
|
||||
],
|
||||
transforms: [
|
||||
{ source: 'class GridRowToken', target: 'class GridRowToken : TokenWithCommonCls' },
|
||||
{ source: 'class GridColToken', target: 'class GridColToken : TokenWithCommonCls' },
|
||||
{ source: 'public CSSInterpolation[] GenComponentStyleHook', target: 'protected override CSSInterpolation[] UseStyle' },
|
||||
]
|
||||
}
|
||||
},
|
||||
];
|
||||
|
|
@ -78,9 +78,10 @@ export type CallExpression = {
|
|||
|
||||
export type ConditionalExpression = {
|
||||
kind: CsKinds;
|
||||
left: string;
|
||||
right: string;
|
||||
operator: string;
|
||||
condition?: string;
|
||||
left?: string;
|
||||
right?: string;
|
||||
operator?: string;
|
||||
whenFalse?: any;
|
||||
whenTrue?: any;
|
||||
}
|
||||
|
|
@ -458,6 +459,12 @@ export class CsFunction {
|
|||
codes.push(`${tab}var ${declaration.name} = ${objCodes[0].trimStart()}`);
|
||||
codes.push(...objCodes.slice(1));
|
||||
break;
|
||||
case CsKinds.ConditionalExpression:
|
||||
const condExp = this.createConditional(tab, value as ConditionalExpression);
|
||||
const rootEnd = condExp.length <= 1 ? ";" : "";
|
||||
codes.push(`${tab}var ${declaration.name} = ${condExp[0]}${rootEnd}`);
|
||||
codes.push(...condExp.slice(1));
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -466,7 +473,11 @@ export class CsFunction {
|
|||
|
||||
private createConditional(tab: string, conditional: ConditionalExpression): string[] {
|
||||
const codes: string[] = [];
|
||||
codes.push(`${tab}${conditional.left} ${castOperator(conditional.operator)} ${castParameter(conditional.right)}`);
|
||||
if (conditional.condition) {
|
||||
codes.push(`${conditional.condition}`);
|
||||
} else {
|
||||
codes.push(`${tab}${conditional.left} ${castOperator(conditional.operator!)} ${castParameter(conditional.right!)}`);
|
||||
}
|
||||
const parse = (when: any, operator: string) => {
|
||||
if (!when) return;
|
||||
switch (when.kind) {
|
||||
|
|
@ -479,8 +490,14 @@ export class CsFunction {
|
|||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (isString(conditional.whenTrue) && isString(conditional.whenFalse)) {
|
||||
const condLine = codes.length - 1;
|
||||
codes[condLine] = `${codes[condLine]} ? ${conditional.whenTrue} : ${conditional.whenFalse}`;
|
||||
} else {
|
||||
parse(conditional.whenTrue, '?');
|
||||
parse(conditional.whenFalse, ':');
|
||||
}
|
||||
return codes;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -178,16 +178,22 @@ function createObjectBinding(initializer: string, elements: any[]): ObjectBindin
|
|||
function createConditionalExpression(exp: ts.ConditionalExpression): ConditionalExpression {
|
||||
const cond = exp.condition as any;
|
||||
const condition: ConditionalExpression = {
|
||||
kind: CsKinds.ConditionalExpression,
|
||||
left: cond.left.getText(),
|
||||
right: cond.right.getText(),
|
||||
operator: cond.operatorToken.getText()
|
||||
kind: CsKinds.ConditionalExpression
|
||||
}
|
||||
if (cond.kind === ts.SyntaxKind.Identifier) {
|
||||
condition.condition = cond.getText();
|
||||
} else {
|
||||
condition.left = cond.left.getText();
|
||||
condition.right = cond.right.getText();
|
||||
condition.operator = cond.operatorToken.getText();
|
||||
}
|
||||
const getWhenCond = (exp: ts.Expression) => {
|
||||
if (!exp) return undefined;
|
||||
switch (exp.kind) {
|
||||
case ts.SyntaxKind.ObjectLiteralExpression:
|
||||
return createObjectExpression('', exp as ts.ObjectLiteralExpression);
|
||||
default:
|
||||
return exp.getText();
|
||||
}
|
||||
}
|
||||
condition.whenTrue = getWhenCond(exp.whenTrue);
|
||||
|
|
@ -306,6 +312,9 @@ function createArrowFunction(funcName: string, arrowFunc: ts.ArrowFunction, kind
|
|||
} else if (declaration.initializer?.kind === ts.SyntaxKind.ObjectLiteralExpression) {
|
||||
const objExp = createObjectExpression('', declaration.initializer as ts.ObjectLiteralExpression);
|
||||
statements.push({ kind: CsKinds.VariableDeclaration, name: declaration.name.getText(), value: objExp });
|
||||
} else if (declaration.initializer?.kind === ts.SyntaxKind.ConditionalExpression) {
|
||||
const condExp = createConditionalExpression(declaration.initializer as ts.ConditionalExpression);
|
||||
statements.push({ kind: CsKinds.VariableDeclaration, name: declaration.name.getText(), value: condExp });
|
||||
} else {
|
||||
statements.push({ kind: CsKinds.VariableDeclaration, name: declaration.name.getText(), value: declaration.initializer?.getText() });
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
@using Microsoft.AspNetCore.Components.Web
|
||||
@using CssInCSharp
|
||||
@namespace blazorserver.Pages
|
||||
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<component type="typeof(StyleOutlet)" render-mode="ServerPrerendered" />
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<base href="~/" />
|
||||
|
|
@ -12,7 +13,6 @@
|
|||
<link rel="preconnect" href="https://C9UTAZSOWW-dsn.algolia.net" crossorigin />
|
||||
<link rel="stylesheet" href="@("https://unpkg.com/@docsearch/css@3.0.0/dist/style.css")" />
|
||||
<link href="_content/AntDesign.Docs/css/default.css" rel="stylesheet">
|
||||
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
|
||||
</head>
|
||||
<body>
|
||||
<app>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче