文章分類/

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

0 次瀏覽
2023-09-10 更新

infragistics log

無法使用 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 生成的樣式表中,因此,如果您使用上述方法將樣式表視為與自動生成的樣式分開的樣式表,則可以自動生成再次樣式表,可以防止降級。

快速跳轉目錄

✦ 群昱 AccessSoft 你的全面軟體解決方案 ✦

身為全球眾多知名軟體在台灣合作夥伴,歡迎諮詢你需要的軟體服務!

Picture of 軟體專家
軟體專家

群昱作為全球知名軟體推薦合作夥伴,致力於提供更多軟體解決方案給你!

更多軟體新知

立即詢價

請留下完整資訊,以便我們提供精確的服務內容給你。

詢價資訊