From 9f10aeb148b89aa86245f9f6b59464661877a2ab Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Sun, 30 Jul 2023 23:49:52 +0300 Subject: [PATCH] capsLock doc and test --- docs/en/UI/Angular/CapsLock.directive.md | 52 ++++++++++++++++++ .../UI/Angular/images/CapsLockDirective1.png | Bin 0 -> 2224 bytes .../UI/Angular/images/CapsLockDirective2.png | Bin 0 -> 4274 bytes 3 files changed, 52 insertions(+) create mode 100644 docs/en/UI/Angular/CapsLock.directive.md create mode 100644 docs/en/UI/Angular/images/CapsLockDirective1.png create mode 100644 docs/en/UI/Angular/images/CapsLockDirective2.png diff --git a/docs/en/UI/Angular/CapsLock.directive.md b/docs/en/UI/Angular/CapsLock.directive.md new file mode 100644 index 0000000000..4b92d61124 --- /dev/null +++ b/docs/en/UI/Angular/CapsLock.directive.md @@ -0,0 +1,52 @@ +# Show Password Directive + +In password inputs,You may want to show if Caps Lock is on. To make this even easier, you can use the `TrackCapsLockDirective` which has been exposed by the `@abp/ng.core` package. + + +## Getting Started + +In order to use the `TrackCapsLockDirective` in an HTML template, the **`CoreModule`** should be imported into your module like this: + +```ts +// ... +import { CoreModule } from '@abp/ng.core'; + +@NgModule({ + //... + imports: [..., CoreModule], +}) +export class MyFeatureModule {} +``` + +## Usage + +The `TrackCapsLockDirective` is very easy to use. The directive's selector is **`abpCapsLock`**. By adding the `abpCapsLock` event to an element, you can track the status of Caps Lock. U can use this to warn user + +See an example usage: + +```ts +@Component({ + selector: 'test-component', + standalone: true, + template: ` +
+ + + icon +
+ ` +}) +export class TestComponent{ + capsLock = false; +} +``` + +The `abpCapsLock` event has been added to the `` element. Press Caps Lock to activate the `TrackCapsLockDirective`. + +See the result: + +![Show Password directive](./images/CapsLockDirective1.png) + +To see Caps Lock icon press Caps Lock. + +![Show Password directive](./images/CapsLockDirective2.png) \ No newline at end of file diff --git a/docs/en/UI/Angular/images/CapsLockDirective1.png b/docs/en/UI/Angular/images/CapsLockDirective1.png new file mode 100644 index 0000000000000000000000000000000000000000..2f143d755fd2d331beed42c8ce9c361cb8aeaa0b GIT binary patch literal 2224 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 U>BitD2Pwepw$-gl!+XE~7Z`*$lmGw# literal 0 HcmV?d00001