添加没有ChildContent时的处理以及相应的Demo

ant-design-blazor · Mar 28, 2024 · 34aadef · 34aadef
1 parent 5903baf
commit 34aadef
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 32 deletions.
diff --git a/components/colorpicker/ColorPicker.razor b/components/colorpicker/ColorPicker.razor
@@ -3,19 +3,25 @@
 
 @using AntDesign.Internal
 
-@if (ChildContent != null)
-{
-    <div class="@ClassMapper.Class" @ref="@Ref" Id="@Id" style="display: inline-flex; @Style"
-         @onclick="OnClickDiv"
-         @onmouseenter="OnTriggerMouseEnter"
-         @onmouseleave="OnTriggerMouseLeave"
-         @oncontextmenu="OnTriggerContextmenu"
-         @onfocusin="OnTriggerFocusIn"
-         @onfocusout="OnTriggerFocusOut"
-         @oncontextmenu:preventDefault>
-        @ChildContent
-    </div>
-}
+<div class="@ClassMapper.Class" @ref="@Ref" Id="@Id" style="display: inline-flex; @Style"
+        @onclick="OnClickDiv"
+        @onmouseenter="OnTriggerMouseEnter"
+        @onmouseleave="OnTriggerMouseLeave"
+        @oncontextmenu="OnTriggerContextmenu"
+        @onfocusin="OnTriggerFocusIn"
+        @onfocusout="OnTriggerFocusOut"
+        @oncontextmenu:preventDefault>
+        @if (ChildContent != null)
+        {
+            @ChildContent
+        }else{
+            <div class="ant-color-picker-block-outer">
+                <div class="ant-color-picker-block">
+                    <div class="ant-color-picker-block-inner" style="@($"background: {_value.ToString(AntColorOutputFormats.RGBA)};")"></div>
+                </div>
+            </div>
+        }
+</div>
 @if (Unbound != null)
 {
     @Unbound(RefBack)
@@ -66,16 +72,18 @@
                         </div>
                     </div>
                     <div class="ant-popover-title">
-                        <GridRow align="middle">
-                            <GridCol Span="4">
-                                <div class="ant-color-picker-dot ant-color-picker-dot-current ant-ripple">
-                                    <div class="ant-color-picker-fill" style="@($"background: {_value.ToString(AntColorOutputFormats.RGBA)};")"></div>
-                                </div>
-                            </GridCol>
-                            <GridCol Span="20">
+                        <GridRow Align="middle" Justify="center">
+                            <GridCol Span="22">
                                 <GridRow><GridCol Span="24"><Slider class="ant-color-picker-slider-hue" TValue="double" Value="@_value.H" OnChange="UpdateBaseColorSlider" Step="1" Min="0" Max="360" @onclick:stopPropagation="true"/></GridCol></GridRow>
                                 <GridRow><GridCol Span="24"><Slider TValue="double" Value="@_value.A" OnChange="SetAlpha" Step="1" Min="0" Max="255" @onclick:stopPropagation="true" /></GridCol></GridRow>
                             </GridCol>
+                            <GridCol Span="2">
+                                <div class="ant-color-picker-block-outer">
+                                    <div class="ant-color-picker-block">
+                                        <div class="ant-color-picker-block-inner" style="@($"background: {_value.ToString(AntColorOutputFormats.RGBA)};")"></div>
+                                    </div>
+                                </div>
+                            </GridCol>
                         </GridRow>
                         <GridRow>
                             <GridCol Span="24">

diff --git a/components/colorpicker/style/index.less b/components/colorpicker/style/index.less
@@ -5,7 +5,6 @@
 
 .@{colorpicker-prefix-cls} {
     .reset-component();
-
     width: 312px;
     height: 250px;
     position: relative;
@@ -28,18 +27,23 @@
         background: linear-gradient(90deg, #FF0000, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #FF0000)
     }
 
-    &-dot {
-        height: 38px;
-        min-width: 38px;
-        width: 100%;
-        transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-radius 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-        border-radius: var(--ant-default-borderradius);
-        box-shadow: 0 0 6px rgba(127,130,134,.18);
+    &-block {
+        position: relative;
+        height: 30px;
+        width: 30px;
+        border:1px solid gray;
+        border-radius: 15%;
+        background-size: 50% 50%;
+        background-color: white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
     }
 
-    &-dot &-fill {
-        width: 100%;
-        height: 100%;
+    &-block-inner {
+        width: 22px;
+        height: 22px;
+        border: 1px solid rgba(0, 0, 0, 0.06);
         border-radius: inherit;
     }
 }
diff --git a/site/AntDesign.Docs/Demos/Components/ColorPicker/demo/Basic.razor b/site/AntDesign.Docs/Demos/Components/ColorPicker/demo/Basic.razor
@@ -1,7 +1,6 @@
 <h1>@colorValue</h1>
 
 <ColorPicker @bind-TextValue="@colorValue" Title="Title" Trigger="@(new AntDesign.Trigger[] { AntDesign.Trigger.Click})">
-    <Button type="primary">选择颜色</Button>
 </ColorPicker>
 
 

diff --git a/site/AntDesign.Docs/Demos/Components/ColorPicker/demo/Content.razor b/site/AntDesign.Docs/Demos/Components/ColorPicker/demo/Content.razor
@@ -0,0 +1,10 @@
+<h1>@colorValue</h1>
+
+<ColorPicker @bind-TextValue="@colorValue" Title="Title" Trigger="@(new AntDesign.Trigger[] { AntDesign.Trigger.Click})">
+    <Button type="primary">选择颜色</Button>
+</ColorPicker>
+
+
+@code {
+    private string colorValue = "#00FF00FF";
+}
diff --git a/site/AntDesign.Docs/Demos/Components/ColorPicker/demo/content.md b/site/AntDesign.Docs/Demos/Components/ColorPicker/demo/content.md
@@ -0,0 +1,14 @@
+---
+order: 3
+title:
+  zh-CN: ChildContent
+  en-US: ChildContent
+---
+
+## zh-CN
+
+使用自定义内容。
+
+## en-US
+
+Use Child Content.