<commit_before><template>
  <div class="example">
    <md-speed-dial :class="topPosition" md-direction="bottom">
      <md-speed-dial-target class="md-primary">
        <md-icon>my_location</md-icon>
      </md-speed-dial-target>

      <md-speed-dial-content>
        <md-button class="md-icon-button">
          <md-icon>directions</md-icon>
        </md-button>

        <md-button class="md-icon-button">
          <md-icon>streetview</md-icon>
        </md-button>
      </md-speed-dial-content>
    </md-speed-dial>

    <md-speed-dial :class="bottomPosition">
      <md-speed-dial-target>
        <md-icon>add</md-icon>
      </md-speed-dial-target>

      <md-speed-dial-content>
        <md-button class="md-icon-button">
          <md-icon>note</md-icon>
        </md-button>

        <md-button class="md-icon-button">
          <md-icon>event</md-icon>
        </md-button>
      </md-speed-dial-content>
    </md-speed-dial>

    <div class="demo-option">
      <div>
        <label for="top">Top</label>
        <select id="top" v-model="topPosition">
          <option value="md-top-left">Left</option>
          <option value="md-top-center">Center</option>
          <option value="md-top-right">Right</option>
        </select>
      </div>

      <div>
        <label for="bottom">Bottom</label>
        <select id="bottom" v-model="bottomPosition">
          <option value="md-bottom-left">Left</option>
          <option value="md-bottom-center">Center</option>
          <option value="md-bottom-right">Right</option>
        </select>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PositionDirection',
  data: () => ({
    topPosition: 'md-top-left',
    bottomPosition: 'md-bottom-left'
  })
}
</script>

<style lang="scss" scoped>
  .example {
    min-height: 300px;
  }

  .demo-option {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    div {
      margin: 0 6px;
      display: flex;
      flex-direction: column;
    }
  }
</style><commit_msg>docs(SpeedDial): better position direction demo (#1772)<commit_after><template>
  <div class="example">
    <div class="demo-option">
      <md-field class="select">
        <label for="top">Top</label>
        <md-select id="top" v-model="topPosition">
          <md-option value="md-top-left">Left</md-option>
          <md-option value="md-top-center">Center</md-option>
          <md-option value="md-top-right">Right</md-option>
        </md-select>
      </md-field>

      <md-field class="select">
        <label for="bottom">Bottom</label>
        <md-select id="bottom" v-model="bottomPosition">
          <md-option value="md-bottom-left">Left</md-option>
          <md-option value="md-bottom-center">Center</md-option>
          <md-option value="md-bottom-right">Right</md-option>
        </md-select>
      </md-field>
    </div>
    <md-speed-dial :class="topPosition" md-direction="bottom">
      <md-speed-dial-target class="md-primary">
        <md-icon>my_location</md-icon>
      </md-speed-dial-target>

      <md-speed-dial-content>
        <md-button class="md-icon-button">
          <md-icon>directions</md-icon>
        </md-button>

        <md-button class="md-icon-button">
          <md-icon>streetview</md-icon>
        </md-button>
      </md-speed-dial-content>
    </md-speed-dial>

    <md-speed-dial :class="bottomPosition">
      <md-speed-dial-target>
        <md-icon>add</md-icon>
      </md-speed-dial-target>

      <md-speed-dial-content>
        <md-button class="md-icon-button">
          <md-icon>note</md-icon>
        </md-button>

        <md-button class="md-icon-button">
          <md-icon>event</md-icon>
        </md-button>
      </md-speed-dial-content>
    </md-speed-dial>
  </div>
</template>

<script>
export default {
  name: 'PositionDirection',
  data: () => ({
    topPosition: 'md-top-left',
    bottomPosition: 'md-bottom-left'
  })
}
</script>

<style lang="scss" scoped>
  .example {
    min-height: 300px;
  }

  .demo-option {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .select {
      margin: 0 6px;
      display: inline-flex;
      width: auto;
    }
  }
</style>
{'fraction_non_alphanumeric': 0.18411386593204776, 'fraction_numerical': 0.006887052341597796, 'mean_word_length': 2.225018504811251, 'pattern_counts': {'":': 0, '<': 135, '<?xml version=': 0, '>': 137, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '937886', 'n_tokens_mistral': 1548, 'n_tokens_neox': 1477, 'n_words': 228}