bootstrap btn-variant-mixin功能应该在其他组件中实现，如下拉菜单,

bnlyeluc 于 6个月前发布在 Bootstrap

关注(0)|答案(1)|浏览(82)

先决条件

我拥有 searched 用于重复或关闭的功能请求
我已阅读了 contributing guidelines

建议

这是 btn-variant-mixin

在这个示例中，其他组件也应该实现相同的功能，我选择的是 dropdonws

按钮颜色显示为黑色，因为选定的颜色不符合最低对比度比例，但这个选项对于其他组件不可用。

// Define the dropdown-variant mixin
@mixin dropdown-variant(
  $background,
  $border,
  $color: color-contrast($background),
) {
  --#{$prefix}dropdown-color: #{$color};
  --#{$prefix}dropdown-bg: #{$background};
  --#{$prefix}dropdown-border-color: #{$border};
}

// Use the mixin inside .dropdown-menu
.dropdown-menu {
  // Use the mixin for the default variant
  @include dropdown-variant(red, blue, yellow);
}

动机和背景

Bootstrap

来源：https://github.com/twbs/bootstrap/issues/38211

1条答案

按热度按时间

i2loujxw1#

你好，devhoussam1998

// Define the dropdown-variant mixin
@mixin dropdown-variant(
  $background,
  $border,
  $color: color-contrast($background),
) {
  --#{$prefix}dropdown-color: #{$color};
  --#{$prefix}dropdown-bg: #{$background};
  --#{$prefix}dropdown-border-color: #{$border};
}

// Define the dropdown-variant-mixin
@mixin dropdown-variant-mixin($background, $border) {
  @include dropdown-variant($background, $border);
  .dropdown-toggle {
    @include btn-variant($background, $border);
  }
}

// Use the dropdown-variant-mixin inside .dropdown-menu
.dropdown-menu {
  // Use the mixin for the default variant
  @include dropdown-variant-mixin(red, blue,yellow);
}

在这段代码中，下拉菜单变体混入接受两个参数：$background和$border,然后将它们传递给下拉菜单变体混入。此外，btn-variant混入被包含在下拉菜单变体混入中，这确保了下拉菜单切换内部的按钮也具有相同的背景和边框颜色。
实际上，我不确定它是否会起作用，因为我没有找到可以测试我的代码的文件，但我希望这对你有所帮助！

赞(0）回复(0）举报 6个月前

我来回答

bootstrap btn-variant-mixin功能应该在其他组件中实现，如下拉菜单,

先决条件

建议

动机和背景

1条答案

相关问题

热门标签

最新问答