Nút Kendo `k-danger` không hoạt động

Question

Tôi đang sử dụng Kendo MVC trong dự án C#.

Tôi đang cố gắng thêm k-danger lớp vào nút kendo. Tôi không biết tại sao nhưng nó không hoạt động ở nơi các công trình hạng k-primary.

Đây là mã nút của tôi:

<button type='button' id='Button1' onclick='Delete(#=ID#)' class='k-button k-button-icontext k-grid-add k-danger'> // This is just showing the default button 
    <span class='k-icon k-i-trash'></span> 
</button> 

<button type='button' id='Button2' onclick='Info(#=ID#)' class='k-button k-button-icontext k-grid-add k-i-pencil'> // This is showing the primary button 
    <span class='k-icon k-i-pencil'></span> 
</button> 

Các biểu tượng hoạt động hoàn hảo. Tôi đã tìm kiếm ở khắp mọi nơi nhưng tôi không tìm thấy gì về điều này. Vì vậy, tôi kết luận rằng không có lớp học k-danger, tôi không biết nếu tôi sai.

Nếu không có k-danger có sẵn có bất kỳ điều gì khác mà tôi có thể sử dụng thay vì k-danger không?

Tôi có thể cung cấp mã đầy đủ nếu cần.

Answer 1

danger (hoặc thực sự btn-danger) là tên lớp CSS cụ thể của Bootstrap và thực sự, nó không tồn tại trong biểu định kiểu giao diện người dùng Kendo. Có hai lựa chọn mà tôi xin đề nghị:

1. Giả sử rằng bạn có stylesheet Bootstrap đăng ký, hãy thử sử dụng lớp btn-danger CSS của Bootstrap. Nhược điểm là bạn sẽ có khả năng vấp ngã khi Kendo UI vs xung đột phong cách Bootstrap và xuất hiện nút kết quả sẽ là một sự pha trộn giữa phong cách của hai thư viện.

2. Tạo kiểu dáng nút "nguy hiểm" cho giao diện người dùng Kendo của riêng bạn. Ví dụ, thêm quy tắc CSS sau đây để một kiểu, được đăng ký sau khi stylesheet Kendo UI:

   .k-button.k-danger, 
   .k-button.k-danger:active { 
       background-color: #f00; 
       color: #fff; 
       border-color: #f00; 
   } 
   

Answer 2

k-danger does not have any style in kendo css, 

Bạn cần phải tạo phong cách tùy chỉnh của bạn để có được kết quả của bạn hoặc chỉ cần thêm css bootstrap và thêm lớp "btn btn-danger" vào nút Danger của bạn.

Kiểm tra JsBin Demo này

Js Bin Example

Answer 3

Theo mặc định kendo cung cấp cho bạn với k-error-colored như shown here.

Các lớp tiện dụng khác là:

• k-info-colored
• k-success-colored
• k-warning-colored

Bạn chỉ cần sử dụng nó với k-button

This jsfiddle cho thấy cách nó render.