Использование flexbox для закрепления прокручиваемого контейнера с макетом стиля панели вкладок (Office UI Fabric Pivot) - PullRequest
Новая
       7

Использование flexbox для закрепления прокручиваемого контейнера с макетом стиля панели вкладок (Office UI Fabric Pivot)

2 голосов
/ 24 мая 2019

У меня проблема с компоновкой компонентов Office UI Fabric, которые я использую. Это может быть или не быть специфичным для компонентов в этой среде, но я сформулирую это как общую проблему HTML / CSS с flexbox. В общем, я пытаюсь разработать макет, который имеет два компонента сетки (DetailsList), каждый в контейнере типа страницы (Pivot). Мне также нужно, чтобы заголовки ярлыков и поле поиска были закреплены сверху, а кнопка - снизу (независимо от того, насколько короток список в сетке). Если содержимое списка (ов) длинное, я хочу, чтобы в сетке были видны только полосы прокрутки, а не родительский контейнер (в противном случае вам нужно было бы прокрутить вниз, чтобы увидеть Важную кнопку).

Я могу заставить этот макет работать без Pivot, используя компонент ScrollablePane. Как это:

Good docking and scrolling, no Pivot

Однако я не могу понять, как спроектировать это так, чтобы поворотные навигаторы также оставались зафиксированными на вершине. Лучшее, что я могу сделать, это показать в этом примере на StackBlitz ( редактируемая ссылка ) или на этом снимке экрана:

Pivot doesn't dock

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

.app-wrapper {
      display: flex;
      flex-direction: column;
      width: 100%;  
      position: absolute;
      top: 0;
      bottom: 0;
    }
    .app-defaultFlex {
      flex: 1;
      position: relative;
    }
    .app-buttonContainer{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      background: white
    }
    
    <div id='FlexTest' className='app-wrapper'>
    	<div className='header'>
    	  {header}
    	</div>
    	<ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto} className='app-defaultFlex'>
    		<Pivot>
    			<PivotItem id='PivotItemAllProjects' headerText="All Projects">
    				<DetailsList items={projectItems}/>
    			</PivotItem>
    			<PivotItem headerText="Recent" id='PivotItemRecentProjects'>
    				<DetailsList items={projectItems}/>
    			</PivotItem>
    		</Pivot>;
    	</ScrollablePane>
    	<div className='footer app-buttonContainer'>
    	  <DefaultButton className='app-FileButton' primary={true} disabled={false}>File to Project</DefaultButton>
    	</div>
    </div>

Можно ли использовать flexbox, чтобы закрепить вкладки Pivot наверху, чтобы они оставались на виду? Я пробовал несколько вариантов (см. Варианты pivot2 - pivot5 в моем примере StackBlitz), но я не могу понять, является ли это проблемой, которая может быть решена с помощью flexbox, или ограничением использования компонента ScrollablePane со встроенным шарниром.

ОБНОВЛЕНИЕ 5/28/2019:

Даже если это сводится к тому, чтобы иметь только компонент Pivot с одним PivotItem, содержащим один DetailsList, я не вижу, как может работать что-то вроде Sticky компонента или любого вида гибкого макета, согласно этому псевдокоду: 

<Pivot>
  <Sticky stickyPosition={StickyPositionType.Header}>
	<PivotItem
	  id='PivotItemAllProjects'
	  headerText="All Projects"
	>
	  <DetailstList>
	  ..foo
	  </DetailsList>
	</PivotItem>
  </Sticky>
</Pivot>

Завершение каждого отдельного PivotItem не работает - ничего не отображается вообще. Кроме того, это означало бы, что мы хотим наклеить метку и это дочерний элемент. Даже упаковка PivotItem в верхний колонтитул Sticky и дочернего элемента PivotItem в нижний колонтитул Sticky не работает. Я гоняюсь за невозможным здесь?

1 Ответ

0 голосов
/ 25 мая 2019

Зачем вам нужно, чтобы Pivots находились в Div прокручиваемой панели?Если вы поместите стержни в заголовок, то получите то, что хотите, нет?

В противном случае вы можете заключить стержни в компонент Sticky.

ETA: Ого, я пошел связывать компонент Sticky, но, похоже, его не существует.

...