From 90830b2e8a2b09099ce69c2c4afa279a73a7ba00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Thu, 29 Feb 2024 14:33:48 +0300 Subject: [PATCH] iconfield template doc added --- src/app/showcase/doc/iconfield/basicdoc.ts | 28 ++-- .../doc/iconfield/iconfielddoc.module.ts | 5 +- src/app/showcase/doc/iconfield/templatedoc.ts | 132 ++++++++++++++++++ .../showcase/pages/iconfield/iconfielddemo.ts | 8 +- 4 files changed, 162 insertions(+), 11 deletions(-) create mode 100644 src/app/showcase/doc/iconfield/templatedoc.ts diff --git a/src/app/showcase/doc/iconfield/basicdoc.ts b/src/app/showcase/doc/iconfield/basicdoc.ts index e3ef45ac3c6..6096ffd0f4b 100644 --- a/src/app/showcase/doc/iconfield/basicdoc.ts +++ b/src/app/showcase/doc/iconfield/basicdoc.ts @@ -6,13 +6,17 @@ import { Code } from '../../domain/code'; template: `

- A group is created by wrapping the input and icon with the IconField component. Each icon is defined as a child of InputIcon component. In addition, position of the icon can be changed using iconPosition property that the default - value is right and also left option is available. + A group is created by wrapping the input and icon with the IconField component. Each icon is defined as a child of InputIcon component. In addition, position of the icon can be changed using iconPosition property + that the default value is right and also left option is available.

-
+
+ + + +
@@ -22,14 +26,22 @@ import { Code } from '../../domain/code'; export class BasicDoc { code: Code = { basic: ` - + + + + + `, - html: `
+ html: `
- - - + + + + + + +
`, typescript: ` import { Component } from '@angular/core'; diff --git a/src/app/showcase/doc/iconfield/iconfielddoc.module.ts b/src/app/showcase/doc/iconfield/iconfielddoc.module.ts index a4fee91460a..125d9b4d618 100644 --- a/src/app/showcase/doc/iconfield/iconfielddoc.module.ts +++ b/src/app/showcase/doc/iconfield/iconfielddoc.module.ts @@ -4,8 +4,9 @@ import { RouterModule } from '@angular/router'; import { InputTextModule } from 'primeng/inputtext'; import { AppDocModule } from '../../layout/doc/app.doc.module'; import { AppCodeModule } from '../../layout/doc/app.code.component'; -import { BasicDoc } from './basicdoc'; import { ImportDoc } from './importdoc'; +import { BasicDoc } from './basicdoc'; +import { TemplateDoc } from './templatedoc'; import { IconFieldModule } from 'src/app/components/iconfield/iconfield'; import { InputIconModule } from 'src/app/components/inputicon/inputicon'; import { FormsModule } from '@angular/forms'; @@ -13,7 +14,7 @@ import { AccessibilityDoc } from './accessibilitydoc'; import { StyleDoc } from './styledoc'; @NgModule({ imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, InputTextModule, IconFieldModule, InputIconModule, FormsModule], - declarations: [BasicDoc, ImportDoc, AccessibilityDoc, StyleDoc], + declarations: [ImportDoc, BasicDoc, TemplateDoc, AccessibilityDoc, StyleDoc], exports: [AppDocModule] }) export class IconFieldDocModule {} diff --git a/src/app/showcase/doc/iconfield/templatedoc.ts b/src/app/showcase/doc/iconfield/templatedoc.ts new file mode 100644 index 00000000000..0c8d390f66b --- /dev/null +++ b/src/app/showcase/doc/iconfield/templatedoc.ts @@ -0,0 +1,132 @@ +import { Component } from '@angular/core'; +import { Code } from '../../domain/code'; + +@Component({ + selector: 'template-doc', + template: ` + +

An eye icon is displayed by default when the image is hovered in preview mode. Use the indicator template for custom content.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + ` +}) +export class TemplateDoc { + code: Code = { + basic: ` + + + + + + + + + + + + + + + + + + + + + + +`, + + html: `
+ + + + + + + + + + + + + + + + + + + + + + + + +
`, + + typescript: ` +import { Component } from '@angular/core'; + +@Component({ + selector: 'iconfield-template-demo', + templateUrl: './iconfield-template-demo.html' +}) +export class IconFieldTemplateDemo {}` + }; +} diff --git a/src/app/showcase/pages/iconfield/iconfielddemo.ts b/src/app/showcase/pages/iconfield/iconfielddemo.ts index d1dc341fbab..98f439ebade 100755 --- a/src/app/showcase/pages/iconfield/iconfielddemo.ts +++ b/src/app/showcase/pages/iconfield/iconfielddemo.ts @@ -1,6 +1,7 @@ import { Component } from '@angular/core'; -import { BasicDoc } from '../../doc/iconfield/basicdoc'; import { ImportDoc } from '../../doc/iconfield/importdoc'; +import { BasicDoc } from '../../doc/iconfield/basicdoc'; +import { TemplateDoc } from '../../doc/iconfield/templatedoc'; import { StyleDoc } from '../../doc/iconfield/styledoc'; import { AccessibilityDoc } from '../../doc/iconfield/accessibilitydoc'; @@ -20,6 +21,11 @@ export class IconFieldDemo { label: 'Basic', component: BasicDoc }, + { + id: 'template', + label: 'Template', + component: TemplateDoc + }, { id: 'style', label: 'Style',