/
githubmirror
/
components
Обзор
Документация
Войти
/
githubmirror
/
components
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
src/material/chips/chip-set.scss
83 строки
2 KB
Kristiyan Kostadinov
fix(material/chips): chip input not showing placeholder (#30664)
20 мар 2025, 15:37
Не верифицирован
20 мар 2025, 15:37
aba4c44
Код
Авторство
О чём код?
@use '../core/style/vendor-prefixes'; // Ensures that the internal chip container spans the entire outer container width, if the // outer container width is customized. This is used by some wrapper components in g3. .mat-mdc-chip-set { display: flex; &:focus { outline: none; } .mdc-evolution-chip-set__chips { min-width: 100%; margin-left: -8px; margin-right: 0; } .mdc-evolution-chip { margin: 4px 0 4px 8px; } [dir='rtl'] & { .mdc-evolution-chip-set__chips { margin-left: 0; margin-right: -8px; } .mdc-evolution-chip { margin-left: 0; margin-right: 8px; } } } .mdc-evolution-chip-set__chips { display: flex; flex-flow: wrap; min-width: 0; } // Angular Material supports vertically-stacked chips, which MDC does not. .mat-mdc-chip-set-stacked { flex-direction: column; align-items: flex-start; .mat-mdc-chip { width: 100%; } .mdc-evolution-chip__graphic { flex-grow: 0; } .mdc-evolution-chip__action--primary { flex-basis: 100%; justify-content: start; } } input.mat-mdc-chip-input { flex: 1 0 150px; margin-left: 8px; [dir='rtl'] & { margin-left: 0; margin-right: 8px; } // The form field hides the placeholder by default, // but we actually want to show it if there are chips. .mat-mdc-form-field:not(.mat-form-field-hide-placeholder) & { @include vendor-prefixes.input-placeholder { opacity: 1; } } // The margin isn't necessary if the input is placed next to the chip set, // because it'll be on the next line. .mat-mdc-chip-set + & { margin-left: 0; margin-right: 0; } }