Infragistics｜Indigo.Design｜將自定義樣式添加到代碼生成的 Angular 組件

無法使用 Indigo.Design 從 Sketch 文件生成代碼並使用斷點在 scss 上實現響應式佈局。

但是，很多情況下您出於操作原因想要這樣做，因此您可以通過手動創建與代碼生成創建的 scss 文件分開的自定義樣式 scss 文件，並將其分配給組件來實現響應式佈局。這是一個例子。

如下所示，我們將實現一個響應式佈局，當窗口尺寸較寬時使用兩列，當窗口尺寸變窄時切換到一列。

這次，我創建了一個如下所示的 Sketch 文件。

為此文件生成代碼。如您所見，通過代碼生成支持兩列佈局。

手動創建一個新的 scss 以進行響應式佈局。這次，我準備了文件名為article.component.custom.scss的文件。

@Component({     selector: 'app-article',     templateUrl: './article.component.html',     styleUrls: [         './article.component.scss',         './article.component.custom.scss' //カスタム用のスタイルシート     ] }) 

我將樣式設置為手動創建的 scss，如下所示。使左列從中間開始可變，如果寬度小於640px，則將其設為一列。

@media screen and (max-width: 940px) {     .wrap {         width: 100%;         min-width: auto;         padding: 0 2%;         .details-article {             min-width: auto;             width: calc(100% - 396px);             h2 {                 min-width: auto;                 width: auto;                 padding-right: 1em;             }             span {                 min-width: auto;                 width: auto;                 padding-right: 1em;             }         }     } } @media screen and (max-width: 640px) {     .wrap {         flex-direction: column;         .details-article {             width: 100%;             margin-bottom: 1em;         }         .igx-list {             min-width: auto;             width: auto;             margin: 0;         }     } } 

我能夠使用斷點實現響應式佈局，如下所示。

在很多情況下，您都希望將信息添加到 Indigo.Design 生成的樣式表中，因此，如果您使用上述方法將樣式表視為與自動生成的樣式分開的樣式表，則可以自動生成再次樣式表，可以防止降級。