自動サイズ調整

カスタムウィジェットは、2種類のレイアウトで使用できます。

1. 親アプリケーションが提供するコンテナのスペースいっぱいに広げるレイアウト。たとえば、Workshop の「absolute」および「flex」レイアウトです。
2. コンテンツのサイズに基づいてコンテナのサイズを制御するレイアウト。たとえば、Workshop の「auto」レイアウトです。

1つ目の方法を実現するには、カスタムウィジェットのスタイルで、ドキュメントの HTML 要素と body 要素に適宜 height: 100% や width: 100% を適用します。これにより、子コンテンツが利用可能なスペースに応じてサイズを調整するようになります。

2つ目の方法を実現するには、ドキュメントの body 要素の高さや幅を、親アプリケーションでの自動サイズ調整に使用します。カスタムウィジェットのスタイルでは、ドキュメントの HTML 要素と body 要素に height: 100% や width: 100% を適用しないでください。代わりに、カスタムウィジェットのスタイルで、ドキュメントの body 要素のサイズが子コンテンツのサイズに応じて拡大または縮小するようにしてください。この機能には、@osdk/widget.client-react ↗ のバージョン 3.3.0 以上が必要です。