Кнопка React-Bootstrap изменяет размер при применении Glyphicon - PullRequest
Новая
       26

Кнопка React-Bootstrap изменяет размер при применении Glyphicon

0 голосов
/ 05 июля 2018

По какой-то причине мой код вызывает изменение размера кнопки реакции-начальной загрузки при применении Глификона при загрузке.

Вот мой код:

LoaderButton.js 

import React from "react";
import { Button, Glyphicon } from "react-bootstrap";
import "./LoaderButton.css";

export default ({
  isLoading,
  text,
  loadingText,
  className = "",
  disabled = false,
  ...props
}) => (
  <Button
    className={`LoaderButton ${className}`}
    disabled={disabled || isLoading}
    {...props}
  >
    {isLoading && <Glyphicon glyph="refresh" className="spinning" />}
    {!isLoading ? text : loadingText}
  </Button>
);

LoaderButton.css 

.LoaderButton .spinning.glyphicon {
    margin-right: 7px;
    top: 2px;
    animation: spin 1s infinite linear;
}
  @keyframes spin {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
}

Теперь вот где это становится странным ...

Search.js 

renderForm() {
    return (
      <div className="TableQuery">
        <form onSubmit={this.handleSubmit}>
          <LoaderButton
            block
            bsSize="large"
            disabled={!this.validateForm()}
            type="submit"
            isLoading={this.state.isLoading}
            text={this.state.text}
            loadingText="Processing changes..."
          />
        </form>
      </div>
    );
}

Search.css 

@media all and (min-width: 480px) {
  .TableQuery {
    padding: 5px 0;
  }

  .TableQuery form {
    margin: 0 auto;
    max-width: 300px;
  }
}

В результате сервер разработки показывает кнопку как это когда isLoading равно true.

Тем не менее, размер загрузочной части кнопки должен просто соответствовать размеру не загружаемой кнопки, например this .

Можно ли как-нибудь опустить верхнюю часть кнопки при загрузке?

1 Ответ

0 голосов
/ 05 июля 2018

Моя проблема была связана с несколькими именами классов CSS, которые назывались "spinning".

...