[Angular] 在按鈕角落顯示的徽章或標示的TailwindCSS作法

-

 


              <!-- 角落徽章（照你的畫面放右上角、黃色背景） -->
              <span
                class="absolute -top-2 -right-2 inline-flex items-center justify-center text-xs font-semibold rounded bg-yellow-400 text-black w-5 h-5"
              >
                2
              </span>




留言

張貼留言

這個網誌中的熱門文章

[Angular Material] 搜尋式下拉選單範例

-
  範例 https://stackblitz.com/edit/filter-select 來源 https://forum.angular.tw/t/topic/1722/4 HTML < mat-card >    < p   mat-card-title > Angular Material Select With Filter </ p >    < mat-divider ></ mat-divider >    < mat-card-content >      < br >< br >      < mat-form-field   style = "width: 100%;" >        < mat-label > Pick a language </ mat-label >        < mat-select  [ formControl ] = "control" >          < mat-option   disabled >            < input   type = "text"   matInput  [ formControl ] = "filter"   placeholder = "Filter..." >          </ mat-option > ...
閱讀完整內容

[Angular] Checkbox篩選元素作法留存 (配reactive form)

-
目標資料    questionLists :   Question []  =  [      {   qid :   10 ,   businessQType :  [ ' TSTK ' ] ,   checked :   false   },      {        qid :   20 ,        businessQType :  [ ' TSTK ' ,   ' FUTB ' ,   ' SUBB ' ,   ' FNCM ' ,   ' OSUB ' ,   ' STUN ' ] ,        checked :   false ,      },      {   qid :   30 ,   businessQType :  [ ' TSTK ' ] ,   checked :   false   },      {        qid :   40 ,        businessQType :  [ ' TSTK ' ,   ' FUTB ' ,   ' SUBB ' ,   ' FNCM ' ,   ' OSUB ' ,   ' STUN ' ] ,        checked : ...
閱讀完整內容

[Angular] 回到最上面 goTop按鈕作法

-
使用 .scrollTo({options}) 的方式 可以調用JS的smooth方式，讓滾動畫面有動畫 直接使用 .scrollTo(位置) 會有種瞬移閃現到目的地的感覺 所以看使用情境選擇使用方式 HTML        < button   mat-raised-button   color = " primary "   (click) = " goTop() " >               填完了嗎？點我回到最上方              </ button > TS    goTop ()   {      //  window.scrollTo(0, 0); // 沒動畫      window . scrollTo ( {   left :   0 ,   top :   0 ,   behavior :   ' smooth '   } ) ;    } 參考: https://stackoverflow.com/questions/36092212/smooth-scroll-angular2
閱讀完整內容