У меня есть приложение angular 17 с новейшими компонентами Material.
Я широко использую компонент Tooltip, и у меня возникают проблемы с его настройкой.
Мне удалось изменить размер шрифта, используя следующий код в CSS:
$tt-typography: mat.define-typography-config(
$caption: mat.define-typography-level(16px, 1, 400)
);
@include mat.tooltip-typography($tt-typography);
Но это касается только размера и насыщенности шрифта. Я также хотел бы настроить высоту строки, ширину всплывающей подсказки и так далее.
Могу ли я сделать это с помощью этого кода? Если да, то какие еще опции я могу установить в нем для этих целей?
Я должен упомянуть, что я уже пробовал различные селекторы CSS, которые должны переопределять значения по умолчанию для Материала (что, очевидно, является самым простым и легким способом, если это возможно), но пока безуспешно.
define-typography-level
имеет следующее определение в исходном коде
изменение кода:
// `font-size`, `line-height`, `font-weight`, `font-family`, and `letter-spacing`.
$my-custom-typography-config: mat.define-typography-config(
$caption:
mat.define-typography-level(
$font-size: 24px,
$line-height: 24px,
$font-weight: 400,
$font-family: Helvetica,
$letter-spacing: normal,
),
);
@include mat.tooltip-typography($my-custom-typography-config);
## Typography levels
A **typography level** is a collection of typographic styles that corresponds to a specific
part of an application's structure, such as a header. Each level includes styles for font family,
font weight, font size, and letter spacing. Angular Material uses the [typography levels
from the 2018 version of the Material Design specification][2018-typography], outlined in the
table below.
| Name | Description |
|-----------------|--------------------------------------------------------------|
| `headline-1` | One-off header, usually at the top of the page (e.g. a hero header). |
| `headline-2` | One-off header, usually at the top of the page (e.g. a hero header). |
| `headline-3` | One-off header, usually at the top of the page (e.g. a hero header). |
| `headline-4` | One-off header, usually at the top of the page (e.g. a hero header). |
| `headline-5` | Section heading corresponding to the `<h1>` tag. |
| `headline-6` | Section heading corresponding to the `<h2>` tag. |
| `subtitle-1` | Section heading corresponding to the `<h3>` tag. |
| `subtitle-2` | Section heading corresponding to the `<h4>` tag. |
| `body-1` | Base body text. |
| `body-2` | Secondary body text. |
| `caption` | Smaller body and hint text. |
| `button` | Buttons and anchors. |
[2018-typography]: https://m2.material.io/design/typography/the-type-system.html#type-scale
### Define a level
You can define a typography level with the `define-typography-level` Sass function. This function
accepts, in order, CSS values for `font-size`, `line-height`, `font-weight`, `font-family`, and
`letter-spacing`. You can also specify the parameters by name, as demonstrated in the example below.
```scss
@use '@angular/material' as mat;
$my-custom-level: mat.define-typography-level(
$font-family: Roboto,
$font-weight: 400,
$font-size: 1rem,
$line-height: 1,
$letter-spacing: normal,
);
```
@TheCuBeMan Не рекомендуется изменять исходный код, поскольку он исчезнет при обновлении, лучше использовать ту же функцию и попытаться добиться с ее помощью того, что вам нужно.
Я имею в виду, что не хочу менять исходный код именно по этой причине. Я спрашиваю, есть ли способ манипулировать этим кодом «извне», с помощью кода из моих собственных файлов CSS.
@TheCuBeMan Я не уверен, зависит от требований, возможно, задам новый вопрос, кто-то может знать, я не в курсе, извините :(
$custom-typography: mat.define-typography-config(
$caption: mat.define-typography-level(16px, 1.5, 400)
);
@include mat.tooltip-typography($custom-typography);
::ng-deep .mat-tooltip {
max-width: 200px;
line-height: 1.5;
background-color: #333;
color: #fff;
border-radius: 4px;
padding: 8px;
}
Спасибо!! Есть ли способ добавить определения к исходной функции Материала за пределами их файла CSS? Я имею в виду, каким-то образом через код моего приложения, чтобы быть уверенным, что он все еще там, когда файлы материалов обновляются или изменяются по какой-либо причине.