NativeScriptで枠なしのリップルエフェクトボタンを作る(Android)
NativeScriptのAndroidで枠が無いけど、押すとちゃんとリップルエフェクト(波状効果)がついて
ネイティブの見た目になってくれるボタンを作りたかった。
リップルエフェクトをつけてくれるプラグイン(↓)もあるけれど、たったこれだけのために導入するのは大げさすぎる。
https://github.com/edusperoni/nativescript-ng-ripple
試行錯誤した結果、CSSのみで作ることができたので共有したい。
NativeScript 4.2 + Angularの環境で検証したが、おそらくこの方法はNativeScriptのどのバージョンどのFWでも使えるはずだ。
まずシンプルなボタンを作る
<Button text="編集する"></Button>
<Button text="編集する"></Button>
こんな見た目。Android 2.3かというくらいダサい。Materialな感じにしたい。
ボタンの背景を消す
まずボタンの色を、背景と同じ白にしてみる
Button {
background-color: #FFFFFF;
}
少しはまともになった。だが、余計な枠がついている。まだコンテンポラリーな見た目とは言い難い。
枠を消す
Button {
background-color: #FFFFFF;
z-index: 0; /* added */
}
Button {
background-color: #FFFFFF;
z-index: 0; /* added */
}
枠を消すためにborderをいろいろいじっていたが結論としては、一番シンプルに枠を消す方法は
z-indexを0にすれば良い。
完成!
余計な背景や枠が消えて、かつリップルエフェクトは効くボタンができた。
Author And Source
この問題について(NativeScriptで枠なしのリップルエフェクトボタンを作る(Android)), 我々は、より多くの情報をここで見つけました https://qiita.com/hosikiti/items/ce010ad2ff3b1e9c67f2著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .