スタイル

このサンプルではファンクションキーの背景色や幅、高さなどのスタイルをCSSに設定する場合のソースコードを確認することができます。

コントロールで使用されている表示スタイルについて解説します。 スタイルの設定方法 ファンクションキーコントロールのスタイルは、CSSで設定します。ファンクションキーコントロールを構成する要素のクラス名を指定して、そのクラスのスタイルを設定します。 次のサンプルコードは、ファンクションキーのテキスト要素のスタイルを設定する方法を示します。 ここではcolorプロパティで文字色を設定していますが、その他にも、背景色、フォント、余白、境界線などの様々なスタイルを設定できます。CSSにおけるスタイル設定方法については、CSSのリファレンスを参照してください。 クラス名 ファンクションキーを構成する要素のクラス名は次の通りです。 要素 クラス名 ファンクションキー全体 gcim__functionkey ファンクションキーの項目全体 functionkey-item-container ファンクションキーの画像項目 functionkey-image ファンクションキーのテキスト項目 functionkey-text また、以下のようにfunctionkey-item-containerクラスにdata-functionkeyを追加することでキー単位でのスタイルを指定することができます。 data-functionkeyには、FunctionKey列挙型の値を指定します。 新しいスタイルの設定方法 InputManJSは2種類のデザインを提供しています。appearanceStyleプロパティを設定することで、従来のデザインまたは新しいデザインを適用できます。すべてのコントロールを初期化する前に設定する必要があります。 appearanceStyleプロパティの設定できる値は次のとおりで、既定値はClassicです。 値 説明 Classic 従来のデザイン Modern 新しいデザイン
import '@grapecity/inputman/CSS/gc.inputman-js.css'; import './styles.css'; import { InputMan } from '@grapecity/inputman'; InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern; let gcFunctionKey1 = new InputMan.GcFunctionKey(document.getElementById('functionkey1'), { functionKeys: [ { key: GC.InputMan.FunctionKey.F1, description: 'メニュー画面へ' }, { key: GC.InputMan.FunctionKey.F2, description: '更新' }, { key: GC.InputMan.FunctionKey.F3, description: "削除" }, { key: GC.InputMan.FunctionKey.F4, description: "印刷" }, ], onActived: function (s, e) { window.alert(e.description + 'が押下されました。'); } }); let gcFunctionKey2 = new InputMan.GcFunctionKey(document.getElementById('functionkey2'), { functionKeys: [ { key: GC.InputMan.FunctionKey.F1, description: 'メニュー画面へ' }, { key: GC.InputMan.FunctionKey.F2, description: '更新' }, { key: GC.InputMan.FunctionKey.F3, description: "削除" }, { key: GC.InputMan.FunctionKey.F4, description: "印刷" }, ], onActived: function (s, e) { window.alert(e.description + 'が押下されました。'); } });
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>ファンクションキーコントロール - スタイル</title> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="flexbox"> <div>通常のスタイル <div id="functionkey1"></div> </div> <div>スタイルを変更する <div id="functionkey2"></div> </div> </div> </body> </html>
#functionkey2 .gcim__functionkey { background-color: rgb(130, 235, 200); border-radius: 0px; } #functionkey2 .gcim__functionkey .functionkey-image { width: 20px; height: 12px; justify-content: center; } #functionkey2 .gcim__functionkey .functionkey-item-container { width: 140px; height: 25px; background-color: teal; color: white; margin: 5px 0px 2px 5px; } #functionkey2 .gcim__functionkey .functionkey-item-container:last-child { margin-right: 5px; } #functionkey2 .gcim__functionkey .functionkey-text { flex-grow: 1; justify-content: center; } #functionkey2 .gcim__functionkey .functionkey-item-container:hover { background-color:orange; } #functionkey2 .gcim__functionkey .functionkey-item-container:active { background-color:#FF6600 }
[gcim-control-appearance="modern"] #functionkey2 .gcim__functionkey { background-color: rgb(130, 235, 200); border-radius: 0px; } [gcim-control-appearance="modern"] #functionkey2 .gcim__functionkey .functionkey-image { width: 20px; height: 12px; justify-content: center; } [gcim-control-appearance="modern"] #functionkey2 .gcim__functionkey .functionkey-item-container { width: 140px; height: 25px; background-color: teal; color: white; margin: 5px 0px 2px 5px; } [gcim-control-appearance="modern"] #functionkey2 .gcim__functionkey .functionkey-item-container:last-child { margin-right: 5px; } [gcim-control-appearance="modern"] #functionkey2 .gcim__functionkey .functionkey-text { flex-grow: 1; justify-content: center; } [gcim-control-appearance="modern"] #functionkey2 .gcim__functionkey .functionkey-item-container:hover { background-color: orange; } [gcim-control-appearance="modern"] #functionkey2 .gcim__functionkey .functionkey-item-container:active { background-color: #FF6600; }
System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@grapecity/inputman': 'npm:@grapecity/inputman/index.js', '@grapecity/inputman/CSS': 'npm:@grapecity/inputman/CSS', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } });