<div class="app-screenshot" id="screenshot-sort-full" style="height: 500px">
  <sky-sort [showButtonText]="false">
    @for (item of sortOptions; track item) {
      <sky-sort-item
        [active]="initialState === item.id"
        (itemSelect)="sortItems(item)"
      >
        {{ item.label }}
      </sky-sort-item>
    }
  </sky-sort>
</div>

<div class="app-screenshot" id="screenshot-sort-text" style="height: 500px">
  <sky-sort [showButtonText]="true">
    @for (item of sortOptions; track item) {
      <sky-sort-item
        [active]="initialState === item.id"
        (itemSelect)="sortItems(item)"
      >
        {{ item.label }}
      </sky-sort-item>
    }
  </sky-sort>
</div>
