Class Names

Tip

自定義樣式時，您需要使用 css className。 您可以參考這些名稱進行預定制

當然，如果你像我一樣不喜歡在寫死 className，避免日後升級更改 className 導致無預期的跑版，你可以使用我們提供的變量

export default {
    root: 'bear-react-carousel__root',
    content: 'bear-react-carousel__content',
    container: 'bear-react-carousel__container',
    containerInit: 'bear-react-carousel__container-init',
    slideItem: 'bear-react-carousel__slide-item',
    slideItemImage: 'bear-react-carousel__slide-item__image',
    slideItemCard: 'bear-react-carousel__slide-item__card',
    navGroup: 'bear-react-carousel__nav-group',
    navPrevButton: 'bear-react-carousel__nav-prev-button',
    navNextButton: 'bear-react-carousel__nav-next-button',
    navIcon: 'bear-react-carousel__nav-icon',
    paginationGroup: 'bear-react-carousel__pagination-group',
    paginationButton: 'bear-react-carousel__pagination-button',
    paginationContent: 'bear-react-carousel__pagination-content',

    testNumber: 'bear-react-carousel__test-number',
    testWindowSize: 'bear-react-carousel__window-size',
    cloneIconGroup: 'bear-react-carousel__clone-icon-group',
    cloneIcon: 'bear-react-carousel__clone-icon',
};

如何利用這個特性?

import {elClassName} from 'bear-react-carousel';

const TextAnimationsRoot = styled.div`
  --primary-color: #c4a265;

  .${elClassName.slideItem}{
  
      &[data-active]:not([data-is-clone]){
          ${AnimationsBox}{
               transform: translateY(-60px);
               opacity: 1;
          }
      } 
      
      :before{
        content: "";
        background: url('/static/sample/food/blackt-will.png') center center repeat;
        z-index: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.5;
      }
  }
  
`;

Layer

.${elClassName.content}{
    position: absolute;
    overflow: hidden;

    /* fix safari image auto width: 100% */
    min-width: 100%;
    max-width: 100%;
}

乍看之下，這一層設定感覺是多餘的，但是這樣做我們就可以將 pagination-group 或 nav 分開，讓他們不會受到外層 overflow 的影響。

position: absolute; 這個屬性設定可以防止某些內部 CSS 設置把 container 擠開造成跑版