# UI元件使用說明
###### tags: `切版` `NEUX`
###### 2020/05/22

1. 參考台灣人壽網站版面會用到之重覆元件，日後可提供他人直接引用。
2. 元件樣式使用SCSS @mixin模組化，以下將提供各元件的使用方法，方便提供於其它專案使用。

## Navs Tabs 分頁

1. 也稱導覽列的一種，常用於切換各種標籤區塊頁面，以下為範例樣式html引用class方法，實際demo可參考`index.html`實際樣式。
2. 請注意切換效果為JS所寫，日後可能有所變更，非引用class後出現。
3. **@mixin** 基本結構是寫在`src/scss/projec/abstracts/_mixins.scss`
4. **@include** 引用是在`src/scss/projec/components/_navtab.scss`
5. ClassName自訂，只要在父層@incldue tab分頁種類，即可出現樣式

例如下方父層class為tab-underLine，但要記得子層清單也加上tab名稱

<ul class="tab-underLine">
    <li class="list-main-menu active">線上申請</li>
    <li class="list-main-menu">ibon申請</li>
    <li class="list-main-menu">紙本申請</li>
    <li class="list-main-menu">醫院墊付</li>
</ul>

@include進來就可以了

.tab-underLine {
    @include navTab($tab-type: underLineTab);
}

@mixin結構說明
使用@if來判斷4種tab類型，並在@include時引用名稱即可

/// @example tab分頁樣式-4種樣式
/// @param {String} $tab-type 參數請填tab名稱，預設為'underLineTab'
/// @param {String} $selector 參數請填子層想要的class名稱, 預設為'*'
/// @param {Size} $line_Height 參數請填tab底線高度, 預設為'3px'
/// @param {Color} $line_Color 參數請填底線顏色, 預設為'$colorset, main-border-gray'
/// @param {Color} $border_color 參數請填外框顏色，預設為'$colorset, main-border-orange'
/// @param {Size} $border_radius 參數請填外框圓角，預設為'25px'
/// @param {Color} $tab_bg 參數請填tab背景顏色，預設為'$colorset, main-white'
/// @param {Color} $tab_bg_active 參數請填被點選tab之背景顏色，預設為'$colorset, main-border-orange'

@mixin navTab(
    $tab-type: underLineTab,
    $selector: "*",
    $line_Height: 3px,
    $line_Color: map-get($colorset, main-border-orange),
    $border_color: 1px solid map-get($colorset, main-border-orange),
    $border_radius: 25px,
    $tab_bg: map-get($colorset, main-white),
    $tab_bg_active: map-get($colorset, main-border-orange)
) {
    @if $tab-type == underLineTab {
        display: flex;
        justify-content: center;
        border-bottom: 1px solid map-get($colorset, main-border-gray);
        margin: 50px auto 0 auto;
        > #{$selector} {
            padding: 10px 20px;
            color: map-get($colorset, main-text-color);
            cursor: pointer;
            &.active {
                position: relative;
                &:after {
                    position: absolute;
                    content: "";
                    height: $line_Height;
                    background: $line_Color;
                    bottom: -4px;
                    left: 0;
                    width: 100%;
                }
            }
        }
    } @else if $tab-type == borderTab {
        display: flex;
        justify-content: center;
        margin: 50px auto 0 auto;
        > #{$selector} {
            width: 251px;
            max-width: 100%;
            text-align: center;
            display: block;
            font-weight: bold;
            padding: 10px;
            margin: 0 10px;
            border: $border_color;
            border-radius: $border_radius;
            cursor: pointer;
            background: $tab_bg;
            &.active {
                background: $tab_bg_active;
                color: map-get($colorset, main-white);
            }
        }
    } @else if $tab-type == squareTab {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 100%;
        margin: 50px 0 0 0;
        > #{$selector} {
            width: 21%;
            min-height: 100px;
            text-align: center;
            border-radius: $border_radius;
            border: $border_color;
            background: $tab_bg;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            &.active {
                color: map-get($colorset, main-white);
                background: $tab_bg_active;
                position: relative;
                border: none;
                min-height: 150px;
                &:after {
                    content: "";
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%) rotate(45deg);
                    bottom: -13px;
                    z-index: -1;
                    @include squareArrow($background: map-get($colorset, main-border-orange));
                }
            }
        }
    } @else if $tab-type == nogutterTab {
        display: flex;
        justify-content: center;
        margin: 45px 0 0 0;
        > #{$selector} {
            width: 251px;
            max-width: 100%;
            text-align: center;
            font-weight: bold;
            border: $border_color;
            border-radius: 20px 20px 20px 20px;
            padding: 10px 20px;
            margin: 0 -20px;
            cursor: pointer;
            &:nth-child(1n + 1) {
                border-left: transparent;
                border-right: transparent;
                border-radius: 0 0 0 0;
            }
            &:first-child {
                border-left: $border_color;
                border-right: transparent;
                border-radius: 20px 0 0 20px;
            }
            &:last-child {
                border-left: transparent;
                border-right: $border_color;
                border-radius: 0 20px 20px 0;
            }
            &.active {
                border-radius: 20px 20px 20px 20px;
                background: $tab_bg_active;
                color: map-get($colorset, main-white);
            }
        }
    }
}

其中有一個分類有包含一個方框圓弧向下箭頭($tab-type == squareTab)
另外製作@mixin，並@include放入其中

/// @example 製作方型有圓弧向下箭頭
/// @param {Size} $width 參數請填寬度，預設為'27px'
/// @param {Size} $height 參數請填高度，預設為'27px'
/// @param {Size} $border-radius 參數請填圓角，預設為'0px 0 5px 0'
/// @param {Color} $background 參數請填背景顏色，預設為'$colorset, main-bg-primary'

@mixin squareArrow(
    $width: 27px,
    $height: 27px,
    $border-radius: 0px 0 5px 0,
    $background: map-get($colorset, main-bg-primary)
) {
    width: $width;
    height: $height;
    border-radius: $border-radius;
    background: $background;
}