docs(segment-view): document setContent method and add example

Author: brandyscarney

core/src/components.d.ts

@@ -2723,6 +2723,11 @@ export namespace Components {
           * If `true`, the segment view cannot be interacted with.
          */
         "disabled": boolean;
+        /**
+          * This method is used to programmatically set the displayed segment content in the segment view. Calling this method will update the `value` of the corresponding segment button.
+          * @param id : The id of the segment content to display.
+          * @param smoothScroll : Whether to animate the scroll transition.
+         */
         "setContent": (id: string, smoothScroll?: boolean) => Promise<void>;
     }
     interface IonSelect {

core/src/components/segment-view/segment-view.tsx

@@ -36,6 +36,13 @@ export class SegmentView implements ComponentInterface {
     }
   }
 
+  /**
+   * This method is used to programmatically set the displayed segment content
+   * in the segment view. Calling this method will update the `value` of the
+   * corresponding segment button.
+   * @param id: The id of the segment content to display.
+   * @param smoothScroll: Whether to animate the scroll transition.
+   */
   @Method()
   async setContent(id: string, smoothScroll = true) {
     const contents = this.getSegmentContents();

core/src/components/segment-view/test/basic/index.html

@@ -48,7 +48,7 @@
 
       <ion-content>
         <ion-toolbar>
-          <ion-segment>
+          <ion-segment id="noValueSegment">
             <ion-segment-button content-id="no" value="no">
               <ion-label>No</ion-label>
             </ion-segment-button>
@@ -57,7 +57,7 @@
             </ion-segment-button>
           </ion-segment>
         </ion-toolbar>
-        <ion-segment-view>
+        <ion-segment-view id="noValueSegmentView">
           <ion-segment-content id="no">No</ion-segment-content>
           <ion-segment-content id="value">Value</ion-segment-content>
         </ion-segment-view>
@@ -76,6 +76,7 @@
           <ion-segment-content id="favorites">Favorites</ion-segment-content>
         </ion-segment-view>
 
+        <ion-toolbar>
           <ion-segment value="free">
             <ion-segment-button content-id="paid" value="paid">
               <ion-label>Paid</ion-label>
@@ -112,13 +113,41 @@
           <ion-segment-content id="reading-list">Reading List</ion-segment-content>
           <ion-segment-content id="shared-links">Shared Links</ion-segment-content>
         </ion-segment-view>
+
+        <button class="expand" onClick="changeSegmentContent()">
+          Change Segment Content
+        </button>
+
+        <button class="expand" onClick="clearSegmentValue()">
+          Clear Segment Value
+        </button>
       </ion-content>
 
       <ion-footer>
         <ion-toolbar>
           <ion-title>Footer</ion-title>
         </ion-toolbar>
       </ion-footer>
+
+      <script>
+        let currentValue;
+
+        function changeSegmentContent() {
+          const segmentView = document.querySelector('#noValueSegmentView');
+
+          if (currentValue === 'value') {
+            currentValue = 'no';
+          } else {
+            currentValue = 'value';
+          }
+          segmentView.setContent(currentValue);
+        }
+
+        function clearSegmentValue() {
+          const segment = document.querySelector('#noValueSegment');
+          segment.value = undefined;
+        }
+      </script>
     </ion-app>
   </body>
 </html>