+
+
+
diff --git a/showcase/src/app/home/home.component.scss b/showcase/src/app/home/home.component.scss
index f8160ea585..ee5c16ba55 100644
--- a/showcase/src/app/home/home.component.scss
+++ b/showcase/src/app/home/home.component.scss
@@ -1,5 +1,11 @@
-h1 {
- font-size: 20px;
+.mat-card {
+ .mat-card-content {
+ text-align: center;
+ width: 128px;
+ img {
+ height: 100px;
+ }
+ }
}
.documentation-links {
diff --git a/showcase/src/app/news/news-component/news.component.html b/showcase/src/app/news/news-component/news.component.html
index 129dabd894..992e878264 100644
--- a/showcase/src/app/news/news-component/news.component.html
+++ b/showcase/src/app/news/news-component/news.component.html
@@ -1,14 +1,6 @@
-
+
Stark News page is finally here!
diff --git a/showcase/src/app/shared/shared.module.ts b/showcase/src/app/shared/shared.module.ts
index 1d2c851f9c..d7fe68b5f0 100644
--- a/showcase/src/app/shared/shared.module.ts
+++ b/showcase/src/app/shared/shared.module.ts
@@ -10,9 +10,11 @@ import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { StarkPrettyPrintModule } from "@nationalbankbelgium/stark-ui";
import { TranslateModule } from "@ngx-translate/core";
+import { FlexLayoutModule } from "@angular/flex-layout";
@NgModule({
imports: [
+ FlexLayoutModule,
MatButtonModule,
MatCardModule,
MatIconModule,
@@ -26,6 +28,6 @@ import { TranslateModule } from "@ngx-translate/core";
providers: [FileService],
declarations: [ExampleViewerComponent],
entryComponents: [ExampleViewerComponent],
- exports: [ExampleViewerComponent]
+ exports: [ExampleViewerComponent, FlexLayoutModule]
})
export class SharedModule {}
diff --git a/showcase/src/assets/translations/en.json b/showcase/src/assets/translations/en.json
index babe5465ba..918a6e3186 100644
--- a/showcase/src/assets/translations/en.json
+++ b/showcase/src/assets/translations/en.json
@@ -5,18 +5,23 @@
"VALUE": "Value"
},
"DEMO": {
- "ACTION-BAR": {
- "CLASSIC-FULL": "Action Bar Classic Full",
+ "ACTION_BAR": {
+ "ALT": "Action Bar Alternative",
"CLASSIC-COMPACT": "Action Bar Classic Compact",
- "ALT": "Action Bar Alternative"
+ "CLASSIC-FULL": "Action Bar Classic Full",
+ "TITLE": "Stark action bar"
},
"BREADCRUMB": {
+ "CHILD": "Child",
"CONFIG_INPUT": "Breadcrumb demonstration (with breadcrumbConfig)",
- "NO_INPUT": "Breadcrumb demonstration (without parameters)",
- "ROOT": "Root ancestor",
"GRANDPARENT": "Grand parent",
+ "NO_INPUT": "Breadcrumb demonstration (without parameters)",
"PARENT": "Parent",
- "CHILD": "Child"
+ "ROOT": "Root ancestor",
+ "TITLE": "Stark breadcrumb"
+ },
+ "BUTTON": {
+ "TITLE": "Stark buttons"
},
"CARD": {
"ADVANCED": {
@@ -36,6 +41,7 @@
"DEFAULT_ICON": "Default icon",
"HTML_CONTENT": "Any HTML content",
"OPEN": "Open",
+ "TITLE": "Stark collapsible",
"TITLE_0": "Default icon collapsible title",
"TITLE_1": "Custom icon collapsible title",
"TOGGLE_COLLAPSIBLE": "Toggle collapsible"
@@ -55,22 +61,23 @@
},
"DATE_PICKER": {
"CUSTOM_FILTER": "Date Picker - Custom Filter",
- "PLACEHOLDER": "Choose a date",
"ONLY_WEEKDAYS": "Date Picker - Only weekdays",
- "ONLY_WEEKENDS": "Date Picker - Only weekends"
+ "ONLY_WEEKENDS": "Date Picker - Only weekends",
+ "PLACEHOLDER": "Choose a date",
+ "TITLE": "Stark date picker"
},
"DATE_RANGE_PICKER": {
- "FULL": "Date Range Picker"
+ "TITLE": "Date Range Picker"
},
- "DROPDOWNS": {
+ "DROPDOWN": {
"PR": "IT applications",
- "IO": "Informatics infrastructure and operations",
- "CS": "IT customer services",
- "REQUIRED": "Single required selection",
"BLANK": "Single selection with default blank",
+ "CS": "IT customer services",
+ "DISABLED": "Disabled dropdown",
+ "IO": "Informatics infrastructure and operations",
"MULTIPLE": "Multiple selection",
"MULTIPLE_REQUIRED": "Required multiple selection",
- "DISABLED": "Disabled dropdown",
+ "REQUIRED": "Single required selection",
"SELECTED_VALUE": "Selected value ",
"SELECTED_VALUES": "Selected values ",
"SELECT_SERVICE": "Select Service",
@@ -78,26 +85,32 @@
"SELECT_SERVICES": "Select one or more services",
"SELECT_ONE_SERVICE": "Select at least one service",
"SELECT_DISABLED": "Sorry, it's disabled",
+ "TITLE": "Stark dropdown",
"WHITE": "White dropdown on black background (full width)"
},
+ "EXAMPLE_VIEWER": {
+ "TITLE": "Stark example viewer"
+ },
"HEADER": {
- "TITLE": "Stark App Header Guidelines",
- "INTRO": "Stark provide you usefull classes to implement your application header. You just need to include the header theme in your SCSS",
"COPY_PASTE": "Then you can copy/paste this HTML into your code",
- "STARK_APP_HEADER": "The stark-app-header provides a background to the header",
- "STARK_APP_BAR": "The stark-app-bar contains three content containers stark-app-bar-content-left, stark-app-bar-content-center, stark-app-bar-content-right which split the header in three parts. All the direct children of those 3 containers will be aligned in a column. The stark-app-bar also provides a stark-app-bar-page-title which is placed on the bottom left of the header.",
- "STARK_APP_BAR_CONTENT_LEFT": "stark-app-bar-content-left contains stark-actions for the navigation actions.",
- "STARK_APP_BAR_CONTENT_CENTER": "stark-app-bar-content-center contains the app logo",
- "STARK_APP_BAR_CONTENT_RIGHT": "stark-app-bar-content-right contains 3 containers, the first one for the App Data component and the logout button, the second for language selection and stark-app-bar-content-right-actions-alt which contains some alternative actions.",
- "STARK_APP_BAR_PAGE_TITLE": "stark-app-bar-page-title displays the current page title."
+ "EXPLAINED": "Introduction",
+ "INTEGRATION": "Integration",
+ "INTEGRATION_DETAILS": "Stark provides you with usefull classes to implement your application header. You just need to include the header theme in your SCSS",
+ "STARK_APP_HEADER": "The stark-app-header provides a background to the header",
+ "STARK_APP_BAR": "The stark-app-bar contains three content containers stark-app-bar-content-left, stark-app-bar-content-center, stark-app-bar-content-right which split the header in three parts. All the direct children of those 3 containers will be aligned in a column. The stark-app-bar also provides a stark-app-bar-page-title which is placed on the bottom left of the header.",
+ "STARK_APP_BAR_CONTENT_LEFT": "stark-app-bar-content-left contains stark-actions for the navigation actions.",
+ "STARK_APP_BAR_CONTENT_CENTER": "stark-app-bar-content-center contains the app logo",
+ "STARK_APP_BAR_CONTENT_RIGHT": "stark-app-bar-content-right contains 3 containers, the first one for the App Data component and the logout button, the second for language selection and stark-app-bar-content-right-actions-alt which contains some alternative actions.",
+ "STARK_APP_BAR_PAGE_TITLE": "stark-app-bar-page-title displays the current page title.",
+ "TITLE": "Stark header guidelines"
},
"KEYBOARD_DIRECTIVES": {
"ON_ENTER_KEY": {
- "TITLE": "On Enter Key Directive",
"DESCRIPTION": "Type some value in the inputs and then press Enter in any of them to trigger the callback function",
"INPUT_WITH_CONTEXT": "With bound context",
"INPUT_WITHOUT_CONTEXT": "Without bound context (bound values are not accessible)",
"INPUT_WITHOUT_CONTEXT_ALTERNATIVE": "Without bound context but passed as parameter",
+ "TITLE": "On Enter Key Directive",
"TYPE_AND_PRESS_ENTER": "Type a value and press Enter",
"TYPE_PRESS_ENTER_AND_CHECK_CONSOLE": "Type a value, press Enter and check the console"
},
@@ -109,17 +122,20 @@
"INPUT_NO_SPECIAL_CHARACTERS": "Accept all except special characters",
"INPUT_UPPERCASE_CHARACTERS": "Accept only uppercase characters",
"TYPE_A_VALUE": "Type a value"
- }
+ },
+ "TITLE": "Stark keyboard directive"
},
- "LANGUAGE-SELECTOR": {
+ "LANGUAGE_SELECTOR": {
"DROPDOWN": "Language selector in 'dropdown' mode",
+ "TITLE": "Stark language selector",
"TOOLBAR": "Language selector in 'toolbar' mode"
},
"LOGOUT": {
"LOGOUT_DEFAULT_ICON": "Logout button - Default icon",
- "LOGOUT_CUSTOM_ICON": "Logout button - Custom icon"
+ "LOGOUT_CUSTOM_ICON": "Logout button - Custom icon",
+ "TITLE": "Stark logout"
},
- "PRETTY-PRINT": {
+ "PRETTY_PRINT": {
"CSS": "Pretty-Print CSS",
"ENABLE_HIGHLIGHTING": "Enable highlighting",
"ENTER_DATA": "Type or copy/paste unformatted code",
@@ -132,22 +148,30 @@
"SCSS": "Pretty-Print SCSS",
"SELECT_DATAFORMAT": "Select a format",
"SQL": "Pretty-Print SQL",
+ "TITLE": "Stark pretty print",
"TRY_IT_YOURSELF": "Try it yourself",
"TYPESCRIPT": "Pretty-Print Typescript",
"XML": "Pretty-Print XML"
},
+ "SHARED": {
+ "EXAMPLE_VIEWER_LIST": "Examples and code samples"
+ },
"SIDEBAR": {
"INTRO": "The preview of this code is the actual sidebar of the showcase",
"OPEN_LEFT": "Open the left sidebar",
"OPEN_MENU": "Open the menu",
"OPEN_RIGHT": "Open the right sidebar",
- "TITLE": "App Sidebar"
+ "TITLE": "Stark sidebar"
},
"SLIDER": {
"HORIZONTAL_RANGE_SLIDER": "Horizontal Range Slider",
"SIMPLE_HORIZONTAL_SLIDER": "Simple Horizontal Slider",
"SIMPLE_VERTICAL_SLIDER": "Simple Vertical Slider",
- "VERTICAL_RANGE_SLIDER": "Vertical Range Slider"
+ "VERTICAL_RANGE_SLIDER": "Vertical Range Slider",
+ "TITLE": "Stark slider"
+ },
+ "TABLE": {
+ "TITLE": "Stark table"
},
"TYPOGRAPHY": {
"CLASSES_AND_TAGS": {
diff --git a/showcase/src/assets/translations/fr.json b/showcase/src/assets/translations/fr.json
index 309c4fa14e..f18ccb40dd 100644
--- a/showcase/src/assets/translations/fr.json
+++ b/showcase/src/assets/translations/fr.json
@@ -5,18 +5,23 @@
"VALUE": "Valuer"
},
"DEMO": {
- "ACTION-BAR": {
- "CLASSIC-FULL": "Action Bar Classic Full",
+ "ACTION_BAR": {
+ "ALT": "Action Bar Alternative",
"CLASSIC-COMPACT": "Action Bar Classic Compact",
- "ALT": "Action Bar Alternative"
+ "CLASSIC-FULL": "Action Bar Classic Full",
+ "TITLE": "Stark action bar"
},
"BREADCRUMB": {
+ "CHILD": "Enfant",
"CONFIG_INPUT": "Démonstration du breadcrumb component (avec breadcrumbConfig)",
- "NO_INPUT": "Démonstration du breadcrumb component (sans paramètres)",
- "ROOT": "Ancêtre racine",
"GRANDPARENT": "Grand-parent",
"PARENT": "Parent",
- "CHILD": "Enfant"
+ "NO_INPUT": "Démonstration du breadcrumb component (sans paramètres)",
+ "ROOT": "Ancêtre racine",
+ "TITLE": "Stark breadcrumb"
+ },
+ "BUTTON": {
+ "TITLE": "Stark buttons"
},
"CARD": {
"ADVANCED": {
@@ -36,6 +41,7 @@
"DEFAULT_ICON": "Icône par défaut",
"HTML_CONTENT": "N'impoerte quel contenu HTML",
"OPEN": "Ouvert",
+ "TITLE": "Stark collapsible",
"TITLE_0": "Titre du collapsible avec icône par défaut",
"TITLE_1": "Titre du collapsible avec icône custom",
"TOGGLE_COLLAPSIBLE": "Ouvrir/fermer le collapsible"
@@ -55,22 +61,23 @@
},
"DATE_PICKER": {
"CUSTOM_FILTER": "Date Picker - Filtre sur mesure",
- "PLACEHOLDER": "Choisir une date",
"ONLY_WEEKDAYS": "Date Picker - Seulement les jours de semaine",
- "ONLY_WEEKENDS": "Date Picker - Seulement les jours de weekend"
+ "ONLY_WEEKENDS": "Date Picker - Seulement les jours de weekend",
+ "PLACEHOLDER": "Choisir une date",
+ "TITLE": "Stark date picker"
},
"DATE_RANGE_PICKER": {
- "FULL": "Date Range Picker"
+ "TITLE": "Date range picker"
},
- "DROPDOWNS": {
+ "DROPDOWN": {
"PR": "Applications informatiques",
- "IO": "Infrastructure et opérations informatiques",
- "CS": "Services aux clients informatiques",
- "REQUIRED": "Choix unique obligatoire",
"BLANK": "Option par défaut (blank)",
+ "CS": "Services aux clients informatiques",
+ "DISABLED": "Dropdown désactivé",
+ "IO": "Infrastructure et opérations informatiques",
"MULTIPLE": "Choix multiple",
"MULTIPLE_REQUIRED": "Choix multiple obligatoire",
- "DISABLED": "Dropdown désactivé",
+ "REQUIRED": "Choix unique obligatoire",
"SELECTED_VALUE": "Valeur sélectionnée ",
"SELECTED_VALUES": "Valeurs sélectionnées ",
"SELECT_SERVICE": "Sélectionnez un service",
@@ -78,26 +85,32 @@
"SELECT_SERVICES": "Sélectionnez un service ou plus",
"SELECT_ONE_SERVICE": "Sélectionnez au moins un service",
"SELECT_DISABLED": "Désolé, ce dropdown est désactivé",
+ "TITLE": "Stark dropdown",
"WHITE": "Dropdown blanc sur fond noir (largeur maximale)"
},
+ "EXAMPLE_VIEWER": {
+ "TITLE": "Stark example viewer"
+ },
"HEADER": {
- "TITLE": "Stark App Header Guidelines",
- "INTRO": "Stark fournit des classes utiles pour implémenter le header de votre application. Il suffit d'inclure le theme du header dans votre SCSS",
"COPY_PASTE": "Ensuite il faut copier/coller ce bout de code HTML",
- "STARK_APP_HEADER": "Le stark-app-header ajoute un fond au header",
- "STARK_APP_BAR": "Le stark-app-bar est composé de 3 conteneurs de contenu stark-app-bar-content-left, stark-app-bar-content-center, stark-app-bar-content-right qui divisent le header en 3 parties. Tous les enfants directes de ces 3 conteneurs sont alignés dans une colonne. stark-app-bar contient aussi un stark-app-bar-page-title placé dans le coin gauche en bas du header.",
- "STARK_APP_BAR_CONTENT_LEFT": "stark-app-bar-content-left contient stark-actions pour les actions concernant la navigation.",
- "STARK_APP_BAR_CONTENT_CENTER": "stark-app-bar-content-center contient le logo de l'application",
- "STARK_APP_BAR_CONTENT_RIGHT": "stark-app-bar-content-right contient 3 conteneurs, le premier pour le App Data component et le boutton de déconnection, le second pour le choix de langue et stark-app-bar-content-right-actions-alt qui contient des actions alternatives.",
- "STARK_APP_BAR_PAGE_TITLE": "stark-app-bar-page-title affiche le titre de la page visitée."
+ "EXPLAINED": "Introduction",
+ "INTEGRATION": "Integration",
+ "INTEGRATION_DETAILS": "Stark fournit des classes utiles pour implémenter le header de votre application. Il suffit d'inclure le theme du header dans votre SCSS",
+ "STARK_APP_HEADER": "Le stark-app-header ajoute un fond au header",
+ "STARK_APP_BAR": "Le stark-app-bar est composé de 3 conteneurs de contenu stark-app-bar-content-left, stark-app-bar-content-center, stark-app-bar-content-right qui divisent le header en 3 parties. Tous les enfants directes de ces 3 conteneurs sont alignés dans une colonne. stark-app-bar contient aussi un stark-app-bar-page-title placé dans le coin gauche en bas du header.",
+ "STARK_APP_BAR_CONTENT_LEFT": "stark-app-bar-content-left contient stark-actions pour les actions concernant la navigation.",
+ "STARK_APP_BAR_CONTENT_CENTER": "stark-app-bar-content-center contient le logo de l'application",
+ "STARK_APP_BAR_CONTENT_RIGHT": "stark-app-bar-content-right contient 3 conteneurs, le premier pour le App Data component et le boutton de déconnection, le second pour le choix de langue et stark-app-bar-content-right-actions-alt qui contient des actions alternatives.",
+ "STARK_APP_BAR_PAGE_TITLE": "stark-app-bar-page-title affiche le titre de la page visitée.",
+ "TITLE": "Stark header guidelines"
},
"KEYBOARD_DIRECTIVES": {
"ON_ENTER_KEY": {
- "TITLE": "On Enter Key Directive",
"DESCRIPTION": "Tapez une valeur dans les entrées, puis appuyez sur Entrée dans l'un d'eux pour déclencher la fonction callback",
"INPUT_WITH_CONTEXT": "Avec contexte lié",
"INPUT_WITHOUT_CONTEXT": "Sans contexte lié (les valeurs liées ne sont pas accessibles)",
"INPUT_WITHOUT_CONTEXT_ALTERNATIVE": "Sans contexte lié mais passé en paramètre",
+ "TITLE": "On Enter Key Directive",
"TYPE_AND_PRESS_ENTER": "Tapez une valeur et appuyez sur Entrée",
"TYPE_PRESS_ENTER_AND_CHECK_CONSOLE": "Tapez une valeur, appuyez sur Entrée et vérifiez la console"
},
@@ -109,17 +122,20 @@
"INPUT_NO_SPECIAL_CHARACTERS": "Accepter tous les caractères sauf les caractères spéciaux",
"INPUT_UPPERCASE_CHARACTERS": "Accepter uniquement les majuscules",
"TYPE_A_VALUE": "Taper une valeur"
- }
+ },
+ "TITLE": "Stark keyboard directive"
},
- "LANGUAGE-SELECTOR": {
+ "LANGUAGE_SELECTOR": {
"DROPDOWN": "Sélecteur de langue en mode 'dropdown'",
+ "TITLE": "Stark language selector",
"TOOLBAR": "Sélecteur de langue en mode 'toolbar'"
},
"LOGOUT": {
"LOGOUT_DEFAULT_ICON": "Bouton logout - Icône par défaut",
- "LOGOUT_CUSTOM_ICON": "Bouton logout - Icône custom"
+ "LOGOUT_CUSTOM_ICON": "Bouton logout - Icône custom",
+ "TITLE": "Stark logout"
},
- "PRETTY-PRINT": {
+ "PRETTY_PRINT": {
"CSS": "Pretty-Print CSS",
"ENABLE_HIGHLIGHTING": "Mettre en surbrillance",
"ENTER_DATA": "Tapez ou copiez/collez du code non formaté",
@@ -132,22 +148,30 @@
"SCSS": "Pretty-Print SCSS",
"SELECT_DATAFORMAT": "Sélectionner un format",
"SQL": "Pretty-Print SQL",
+ "TITLE": "Stark pretty print",
"TRY_IT_YOURSELF": "Essayez vous-même",
"TYPESCRIPT": "Pretty-Print Typescript",
"XML": "Pretty-Print XML"
},
+ "SHARED": {
+ "EXAMPLE_VIEWER_LIST": "Exemples et codes"
+ },
"SIDEBAR": {
"INTRO": "La sidebar du showcase illustre ce code.",
"OPEN_LEFT": "Ouvrir la sidebar de gauche",
"OPEN_MENU": "Ouvrir le menu",
"OPEN_RIGHT": "Ouvrir la sidebar de droite",
- "TITLE": "App Sidebar"
+ "TITLE": "Stark sidebar"
},
"SLIDER": {
"HORIZONTAL_RANGE_SLIDER": "Curseur de plage",
"SIMPLE_HORIZONTAL_SLIDER": "Curseur simple",
"SIMPLE_VERTICAL_SLIDER": "Curseur simple",
- "VERTICAL_RANGE_SLIDER": "Curseur de plage"
+ "VERTICAL_RANGE_SLIDER": "Curseur de plage",
+ "TITLE": "Stark slider"
+ },
+ "TABLE": {
+ "TITLE": "Stark table"
},
"TYPOGRAPHY": {
"CLASSES_AND_TAGS": {
diff --git a/showcase/src/assets/translations/nl.json b/showcase/src/assets/translations/nl.json
index 4a09c52833..5f3b0ea144 100644
--- a/showcase/src/assets/translations/nl.json
+++ b/showcase/src/assets/translations/nl.json
@@ -5,18 +5,23 @@
"VALUE": "Waarde"
},
"DEMO": {
- "ACTION-BAR": {
- "CLASSIC-FULL": "Action Bar Classic Full",
+ "ACTION_BAR": {
+ "ALT": "Action Bar Alternative",
"CLASSIC-COMPACT": "Action Bar Classic Compact",
- "ALT": "Action Bar Alternative"
+ "CLASSIC-FULL": "Action Bar Classic Full",
+ "TITLE": "Stark action bar"
},
"BREADCRUMB": {
+ "CHILD": "Kind",
"CONFIG_INPUT": "Breadcrumb demonstration (met breadcrumbConfig)",
- "NO_INPUT": "Breadcrumb demonstration (zonder parameters)",
- "ROOT": "Voorouder",
"GRANDPARENT": "Grootouder",
"PARENT": "Ouder",
- "CHILD": "Kind"
+ "NO_INPUT": "Breadcrumb demonstration (zonder parameters)",
+ "ROOT": "Voorouder",
+ "TITLE": "Stark breadcrumb"
+ },
+ "BUTTON": {
+ "TITLE": "Stark buttons"
},
"CARD": {
"ADVANCED": {
@@ -36,6 +41,7 @@
"DEFAULT_ICON": "Standaard pictogram",
"HTML_CONTENT": "Alle HTML-inhoud",
"OPEN": "Open",
+ "TITLE": "Stark collapsible",
"TITLE_0": "Standaard icon collapsible titel",
"TITLE_1": "Aangepast icon collapsible titel",
"TOGGLE_COLLAPSIBLE": "Collapsible omschakelen"
@@ -55,22 +61,23 @@
},
"DATE_PICKER": {
"CUSTOM_FILTER": "Date Picker - Aangepaste filter",
- "PLACEHOLDER": "Datum kiezen",
"ONLY_WEEKDAYS": "Date Picker - Alleen weekdagen",
- "ONLY_WEEKENDS": "Date Picker - Alleen weekenden"
+ "ONLY_WEEKENDS": "Date Picker - Alleen weekenden",
+ "PLACEHOLDER": "Datum kiezen",
+ "TITLE": "Stark date picker"
},
"DATE_RANGE_PICKER": {
- "FULL": "Date Range Picker"
+ "TITLE": "Date Range Picker"
},
- "DROPDOWNS": {
+ "DROPDOWN": {
"PR": "Informaticatoepassingen",
- "IO": "Informatica-infrastructuur en operaties",
- "CS": "IT-klantendiensten",
- "REQUIRED": "Dropdown met gewenste keuze",
"BLANK": "Bij verstek keus (blank)",
+ "CS": "IT-klantendiensten",
+ "DISABLED": "Niet geactiveerd dropdown",
+ "IO": "Informatica-infrastructuur en operaties",
"MULTIPLE": "Meerdere selectie",
"MULTIPLE_REQUIRED": "Gewenste meerdere selectie",
- "DISABLED": "Niet geactiveerd dropdown",
+ "REQUIRED": "Dropdown met gewenste keuze",
"SELECTED_VALUE": "Geselecteerde waarde ",
"SELECTED_VALUES": "Geselecteerde waarden ",
"SELECT_SERVICE": "Selecteer een dienst",
@@ -78,18 +85,24 @@
"SELECT_SERVICES": "Selecteer een of meer diensten",
"SELECT_ONE_SERVICE": "Selecteer ten minsten een dienst",
"SELECT_DISABLED": "Sorry, deze dropdown is niet geactiveerd",
+ "TITLE": "Stark dropdown",
"WHITE": "Witte dropdown met zwarte achtergrond (maximum breedte)"
},
+ "EXAMPLE_VIEWER": {
+ "TITLE": "Stark example viewer"
+ },
"HEADER": {
- "TITLE": "Stark App Header Guidelines",
- "INTRO": "Stark provides you usefull classes to implement your application header. You just need to include the header theme in your SCSS",
"COPY_PASTE": "Then you can copy/paste this HTML into your code",
- "STARK_APP_HEADER": "The stark-app-header provide a background to the header",
- "STARK_APP_BAR": "The stark-app-bar contains three content containers stark-app-bar-content-left, stark-app-bar-content-center, stark-app-bar-content-right which split the header in three parts. All the direct children of those 3 containers will be aligned in a column. The stark-app-bar also provides a stark-app-bar-page-title which is placed on the bottom left of the header.",
- "STARK_APP_BAR_CONTENT_LEFT": "stark-app-bar-content-left contains stark-actions for the navigation actions.",
- "STARK_APP_BAR_CONTENT_CENTER": "stark-app-bar-content-center contains the app logo.",
- "STARK_APP_BAR_CONTENT_RIGHT": "stark-app-bar-content-right contains 3 containers, the first one for the App Data component and the logout button, the second for language selection and stark-app-bar-content-right-actions-alt which contains some alternative actions.",
- "STARK_APP_BAR_PAGE_TITLE": "stark-app-bar-page-title displays the current page title."
+ "EXPLAINED": "Introduction",
+ "INTEGRATION": "Integration",
+ "INTEGRATION_DETAILS": "Stark provides you with usefull classes to implement your application header. You just need to include the header theme in your SCSS",
+ "STARK_APP_HEADER": "The stark-app-header provide a background to the header",
+ "STARK_APP_BAR": "The stark-app-bar contains three content containers stark-app-bar-content-left, stark-app-bar-content-center, stark-app-bar-content-right which split the header in three parts. All the direct children of those 3 containers will be aligned in a column. The stark-app-bar also provides a stark-app-bar-page-title which is placed on the bottom left of the header.",
+ "STARK_APP_BAR_CONTENT_LEFT": "stark-app-bar-content-left contains stark-actions for the navigation actions.",
+ "STARK_APP_BAR_CONTENT_CENTER": "stark-app-bar-content-center contains the app logo.",
+ "STARK_APP_BAR_CONTENT_RIGHT": "stark-app-bar-content-right contains 3 containers, the first one for the App Data component and the logout button, the second for language selection and stark-app-bar-content-right-actions-alt which contains some alternative actions.",
+ "STARK_APP_BAR_PAGE_TITLE": "stark-app-bar-page-title displays the current page title.",
+ "TITLE": "Stark header guidelines"
},
"KEYBOARD_DIRECTIVES": {
"ON_ENTER_KEY": {
@@ -109,17 +122,20 @@
"INPUT_NO_SPECIAL_CHARACTERS": "Aanvaard alle karakters, behalve speciale karakters",
"INPUT_UPPERCASE_CHARACTERS": "Aanvaard enkel hoofdletters",
"TYPE_A_VALUE": "Geef een waarde in"
- }
+ },
+ "TITLE": "Stark keyboard directive"
},
- "LANGUAGE-SELECTOR": {
+ "LANGUAGE_SELECTOR": {
"DROPDOWN": "Taal selector in 'dropdown' mode",
+ "TITLE": "Stark language selector",
"TOOLBAR": "Taal selector in 'toolbar' mode"
},
"LOGOUT": {
"LOGOUT_DEFAULT_ICON": "Logout-knop - Standaard pictogram",
- "LOGOUT_CUSTOM_ICON": "Logout-knop - Aangepast pictogram"
+ "LOGOUT_CUSTOM_ICON": "Logout-knop - Aangepast pictogram",
+ "TITLE": "Stark logout"
},
- "PRETTY-PRINT": {
+ "PRETTY_PRINT": {
"CSS": "Pretty-Print CSS",
"ENABLE_HIGHLIGHTING": "Highlighting activeren",
"ENTER_DATA": "Typ of kopieer/plak ongeformatteerde code",
@@ -132,22 +148,30 @@
"SCSS": "Pretty-Print SCSS",
"SELECT_DATAFORMAT": "Selecteer een formaat",
"SQL": "Pretty-Print SQL",
+ "TITLE": "Stark pretty print",
"TRY_IT_YOURSELF": "Probeer het zelf",
"TYPESCRIPT": "Pretty-Print Typescript",
"XML": "Pretty-Print XML"
},
+ "SHARED": {
+ "EXAMPLE_VIEWER_LIST": "Examples and code samples"
+ },
"SIDEBAR": {
"INTRO": "De preview van deze code is de eigenlijke zijbalk van de showcase",
"OPEN_LEFT": "Open de linker sidebar",
"OPEN_MENU": "Open de menu",
"OPEN_RIGHT": "Open de rechter sidebar",
- "TITLE": "App Sidebar"
+ "TITLE": "Stark sidebar"
},
"SLIDER": {
"HORIZONTAL_RANGE_SLIDER": "Horizontale schuifregelaar met bereik",
"SIMPLE_HORIZONTAL_SLIDER": "Eenvoudige horizontale schuifregelaar",
"SIMPLE_VERTICAL_SLIDER": "Eenvoudige verticale schuifregelaar",
- "VERTICAL_RANGE_SLIDER": "Verticale schuifregelaar met bereik"
+ "VERTICAL_RANGE_SLIDER": "Verticale schuifregelaar met bereik",
+ "TITLE": "Stark slider"
+ },
+ "TABLE": {
+ "TITLE": "Stark table"
},
"TYPOGRAPHY": {
"CLASSES_AND_TAGS": {