欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ant-design-vue按鈕樣式擴(kuò)展方法詳解

 更新時(shí)間：2023年06月11日 11:37:54   作者：我是好人  
這篇文章主要為大家介紹了ant-design-vue按鈕樣式擴(kuò)展方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

版本信息

ant-design-vue 1.x

ant-design-vue目前是提供了這些樣式

然后我感覺(jué)應(yīng)該有個(gè)很常見(jiàn)的是需要一個(gè)黃色警告的按鈕

期望的用法當(dāng)然就是type="warning"啦。

話不多說(shuō)，直接上代碼。

在項(xiàng)目里添加一個(gè)less文件

@import '~ant-design-vue/lib/style/themes/default.less';
@import '~ant-design-vue/lib/button/style/mixin.less';
.create-type(@type,@bgColor,@textColor:white) {
  .ant-btn {
    &-@{type} {
      .button-variant-primary(@textColor;@bgColor);
    }
    &-background-ghost&-@{type} {
      .button-variant-ghost(@bgColor);
    }
  }
}
.create-type(warning, #ffae00);

然后就可以在項(xiàng)目中這樣使用了

<a-button type="warning">warning</a-button>
<a-button type="warning" ghost>warning+ghost</a-button>

注意事項(xiàng)

需要開啟less-loader的javascriptEnabled選項(xiàng)

vue-cli項(xiàng)目參考下面代碼

module.exports = {
    css:{
        loaderOptions:{
            less:{
                javascriptEnabled:true
            }
        }
    }
}

以上就是ant-design-vue按鈕樣式擴(kuò)展方法詳解的詳細(xì)內(nèi)容，更多關(guān)于ant-design-vue按鈕樣式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論