@@ -317,32 +317,25 @@ Save the file.
317
317
Navigate to the ** render** method and replace the code inside the method with the following code:
318
318
319
319
``` ts
320
- this .domElement .innerHTML = `
321
- <div class="${styles .row }">
322
- <div class="${styles .column }">
323
- <span class="${styles .title }">
324
- Welcome to SharePoint!
325
- </span>
326
- <p class="${styles .subtitle }">
327
- Customize SharePoint experiences using Web Parts.
328
- </p>
329
- <p class="${styles .description }">
330
- ${escape (this .properties .description )}
331
- </p>
332
- <p class="${styles .description }">
333
- ${escape (this .properties .test2 )}
334
- </p>
335
- <p class="ms-font-l ms-fontColor-white">Loading from ${this .context .pageContext .web .title }</p>
336
- <a class="ms-Button ${styles .button }" href="https://github.com/SharePoint/sp-dev-docs/wiki">
337
- <span class="ms-Button-label">
338
- Learn more
339
- </span>
340
- </a>
341
- </div>
342
- </div>
343
- <div id="spListContainer" /> ` ;
344
-
345
- this ._renderListAsync ();
320
+ this .domElement .innerHTML = `
321
+ <div class="${styles .helloWorld }">
322
+ <div class="${styles .container }">
323
+ <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles .row }">
324
+ <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
325
+ <span class="ms-font-xl ms-fontColor-white">Welcome to SharePoint!</span>
326
+ <p class="ms-font-l ms-fontColor-white">Customize SharePoint experiences using Web Parts.</p>
327
+ <p class="ms-font-l ms-fontColor-white">${escape (this .properties .description )}</p>
328
+ <p class="ms-font-l ms-fontColor-white">Loading from ${escape (this .context .pageContext .web .title )}</p>
329
+ <a href="https://aka.ms/spfx" class="${styles .button }">
330
+ <span class="${styles .label }">Learn more</span>
331
+ </a>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ <div id="spListContainer" />
336
+ </div> ` ;
337
+
338
+ this ._renderListAsync ();
346
339
```
347
340
348
341
Save the file.
0 commit comments