問題一覧に戻る
初級環境設定
問題6: ターミナルのカスタマイズ - ウィジェットモード

画面の隅に自由に配置できるフローティングターミナルを作成するウィジェットモードの使い方を学びます。ウィジェットモードは、スペースをあまり取らずにスワップ機能に素早くアクセスするのに最適です。ターミナルはクリックすると展開する小さなフローティングボタンとして表示されます。

<!DOCTYPE html>
<html lang="en">"en">
<head>
    <meta charset="UTF-8">"UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jupiter Terminal Demo</title>
    <script src="https://terminal.jup.ag/main-v4.js" data-preload defer>src="https://terminal.jup.ag/main-v4.js" data-preload defer></script>
    <style></style>
</head>
<body>
    <div class="container">class="container">
        <h1>Jupiter Terminal Demo</h1>
        <div id="jupiter-terminal">id="jupiter-terminal"></div>
    </div>

    <script>
        window.onload = function() {
            window.Jupiter.init({
                // フローティングターミナル用のウィジェットモードに設定
                displayMode: "",
                widgetStyle: {
                    // ウィジェットの位置: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' - 今回は'bottom-left'を使用
                    position: "",
                    // ウィジェットのサイズ: 'sm' | 'default' - 今回は'sm'を使用
                    size: "",
                },
            });
        };
    </script>
</body>
</html>