Closed theunreal closed 4 years ago
In general, disabled
should live on the appropriate <button>
/ <a>
elements, but it might make sense to have a style for disabled list items.
cc @kara
This would be nice to have.
My use case: settings page, using md-list for settings, and some of which may be disabled.
This makes a lot of sense to me. I have a md-nav-list and being able to disable some options depending on account settings seems appropriate. I think this would function the same as md-menu.
+1
I'm using md-nav-list as a menu and need to be able to disable some or all of the list based on application state. I tried using md-button as the list items, but it doesn't render properly.
in #3624 says that not putting the list-item to be disabled, yet this is still open.. what is the status on this?
I understand that the native anchor element has no disabled
attribute but its hard to follow why a[mat-button]
and a[mat-menu-item]
use disabled
input but a[mat-list-item]
does not.
My workaround for now is to handle this through CSS:
a[mat-list-item].disabled {
opacity: 0.2;
pointer-events: none;
}
<mat-nav-list>
<a mat-list-item>Clickable</a>
<a mat-list-item class="disabled">Disabled</a>
</mat-nav-list>
It's not the same as a disabled
attribute, but good enough for my use case.
Closing this since mat-action-list
exists now which can have disable items
Even mat-action-list
list doesn't seem to have disabled
style
<mat-action-list>
<button mat-list-item (click)="save()" disabled> Save </button>
<button mat-list-item (click)="undo()"> Undo </button>
</mat-action-list>
I'm using this
@Directive({
selector: 'button[mat-list-item]',
host: {
'[class.mat-list-item-disabled]': 'disabled',
'[attr.aria-disabled]': 'disabled',
'[attr.disabled]': 'disabled || null'
},
inputs: ['disabled']
})
export class ListItemDisabledButtonStylerDirective extends _ListItemDisabledStylerDirectiveMixinBase implements CanDisable { }
to add selection list's mat-list-item-disabled
and for mat-nav-list
@Directive({
selector: 'mat-list-item, a[mat-list-item]',
host: {
'[class.mat-list-item-disabled]': 'disabled',
'[attr.aria-disabled]': 'disabled'
},
inputs: ['disabled']
})
export class ListItemDisabledDirective extends _ListItemDisabledStylerDirectiveMixinBase implements CanDisable, OnChanges {
constructor(
@Optional() private matListItem?: MatListItem
) {
super();
}
public ngOnChanges(changes: SimpleChanges): void {
if (changes['disabled'] && this.matListItem) { // TODO matListItem null ?
this.matListItem.disableRipple = this.disabled;
}
}
@HostListener('click', ['$event'])
public clickHandler(event: Event): boolean {
if (this.disabled) {
event.preventDefault();
return false;
}
return true;
}
}
@william-lohan good catch, I filed #17574
This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.
Bug, feature request, or proposal:
Proposal
What is the expected behavior?
Angular material2 list [disabled] item. An option to bind
[disabled]
tomd-list-item
in order to disable it (same as how the button disabled property works).What is the current behavior?
no [disabled] property binding with md-list-item
What is the use-case or motivation for changing an existing behavior?
A list is not a button, but used for navigation and accessing data. [disabled] property can be very useful in such cases.
Which versions of Angular, Material, OS, browsers are affected?
All