目次
- はじめに
- 動作ごとにskinを設定
- Custom CSSの説明
- Custom CSSの設定
- あとがき
- 参照
1. はじめに
Konyではボタンの様々な動作に背景色、境界線、影などといったskinを定義することができます。
またテキストのフォントも指定することができます。
2. 動作ごとにskinを設定
まずはwebでボタンにNomal skinとHover Skinを設定してみます。
白色のボタンの上にマウスを持っていくとボタンが青色に変わるような表示を実装します。
- 左の
projectからResponsive web / Desktopを選択 -
FormsからNew Formを選択し、Formを追加
- ボタンwidgetを追加
-
ボタンwidgetがクリックされた状態であることを確認し、右メニューの
skinを選択 -
skinで以下のように設定
Nomal skin
background > color > #3388d7
background > opacity > 100%
Fonts > color > #FFFFFF
Fonts > opacity > 100%
Fonts > size > 150%
Hover skin
background > color > #FFFFFF
background > opacity > 100%
Fonts > color > #3388d7
Fonts > opacity > 100%
Fonts > size > 150%
※今回はFocusを使用しないため、Enableにチェックが入っていないことを確認してください。
Product > Build > Responsive Webにチェック > Build
でビルドしてみてみましょう！
ボタンの位置にマウスを持っていくとボタンが青色に変わります。
— Kony (@Kony12763790) May 18, 2020
変わりましたね！
widgetを選択し、skinタブからそれぞれの動作に応じてskinを定義するだけで
簡単に表示させることができます。
もちろんこちらでも全然良いのですが、もっとhoverしている感を表示してみたいと思います！
3. Custom CSSの説明
Konyでは様々な細かいskinの設定ができますが、さらに複雑な見た目や動きを表示させたい！となった時はCustom CSSを設定することで表示の幅を広げることが可能になります。
複雑な見た目や動きを設定したい場合はCustom CSSを設定してみましょう！
※ウィジェットにCSSコードを設定することができるのはWebのみとなります。
4. Custom CSSの設定
Responsive web上でwidgetを追加し、Custom cssを編集
- ボタンwidgetがクリックされた状態であることを確認し、右メニューの
skinを選択 -
GeneralのCustom CSSにチェックを入れる
3. コードを記載
skinのNomalに以下を設定
アニメーションの部分はtransition: .4s;になります。
（今回はアニメーションの変化の始まりから終わりまでを4秒で設定しました。）
display: inline-block;
text-decoration: none;
background:#FFF;
color:#3388d7;
font-size: 100%;
border-radius: 3px;
transition: .4s;/*アニメーションを4秒で設定*/
font-weight: bold;
skinのHoverに以下を設定
（今回はFocusを使用しないため、Enableにチェックが入っていないことを確認してください。）
background-color:#3388d7;
border-color: #9cc2e5;
color: #FFF;
Product > Build > Responsive Webにチェック > Build
— Kony (@Kony12763790) May 18, 2020
hover skinで設定したskinにゆっくり変わりましたね！
5. あとがき
動作に応じて、skinを定義するだけで、簡単に表示させられるのがKonyの強みだと思っております。
それだけでなくCustomCSSを用いることができるので、更なるユーザビリティの向上が期待できます。
今回はhoverアニメーションを紹介させていただきましたが、focus(active擬似クラス)等にも応用できます。
6. 参照