Fluentui: Disable pivot item

[simkessy]

I want to disable a Pivot item. Is that possible?

[leddie24]

Hi @simkessy, after looking through the code, it doesn't seem like it's an available option. We can add this to our backlog as a feature request if it's something that you would like to have. @jdhuntington, as a Pivot code owner can you confirm/deny this?

[simkessy]

@leddie24 , I think it would be useful. Thanks.

[jdhuntington]

Thanks @simkessy - we will add this to our backlog.
In coming up with a plan, a few thoughts that come to find:

• What should happen if a disabled Pivot is also passed in as active pivot? Should it display an empty pane?
• How is a disabled pivot reflected visually?

We will likely will not be able to implement this feature in the immediate future, though would be happy to accept pull requests.

[j-te]

@simkessy it is currently possible; by using headerButtonProps, you can pass a prop. You'll have to manage the style though.
Codepen

<PivotItem 
  headerText="Recent"
  headerButtonProps={{
    'disabled': true,
    'style': {color: 'grey'}
    }}
>

[simkessy]

@j-te ill try that out!

[leddie24]

@simkessy did @j-te's solution ended up working for you?

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!

[tylerjwatson]

I'm also in need of this feature. I believe the disabled state should only disable user interaction; if it's passed in as active, or programmatically changed it should obey such behavior and leave it up to the developer to handle those cases gracefully.

I would also think that a grey disabled style should suffice, in the same vein as disabled buttons, but without modifying any backgrounds.

I'm happy to implement this if need be.

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!

[gioce90]

@simkessy it is currently possible; by using headerButtonProps, you can pass a prop. You'll have to manage the style though.
Codepen

<PivotItem 
  headerText="Recent"
  headerButtonProps={{
    'disabled': true,
    'style': {color: 'grey'}
    }}
>

Hi.
I tried and

'disabled': true,

works, but the style don't.

[j-te]

Hi.
I tried and

'disabled': true,

works, but the style don't.

@gioce90 Seems to be working on ver 7.25.0. Happy to help if you can show us your code.