ReactJS: Bootstrap4 NavBar со свертками и не сворачивающимися предметами - PullRequest
Новая
       20

ReactJS: Bootstrap4 NavBar со свертками и не сворачивающимися предметами

1 голос
/ 07 июля 2019

Существует готовое решение для получения разборного горизонтального NavBar: 

<Navbar inverse fixedTop fluid collapseOnSelect>
    <Navbar.Header>
      <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>
      <Nav>
        <LinkContainer to={'/'} exact>
          <NavItem>
            <Glyphicon glyph='home' /> CollapseLink1
          </NavItem>
        </LinkContainer>
        <LinkContainer to={'/'}>
          <NavItem>
            <Glyphicon glyph='education' /> CollapseLink2
          </NavItem>
        </LinkContainer>
        <LinkContainer to={'/'}>
          <NavItem>
            <Glyphicon glyph='th-list' /> CollapseLink3
          </NavItem>
        </LinkContainer>
      </Nav>
    </Navbar.Collapse>
  </Navbar>

Это дает горизонтальное меню на больших экранах:

enter image description here

И вертикальное меню на маленьких экранах:

enter image description here

Но предположим, что я хочу добавить пару кнопок со значками, которые всегда должны оставаться в верхнем правом углу независимо от того, что происходит:

enter image description here

enter image description here

Я читал примеры отделения разборных предметов от неразборных, и все они очень быстро становятся неуклюжими. Это должно быть общим требованием, нет ли готового подхода?

Какой хороший метод структурирования этого дизайна?

1 Ответ

1 голос
/ 08 июля 2019

Вы можете использовать 'position: absolute' для управления двумя ссылками, которые вы хотите оформить и разместить ...

релевантно js : 

class App extends Component {
  constructor() {
    super();
    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false,
      name: 'React'
    };
  }

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

  render() {
    return (
      <div>
        <Navbar color="light" light expand="md">
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav navbar>
              <NavItem>
                <NavLink href="/components/"> Components</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
              </NavItem>
              <UncontrolledDropdown nav inNavbar>
                <DropdownToggle nav caret>
                  Options
                </DropdownToggle>
                <DropdownMenu right>
                  <DropdownItem>
                    Option 1
                  </DropdownItem>
                  <DropdownItem>
                    Option 2
                  </DropdownItem>
                  <DropdownItem divider />
                  <DropdownItem>
                    Reset
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>
            </Nav>
          </Collapse>

          <NavbarBrand href="/" className='floatRight'>
            <a href="#">[link A]</a>
            <a href="#">[link B]</a>
          </NavbarBrand>
        </Navbar>

        <Hello name={this.state.name} />
        <p>
          Start editing to see some magic happen :)
        </p>
      </div>
    );
  }
}

релевантно css : 

.floatRight{  position: absolute;    right: 0;    top: 6px;}
.floatRight a{  padding-left:10px;}
.navbar{padding:0;}
.navbar-light .navbar-toggler {margin:10px}

завершено рабочий стек бликов здесь

...