要将浮动标签保持与MaterialAutoSuggestInputComponent中的图标左对齐,可以使用一些CSS样式来自定义标签的对齐方式。以下是一个示例解决方案:
.mat-autocomplete-panel .mat-option-text {
display: flex;
align-items: center;
}
.mat-autocomplete-panel .mat-option-text mat-icon {
margin-right: 8px;
}
import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
@Component(
selector: 'my-component',
styleUrls: ['my_component.css'],
template: '''
search
''',
directives: [
MaterialAutoSuggestInputComponent,
MaterialSelectSearchBoxComponent,
NgModel,
],
)
class MyComponent {
List options = ['Option 1', 'Option 2', 'Option 3'];
String selectedOption;
String searchTerm;
}
div
元素中,并添加样式类align-icons
:
通过以上步骤,浮动标签将保持与图标左对齐。可以根据需要调整样式以实现所需的对齐方式。