style: date picker panel row main axis between (#565)

* style: date picker panel row main axis between * Create itchy-planets-brush.md * feat: mod picker panel header separator and style
alauda · Jun 13, 2024 · 98c3372 · 98c3372
1 parent 654abd7
commit 98c3372
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 13 deletions.
diff --git a/.changeset/itchy-planets-brush.md b/.changeset/itchy-planets-brush.md
@@ -0,0 +1,5 @@
+---
+"@alauda/ui": patch
+---
+
+style: date picker panel row main axis between
diff --git a/src/date-picker/calendar/header/style.scss b/src/date-picker/calendar/header/style.scss
@@ -13,23 +13,35 @@ $block: aui-calendar-header;
   &__nav-content {
     flex: 1;
     display: flex;
+    flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     font-size: use-var(font-size-l);
     color: use-text-color(main);
     font-weight: use-var(font-weight-bolder);
 
-    a {
+    .separator {
+      margin: 0 use-var(spacing-s);
+    }
+
+    .aui-button--text {
       color: use-text-color(main);
 
+      .aui-button__content {
+        font-size: use-var(font-size-l);
+        font-weight: use-var(font-weight-bolder);
+        padding: 0;
+      }
+
       &:hover {
+        background-color: transparent;
         color: use-rgb(primary);
         text-decoration: none !important;
       }
-    }
 
-    a + a {
-      margin-left: 5px;
+      + .aui-button--text {
+        margin-left: 0;
+      }
     }
   }
 }

diff --git a/src/date-picker/calendar/header/template.html b/src/date-picker/calendar/header/template.html
@@ -17,30 +17,35 @@
     *ngIf="dateNavRange === DateNavRange.Month"
     [class]="bem.element('nav-content')"
   >
-    <a
-      href="javascript:;"
+    <button
+      aui-button="text"
       (click)="clickNav(DateNavRange.Year)"
     >
       {{ headerRange?.start?.year() }}{{ 'year_suffix' | auiI18n }}
-    </a>
-    <a
-      href="javascript:;"
+    </button>
+    <div class="separator">
+      <span *ngIf="!('year_suffix' | auiI18n) && !('month_suffix' | auiI18n)">
+        /
+      </span>
+    </div>
+    <button
+      aui-button="text"
       (click)="clickNav(DateNavRange.Month)"
     >
       {{ headerRange?.start?.month() + 1 }}{{ 'month_suffix' | auiI18n }}
-    </a>
+    </button>
   </span>
 
   <span
     *ngIf="dateNavRange === DateNavRange.Year"
     [class]="bem.element('nav-content')"
   >
-    <a
-      href="javascript:;"
+    <button
+      aui-button="text"
       (click)="clickNav(DateNavRange.Year)"
     >
       {{ headerRange?.start?.year() }}{{ 'year_suffix' | auiI18n }}
-    </a>
+    </button>
   </span>
 
   <span

diff --git a/src/date-picker/calendar/panel/picker-panel.style.scss b/src/date-picker/calendar/panel/picker-panel.style.scss
@@ -61,6 +61,7 @@ $left-mask-shadow: -12px 0 0 0 use-rgb(popper-bg);
     flex: 1;
     display: flex;
     align-items: center;
+    justify-content: space-between;
     @include text-set(m);
 
     width: 100%;