CODEWITHSUNDEEP
fluent-uifluentui-react
serge
serge

Reputation: 15239

How to add the Search to CommandBar (MS Fluent UI)?

How to add a SearchBox to a CommandBar?

I would like to achieve something like this :
enter image description here

I use this Fluent UI CommandBar

CodePen here

const _items: ICommandBarItemProps[] = [
    {
      key: 'newItem',
      text: 'New',
      iconProps: { iconName: 'Add' },
      subMenuProps: {
        items: [
          {
            key: 'emailMessage',
            text: 'Email message',
            iconProps: { iconName: 'Mail' },
            ['data-automation-id']: 'newEmailButton', // optional
          },
          {
            key: 'calendarEvent',
            text: 'Calendar event',
            iconProps: { iconName: 'Calendar' },
          },
        ],
      },
    },
    {
      key: 'upload',
      text: 'Upload',
      iconProps: { iconName: 'Upload' },
      href: 'https://developer.microsoft.com/en-us/fluentui',
    },
    {
      key: 'share',
      text: 'Share',
      iconProps: { iconName: 'Share' },
      onClick: () => console.log('Share'),
    },
    {
      key: 'download',
      text: 'Download',
      iconProps: { iconName: 'Download' },
      onClick: () => console.log('Download'),
    },
  ];

Upvotes: 0

Views: 750

Answers (1)

serge
serge

Reputation: 15239

The information is, as usually, missing from Microsoft docs, but found on some forums the following

const _items: ICommandBarItemProps[] = [
{
   key: "search",
   onRender: () => <SearchBox placeholder="Search" className="searchBox" />
},

Upvotes: 1

Related Questions