-
Notifications
You must be signed in to change notification settings - Fork 474
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(core): support using native scrollbar
- Loading branch information
Showing
13 changed files
with
152 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -13,7 +13,6 @@ | |
| } | ||
| } | ||
|
|
||
| html[data-tui-theme], | ||
| .tui-zero-scrollbar { | ||
| .scrollbar-hidden(); | ||
| } | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
51 changes: 27 additions & 24 deletions
51
projects/core/components/scrollbar/scroll-controls.template.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,29 @@ | ||
| <ng-container *ngIf="refresh$ | async as bars"> | ||
| <div | ||
| *ngIf="bars[0]" | ||
| class="t-bar t-bar_vertical" | ||
| [@tuiFadeIn]="options" | ||
| [class.t-bar_has-horizontal]="bars[1]" | ||
| (mousedown.capture.prevent)="(0)" | ||
| > | ||
| <ng-container *ngIf="nativeScrollbar; else custom" /> | ||
| <ng-template #custom> | ||
| <ng-container *ngIf="refresh$ | async as bars"> | ||
| <div | ||
| tuiScrollbar="vertical" | ||
| class="t-thumb" | ||
| ></div> | ||
| </div> | ||
| <div | ||
| *ngIf="bars[1]" | ||
| class="t-bar t-bar_horizontal" | ||
| [@tuiFadeIn]="options" | ||
| [class.t-bar_has-vertical]="bars[0]" | ||
| (mousedown.capture.prevent)="(0)" | ||
| > | ||
| *ngIf="bars[0]" | ||
| class="t-bar t-bar_vertical" | ||
| [@tuiFadeIn]="options" | ||
| [class.t-bar_has-horizontal]="bars[1]" | ||
| (mousedown.capture.prevent)="(0)" | ||
| > | ||
| <div | ||
| tuiScrollbar="vertical" | ||
| class="t-thumb" | ||
| ></div> | ||
| </div> | ||
| <div | ||
| tuiScrollbar="horizontal" | ||
| class="t-thumb" | ||
| ></div> | ||
| </div> | ||
| </ng-container> | ||
| *ngIf="bars[1]" | ||
| class="t-bar t-bar_horizontal" | ||
| [@tuiFadeIn]="options" | ||
| [class.t-bar_has-vertical]="bars[0]" | ||
| (mousedown.capture.prevent)="(0)" | ||
| > | ||
| <div | ||
| tuiScrollbar="horizontal" | ||
| class="t-thumb" | ||
| ></div> | ||
| </div> | ||
| </ng-container> | ||
| </ng-template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,12 @@ | ||
| import type {Provider} from '@angular/core'; | ||
| import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous'; | ||
| import {tuiCreateOptions} from '@taiga-ui/cdk/utils/di'; | ||
|
|
||
| export interface TuiScrollbarOptions { | ||
| mode: 'always' | 'hover'; | ||
| mode: 'always' | 'hidden' | 'hover' | 'native'; | ||
| } | ||
|
|
||
| export const TUI_DEFAULT_SCROLLBAR_OPTIONS: TuiScrollbarOptions = { | ||
| mode: 'always', | ||
| }; | ||
|
|
||
| export const TUI_SCROLLBAR_OPTIONS = tuiCreateToken(TUI_DEFAULT_SCROLLBAR_OPTIONS); | ||
|
|
||
| export function tuiScrollbarOptionsProvider( | ||
| options: Partial<TuiScrollbarOptions>, | ||
| ): Provider { | ||
| return tuiProvideOptions( | ||
| TUI_SCROLLBAR_OPTIONS, | ||
| options, | ||
| TUI_DEFAULT_SCROLLBAR_OPTIONS, | ||
| ); | ||
| } | ||
| export const [TUI_SCROLLBAR_OPTIONS, tuiScrollbarOptionsProvider] = | ||
| tuiCreateOptions<TuiScrollbarOptions>(TUI_DEFAULT_SCROLLBAR_OPTIONS); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
50 changes: 50 additions & 0 deletions
50
projects/demo/src/modules/components/scrollbar/examples/8/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| <tui-scrollbar class="box"> | ||
| <div class="content"> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti dignissimos, doloremque. Aperiam | ||
| assumenda atque aut blanditiis corporis, eum, facilis harum laudantium magni necessitatibus nobis quas | ||
| repudiandae sint ut voluptatem! Optio. | ||
| </p> | ||
| <p> | ||
| Accusamus aperiam assumenda aut consectetur, corporis delectus, dolor eaque eius est hic impedit labore | ||
| possimus provident quas rem, rerum sequi sint tempora tempore ut? Debitis esse neque odio odit provident? | ||
| </p> | ||
| <p> | ||
| Cum eum illo, ipsa iure nostrum ut voluptates? Autem blanditiis corporis debitis deserunt ex expedita | ||
| facilis fuga, illum iusto magnam praesentium provident recusandae repudiandae, totam, voluptatem. Minima | ||
| numquam sapiente sunt. | ||
| </p> | ||
| <p> | ||
| Beatae consectetur cupiditate dignissimos ducimus eos excepturi labore pariatur placeat quia similique. | ||
| Architecto aspernatur cumque debitis distinctio esse, facere fugit harum ipsum libero minus neque numquam | ||
| omnis quidem, tempora, ut! | ||
| </p> | ||
| <p> | ||
| Mollitia, perspiciatis sunt! Architecto aspernatur assumenda beatae, blanditiis commodi consequuntur debitis | ||
| et id, laboriosam maxime molestiae neque nihil officiis omnis, quam quos sint veritatis voluptate? Alias | ||
| deserunt distinctio modi perferendis? | ||
| </p> | ||
| <p> | ||
| Ab aspernatur aut cumque cupiditate deleniti, dolorem ducimus eligendi eos facere harum hic ipsam ipsum iste | ||
| itaque modi nam necessitatibus nostrum nulla omnis quae repellat, sapiente sit tempore. Ipsam, quidem! | ||
| </p> | ||
| <p> | ||
| Ab debitis deleniti distinctio est ex facere magni nemo numquam placeat quia, quibusdam sequi! Aliquid at | ||
| consectetur culpa ea enim facilis, harum hic, inventore iste possimus praesentium quas tempora voluptates. | ||
| </p> | ||
| <p> | ||
| Aliquam eligendi ipsam modi nemo numquam obcaecati officia, quidem unde? Accusantium amet, animi deleniti | ||
| dolorum ea earum eos, expedita ipsa minima modi, pariatur perspiciatis porro quibusdam quo repellat tempore | ||
| voluptates! | ||
| </p> | ||
| <p> | ||
| Ab assumenda fugiat magni natus officiis perferendis ratione rem repellendus tenetur. At commodi laudantium | ||
| modi, natus nobis nulla odio odit sed sint tempora tenetur voluptas? At odio praesentium quas ut! | ||
| </p> | ||
| <p> | ||
| Atque aut consectetur consequuntur debitis eius facere ipsa ipsam maiores minima minus mollitia qui quos | ||
| repudiandae sapiente, soluta? Ad, amet dolore doloribus ducimus eos exercitationem molestiae quisquam soluta | ||
| ullam voluptate. | ||
| </p> | ||
| </div> | ||
| </tui-scrollbar> |
13 changes: 13 additions & 0 deletions
13
projects/demo/src/modules/components/scrollbar/examples/8/index.less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| .box { | ||
| inline-size: 16rem; | ||
| block-size: 16rem; | ||
| border: 1px solid; | ||
| } | ||
|
|
||
| .content { | ||
| padding: 0 0.6875rem; | ||
| } | ||
|
|
||
| p { | ||
| white-space: nowrap; | ||
| } |
19 changes: 19 additions & 0 deletions
19
projects/demo/src/modules/components/scrollbar/examples/8/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import {Component} from '@angular/core'; | ||
| import {changeDetection} from '@demo/emulate/change-detection'; | ||
| import {encapsulation} from '@demo/emulate/encapsulation'; | ||
| import {TuiScrollbar, tuiScrollbarOptionsProvider} from '@taiga-ui/core'; | ||
|
|
||
| @Component({ | ||
| standalone: true, | ||
| imports: [TuiScrollbar], | ||
| templateUrl: './index.html', | ||
| styleUrls: ['./index.less'], | ||
| encapsulation, | ||
| changeDetection, | ||
| providers: [ | ||
| tuiScrollbarOptionsProvider({ | ||
| mode: 'native', | ||
| }), | ||
| ], | ||
| }) | ||
| export default class Example {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters