Parcourir la source

添加按钮-测试通过

qdy il y a 1 mois
Parent
révision
56a39f9a60

+ 22
- 16
projects/base-core/src/lib/components/sticky-header/sticky-header.component.html Voir le fichier

17
                [disabled]="button.disabled || button.loading || disabled"
17
                [disabled]="button.disabled || button.loading || disabled"
18
                class="flex items-center gap-2"
18
                class="flex items-center gap-2"
19
              >
19
              >
20
-               <mat-icon *ngIf="!button.loading">{{ button.icon || 'add' }}</mat-icon>
21
-               <mat-progress-spinner 
22
-                 *ngIf="button.loading" 
23
-                 diameter="20" 
24
-                 mode="indeterminate" 
25
-                 class="inline-block"
26
-               ></mat-progress-spinner>
27
-               {{ button.loading ? '处理中...' : button.title }}
20
+               <div class="flex items-center gap-2">
21
+                 <mat-icon *ngIf="!button.loading">{{ button.icon || 'add' }}</mat-icon>
22
+                 <mat-progress-spinner 
23
+                   *ngIf="button.loading" 
24
+                   diameter="20" 
25
+                   mode="indeterminate" 
26
+                   class="inline-block"
27
+                   [color]="button.color || 'primary'"
28
+                 ></mat-progress-spinner>
29
+                 <span>{{ button.loading ? '处理中...' : button.title }}</span>
30
+               </div>
28
              </button>
31
              </button>
29
            }
32
            }
30
          </div>
33
          </div>
37
            [disabled]="disabled || loading"
40
            [disabled]="disabled || loading"
38
            class="flex items-center gap-2"
41
            class="flex items-center gap-2"
39
          >
42
          >
40
-           <mat-icon *ngIf="!loading">{{ buttonIcon }}</mat-icon>
41
-           <mat-progress-spinner 
42
-             *ngIf="loading" 
43
-             diameter="20" 
44
-             mode="indeterminate" 
45
-             class="inline-block"
46
-           ></mat-progress-spinner>
47
-           {{ loading ? '处理中...' : buttonText }}
43
+            <div class="flex items-center gap-2">
44
+              <mat-icon *ngIf="!loading">{{ buttonIcon }}</mat-icon>
45
+              <mat-progress-spinner 
46
+                *ngIf="loading" 
47
+                diameter="20" 
48
+                mode="indeterminate" 
49
+                class="inline-block"
50
+                [color]="buttonColor"
51
+              ></mat-progress-spinner>
52
+              <span>{{ loading ? '处理中...' : buttonText }}</span>
53
+            </div>
48
          </button>
54
          </button>
49
        }
55
        }
50
     </div>
56
     </div>

+ 31
- 0
projects/base-core/src/lib/components/sticky-header/sticky-header.component.scss Voir le fichier

163
       }
163
       }
164
     }
164
     }
165
   }
165
   }
166
+}
167
+
168
+// 优化进度条样式,消除难看灰色背景
169
+::ng-deep .sticky-header {
170
+  button {
171
+    .mat-mdc-progress-spinner {
172
+      width: 20px;
173
+      height: 20px;
174
+      
175
+      svg {
176
+        width: 20px;
177
+        height: 20px;
178
+      }
179
+      
180
+      // 直接设置circle元素颜色,避免灰色背景
181
+      svg circle {
182
+        stroke: currentColor;
183
+        stroke-width: 10%;
184
+      }
185
+      
186
+      // 背景环(第一个circle)
187
+      svg circle:nth-child(1) {
188
+        stroke-opacity: 0.2;
189
+      }
190
+      
191
+      // 前景动画环(第二个circle)
192
+      svg circle:nth-child(2) {
193
+        stroke-opacity: 1;
194
+      }
195
+    }
196
+  }
166
 }
197
 }

Loading…
Annuler
Enregistrer