CheckboxControlSchema
/*! elementor – v3.7.6 – 15-09-2022 */
.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=”.svg”]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}
/*! elementor – v3.7.6 – 15-09-2022 */
.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}
Hình ảnh / Demo
Mục đích
Tạo 1 input type checkbox
Cách dùng
Import
Import vào đầu file .ts cần sử dụng
import { CheckboxControlSchema } from 'tnx-shared';
Cách dùng cơ bản
CheckboxControlSchema được thêm vào trong this.setting.schema khi khởi tạo form.
...
ngOnInit() {
...
this.setting.schema = [
new CheckboxControlSchema({
field: 'isThanhVienNgoaiTruong',
label: 'Ngoài trường',
}),
...
]
...
}
...
Gán giá trị mặc định
new CheckboxControlSchema({
field: 'isThanhVienNgoaiTruong',
label: 'Ngoài trường',
defaultValue: true,
}),
Khi muốn gán giá trị mặc định lúc khởi tạo thì truyền thêm defaultValue: boolean, mặc định là false
Tùy chỉnh chiều rộng của field
...
new CheckboxControlSchema({
field: 'myField',
label: 'Trường muốn dùng',
width: '100px'
}),
...
Khi muốn cấu hình lại chiều rộng của field dùng thuộc tính width
Thuộc tính
Thuộc tính | Kiểu dữ liệu | Mặc định | Nullable | Mô tả |
---|---|---|---|---|
field | string | Trường tương ứng trong bảng | ||
label | string | Label hiển thị trên control | ||
gWidth | number | 12 | Độ rộng của control hiển thị trong form đối với màn hình lớn hớn desktops. Giá trị từ 1 – 12, mặc định là 12.(giống xl trong bootstrap) | |
mdWidth | number | 6 | Độ rộng của control hiển thị trong form đối với màn hình desktop. Giá trị từ 1->12, mặc định là 6.(giống md-lg trong bootstrap) | |
required | boolean | false | Tùy chỉnh ô này có bắt buộc nhập hay không | |
defaultValue | string | Giá trị mặc định của field | ||
disabled | boolean | false | Vô hiệu hóa nhập giá trị | |
showLabel | boolean | true | Tùy chỉnh hiển thị label trên input | |
hiddenLabel | boolean | false | Tùy chỉnh ẩn-hiển label control | |
hidden | boolean | false | Ẩn field |
Sự kiện
Tên sự kiện | Tham số | Là Async | Mô tả |
---|---|---|---|
onChanged | eventData: EventData | Sự kiện khi text trong input thay đổi và blur ra ngoài | |
hiddenCheck | rootModel,currentNode | Sự kiện ẩn field đi, return boolean | |
new CheckboxControlSchema({
field: 'myField',
label: 'Trường muốn dùng',
onChanged: (eventData: EventData) => {
console.log(eventData);
if (this.model.data.property || <>) {
evt.formControls['other control name'].hidden = true;
} else {
evt.formControls['other control name'].hidden = false;
}
}
})