Custom ApiHeader

In some business scenarios, users of the theme package may need to customize some content in ApiHeader. This can be achieved by customizing the slot.

Create a ApiHeader folder in the .dumi/theme/slots directory and add an index.tsx file. Then add the following code to customize the display of ApiHeader:

//.dumi/theme/slots/ApiHeader/index.tsx
import { FC, memo } from 'react';

import { SmileOutlined } from '@ant-design/icons';

import { ApiHeader as Header, siteSelectors, useSiteStore } from '@easyx.ai/dumi-theme-easyxai';

const ApiHeader: FC = memo(() => {
  const props = useSiteStore(siteSelectors.apiHeader);
  const { pkg } = props;

  const packages = [
    {
      label: 'icon',
      icon: <SmileOutlined />,
      children: 'demo',
      url: `https://www.npmjs.com/package/${pkg}`,
    },
  ];

  return <Header serviceList={packages} {...props} />;
});

export default ApiHeader;

For the complete configuration of the ApiHeader component, please refer to the ApiHeader component documentation.

‌
‌
‌
‌

Custom ApiHeader

In some business scenarios, users of the theme package may need to customize some content in ApiHeader. This can be achieved by customizing the slot.

Create a ApiHeader folder in the .dumi/theme/slots directory and add an index.tsx file. Then add the following code to customize the display of ApiHeader:

//.dumi/theme/slots/ApiHeader/index.tsx
import { FC, memo } from 'react';

import { SmileOutlined } from '@ant-design/icons';

import { ApiHeader as Header, siteSelectors, useSiteStore } from '@easyx.ai/dumi-theme-easyxai';

const ApiHeader: FC = memo(() => {
  const props = useSiteStore(siteSelectors.apiHeader);
  const { pkg } = props;

  const packages = [
    {
      label: 'icon',
      icon: <SmileOutlined />,
      children: 'demo',
      url: `https://www.npmjs.com/package/${pkg}`,
    },
  ];

  return <Header serviceList={packages} {...props} />;
});

export default ApiHeader;

For the complete configuration of the ApiHeader component, please refer to the ApiHeader component documentation.