[英]Issues Customizing the Ag-Grid Themes
How do I go about customizing the Ag-Grid themes (eg. ag-theme-material.css) in an existing Angular App?如何在现有的 Angular 应用程序中自定义 Ag-Grid 主题(例如 ag-theme-material.css)?
The documentation they have provided is lacking, as it doesn't explain how to perform these changes/configurations.他们提供的文档不足,因为它没有解释如何执行这些更改/配置。
Any help would greatly be appreciated.任何帮助将不胜感激。
Add ag-grid-overrides.scss file and put the saas variable you want to modify for the ag-grid theme.添加 ag-grid-overrides.scss 文件并为 ag-grid 主题放置要修改的 saas 变量。 Full list of sass variables available can be found in this link - https://github.com/ag-grid/ag-grid/tree/master/src/styles .
可以在此链接中找到可用的 sass 变量的完整列表 - https://github.com/ag-grid/ag-grid/tree/master/src/styles 。 Import ag-grid-overrides.scss in your component.ts file.
在 component.ts 文件中导入 ag-grid-overrides.scss。 You can still have your own.css file for each component as shown below in app.component.css file.
您仍然可以为每个组件拥有自己的 own.css 文件,如下面的 app.component.css 文件所示。
app.component.ts应用程序组件.ts
import '../ag-grid-overrides.scss';
app.component.html应用程序组件.html
<ag-grid-angular class="data-grid ag-theme-fresh" [gridOptions]="gridOptions">
</ag-grid-angular>
ag-grid-overrides.scss ag-grid-overrides.scss
// Customize the look and feel of the grid with Sass variables
// Up-to-date list of variables is available in the source code: https://github.com/ag-grid/ag-grid/blob/latest/src/styles/theme-fresh.scss
$icons-path: "~ag-grid/src/styles/icons/";
// changes the border color
$border-color: #FF0000;
// Changes the font size
$font-size: 14px;
// Changes the font family
//$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
// Reverts the cell horizontal padding change between ag-fresh and ag-theme-fresh
//$cell-horizontal-padding: 2px;
// changes the icon color
// $icon-color: red;
//$primary-color: green;
@import '~ag-grid/src/styles/ag-grid.scss';
@import '~ag-grid/src/styles/ag-theme-fresh.scss';
app.component.css ( not required as this is a custom class on ag-grid-angular) app.component.css(不需要,因为这是 ag-grid-angular 上的自定义类)
.data-grid {
width: 500px; height: 300px; margin-bottom: 1rem;
}
angular-cli.json角-cli.json
"styles": [
"../node_modules/ag-grid/dist/styles/ag-grid.css",
"../node_modules/ag-grid/dist/styles/ag-theme-fresh.css",
"styles.scss",
"ag-grid-overrides.scss"
]
In my case, it is used "ag-grid-enterprise": "^23.1.0" and "ag-grid-community": "^23.1.0" and for creating a custom theme for angular2+ application you should import to global style file(scss is in use for my case) several mixins file from ag-grid-community package and it will look like this:在我的例子中,它用于"ag-grid-enterprise": "^23.1.0"和"ag-grid-community": "^23.1.0"并且为angular2+应用程序创建自定义主题你应该导入到全局样式文件(我的案例使用的是 scss)来自 ag-grid-community 包的几个 mixins 文件,它看起来像这样:
@import '~ag-grid-community/src/styles/ag-grid';
@import '~ag-grid-community/src/styles/ag-theme-base/sass/ag-theme-base';
then you should include base theme with parameters set that you can override for this default theme:那么你应该包括带有参数集的基本主题,你可以为这个默认主题覆盖:
.ag-theme-base {//should have specific name, since sizes doesn't work with custom name
@include ag-theme-base(
(
foreground-color: black,
background-color: yellow,
)// this is parameters set object where you can ovveride ag-grid properties
);
}
List of the ag-grid parameters you can find link您可以找到链接的 ag-grid 参数列表
Also, you can extract this parameter and apply for other elements(not sure that it is a useful option but ag-grid allows this)此外,您可以提取此参数并应用于其他元素(不确定它是一个有用的选项,但 ag-grid 允许这样做)
.ag-header-cell {
background-color: ag-param(foreground-color);
color: ag-param(background-color);
}
Link to documentation about ag-param function link .链接到有关 ag-param function link的文档。 Link to documentation regarding theme customization link .
链接到有关主题定制链接的文档。
Example of usage in angular:角度用法示例:
<ag-grid-angular
style="width: 100%; height: 400px;"
class="ag-theme-base"
...
>
</ag-grid-angular>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.