NativeScript를 사용하여 경계 없는 맥동 효과 버튼 만들기(Android)

1995 단어 NativeScript
NativeScript의 Android에는 테두리가 없지만 누르면 웨이브 효과(웨이브 효과)
나는 너를 현지인처럼 보일 수 있는 버튼을 만들고 싶다.
맥동 효과를 추가할 수 있는 플러그인(↓)도 있지만, 그것만을 위해 가져오는 것은 너무 과장된 말이다.
https://github.com/edusperoni/nativescript-ng-ripple
시행착오 결과 CSS만 만들 수 있어서 공유하고 싶어요.
NativeScript 4.2 + Anglar 환경에서 검증되었으며 이 방법은 NativeScript의 FW 버전에서 모두 사용할 수 있습니다.
일단 간단한 버튼 만들기.
<Button text="編集する"></Button>
이런 겉모습.안드로이드 2.3의 촌스러움이 있어요.나는 머티리얼즈의 느낌이 되고 싶다.

버튼 배경 삭제
우선 단추의 색깔을 배경과 같은 흰색으로 바꿉니다.
Button {
   background-color: #FFFFFF;
}

좀 진지해졌어.하지만 틀이 남아있다.보수적인 외모라고는 말할 수 없다.
경계 해제
Button {
    background-color: #FFFFFF;
    z-index: 0; /* added */
}
결론은 가장 간단하게 테두리를 없애는 방법은
z-idex를 0으로 설정하면 됩니다.
완성!

여분의 배경과 테두리가 사라지고 맥동 효과가 있는 단추입니다.

좋은 웹페이지 즐겨찾기