text: import { MdElement, html } from "../foundations/foundations.js";
  
  class DemoSegmentedButton extends MdElement {
      constructor(){
          super()
          this.data=[
              {label:"button",outlined:true},
              {label:"button",outlined:true},
              {label:"button",outlined:true},
              {label:"button",outlined:true},
          ]
      }
      render() {
          // prettier-ignore
          return html`
              <div class="md-grid">
                  <div class="md-grid__column md-grid__column--large12 md-grid__column--medium12 md-grid__column--small4">
                      <div class="body-large" style="margin-bottom: 1em;">Segmented Button</div>
                      <md-segmented-button .data="${this.data}"></md-segmented-button>
                  </div>
                  <div class="md-grid__column md-grid__column--large12 md-grid__column--medium12 md-grid__column--small4">
                      <div class="body-large" style="margin-bottom: 1em;">Segmented Button With Density</div>
                      <md-segmented-button .data="${this.data}" density="-2"></md-segmented-button>
                  </div>
                  <div class="md-grid__column md-grid__column--large12 md-grid__column--medium12 md-grid__column--small4">
                      <div class="body-large" style="margin-bottom: 1em;">Segmented Button With Multi Select</div>
                      <md-segmented-button .data="${this.data}" multi></md-segmented-button>
                  </div>
              </div>
          `
      }
  }
  
  customElements.get("demo-segmented-button") || customElements.define("demo-segmented-button", DemoSegmentedButton);
  
  export default new DemoSegmentedButton();
  