[英]Ionic ion-checkbox can we change icon with another icon?
Can we change icon from Ionic ion-checkbox ? 我们可以从Ionic ion-checkbox更改图标吗?
Can we use http://ionicons.com/ ? 我们可以使用http://ionicons.com/吗?
for now, here my code : 现在,我的代码:
<ion-view>
<ion-content class="has-header">
<ion-list>
<ion-checkbox class="item-checkbox-right">item 1</ion-checkbox>
<ion-checkbox class="item-checkbox-right">item 2</ion-checkbox>
<ion-checkbox class="item-checkbox-right">item 3</ion-checkbox>
Thank you 谢谢
Big Thank You @Atula, we cannot change icon from ion-checkbox, 非常感谢@Atula,我们无法从离子复选框中更改图标,
So, with css Ionic icon, here you are my solution (if you have better ? you're welcome) : 所以,使用css Ionic图标,这里你是我的解决方案(如果你有更好的?欢迎你):
Please, help 请帮忙
html HTML
<ion-view>
<ion-content class="has-header">
<div id="frameCheckboxHome" data-ng-click="homeCtrl.toggle('Item1')">
<label>Item1</label><!-- white space
--><div id="checkboxHome"><i class="icon ion-heart {{homeCtrl.homeTab['Item1']}}"></i></div>
</div>
<div id="frameCheckboxHome" data-ng-click="homeCtrl.toggle('Item2')">
<label>Item2</label><!-- white space
--><div id="checkboxHome"><i class="icon ion-heart {{homeCtrl.homeTab['Item2']}}"></i></div>
</div>
</ion-content>
</ion-view>
scss SCSS
#frameCheckboxHome{
width: 100%;
border-bottom: lightgrey solid 1px;
padding-top: 10px;
padding-bottom: 10px;
label{
width: 80%;
margin: 0px;
vertical-align: middle;
padding-left: 10px;
}
div{
width: 20%;
margin: 0px;
vertical-align: middle;
display: inline-block;
text-align: center;
}
div i{
color: lightgrey;
font-size: 36px;
}
.selected { color: orange; }
}
js with angular meteor 1.3 Ionic js与角流星1.3离子
class Home {
constructor($scope, $reactive) {
'ngInject';
$reactive(this).attach($scope);
this.myTab = [];
}
toggle(param){
!this.myTab[param] ? this.myTab[param] = "selected" : this.myTab[param] = "";
}
}
...
.component(name, {
templateUrl: `imports/ui/components/${name}/${template}.html`,
controllerAs: 'homeCtrl',
controller: Home
})
...
No, You can't. 不,你不能。
As you can see that it is a default icon Set for ion-checkbox
. 如您所见,它是一个默认图标Set for
ion-checkbox
。 You can only change the css
like styling it by change color, background, margin, padding etc. 您只能通过更改颜色,背景,边距,填充等来更改
css
。
Alternatively you can change you checkbox to <input type="checkbox>
and style it as in ionic
. 或者,您可以将复选框更改为
<input type="checkbox>
并将其设置为ionic
样式。
UPADTED I have opted pure css solution. UPADTED我选择了纯css解决方案。 css
CSS
input[type="checkbox"] {
display: none;
}
input[type=checkbox]:not(old) + label {
display: inline-block;
padding: 1px;
line-height: 30px;
background:url(https://cdn0.iconfinder.com/data/icons/woocons1/Checkbox%20Empty.png) left top no-repeat;
background-size: 25px 25px;
}
input[type=checkbox]:checked + label { background:url(https://cdn0.iconfinder.com/data/icons/woocons1/Checkbox%20Full.png) left top no-repeat;
background-size: 25px 25px;
}
html HTML
<input type="checkbox" id="1">
<label for="1">Sector 1</label>
Well, you can change the icon for ion-checkbox
with a little tweak ;). 好吧,你可以通过一点调整来改变
ion-checkbox
的图标;)。
Approach 途径
ng-model
value of ion-checkbox
ion-checkbox
的ng-model
值 Code 码
HTML: HTML:
<ion-checkbox class="custom-checkbox" ng-model="itemChecked">
I'm a checkbox
<i class="icon"
ng-class="{'true':'ion-ios-circle-filled', 'false':'ion-ios-circle-outline'}[!!itemChecked]">
</i>
</ion-checkbox>
CSS: CSS:
// positioning custom icon properly
.custom-checkbox .icon {
font-size: 20px;
position: absolute;
left: 16px;
}
// hiding default icon
.custom-checkbox i.checkbox-icon {
display: none;
}
Here's the CodePen Demo for it. 这是CodePen演示 。
My solution: 我的解决方案
.checkbox-md {
.checkbox-icon:before {
display: inline-block;
content: "\f219";
font-family: "Ionicons";
font-size: 1.9em;
color: $primary;
}
.checkbox-icon {
background-color: transparent;
border: none;
height: 32px;
&.checkbox-checked:before {
display: inline-block;
content: "\f147";
font-family: "Ionicons";
font-size: 1.9em;
color: $primary;
}
.checkbox-inner {
border: none;
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.