Step 4: Add Expansion Panels and Tabs 1.0

<?code-excerpt path-base=”examples/acx/lottery”?>

In this final step, you’ll use expansion panels and tabs to hide information until the user needs it. You’ll use these components:

• <material-expansionpanel> and <material-expansionpanel-set>
• <material-tab> and <material-tab-panel>

Run the live example (view source) of the `` version of the app.

Use material-expansionpanel and material-expansionpanel-set

Expansion panels are especially good for settings, so use them in the custom <settings-component>, implemented in lib/src/settings/settings_component.* files.

1. Edit the Dart file (lib/src/settings/settings_component.dart), adding the expansion panel directives MaterialExpansionPanel and MaterialExpansionPanelSet:

   <?code-excerpt “3-usebuttons/lib/src/settings/settings_component.dart” diff-with=”4-final/lib/src/settings/settings_component.dart”?>

   --- 3-usebuttons/lib/src/settings/settings_component.dart
   +++ 4-final/lib/src/settings/settings_component.dart
   @@ -15,6 +15,8 @@
      templateUrl: 'settings_component.html',
      directives: [
        MaterialCheckboxComponent,
   +    MaterialExpansionPanel,
   +    MaterialExpansionPanelSet,
        MaterialRadioComponent,
        MaterialRadioGroupComponent,
        NgFor
   

2. Edit the template file (lib/src/settings/settings_component.html) to change the enclosing <div> element (the first and last lines of the file) to be a <material-expansionpanel-set>.

3. Convert the Wallet div into a <material-expansionpanel> (MaterialExpansionPanel):

   1. Change the <div> element to <material-expansionpanel>.
   2. Move the title (h2 content) and summary content (p content) into the <material-expansionpanel> name and secondaryText attributes, respectively.
   3. Remove the buttons from the bottom of the panel, putting their event handling code into (save) and (cancel) bindings. Your code changes to the beginning of this file should look like this:

   <?code-excerpt “3-usebuttons/lib/src/settings/settings_component.html” diff-with=”4-final/lib/src/settings/settings_component.html” to=”betting-panel”?>

   --- 3-usebuttons/lib/src/settings/settings_component.html
   +++ 4-final/lib/src/settings/settings_component.html
   @@ -1,7 +1,9 @@
   -<div>
   -  <div>
   -    <h2>Wallet</h2>
   -    <p>Initial: ${{ settings.initialCash }}. Daily disposable income: ${{ settings.dailyDisposable }}.</p>
   +<material-expansionpanel-set>
   +  <material-expansionpanel
   +      name="Wallet"
   +      secondaryText="Initial: ${{ settings.initialCash }}. Daily disposable income: ${{ settings.dailyDisposable }}."
   +      (save)="settingsUpdated()"
   +      (cancel)="resetWallet()">
        <div>
          <h3>Initial cash</h3>
          <material-radio-group>
   @@ -21,7 +23,3 @@
            </material-radio>
          </material-radio-group>
        </div>
   -    <button (click)="settingsUpdated()">Save</button>
   -    <button (click)="resetWallet()">Cancel</button>
   -  </div>
   -  <div class="betting-panel">
   

4. Test the app. The Wallet settings should look like this at first:

   

   When you expand the Wallet settings, they should look like this:

   

   When you change settings and click the SAVE button at bottom right, the new values should appear in the UI:

   

5. Once the app runs correctly, convert the two remaining major divs (Betting and Other) into material expansion panels.

That bit of work saved a lot of UI space:

Use material-tab and material-tab-panel

You can save more by moving auxiliary text into separate tabs. This affects the main UI, implemented in lib/lottery_simulator.* files.

1. Make the following changes to lib/lottery_simulator.dart:

   <?code-excerpt “3-usebuttons/lib/lottery_simulator.dart” diff-with=”4-final/lib/lottery_simulator.dart”?>

   --- 3-usebuttons/lib/lottery_simulator.dart
   +++ 4-final/lib/lottery_simulator.dart
   @@ -28,6 +28,8 @@
        MaterialFabComponent,
        MaterialIconComponent,
        MaterialProgressComponent,
   +    MaterialTabComponent,
   +    MaterialTabPanelComponent,
        MaterialToggleComponent,
        ScoresComponent,
        SettingsComponent,
   

2. Edit lib/lottery_simulator.html:

   1. After the end of the first <div>, add a <material-tab-panel> tag.

   2. Put the closing tag of the <material-tab-panel> at the end of the file.

   3. Just after the opening <material-tab-panel> tag, add a <material-tab> tag with the label set to “Simulation”.

   4. Close the <material-tab-panel> near the bottom of the file, just before the <div> containing the Help heading.

      Your changes, so far, should look like this:

      <h1>Lottery Simulator</h1>
      
      <div class="help">
        ...
      </div>
      
      <material-tab-panel>
        <material-tab label="Simulation">
          ...
        </material-tab>
      <div>
        <h2>Help`</h2>`
        ...
      </div>
      </material-tab-panel>

      If you run the app now, the top of the UI should look like this:

      

   5. Change the next two <div>-<h2> combinations into <material-tabs>, with the labels “Help” and “About”.

The end of the file should look like this:

<?code-excerpt “3-usebuttons/lib/lottery_simulator.html” diff-with=”4-final/lib/lottery_simulator.html” from=”\/material-tab” to=”\/material-tab-panel”?>

--- 3-usebuttons/lib/lottery_simulator.html
+++ 4-final/lib/lottery_simulator.html
@@ -85 +78,7 @@
+  </material-tab>
+  <material-tab label="Help">
+    <help-component content="help"></help-component>
+  </material-tab>
+  <material-tab label="About">
+    <help-component content="about"></help-component>
+  </material-tab>
+</material-tab-panel>

Your app should now look exactly like the one you saw in the first page of this codelab.

Congratulations! You’ve converted a functional but UI-challenged app into a good looking, well-behaved app that uses the next generation of AngularDart Components.

Problems?

Check your code against the solution in the 4-final directory.