có cách nào chỉnh dấu tích thành màu đen không ạ, mặc định nó màu trằng
hi @hieu_nguyen
Phần này tụi mình đang update, khi release tụi mình sẽ thông báo cho bạn trong thread này.
Trước mắt bạn có thể custom một checkbox như sau:
index.txml
<view
class="custom-checkbox {{checked ? 'custom-checkbox--checked' : ''}} {{disabled ? 'custom-checkbox--disabled' : ''}}"
catchTap="onChange">
<view tiki:if="{{checked}}" class="t-icon">
<icon type="success" color="#000" size="{{16}}" />
</view>
</view>
index.js
Component({
props: {
checked: false,
disabled: false,
onChange: () => {},
},
didMount() {
this._updateDataSet();
},
didUpdate() {
this._updateDataSet();
},
methods: {
_updateDataSet() {
this.dataset = {};
for (const key in this.props) {
if (/data-/gi.test(key)) {
this.dataset[key.replace(/data-/gi, '')] = this.props[key];
}
}
},
onChange(event) {
const { checked, disabled } = this.props;
if (disabled) return;
const value = checked ? false : true;
event.detail = { value };
const _onChange = this.props.onChange;
if (typeof _onChange === 'function') {
event.target = { ...event.target, dataset: this.dataset };
_onChange(event);
}
},
},
});
index.tcss
/* Custom checkbox */
.custom-checkbox {
--tf-checkbox-custom-color: #1a94ff;
--background-selection-default: #f5f5fa;
--border-selection-default: #dddde3;
--background-selection-disable: #c4c4cf;
--border-selection-disable: #ebebf0;
position: relative;
display: inline-block;
box-sizing: border-box;
width: 20px;
height: 20px;
background-color: var(--background-selection-default);
border: 1px solid;
border-color: var(--border-selection-default);
border-radius: 4px;
}
.custom-checkbox.custom-checkbox--checked {
background-color: var(--tf-checkbox-custom-color);
border-color: var(--tf-checkbox-custom-color);
}
.custom-checkbox.custom-checkbox--checked.custom-checkbox--disabled {
background-color: var(--background-selection-disable);
}
.custom-checkbox.custom-checkbox--disabled {
background-color: var(--background-selection-default);
border-color: var(--border-selection-disable);
}
.custom-checkbox.custom-checkbox--disabled:hover {
border-color: none;
}
.custom-checkbox .t-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.custom-checkbox .t-icon .success-icon {
width: 16px;
height: 16px;
}
index.json
{
"component": true,
"componentLifeCycleV2": "YES"
}