Обработка переполненных компонентов с помощью semanti c ui реагирует - PullRequest
Новая
       20

Обработка переполненных компонентов с помощью semanti c ui реагирует

1 голос
/ 21 января 2020

Я создаю веб-приложение, используя next. js с реагированием и семантией c -ui-реагирование для стиля, и я пытаюсь создать базовый макет c, состоящий из фиксированной боковой панели для навигации и содержание страницы рядом с ним. Первоначально я пытался использовать компонент боковой панели, но не мог заставить это работать. Пользователь онлайн предположил, что это больше для мобильного использования, поэтому я переключился на использование компонента Меню с вертикальными и фиксированными свойствами.

Теперь у меня есть фиксированное меню, но основное содержимое страницы не начинается рядом с ним - вместо этого это начинается за меню. Содержимое находится внутри контейнера с автоматическим полем, работающим от края документа / страницы за меню.

То, что я пробовал:

  • Использование dev-tools и добавление отступа влево к контейнеру содержимого устраняет проблему, но если я изменяю размер страницы, проблема возвращается - это не адаптивно / адаптивно.
  • Использование сетки - я добавил сетку к компонентам, но у нее есть без разницы.

Соответствующий код:

_app. js

    <div>
  <Head>
    <title>Thoughts!</title>
  </Head>
  <Grid>
    <Grid.Row>
    <Grid.Column>
      <FixedMenuLayout></FixedMenuLayout>
    </Grid.Column>
    <Grid.Column>
        <Component {...props} />
      </Grid.Column>
    </Grid.Row>
  </Grid>
</div>

FixedMenu. js

    <Menu fixed='left' inverted vertical>
  <Container>
    <Menu.Item as='a' header>
      <Image size='mini' src='/logo.png' style={{ marginRight: '1.5em' }} />
      Project Name
    </Menu.Item>
    <Menu.Item as='a'>Home</Menu.Item>

    <Dropdown item simple text='Dropdown'>
      <Dropdown.Menu>
        <Dropdown.Item>List Item</Dropdown.Item>
        <Dropdown.Item>List Item</Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Header>Header Item</Dropdown.Header>
        <Dropdown.Item>
          <i className='dropdown icon' />
          <span className='text'>Submenu</span>
          <Dropdown.Menu>
            <Dropdown.Item>List Item</Dropdown.Item>
            <Dropdown.Item>List Item</Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown.Item>
        <Dropdown.Item>List Item</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  </Container>
</Menu>

Как сделать так, чтобы контент был рядом с боковой панелью? (Т. Е. Страница начинается справа от боковой панели, как и ее собственная рамка.)

Кроме того, я хотел бы также иметь возможность фиксировать боковую панель, открывать по умолчанию, но ее можно свернуть, когда содержимое полностью заполнено. -width.

...