CODEWITHSUNDEEP
reactjstabsmaterial-ui
meez
meez

Reputation: 4759

How to create custom scroll icon inside the Material-UI scrolling Tabs

I am using Scrollable tabs from Material-UI. How do I change the svg icon of the scroll arrows?

I see there is TabScrollButton component you can use. So do I have to create one for the left and right arrow?

And in Tabs component you can pass a prop ScrollButtonComponent. But how do I have to use it?

I tried below but it isn't working yet:

import Tab from '@material-ui/core/Tab';
import Tabs from '@material-ui/core/Tabs';
import TabScrollButton from '@material-ui/core/TabScrollButton';

import { CloseIcon } from 'app/components/atoms/icons';

const MyCarousel = ({ value }: Props) => {
  const selectedItem = value;

  const scrollButton = () => {
    return (
      <div>
        <TabScrollButton orientation="horizontal" direction="right">
          {CloseIcon}
        </TabScrollButton>
      </div>
    );
  };

  return (
    <div css={styles.root}>
      <Tabs
        value={value}
        indicatorColor="primary"
        variant="scrollable"
        scrollButtons="auto"
        aria-label="scrollable auto tabs example"
        ScrollButtonComponent={scrollButton}
      >
        <Tab label="Item One" />
        <Tab label="Item Two" />
        <Tab label="Item Three" />
        <Tab label="Item 4" />
        <Tab label="Item 5" />
        <Tab label="Item 6" />
        <Tab label="Item 7" />
        <Tab label="Item 8" />
        <Tab label="Item 9" />
      </Tabs>
    </div>
  );
};

export default MyCarousel;

Upvotes: 2

Views: 2298

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81270

You're close. TabScrollButton is the default props of ScrollButtonComponent. Unfortunately, TabScrollButton doesn't provide any props to override the back/forward icons. So you have to create one yourself.

This is the definition of TabScrollButton. What you want to do is to copy the definition, remove unnecessary parts and add your own icons instead. Below is an example:

import ButtonBase from "@material-ui/core/ButtonBase";
import ArrowBackIcon from "@material-ui/icons/ArrowBack";
import ArrowForwardIcon from "@material-ui/icons/ArrowForward";

const MyTabScrollButton = forwardRef((props, ref) => {
  const { direction, ...other } = props;

  return (
    <ButtonBase
      component="div"
      ref={ref}
      style={{ opacity: other.disabled ? 0 : 1 }}
      {...other}
    >
      {direction === "left" ? (
        <ArrowBackIcon fontSize="small" />
      ) : (
        <ArrowForwardIcon fontSize="small" />
      )}
    </ButtonBase>
  );
});

<Tabs
  {...tabsProps}
  variant="scrollable"
  scrollButtons="auto"
  ScrollButtonComponent={MyTabScrollButton}
>
  {...}
</Tabs>

Live Demo

Edit 66982823/how-create-custom-scroll-icon-inside-the-material-ui-scrolling-tabs

Upvotes: 4

Related Questions