メニューバーにSVGを並べる
SVGもJSXで埋め込めるのでReactのコンポーネントにすることができる。
propsで色が変わるようにするのも特に他のDOMのコンポーネントと変わらない。
tsxexport const UndoSVGButton = (props: any) => {
let color = props.enabled ? "#000" : "#888";
return (<svg enable-background="new 0 0 24 24" id="Layer_1" version="1.0" viewBox="0 0 24 24">
<polygon points="9,12 2,7 9,2 " fill={color} />
<path d="M2,20h11.5c3.6,0,6.5-2.9,6.5-6.5S17.1,7,13.5,7H6"
fill="none" stroke={color}
stroke-miterlimit="10" stroke-width="4" />
</svg>);
}使い方
:<div id="toolbar">
<UndoSVGButton enabled={canUndo} onClick={undo} />
<RedoSVGButton enabled={canRedo} onClick={redo} />
...以前はテキストとCSSでやっていたのだが、コードも見た目も美しくなかった
:<span onClick={undo} className={canUndo ? "canDo" : "canNotDo"}>[Undo]</span>UndoとRedoはまだテキストのままなんだけどもそのうちアイコンに置き換えようと思う
関連: テキストの垂直中揃え
"Engineer's way of creating knowledge" the English version of my book is now available on [Engineer's way of creating knowledge]
(C)NISHIO Hirokazu / Converted from [Scrapbox] at [Edit]