布爾瑪CSS與select2的jQuery插件

我試圖實現select2插件使用Bulma css框架，但它似乎在前端凌亂。我試過這個使用引導，是的沒有問題，因爲select2具有bootstrap兼容性。布爾瑪CSS與select2的jQuery插件

HTML：

<div class="field"> 
    <label class="label">Role</label> 
    <p class="control"> 
     <span class="select is-fullwidth"> 
      <select2 v-model="form.role" 
        placeholder="Select Role" 
        name="role" 
        :value="form.role" 
        :multiple="false" 
      > 
       <option></option> 
       <option v-for="role in roles" :value="role.id">{{ role.display_name }}</option> 
     </select2> 

    </span> 
    </p> 
</div>

來源

2017-04-13 claudios

我做了工作，也許我的例子可以幫助你。

查看

<div class="field"> 
    <label class="label">Hair</label> 
    <div class="control"> 
     <select2 class="is-medium" v-model="post.custom_data.hair" :options="{}"> 
      @foreach (config('post.cat.hair') as $id => $value) 
       <option value="{{ $id }}">{{ __($value) }}</option> 
      @endforeach 
     </select2> 
    </div> 
</div>

SASS

.select2-wrapper { 
    .select2-container { 
     .select2-selection { 
      transition: border-color $speed; 
      font-family: $family-sans-serif; 
      height: 2.285em; 
      line-height: 1.5; 
      font-size: 1rem; 
      outline: none !important; 
      display: inline-flex; 
      align-items: center; 
      width: 100%; 
      border-color: $border; 
      border-radius: $radius; 
      &:hover { 
       border-color: $border-hover; 
      } 
      .select2-selection__rendered { 
       padding-left: 0.75em; 
       padding-right: 0.75em; 
      } 
      .select2-selection__arrow { 
       height: 100%; 
       top: 0px; 
      } 
     } 

     &.select2-container--open { 
      .select2-selection { 
       border-color: $primary; 
       &:hover { 
        border-color: $primary; 
       } 
      } 
     } 
    } 

    &.is-medium { 
     .select2-container { 
      .select2-selection { 
       font-size: $size-5; 
      } 
     } 
    } 
    &.is-large { 
     .select2-container { 
      .select2-selection { 
       font-size: $size-4; 
      } 
     } 
    } 
} 

.select2-container { 
    .select2-dropdown { 
     border-color: $primary; 

     .select2-search { 
      margin: 10px; 
      .select2-search__field { 
       @extend .input; 
       border-radius: $radius !important; 
      } 
     } 

     .select2-results__options { 
      max-height: 210px; 
      .select2-results__option { 
       padding: 0.75em; 
       font-family: $family-sans-serif; 
       font-size: 1rem; 

       &.select2-results__option--highlighted { 
        background: $primary; 
       } 
      } 
     } 
    } 
}

結果

希望它可以幫助這個^^

來源

2017-04-19 12:20:35 josec89

thanks @ josec89，我可以問你，你把這個sass文件放在哪裏？ – YouneL

嗨@younel我把這個sass放在我的項目結構中（我想我稱之爲'components/select2.scss'.但這應該不重要。順便說一下，我已經使用了一些變量，這些變量是在bulma的sass文件中定義的例如$ primary），並且可能有其他變量僅在我的代碼中有效，如果您的樣式未編譯，請將其刪除 – josec89

Thanks @ josec89 – YouneL

.select2-container { 
    .select2-selection--single { 
    height: auto !important; 
    padding: 3px 0 !important; 
    border: 1px solid #dbdbdb !important; 

    .select2-selection__arrow{ 
     top: 5px !important; 
    } 

    .select2-selection__placeholder { 
     color: #dbdbdb !important; 
    } 
    } 

    .select2-dropdown { 
    border: 1px solid #dbdbdb !important; 
    border-top: 0 !important; 

    .select2-search { 
     margin: 5px; 

     .select2-search__field { 
     padding: 10px !important; 
     border-radius: 3px !important; 
     font-size: 1rem; 
     height: 2.25em; 
     box-shadow: inset 0 1px 2px rgba(10,10,10,.1); 
     max-width: 100%; 
     width: 100%; 
     border-radius: 3px !important; 
     } 
    } 

    .select2-results__options { 
     max-height: 200px !important; 

     .select2-results__option { 
     padding: 0.37em 0.75em !important; 
     font-size: 1rem; 

     &.select2-results__option--highlighted { 
     } 
     } 
    } 
    } 
}

我開的問題。

https://github.com/jgthms/bulma/issues/1555

來源

2017-12-23 19:27:05

布爾瑪CSS與select2的jQuery插件

回答

相關問題