Semantic UI React: как переместить кнопку слева направо
Я использую семантический интерфейс React. Я включил семантическую кнопку реакции пользовательского интерфейса, но по умолчанию она отображается слева, я хочу показать ее справа. Кто-нибудь, пожалуйста, помогите мне, как я могу переместить семантическую кнопку вправо.
<Button.Group>
<Button>Cancel</Button>
<Button.Or />
<Button positive>Save</Button>
@grenzbotin Спасибо за ваш комментарий. На самом деле я хочу переместить всю группу кнопок вправо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете добиться этого, поместив группу кнопок в контейнер, который будет выравнивать своих дочерних элементов по правому краю с помощью css.
CSS:
.rightAlign {
display: flex;
justify-content: right;
}
Компонент кнопки в контейнере-оболочке:
import React from "react";
import { Button } from "semantic-ui-react";
const MyButtons = () => {
return (
<div className = "rightAlign">
<Button.Group>
<Button>Cancel</Button>
<Button.Or />
<Button positive>Save</Button>
</Button.Group>
</div>
);
};
export default MyButtons;
Посмотрите, как это работает здесь: https://codesandbox.io/s/3yqy09k35m?fontsize=14
Убедитесь, что файл css, в котором вы определили класс (в данном случае «.rightAlign», но вы можете назвать класс по своему усмотрению), импортирован в файл, который вы используете. Значит - если вы хотите иметь собственный файл css для компонента Button, импортируйте файл css. (Вы можете видеть, что я определил класс .rightAlign в styles.css, который был импортирован в index.js в codeandbox.)
На самом деле я реализую это через styled-component, но ничего не происходит
Я обновил codeandbox с рабочим контейнером, созданным с помощью styed-components. codeandbox.io/s/3yqy09k35m?fontsize=14
Большое спасибо за комментарий, проблема решена! .
Прекрасное решение — просто добавить floated = "right" к вашей Button.Group следующим образом:
<Button.Group floated = "right">
<Button>Cancel</Button>
<Button.Or />
<Button positive>Save</Button>
</Button.Group>
Вы также можете проверить это: https://codesandbox.io/s/n0wzzxxl0m
Все параметры для Button.Group представлены здесь: https://react.semantic-ui.com/elements/button/
Итак, вы хотите, чтобы вся группа кнопок отображалась справа? Или вы хотите переключить ярлыки? Или хотите, чтобы слева был зеленый, а справа серый?