From 60843a50cdcf5b2951c1ddc7a5df48852e0bde47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= Date: Fri, 12 May 2023 03:05:49 +0300 Subject: [PATCH] document form input component --- docs/en/UI/Angular/FormInput-Component.md | 43 ++++++++++++++++++++++ docs/en/UI/Angular/images/form-input.png | Bin 0 -> 5896 bytes 2 files changed, 43 insertions(+) create mode 100644 docs/en/UI/Angular/FormInput-Component.md create mode 100644 docs/en/UI/Angular/images/form-input.png diff --git a/docs/en/UI/Angular/FormInput-Component.md b/docs/en/UI/Angular/FormInput-Component.md new file mode 100644 index 0000000000..11b857ddb4 --- /dev/null +++ b/docs/en/UI/Angular/FormInput-Component.md @@ -0,0 +1,43 @@ +# Form Input Component + +The ABP FormInput Component is a reusable form input component for text type. + +It takes `label`, `labelClass` (default form-label), `inputId`,`inputPlaceholder`,`inputReadonly`,`inputClass` (default form-control) and `inputStyle` as input to customize component. Also, it emits `formBlur` and `formFocus` events when component gain or lose focus. + +# Usage + +ABP FormInput component is a part of the `ThemeSharedModule` module. If you've imported that module into your module, you don't need to import it again. If not, first import it as shown below: + +```ts +// my-feature.module.ts + +import { ThemeSharedModule } from "@abp/ng.theme.shared"; +import { FomrInputDemoComponent } from "./FomrInputDemoComponent.component"; + +@NgModule({ + imports: [ + ThemeSharedModule, + // ... + ], + declarations: [FomrInputDemoComponent], + // ... +}) +export class MyFeatureModule {} +``` + +Then, the `abp-form-input` component can be used. See the example below: + +```html +
+
+ +
+
+``` + +See the form input result below: + +![abp-form-input](./images/form-input.png) diff --git a/docs/en/UI/Angular/images/form-input.png b/docs/en/UI/Angular/images/form-input.png new file mode 100644 index 0000000000000000000000000000000000000000..73c9cfd74ccf777e26e75eb8e743bec72411811a GIT binary patch literal 5896 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 HHu66J^~51m literal 0 HcmV?d00001