Угловой Материал Дартс - PullRequest
Новая
       10

Угловой Материал Дартс

0 голосов
/ 26 марта 2019

Я использую <material-date-range-picker ...>, но отображается высокий. Я обнаружил, что material_date_range_picker.scss объявляет .main-content { ...; height: $datepicker-main-content-height; ... }, а $ datepicker-main-content-height определяется как $ mat-grid * 9, что составляет 72px. Компонент выглядит некрасиво и ломает макет. Другие компоненты выбора даты не определяют высоту и выглядят нормально. Я попытался переопределить высоту в моем CSS на :host .main-content { height: auto !important}, но поскольку Angular добавляет некоторые классы _ngcontent-rnp-XX к элементам, он не применяется. Кто-нибудь знает, как стилизовать материал-дата-диапазон выбора высота? (И почему он имеет фиксированную высоту).

1 Ответ

1 голос
/ 27 марта 2019

Так что вы можете попробовать использовать этот миксин, который лучше подойдет для вашей среды. https://github.com/dart-lang/angular_components/blob/c644746d2824df7cfaf0a34f900b1f8557caddbc/angular_components/lib/material_datepicker/_mixins.scss#L221

Вы также можете увидеть, как он устанавливает высоту .main-content, используя: ng-deep. Для продуктов Google мы не хотим, чтобы люди настраивали с помощью ng-deep, поскольку это делает все частью публичного API, что затрудняет миграцию, но в этом контенте все должно быть в порядке.

Мы рассмотрим вопрос о том, чтобы предоставить командам возможность смешивать их для более удобного обслуживания.

Я рад, что вам нравится использовать виджеты, но я бы попросил вас позаботиться о вашей критике. Этот конкретный дизайн хорошо работает для наших продуктов, и многие наши дизайнеры любят его и думают, что он выглядит красиво. Я понимаю, что это не работает для вашего варианта использования, но, надеюсь, настройки, описанные выше, будут работать для вас.

...