bootstrap - тумблер отображается как флажок - PullRequest
Новая
       58

bootstrap - тумблер отображается как флажок

0 голосов
/ 17 февраля 2020

У меня есть компонент ToggleSwitch в реакции, который я сделал, используя bootstrap-toggle. Но он отображается как флажок, а не как тумблер. Любая помощь в этом, как заставить это работать?

ToggleSwitch. js

import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-toggle/css/bootstrap-toggle.css";

class ToggleSwitch extends Component {
  render() {
    return (
      <div className="toggle-switch">
        <input
          type="checkbox"
          data-toggle="toggle"
          data-on="Ready"
          data-off="Not Ready"
          data-onstyle="success"
          data-offstyle="danger"
        />
      </div>
    );
  }
}

export default ToggleSwitch;

1 Ответ

1 голос
/ 17 февраля 2020

Возможно, что-то не так с порядком, в котором вызываются файлы JavaScript.

Для CSS вызовите необходимые файлы:

  • Bootstrap 4
  • Bootstrap4-toggle

Для JavaScript, вызовите файлы в следующем порядке:

  • jQuery Slim
  • Bootstrap 4
  • Bootstrap4-toggle

Рабочий фрагмент: 

const element = (
  <div className="toggle-switch">
    <input
      type="checkbox"
      data-toggle="toggle"
      data-on="Ready"
      data-off="Not Ready"
      data-onstyle="success"
      data-offstyle="danger"
    />
  </div>
);

ReactDOM.render(
  element,
  document.getElementById('app')
);
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet"/>

<div id="app"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
...