Closed h-yoshikawa44 closed 3 years ago
ドロワーやモーダル開閉時に、下層の要素を操作できないようにするにはどうすればいいか? と Twitter でつぶやいたところ、Kudo さんに inert 属性のことを教えていただいた。
inert 属性周辺に関する解説の記事。
一つ一つ非活性制御すると大変なのを、inert 属性がまとめてやってくれる感じらしい。
現時点では、どのブラウザもサポートしていないので、使用するにはポリフィルを使う必要がある。
インストール
yarn add wicg-inert
グローバルでインポート
import 'wicg-inert';
あとは要素に inert 属性を指定すればいい。 ...が、TypeScript × React で指定するには少し工夫がいる。
レイアウトファイルで指定してみた。inertFlg にはドロワー開閉状態のフラグを渡す感じ。 (ドロワー部分はレイアウトファイル外になるようにする)
const Layout: FC<Props> = ({ inertFlg, children }) => {
return (
<div>
<Head>
<title>Windbnb</title>
<meta
name="description"
content="devChallenges.io - Windbnb | by h-yoshikawa44"
/>
<link rel="icon" href="/favicon.ico" />
</Head>
<div
css={container}
ref={(node) =>
node &&
(inertFlg
? node.setAttribute('inert', '')
: node.removeAttribute('inert'))
}
>
{children}
<Footer />
</div>
</div>
);
};
作業内容