Office UI Fabric/Fluent UI Dropdown Custom Rendering

3.3k Views Asked by At

I'm looking at the options for customise fluent UI dropdown, based on the doc there are 4 options: https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown

    <Dropdown
      placeholder="Select an option"
      label="Custom example"
      ariaLabel="Custom dropdown example"
      onRenderPlaceholder={onRenderPlaceholder}
      onRenderTitle={onRenderTitle}
      onRenderOption={onRenderOption}
      onRenderCaretDown={onRenderCaretDown}
      styles={dropdownStyles}
      options={exampleOptions}
    />
  1. onRenderPlaceholder
  2. onRenderTitle
  3. onRenderOption
  4. onRenderCaretDown

But these options are not really close to my requirements, I want to customise the group header and dropdown panel with extra buttons.

Based on the defnition in the code (IDropdownProps) there are also some exposed custom rendering are not in the docs, just curiouse is there any sample use case for following custom renderings.

  1. onRenderItem
  2. onRenderList
  3. onRenderContainer
0

There are 0 best solutions below