From b60139df5030bf2ffc87be43cc9b26cd4320bed8 Mon Sep 17 00:00:00 2001 From: Pipicz Petra Date: Wed, 15 Jul 2026 12:52:57 +0200 Subject: [PATCH] feat(card): create examples and add localization to card component --- .../card-appearance-example.component.html | 11 +++ .../card-appearance-example.component.ts | 15 +++ .../card-clickable-example.component.html | 9 ++ .../card-clickable-example.component.ts | 19 ++++ .../components-example/card/card-examples.ts | 96 +++++++++++++++++++ ...rd-full-composition-example.component.html | 18 ++++ ...card-full-composition-example.component.ts | 27 ++++++ .../card-media-example.component.html | 23 +++++ .../card-media-example.component.ts | 17 ++++ .../card-orientation-example.component.html | 20 ++++ .../card-orientation-example.component.ts | 23 +++++ .../card-size-example.component.html | 14 +++ .../card-size-example.component.ts | 15 +++ .../card-variants-example.component.html | 36 +++++++ .../card-variants-example.component.ts | 15 +++ .../app/pages/card/card-demo.component.html | 6 ++ .../src/app/pages/card/card-demo.component.ts | 4 + projects/demo/src/assets/i18n/en.json | 73 ++++++++++++++ projects/demo/src/assets/i18n/hu.json | 73 ++++++++++++++ 19 files changed, 514 insertions(+) create mode 100644 projects/demo/src/app/components-example/card/card-appearance-example/card-appearance-example.component.html create mode 100644 projects/demo/src/app/components-example/card/card-appearance-example/card-appearance-example.component.ts create mode 100644 projects/demo/src/app/components-example/card/card-clickable-example/card-clickable-example.component.html create mode 100644 projects/demo/src/app/components-example/card/card-clickable-example/card-clickable-example.component.ts create mode 100644 projects/demo/src/app/components-example/card/card-examples.ts create mode 100644 projects/demo/src/app/components-example/card/card-full-composition-example/card-full-composition-example.component.html create mode 100644 projects/demo/src/app/components-example/card/card-full-composition-example/card-full-composition-example.component.ts create mode 100644 projects/demo/src/app/components-example/card/card-media-example/card-media-example.component.html create mode 100644 projects/demo/src/app/components-example/card/card-media-example/card-media-example.component.ts create mode 100644 projects/demo/src/app/components-example/card/card-orientation-example/card-orientation-example.component.html create mode 100644 projects/demo/src/app/components-example/card/card-orientation-example/card-orientation-example.component.ts create mode 100644 projects/demo/src/app/components-example/card/card-size-example/card-size-example.component.html create mode 100644 projects/demo/src/app/components-example/card/card-size-example/card-size-example.component.ts create mode 100644 projects/demo/src/app/components-example/card/card-variants-example/card-variants-example.component.html create mode 100644 projects/demo/src/app/components-example/card/card-variants-example/card-variants-example.component.ts diff --git a/projects/demo/src/app/components-example/card/card-appearance-example/card-appearance-example.component.html b/projects/demo/src/app/components-example/card/card-appearance-example/card-appearance-example.component.html new file mode 100644 index 00000000..2d8f872b --- /dev/null +++ b/projects/demo/src/app/components-example/card/card-appearance-example/card-appearance-example.component.html @@ -0,0 +1,11 @@ +
+ + {{ "EXAMPLES.CARD.APPEARANCES.CONTENT.FILLED" | translate }} + + + {{ "EXAMPLES.CARD.APPEARANCES.CONTENT.OUTLINED" | translate }} + + + {{ "EXAMPLES.CARD.APPEARANCES.CONTENT.ELEVATED" | translate }} + +
diff --git a/projects/demo/src/app/components-example/card/card-appearance-example/card-appearance-example.component.ts b/projects/demo/src/app/components-example/card/card-appearance-example/card-appearance-example.component.ts new file mode 100644 index 00000000..ec7a4f08 --- /dev/null +++ b/projects/demo/src/app/components-example/card/card-appearance-example/card-appearance-example.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; +import { IdsCardComponent } from '@i-cell/ids-angular/card'; +import { IdsCardBodyDirective } from '@i-cell/ids-angular/card/card-body.directive'; +import { TranslateModule } from '@ngx-translate/core'; + +@Component({ + selector: 'app-card-appearance-example', + imports: [ + IdsCardComponent, + IdsCardBodyDirective, + TranslateModule, + ], + templateUrl: './card-appearance-example.component.html', +}) +export class CardAppearanceExampleComponent {} diff --git a/projects/demo/src/app/components-example/card/card-clickable-example/card-clickable-example.component.html b/projects/demo/src/app/components-example/card/card-clickable-example/card-clickable-example.component.html new file mode 100644 index 00000000..c4443de5 --- /dev/null +++ b/projects/demo/src/app/components-example/card/card-clickable-example/card-clickable-example.component.html @@ -0,0 +1,9 @@ +
+ + {{ "EXAMPLES.CARD.CLICKABLE.CONTENT.CLICKABLE" | translate }} + + + + {{ "EXAMPLES.CARD.CLICKABLE.CONTENT.DISABLED" | translate }} + +
diff --git a/projects/demo/src/app/components-example/card/card-clickable-example/card-clickable-example.component.ts b/projects/demo/src/app/components-example/card/card-clickable-example/card-clickable-example.component.ts new file mode 100644 index 00000000..da91329e --- /dev/null +++ b/projects/demo/src/app/components-example/card/card-clickable-example/card-clickable-example.component.ts @@ -0,0 +1,19 @@ +import { Component } from '@angular/core'; +import { IdsCardComponent } from '@i-cell/ids-angular/card'; +import { IdsCardBodyDirective } from '@i-cell/ids-angular/card/card-body.directive'; +import { TranslateModule } from '@ngx-translate/core'; + +@Component({ + selector: 'app-card-clickable-example', + imports: [ + IdsCardComponent, + IdsCardBodyDirective, + TranslateModule, + ], + templateUrl: './card-clickable-example.component.html', +}) +export class CardClickableExampleComponent { + public onCardClick(): void { + console.info('Card clicked'); + } +} diff --git a/projects/demo/src/app/components-example/card/card-examples.ts b/projects/demo/src/app/components-example/card/card-examples.ts new file mode 100644 index 00000000..38407e02 --- /dev/null +++ b/projects/demo/src/app/components-example/card/card-examples.ts @@ -0,0 +1,96 @@ +import { CardAppearanceExampleComponent } from './card-appearance-example/card-appearance-example.component'; +import { CardClickableExampleComponent } from './card-clickable-example/card-clickable-example.component'; +import { CardFullCompositionExampleComponent } from './card-full-composition-example/card-full-composition-example.component'; +import { CardMediaExampleComponent } from './card-media-example/card-media-example.component'; +import { CardOrientationExampleComponent } from './card-orientation-example/card-orientation-example.component'; +import { CardSizeExampleComponent } from './card-size-example/card-size-example.component'; +import { CardVariantsExampleComponent } from './card-variants-example/card-variants-example.component'; + +import { IdsExampleDef } from '../../shared/ids-example-viewer/ids-example.model'; + +export const CARD_EXAMPLES: IdsExampleDef[] = [ + { + id: 'card-appearances', + title: 'EXAMPLES.CARD.APPEARANCES.TITLE', + description: 'EXAMPLES.CARD.APPEARANCES.DESCRIPTION', + component: CardAppearanceExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/card/card-appearance-example/card-appearance-example.component.html', + TSpath: 'assets/examples/card/card-appearance-example/card-appearance-example.component.ts', + }, + ], + }, + { + id: 'card-variants', + title: 'EXAMPLES.CARD.VARIANTS.TITLE', + description: 'EXAMPLES.CARD.VARIANTS.DESCRIPTION', + component: CardVariantsExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/card/card-variants-example/card-variants-example.component.html', + TSpath: 'assets/examples/card/card-variants-example/card-variants-example.component.ts', + }, + ], + }, + { + id: 'card-sizes', + title: 'EXAMPLES.CARD.SIZES.TITLE', + description: 'EXAMPLES.CARD.SIZES.DESCRIPTION', + component: CardSizeExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/card/card-size-example/card-size-example.component.html', + TSpath: 'assets/examples/card/card-size-example/card-size-example.component.ts', + }, + ], + }, + { + id: 'card-orientation', + title: 'EXAMPLES.CARD.ORIENTATION.TITLE', + description: 'EXAMPLES.CARD.ORIENTATION.DESCRIPTION', + component: CardOrientationExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/card/card-orientation-example/card-orientation-example.component.html', + TSpath: 'assets/examples/card/card-orientation-example/card-orientation-example.component.ts', + }, + ], + }, + { + id: 'card-media', + title: 'EXAMPLES.CARD.MEDIA.TITLE', + description: 'EXAMPLES.CARD.MEDIA.DESCRIPTION', + component: CardMediaExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/card/card-media-example/card-media-example.component.html', + TSpath: 'assets/examples/card/card-media-example/card-media-example.component.ts', + }, + ], + }, + { + id: 'card-clickable', + title: 'EXAMPLES.CARD.CLICKABLE.TITLE', + description: 'EXAMPLES.CARD.CLICKABLE.DESCRIPTION', + component: CardClickableExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/card/card-clickable-example/card-clickable-example.component.html', + TSpath: 'assets/examples/card/card-clickable-example/card-clickable-example.component.ts', + }, + ], + }, + { + id: 'card-full-composition', + title: 'EXAMPLES.CARD.FULL_COMPOSITION.TITLE', + description: 'EXAMPLES.CARD.FULL_COMPOSITION.DESCRIPTION', + component: CardFullCompositionExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/card/card-full-composition-example/card-full-composition-example.component.html', + TSpath: 'assets/examples/card/card-full-composition-example/card-full-composition-example.component.ts', + }, + ], + }, +]; diff --git a/projects/demo/src/app/components-example/card/card-full-composition-example/card-full-composition-example.component.html b/projects/demo/src/app/components-example/card/card-full-composition-example/card-full-composition-example.component.html new file mode 100644 index 00000000..93ea0476 --- /dev/null +++ b/projects/demo/src/app/components-example/card/card-full-composition-example/card-full-composition-example.component.html @@ -0,0 +1,18 @@ + +
+

{{ "EXAMPLES.CARD.FULL_COMPOSITION.CONTENT.TITLE" | translate }}

+

{{ "EXAMPLES.CARD.FULL_COMPOSITION.CONTENT.SUBTITLE" | translate }}

+
+ Dandelion meadow + + {{ "EXAMPLES.CARD.FULL_COMPOSITION.CONTENT.BODY" | translate }} + +
+ +
+ diff --git a/projects/demo/src/app/components-example/card/card-full-composition-example/card-full-composition-example.component.ts b/projects/demo/src/app/components-example/card/card-full-composition-example/card-full-composition-example.component.ts new file mode 100644 index 00000000..00904d09 --- /dev/null +++ b/projects/demo/src/app/components-example/card/card-full-composition-example/card-full-composition-example.component.ts @@ -0,0 +1,27 @@ +import { Component } from '@angular/core'; +import { IdsButtonComponent } from '@i-cell/ids-angular/button'; +import { IdsCardComponent } from '@i-cell/ids-angular/card'; +import { IdsCardBodyDirective } from '@i-cell/ids-angular/card/card-body.directive'; +import { IdsCardFooterDirective } from '@i-cell/ids-angular/card/card-footer.directive'; +import { IdsCardHeaderComponent } from '@i-cell/ids-angular/card/card-header.component'; +import { IdsCardMediaDirective } from '@i-cell/ids-angular/card/card-media.directive'; +import { IdsCardSubtitleDirective } from '@i-cell/ids-angular/card/card-subtitle.directive'; +import { IdsCardTitleDirective } from '@i-cell/ids-angular/card/card-title.directive'; +import { TranslateModule } from '@ngx-translate/core'; + +@Component({ + selector: 'app-card-full-composition-example', + imports: [ + IdsCardComponent, + IdsCardHeaderComponent, + IdsCardTitleDirective, + IdsCardSubtitleDirective, + IdsCardMediaDirective, + IdsCardBodyDirective, + IdsCardFooterDirective, + IdsButtonComponent, + TranslateModule, + ], + templateUrl: './card-full-composition-example.component.html', +}) +export class CardFullCompositionExampleComponent {} diff --git a/projects/demo/src/app/components-example/card/card-media-example/card-media-example.component.html b/projects/demo/src/app/components-example/card/card-media-example/card-media-example.component.html new file mode 100644 index 00000000..32afa291 --- /dev/null +++ b/projects/demo/src/app/components-example/card/card-media-example/card-media-example.component.html @@ -0,0 +1,23 @@ +
+ + + {{ "EXAMPLES.CARD.MEDIA.CONTENT.STRETCHED" | translate }} + + + + + {{ "EXAMPLES.CARD.MEDIA.CONTENT.NON_STRETCHED" | translate }} + +
diff --git a/projects/demo/src/app/components-example/card/card-media-example/card-media-example.component.ts b/projects/demo/src/app/components-example/card/card-media-example/card-media-example.component.ts new file mode 100644 index 00000000..342e95bf --- /dev/null +++ b/projects/demo/src/app/components-example/card/card-media-example/card-media-example.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; +import { IdsCardComponent } from '@i-cell/ids-angular/card'; +import { IdsCardBodyDirective } from '@i-cell/ids-angular/card/card-body.directive'; +import { IdsCardMediaDirective } from '@i-cell/ids-angular/card/card-media.directive'; +import { TranslateModule } from '@ngx-translate/core'; + +@Component({ + selector: 'app-card-media-example', + imports: [ + IdsCardComponent, + IdsCardBodyDirective, + IdsCardMediaDirective, + TranslateModule, + ], + templateUrl: './card-media-example.component.html', +}) +export class CardMediaExampleComponent {} diff --git a/projects/demo/src/app/components-example/card/card-orientation-example/card-orientation-example.component.html b/projects/demo/src/app/components-example/card/card-orientation-example/card-orientation-example.component.html new file mode 100644 index 00000000..b2f1ce3f --- /dev/null +++ b/projects/demo/src/app/components-example/card/card-orientation-example/card-orientation-example.component.html @@ -0,0 +1,20 @@ +
+ +
+

{{ "EXAMPLES.CARD.ORIENTATION.CONTENT.VERTICAL_TITLE" | translate }}

+

{{ "EXAMPLES.CARD.ORIENTATION.CONTENT.VERTICAL_SUBTITLE" | translate }}

+
+ + {{ "EXAMPLES.CARD.ORIENTATION.CONTENT.VERTICAL_BODY" | translate }} + + + + + {{ "EXAMPLES.CARD.ORIENTATION.CONTENT.HORIZONTAL_BODY" | translate }} + +
diff --git a/projects/demo/src/app/components-example/card/card-orientation-example/card-orientation-example.component.ts b/projects/demo/src/app/components-example/card/card-orientation-example/card-orientation-example.component.ts new file mode 100644 index 00000000..c5315eec --- /dev/null +++ b/projects/demo/src/app/components-example/card/card-orientation-example/card-orientation-example.component.ts @@ -0,0 +1,23 @@ +import { Component } from '@angular/core'; +import { IdsCardComponent } from '@i-cell/ids-angular/card'; +import { IdsCardBodyDirective } from '@i-cell/ids-angular/card/card-body.directive'; +import { IdsCardHeaderComponent } from '@i-cell/ids-angular/card/card-header.component'; +import { IdsCardMediaDirective } from '@i-cell/ids-angular/card/card-media.directive'; +import { IdsCardSubtitleDirective } from '@i-cell/ids-angular/card/card-subtitle.directive'; +import { IdsCardTitleDirective } from '@i-cell/ids-angular/card/card-title.directive'; +import { TranslateModule } from '@ngx-translate/core'; + +@Component({ + selector: 'app-card-orientation-example', + imports: [ + IdsCardComponent, + IdsCardHeaderComponent, + IdsCardBodyDirective, + IdsCardMediaDirective, + IdsCardTitleDirective, + IdsCardSubtitleDirective, + TranslateModule, + ], + templateUrl: './card-orientation-example.component.html', +}) +export class CardOrientationExampleComponent {} diff --git a/projects/demo/src/app/components-example/card/card-size-example/card-size-example.component.html b/projects/demo/src/app/components-example/card/card-size-example/card-size-example.component.html new file mode 100644 index 00000000..5b62bb20 --- /dev/null +++ b/projects/demo/src/app/components-example/card/card-size-example/card-size-example.component.html @@ -0,0 +1,14 @@ +
+ {{ "EXAMPLES.CARD.SIZES.CONTENT.DENSE" | translate }} + {{ "EXAMPLES.CARD.SIZES.CONTENT.COMPACT" | translate }} + {{ "EXAMPLES.CARD.SIZES.CONTENT.COMFORTABLE" | translate }} + {{ "EXAMPLES.CARD.SIZES.CONTENT.SPACIOUS" | translate }} +
diff --git a/projects/demo/src/app/components-example/card/card-size-example/card-size-example.component.ts b/projects/demo/src/app/components-example/card/card-size-example/card-size-example.component.ts new file mode 100644 index 00000000..27909e35 --- /dev/null +++ b/projects/demo/src/app/components-example/card/card-size-example/card-size-example.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; +import { IdsCardComponent } from '@i-cell/ids-angular/card'; +import { IdsCardBodyDirective } from '@i-cell/ids-angular/card/card-body.directive'; +import { TranslateModule } from '@ngx-translate/core'; + +@Component({ + selector: 'app-card-size-example', + imports: [ + IdsCardComponent, + IdsCardBodyDirective, + TranslateModule, + ], + templateUrl: './card-size-example.component.html', +}) +export class CardSizeExampleComponent {} diff --git a/projects/demo/src/app/components-example/card/card-variants-example/card-variants-example.component.html b/projects/demo/src/app/components-example/card/card-variants-example/card-variants-example.component.html new file mode 100644 index 00000000..d6d0c35d --- /dev/null +++ b/projects/demo/src/app/components-example/card/card-variants-example/card-variants-example.component.html @@ -0,0 +1,36 @@ +
+
+ {{ "EXAMPLES.CARD.VARIANTS.CONTENT.PRIMARY" | translate }} + {{ "EXAMPLES.CARD.VARIANTS.CONTENT.SECONDARY" | translate }} + {{ "EXAMPLES.CARD.VARIANTS.CONTENT.BRAND" | translate }} + {{ "EXAMPLES.CARD.VARIANTS.CONTENT.SURFACE" | translate }} + {{ "EXAMPLES.CARD.VARIANTS.CONTENT.SUCCESS" | translate }} +
+
+ {{ "EXAMPLES.CARD.VARIANTS.CONTENT.WARNING" | translate }} + {{ "EXAMPLES.CARD.VARIANTS.CONTENT.ERROR" | translate }} + {{ "EXAMPLES.CARD.VARIANTS.CONTENT.INFO" | translate }} + {{ "EXAMPLES.CARD.VARIANTS.CONTENT.LIGHT" | translate }} + {{ "EXAMPLES.CARD.VARIANTS.CONTENT.DARK" | translate }} +
+
diff --git a/projects/demo/src/app/components-example/card/card-variants-example/card-variants-example.component.ts b/projects/demo/src/app/components-example/card/card-variants-example/card-variants-example.component.ts new file mode 100644 index 00000000..ebdc3f06 --- /dev/null +++ b/projects/demo/src/app/components-example/card/card-variants-example/card-variants-example.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; +import { IdsCardComponent } from '@i-cell/ids-angular/card'; +import { IdsCardBodyDirective } from '@i-cell/ids-angular/card/card-body.directive'; +import { TranslateModule } from '@ngx-translate/core'; + +@Component({ + selector: 'app-card-variants-example', + imports: [ + IdsCardComponent, + IdsCardBodyDirective, + TranslateModule, + ], + templateUrl: './card-variants-example.component.html', +}) +export class CardVariantsExampleComponent {} diff --git a/projects/demo/src/app/pages/card/card-demo.component.html b/projects/demo/src/app/pages/card/card-demo.component.html index b182bf2a..91cbc67c 100644 --- a/projects/demo/src/app/pages/card/card-demo.component.html +++ b/projects/demo/src/app/pages/card/card-demo.component.html @@ -90,3 +90,9 @@

This is the subtitle

+ +
+ @for (example of cardExamples; track example.id) { + + } +
diff --git a/projects/demo/src/app/pages/card/card-demo.component.ts b/projects/demo/src/app/pages/card/card-demo.component.ts index 6390d501..b088bcf0 100644 --- a/projects/demo/src/app/pages/card/card-demo.component.ts +++ b/projects/demo/src/app/pages/card/card-demo.component.ts @@ -4,6 +4,8 @@ import { ControlTableComponent } from '../../components/control-table/control-ta import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; +import { CARD_EXAMPLES } from '../../components-example/card/card-examples'; +import { IdsExampleViewerComponent } from '../../shared/ids-example-viewer/ids-example-viewer.component'; import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; @@ -32,6 +34,7 @@ import { TranslateModule } from '@ngx-translate/core'; DemoAndCodeComponent, TryoutControlComponent, ControlTableComponent, + IdsExampleViewerComponent, ], templateUrl: './card-demo.component.html', styleUrls: [ @@ -41,4 +44,5 @@ import { TranslateModule } from '@ngx-translate/core'; }) export class CardDemoComponent { protected _cardDemoService = inject(CardDemoService); + public readonly cardExamples = CARD_EXAMPLES; } diff --git a/projects/demo/src/assets/i18n/en.json b/projects/demo/src/assets/i18n/en.json index c8f01d5e..84abbd69 100644 --- a/projects/demo/src/assets/i18n/en.json +++ b/projects/demo/src/assets/i18n/en.json @@ -179,6 +179,79 @@ "TITLE": "Button group", "DESCRIPTION": "Buttons can be grouped together to organize them." } + }, + "CARD": { + "APPEARANCES": { + "TITLE": "Card appearances", + "DESCRIPTION": "The three card appearances: filled (default), outlined, and elevated.", + "CONTENT": { + "FILLED": "Filled card", + "OUTLINED": "Outlined card", + "ELEVATED": "Elevated card" + } + }, + "VARIANTS": { + "TITLE": "Card variants", + "DESCRIPTION": "Cards with different color variants: primary, secondary, brand, surface(default), success, warning, error, info, light, and dark.", + "CONTENT": { + "PRIMARY": "Primary", + "SECONDARY": "Secondary", + "BRAND": "Brand", + "SURFACE": "Surface", + "SUCCESS": "Success", + "WARNING": "Warning", + "ERROR": "Error", + "INFO": "Info", + "LIGHT": "Light", + "DARK": "Dark" + } + }, + "SIZES": { + "TITLE": "Card sizes", + "DESCRIPTION": "Cards with different sizes: dense, compact (default), comfortable and spacious.", + "CONTENT": { + "DENSE": "Dense", + "COMPACT": "Compact", + "COMFORTABLE": "Comfortable", + "SPACIOUS": "Spacious" + } + }, + "ORIENTATION": { + "TITLE": "Card orientation", + "DESCRIPTION": "Cards can be laid out vertically or horizontally.", + "CONTENT": { + "VERTICAL_TITLE": "Vertical card", + "VERTICAL_SUBTITLE": "Header on top", + "VERTICAL_BODY": "The header, media and body are stacked vertically.", + "HORIZONTAL_BODY": "Horizontal card with the media placed next to the body content." + } + }, + "MEDIA": { + "TITLE": "Card media", + "DESCRIPTION": "The media of a card can be stretched to fill the full width of the card, or kept within the card's default padding.", + "CONTENT": { + "STRETCHED": "Stretched media fills the full width of the card.", + "NON_STRETCHED": "Non-stretched media keeps the card's default padding." + } + }, + "CLICKABLE": { + "TITLE": "Clickable card", + "DESCRIPTION": "Cards become clickable when a click handler is attached, and can also be disabled.", + "CONTENT": { + "CLICKABLE": "Clickable card", + "DISABLED": "Disabled clickable card" + } + }, + "FULL_COMPOSITION": { + "TITLE": "Full composition", + "DESCRIPTION": "A card composed of a header (title and subtitle), media, body and footer sections to present rich content.", + "CONTENT": { + "TITLE": "Dandelion Meadow", + "SUBTITLE": "Nature photography", + "BODY": "A card can be composed of a header (title and subtitle), media, body and footer sections to present rich content.", + "FOOTER_BUTTON": "Learn more" + } + } } } } diff --git a/projects/demo/src/assets/i18n/hu.json b/projects/demo/src/assets/i18n/hu.json index cdca4f44..63ad2aaf 100644 --- a/projects/demo/src/assets/i18n/hu.json +++ b/projects/demo/src/assets/i18n/hu.json @@ -179,6 +179,79 @@ "TITLE": "Button-group", "DESCRIPTION": "A gombok csoportosíthatók, ezek rendszerezésre alkalmasak." } + }, + "CARD": { + "APPEARANCES": { + "TITLE": "Card megjelenései", + "DESCRIPTION": "A card komponens megjelenései: filled (alapértelmezett), outlined, és elevated.", + "CONTENT": { + "FILLED": "Filled kártya", + "OUTLINED": "Outlined kártya", + "ELEVATED": "Elevated kártya" + } + }, + "VARIANTS": { + "TITLE": "Card változatai", + "DESCRIPTION": "A card komponens különböző változatai: primary, secondary, brand, surface (alapértelmezett), success, warning, error, info, light, és dark.", + "CONTENT": { + "PRIMARY": "Primary", + "SECONDARY": "Secondary", + "BRAND": "Brand", + "SURFACE": "Surface", + "SUCCESS": "Success", + "WARNING": "Warning", + "ERROR": "Error", + "INFO": "Info", + "LIGHT": "Light", + "DARK": "Dark" + } + }, + "SIZES": { + "TITLE": "Card méretei", + "DESCRIPTION": "A card komponens különböző méretei: dense, compact (alapértelmezett), comfortable és spacious.", + "CONTENT": { + "DENSE": "Dense", + "COMPACT": "Compact", + "COMFORTABLE": "Comfortable", + "SPACIOUS": "Spacious" + } + }, + "ORIENTATION": { + "TITLE": "Card orientációja", + "DESCRIPTION": "A card-ok elrendezhetők függőlegesen vagy vízszintesen.", + "CONTENT": { + "VERTICAL_TITLE": "Függőleges kártya", + "VERTICAL_SUBTITLE": "Fejléc felül", + "VERTICAL_BODY": "A fejléc, a média és a törzs függőlegesen egymás alatt helyezkednek el.", + "HORIZONTAL_BODY": "Vízszintes kártya, a médiával a törzs tartalma mellett." + } + }, + "MEDIA": { + "TITLE": "Card média", + "DESCRIPTION": "A card média tartalma kitölthető a card teljes szélességében, vagy megtartható az alapértelmezett margóval.", + "CONTENT": { + "STRETCHED": "A kitöltött média a kártya teljes szélességét elfoglalja.", + "NON_STRETCHED": "A nem kitöltött média megtartja a kártya alapértelmezett margóját." + } + }, + "CLICKABLE": { + "TITLE": "Kattintható card", + "DESCRIPTION": "A card-ok kattinthatóvá válnak, ha click handler van rájuk kötve, és le is tilthatók.", + "CONTENT": { + "CLICKABLE": "Kattintható kártya", + "DISABLED": "Letiltott, kattintható kártya" + } + }, + "FULL_COMPOSITION": { + "TITLE": "Teljes felépítés", + "DESCRIPTION": "Egy card, amely fejlécből (cím és alcím), médiából, törzsből és lábléc szekcióból épül fel, tartalom megjelenítéséhez.", + "CONTENT": { + "TITLE": "Pitypangos rét", + "SUBTITLE": "Természetfotózás", + "BODY": "Egy kártya felépülhet fejlécből (cím és alcím), médiából, törzsből és lábléc szekcióból, hogy gazdag tartalmat jelenítsen meg.", + "FOOTER_BUTTON": "Tudj meg többet" + } + } } }