feat(virtual-scroll): Add dynamic fixed size virtual scroll strategy
まだ誰も着手していません。
評価
- 難易度
- 5/5
- 見積もり時間
- 1週間以上
- 初心者へのやさしさ
- 45/100
- issue の種類
- 機能追加
- 明瞭さ
- おおむね明確
- 活発さ
- 静か
- 技術スタック
- angular, typescript
- 領域
- frontend
調査の方向性
まず、現在の固定サイズの仮想スクロール戦略と実験的な cdk autoSize 戦略を確認し、次にリンクされている StackBlitz の例を実行します。インデックスをピクセルサイズに変換する関数を受け取り、固定、可変、ギャップ、パディング、および展開可能または折りたたみ可能なアイテムサイズをサポートする戦略が実装された時点で、作業は完了です。
索引モデルが issue の本文から書いたものです。
説明
Feature Description
Currently the provided virtual scroll strategy is only for fixed size. This is very restrictive.
In cdk experimental there is an autoSize strategy that determines the size of an item automatically but it is experimental and decides the size by itself.
I propose a new strategy for fixed, known but dynamic size.
For example if I have a list of items with some items being with 50px height and some with 80px height I can't use any default strategy for it but I also don't need autoSize. I know item 3 is 80px but item 6 is 50px which makes it easier to implement.
Using the new strategy I can express the dynamic (but known) size.
An example API for it is passing a function: (index: number) => number that returns a pixel size based on given item index.
One of the benefits is that fixed size is a specific case of the new strategy with the function returning the same size always (with a bit of worse performance) - so no need to create two default strategies as fixed (the current one) can be derived from the new strategy.
I created a stackblitz with such strategy and some use cases:
https://stackblitz.com/edit/stackblitz-starters-eey1ve9m
Use Case
- Can be used for fixed size like now
- Can be used to add gap between items
- Can be used to add padding (top/bottom) - although there are other ways to do it currently
- Can be used to express varying sizes (80px and 50px mixed for example)
- Can be used to allow expand/collapse items for details - initial size for index X is 50px. On click increase size to 80px and refresh strategy. Same for collapse but the other way around.
- Can be a mix of all the above
To summarize it gives a lot of control for many use cases including the fixed size that exists today.
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 1時間
- マージ済み PR（30日）
- 84
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
angular/components のほかの issue
-
area: material/tree docs gemini-triaged needs triage
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
angular/components#33832 ·
-
area: material/datepicker gemini-triaged P4
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
angular/components#33763 · コメント 2 件 · リアクション 3 件 ·
-
area: material/table gemini-triaged P4
難易度 1/5 1時間未満 初心者へのやさしさ 88/100
angular/components#33709 · コメント 1 件 ·
-
area: material/table docs gemini-triaged P4
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
angular/components#33455 ·
-
area: material/core gemini-triaged P3
難易度 1/5 1時間未満 初心者へのやさしさ 78/100
angular/components#33059 · コメント 2 件 ·
angular/components の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
bcgov/bc-wallet-mobile#4761 · コメント 1 件 ·
-
external-issue to-triage
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
-
area-deployment area-integrations triage:bot-seen
難易度 2/5 半日 初心者へのやさしさ 86/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
-
refactor
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100