MUI Tabs のスクロールアイコンの色を変更し、直感的にスクロール可能かわかりやすくする
こんにちは、 Gaji-Labo フロントエンドエンジニアの石垣です。
今回は MUI の Tabs コンポーネントでスクロールの可能・不可能を示すアイコンの色を変更し、スクロール可能かどうかを直感的にわかりやすくする方法を紹介します。
今回の実装は CodeSandbox で確認できますので、ぜひご覧ください。
なぜ色を変更する必要があるのか
MUI の Tabs コンポーネントは、タブが表示領域から溢れたときにスクロールできるようになっています。
コンポーネントに scrollButtons
と allowScrollButtonsMobile
props を渡してあげると、スクロール可能なときはアイコンが表示され、押すことでタブを移動できるようにもなりますが、スクロール不可能なときはアイコンが表示されません。
![MUI の Tabs コンポーネントをスクロールし、スクロールアイコンを表示している様子のGIFアニメ](https://wp.gaji.jp/wp-content/uploads/2023/08/12.gif)
これは内部実装的には、現在のスクロール位置が左端か右端のときにはその側のアイコンの要素に Mui-disabled
class が当たり、それに opacity: 0
が適用されて透明になっているためです。
![MUI の Tabs コンポーネントのアイコンの要素のインスペクターのキャプチャ](https://wp.gaji.jp/wp-content/uploads/2023/08/d9f927dda62cbd84b591dc04268d18fb-740x450.png)
しかしこのスタイルだと、一見してスクロールの可能・不可能がわかりにくいです。
更には、実際にはアイコンが存在しているのですが透明になっているのでタブバーの左右に不要な余白ができているように見えてしまいます。
これを改善するためにアイコンの色を変更して、スクロールの可能・不可能を直感的にわかりやすくしてみます。
アイコンの色を変更する
実装方法は単純で、styled などのスタイルシステムを使って .MuiTabScrollButton-root.Mui-disabled
class に当たるスタイルを上書きするだけです。
import { Tabs as MUITabs, Tab } from "@mui/material";
import { styled } from "@mui/system";
interface Props {
tabLabels: { text: string }[];
value: string | number;
}
// スクロールアイコンのスタイルの上書き
const StyledTabs = styled(MUITabs)(() => ({
"& .MuiTabScrollButton-root": {
"&.Mui-disabled": {
opacity: 0.25
}
}
}));
// 表示確認用のスタイル
const StyledTab = styled(Tab)({
backgroundColor: "#eeeeee",
borderLeft: "1px solid #000",
"& + &": {
borderLeft: "1px solid #000"
}
});
export function Tabs({ tabLabels, value }: Props): JSX.Element {
return (
<StyledTabs
value={value}
variant="scrollable"
scrollButtons
allowScrollButtonsMobile
>
{tabLabels.map((label) => (
<StyledTab label={label.text} value={label.text} />
))}
</StyledTabs>
);
}
const label = [
{ text: "TABS1" },
{ text: "TABS2" },
{ text: "TABS3" },
{ text: "TABS4" },
{ text: "TABS5" },
{ text: "TABS6" },
{ text: "TABS7" },
{ text: "TABS8" },
{ text: "TABS9" },
{ text: "TABS10" }
];
export default function App() {
return (
<div style={{ border: "1px solid black" }}>
<Tabs tabLabels={label} value="Tabs1" />
</div>
);
}
![MUI の Tabs コンポーネントがスクロール左端にある際もアイコンが薄く表示されている様子のキャプチャ](https://wp.gaji.jp/wp-content/uploads/2023/08/141b68ed93f7a6303aa56c1d6d1b6237-740x99.png)
更に、スクロール可能なときのアイコンをデフォルトから変えることでより差別化できます。
const StyledTabs = styled(MUITabs)(() => ({
"& .MuiTabScrollButton-root": {
color: "#0d47a1",
"&.Mui-disabled": {
color: "#212121",
opacity: 0.25
}
}
}));
![MUI の Tabs コンポーネントのスクロールアイコンにスタイルを適用した状態でスクロールしているGIFアニメ](https://wp.gaji.jp/wp-content/uploads/2023/08/13.gif)
これでスクロールの可能・不可能が直感的にわかりやすくなりました。
おわりに
今回は、MUI の Tabs コンポーネントでスクロールの可能・不可能を示すアイコンの色を変更し、スクロール可能かどうかを直感的にわかりやすくする方法を紹介しました。
細かい部分のスタイルですが、これを改善することでユーザーの使いやすさを向上させることができます。
MUI の Tabs コンポーネントを使う際の参考になれば幸いです。
Gaji-Labo は Next.js, React, TypeScript 開発の実績と知見があります
フロントエンド開発の専門家である私たちが御社の開発チームに入ることで、バックエンドも含めた全体の開発効率が上がります。
「既存のサイトを Next.js に移行したい」
「人手が足りず信頼できるエンジニアを探している」
「自分たちで手を付けてみたがいまいち上手くいかない」
フロントエンド開発に関わるお困りごとがあれば、まずは一度お気軽に Gaji-Labo にご相談ください。
オンラインでのヒアリングとフルリモートでのプロセス支援にも対応しています。
Next.js, React, TypeScript の相談をする!