Равное пространство между значками навигации

Вот мой пример использования awesome Java 8 Functionality и расширения класса TableCell.

Позвольте мне дать краткое объяснение того, что я делаю: я создал класс ActionButtonTableCell, который расширяет TableCell. И затем вы можете использовать java 8 lamda-функции для создания Action для кнопки.

import java.util.function.Function;
import javafx.event.ActionEvent;
import javafx.scene.control.Button;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.util.Callback;

public class ActionButtonTableCell<S> extends TableCell<S, Button> {

    private final Button actionButton;

    public ActionButtonTableCell(String label, Function< S, S> function) {
        this.getStyleClass().add("action-button-table-cell");

        this.actionButton = new Button(label);
        this.actionButton.setOnAction((ActionEvent e) -> {
            function.apply(getCurrentItem());
        });
        this.actionButton.setMaxWidth(Double.MAX_VALUE);
    }

    public S getCurrentItem() {
        return (S) getTableView().getItems().get(getIndex());
    }

    public static <S> Callback<TableColumn<S, Button>, TableCell<S, Button>> forTableColumn(String label, Function< S, S> function) {
        return param -> new ActionButtonTableCell<>(label, function);
    }

    @Override
    public void updateItem(Button item, boolean empty) {
        super.updateItem(item, empty);

        if (empty) {
            setGraphic(null);
        } else {                
            setGraphic(actionButton);
        }
    }
}

Реализация тогда проста, как это, Это кнопка выбора, чтобы удалить элемент из таблицы:

column.setCellFactory(ActionButtonTableCell.<Person>forTableColumn("Remove", (Person p) -> {
    table.getItems().remove(p);
    return p;
}));    
0
задан Akshay 13 July 2018 в 18:46
поделиться

3 ответа

Вы можете использовать flexbox для равномерного размещения каждого навигационного элемента:

.navbar-nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.navbar-nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<nav class="navbar navbar-expand-sm fixed-top" style="background-color: #ffdbae;">
  <ul class="navbar-nav">
    <li class="nav-item"><a href="http://localhost/mp/"><i class="fas fa-book-open" style="font-size:40px; color:#00CED1;"></i></a></li>
    <li class="nav-item"><a href="http://localhost/mp/post"><i class="fas fa-pen-fancy" style="font-size:40px; color:#fff;"></i></a></li>
    <li class="nav-item"><a href="http://localhost/mp/settings"><i class="fas fa-sliders-h" style="font-size:40px; color:#fff;"></i></a></li>
    <li class="nav-item"><a href="http://localhost/mp/profile"><i class="fas fa-user" style="font-size:40px; color:#fff;"></i></a></li>
  </ul>
</nav>

2
ответ дан Chase DeAnda 17 August 2018 в 12:14
поделиться
  • 1
    Navs в bs4 уже гибкие. И они добавили интервальные классы, поэтому нет необходимости переопределять классы BS, просто включили модификаторы интервала в разметке. – fnostro 13 July 2018 в 19:46

Проще, чем я думал, без необходимости переопределять CSS BS4. Я изменил навигационную панель для использования разметки bs4 без ul и li ... кажется таким же образом

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">

<nav class="navbar navbar-expand-sm fixed-top" style="background-color: #ffdbae;">
  <div class="navbar-nav w-100 nav-justified">
    <a class="nav-item" href="http://localhost/mp/"><i class="fas fa-book-open" style="font-size:40px; color:#00CED1;"></i></a>
    <a class="nav-item" href="http://localhost/mp/post"><i class="fas fa-pen-fancy" style="font-size:40px; color:#fff;"></i></a>
    <a class="nav-item" href="http://localhost/mp/settings"><i class="fas fa-sliders-h" style="font-size:40px; color:#fff;"></i></a>
    <a class="nav-item" href="http://localhost/mp/profile"><i class="fas fa-user" style="font-size:40px; color:#fff;"></i></a>
  </div>
</nav>

1
ответ дан fnostro 17 August 2018 в 12:14
поделиться

Вы можете сделать что-то вроде этого:

   .navbar-nav {
      display: flex;
    }
    .nav-item {
      flex: 1;
      text-align: center;
      margin: 5px;
    }
0
ответ дан Mirso 17 August 2018 в 12:14
поделиться
Другие вопросы по тегам:

Похожие вопросы: