角材料嵌套的optgroup

Question

讀完這個SO問題之后，我發現不可能嵌套optgroups因為它不是HTML5規范的一部分。 可以自己應用樣式，但是如果有棱角的材料可能，我寧願避免這樣做。

“引擎蓋下”有角材質將許多元素替換為div，並應用自定義樣式。 這讓我認為他們可能會處理這種情況。

如果我有以下代碼，則希望帶有label="Second level deep"的md-optgroup進一步縮進。

Plunker

<md-input-container>
    <md-select ng-model="vm.someModel">
        <md-optgroup label="One level deep">
            <md-option>
                One level deep
            </md-option>
        </md-optgroup>
        <md-optgroup label="Another group">
            <md-optgroup label="Second level deep">
                <md-option>Two levels deep</md-option>
            </md-optgroup>
        </md-optgroup>
    </md-select>
</md-input-container>

但是，並非所有md-optgroups都縮進並顯示相同。

當前是這樣的：

我在演示或文檔中看不到任何內容（事實上，他們根本沒有md-optgroup任何文檔），但是文檔有時可能過時/不完整。

嵌套的選項組可以縮進嗎？

如果不是，使用角形材料中可用的最佳方法是什么？ 我應該使用flex等嗎

我正在嘗試實現以下目標：

Answer 1

經過一段時間的思考，我設法使用flex-offset做到了。

您可以簡單地將flex-offset應用於md-optgroup 。

我使用了flex-offset="5"因為這看起來最明智，但是任何偏移都可以。

我添加了其他嵌套和選項，以使這一點更好。

更新的插頭

<md-input-container>
    <md-select ng-model="vm.someModel">
      <md-optgroup label="One level deep">
          <md-option>
              One level deep
          </md-option>
      </md-optgroup>
      <md-optgroup label="Another group">
          <md-optgroup flex-offset="5" label="Second level deep">

              <md-optgroup flex-offset="5" label="3 deep now and we want to see what happens with long text">
                <md-option>Some more options</md-option>
              </md-optgroup>

              <md-option>Two levels deep</md-option>
              <md-option>Two levels deep again</md-option>

          </md-optgroup>
      </md-optgroup>
    </md-select>
  </md-input-container>