css - angular - 单击 flexbox 网格单元以全宽扩展下方区域

Question

我在 ionic 3 元素中有类似使用 flexbox 的日历网格。

单元格是一个数组

<div class="sb-calendar-wrapper">
    <div class="sb-calendar-month">
        <div class="sb-calendar-row">
            <div class="sb-calendar-cell sb-cell-labels sb-week-day" *ngFor="let day of sbcalendar.dayLabels">
                {{day}}
            </div>
        </div>
        <div class="sb-calendar-row">
            <div class="sb-calendar-cell sb-cell" *ngFor="let day of calendarDays, let j=index" (click)="openCalendarDay(day)" [ngStyle]="{'height': (day.isOpen) ? '300px' : '60px'}">{{j}}
            </div>
        </div>
    </div>
</div>

.sb-cell {
    position: relative;
    border-bottom: 1px solid rgba(130, 171, 183, 0.2);
    padding: 5px;
    height: calc((100vh - 150px)/6);
    .sb-calendar-day-list{
        position: absolute;
        width: 100vw;
        left: 0;
        top:calc((100vh - 150px)/6);
        background: #ccc;
        height: calc( 300px - calc((100vh - 150px)/6));
    }
}

当我点击任何一天时，我希望“行”展开以显示我可以使用的区域，例如显示该单元格的元素。

我面临的问题是如何定位该列表元素，以便填满整个空间或宽度。使用 position:relative of the cell 我可以很好地定位除了 left:0 之外的所有内容，这对大多数单元格不起作用。

总而言之，当我点击任何一天时，一个填满整个 View 宽度的框应该展开。感谢您的任何建议!

编辑1

我不想在每个 n 单元格之后创建手动行。元胞数组应保持为单个数组，而 flexitem 宽度控制每行中的元素数。

Answer 1

我认为您可以将这些日子安排在同一行中。在每一行的末尾，您可以添加一个带有 ng-if 条件的占位符 div。每当您单击该行的某一天时，您都可以检查行索引是否显示 div。该 div 将包含您想要的区域。

html:

<div class="flexbox-row" ng-repeat="row in rows track by $index">
  <div class="flexbox-col clickable" ng-click="showRow($index)">
    1
  </div>
  <div class="flexbox-col clickable" ng-click="showRow($index)">
    2
  </div>
  <div class="flexbox-col clickable" ng-click="showRow($index)">
    3...
  </div>
  <!-- Place holder div -->
  <div ng-if="showRow() === $index">
    <div data-custom-directive></div>
  </div>
</div>

显示行代码:

scope.showRow = function ($index) {
  // Return activeRow
  if ($index === undefined) {
    return scope.activeRow;
  }
  // Hide if same row
  if ($index === scope.activeFlight) {
    scope.activeRow = null;
    return;
  }
  // Show row
  scope.activeRow = parseInt($index);
};