jquery - 如何更改 Tabulator 中的排序箭头颜色

Question

我正在尝试更改 Tabulator 列标题中的排序箭头颜色。尝试了所有组合：

.tabulator .tabulator-header .tabulator-col .tabulator-arrow

但仍然无法改变颜色？

Answer 1

这是因为它是一个 CSS 箭头，所以它实际上是您需要更改的边框颜色，有几种方法可以做到这一点。

SCSS

如果您想使用 SCSS 更新实际的源文件，那么您可以更新 tabulator.scss 文件中的几个变量并运行 gulp 以获取 CSS 文件的更新版本

//column header arrows
$sortArrowActive: #666 !default;
$sortArrowInactive: #bbb !default;

CSS

如果您只想覆盖现有样式，则需要在几个地方调整颜色（确保在包含样式表之后执行此操作）：

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
  border-bottom: 6px solid #bbb;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow {
  border-bottom: 6px solid #bbb;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow {
  border-bottom: 6px solid #666;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow {
  border-top: 6px solid #666;
}

和值分别与活动和非活动值#666相关#bbb

Answer 2

在最新版本中，您似乎需要包含border-top 和border-bottom 属性，或者您同时获得向上箭头和向下箭头。

用原色试试这些例子，看看它是如何工作的。

    .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
        background-color: red;
    }

    .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow {
        border-top: none;
        border-bottom: 6px solid green;
    }

    .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow {
        border-top: none;
        border-bottom: 6px solid blue;
    }

    .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow {
        border-top: 6px solid orange;
        border-bottom: none;
    }