Aktualisiere Version auf 1.2.0, füge Unterstützung für einen konfigurierbaren WebPart-Titel hinzu und verbessere die Darstellung im Accordion-WebPart

src/webparts/accordion/AccordionWebPart.manifest.json

@@ -16,6 +16,7 @@
     },
     "officeFabricIconFontName": "BulletedList2",
     "properties": {
+      "title": "Accordion",
       "listId": "",
       "titleField": "Title",
       "contentField": "",

src/webparts/accordion/AccordionWebPart.ts

@@ -6,6 +6,7 @@ import {
   IPropertyPaneConfiguration,
   IPropertyPaneDropdownOption,
   PropertyPaneDropdown,
+  PropertyPaneTextField,
   PropertyPaneToggle
 } from '@microsoft/sp-webpart-base';
 import * as strings from 'AccordionWebPartStrings';
@@ -21,6 +22,7 @@ import {
 import styles from './components/Accordion.module.scss';
 
 export interface IAccordionWebPartProps {
+  title: string;
   listId: string;
   titleField: string;
   contentField: string;
@@ -73,6 +75,7 @@ export default class AccordionWebPart extends BaseClientSideWebPart<IAccordionWe
       if (!items.length) { this.renderStatus(strings.EmptyMessage, false); return; }
       const element: React.ReactElement<IAccordionProps> = React.createElement(Accordion, {
         items: items,
+        title: this.properties.title || strings.DefaultTitle,
         allowMultiple: this.properties.allowMultiple === true,
         initialState: this.normalizeInitialState(this.properties.initialState),
         showCategories: this.properties.showCategories !== false && !!this.properties.categoryField,
@@ -151,6 +154,7 @@ export default class AccordionWebPart extends BaseClientSideWebPart<IAccordionWe
         groups: [{
           groupName: strings.DataGroupName,
           groupFields: [
+            PropertyPaneTextField('title', { label: strings.WebPartTitleFieldLabel }),
             PropertyPaneDropdown('listId', {
               label: strings.ListFieldLabel,
               options: listOptions,

src/webparts/accordion/components/Accordion.module.scss

@@ -5,6 +5,7 @@
   font-size: 14px;
   color: "[theme: neutralPrimary, default: #323130]";
 }
+.webPartHeading { font-size: 24px; font-weight: 300; line-height: 32px; margin: 0 0 14px; }
 
 .category { margin: 0 0 20px; }
 .categoryTitle {

src/webparts/accordion/components/Accordion.tsx

@@ -22,7 +22,8 @@ export default class Accordion extends React.Component<IAccordionProps, IAccordi
 
   public render(): React.ReactElement<any> { // tslint:disable-line:no-any
     const groups: Array<{ name: string; items: IAccordionItem[] }> = this.groupItems();
-    return <div className={styles.accordion}>
+    return <section className={styles.accordion} aria-label={this.props.title}>
+      {this.props.title && <h2 className={styles.webPartHeading}>{this.props.title}</h2>}
       {groups.map((group, groupIndex) =>
         <section className={styles.category} key={'group-' + groupIndex}>
           {this.props.showCategories && group.name
@@ -31,7 +32,7 @@ export default class Accordion extends React.Component<IAccordionProps, IAccordi
           <div>{group.items.map((item: IAccordionItem) => this.renderItem(item, groupIndex))}</div>
         </section>
       )}
-    </div>;
+    </section>;
   }
 
   private renderItem(item: IAccordionItem, groupIndex: number): React.ReactElement<any> { // tslint:disable-line:no-any

src/webparts/accordion/components/IAccordionProps.ts

@@ -2,6 +2,7 @@ import { IAccordionItem, AccordionInitialState } from '../AccordionTypes';
 
 export interface IAccordionProps {
   items: IAccordionItem[];
+  title: string;
   allowMultiple: boolean;
   initialState: AccordionInitialState;
   showCategories: boolean;
@@ -9,4 +10,3 @@ export interface IAccordionProps {
   collapseLabel: string;
   defaultCategory: string;
 }
-

src/webparts/accordion/loc/de-de.js

@@ -3,6 +3,7 @@ define([], function() {
     "PropertyPaneDescription": "Wählen Sie die Liste und Spalten für das Akkordeon aus.",
     "DataGroupName": "Datenquelle",
     "BehaviorGroupName": "Verhalten",
+    "WebPartTitleFieldLabel": "WebPart-Titel",
     "ListFieldLabel": "Liste",
     "TitleFieldLabel": "Spalte für Überschrift",
     "ContentFieldLabel": "Spalte für Inhalt",
@@ -25,6 +26,7 @@ define([], function() {
     "LoadErrorMessage": "Die Akkordeon-Einträge konnten nicht geladen werden.",
     "ExpandLabel": "Aufklappen",
     "CollapseLabel": "Zuklappen",
-    "DefaultCategory": "Weitere"
+    "DefaultCategory": "Weitere",
+    "DefaultTitle": "Akkordeon"
   };
 });

src/webparts/accordion/loc/en-us.js

@@ -3,6 +3,7 @@ define([], function() {
     "PropertyPaneDescription": "Select the list and columns used by the accordion.",
     "DataGroupName": "Data source",
     "BehaviorGroupName": "Behavior",
+    "WebPartTitleFieldLabel": "Web part title",
     "ListFieldLabel": "List",
     "TitleFieldLabel": "Heading column",
     "ContentFieldLabel": "Content column",
@@ -25,6 +26,7 @@ define([], function() {
     "LoadErrorMessage": "The accordion entries could not be loaded.",
     "ExpandLabel": "Expand",
     "CollapseLabel": "Collapse",
-    "DefaultCategory": "Other"
+    "DefaultCategory": "Other",
+    "DefaultTitle": "Accordion"
   };
 });

src/webparts/accordion/loc/myStrings.d.ts

@@ -2,6 +2,7 @@ declare interface IAccordionWebPartStrings {
   PropertyPaneDescription: string;
   DataGroupName: string;
   BehaviorGroupName: string;
+  WebPartTitleFieldLabel: string;
   ListFieldLabel: string;
   TitleFieldLabel: string;
   ContentFieldLabel: string;
@@ -25,6 +26,7 @@ declare interface IAccordionWebPartStrings {
   ExpandLabel: string;
   CollapseLabel: string;
   DefaultCategory: string;
+  DefaultTitle: string;
 }
 
 declare module 'AccordionWebPartStrings' {