您可以使用樣式內容來實現下列某些樣式。我們建議您在可能的情況下使用樣式內容,而不要使用 CSS。 |
CSS | 描述 | 預覽 |
---|---|---|
@supports (ptcs-style-unit: "PTCS-BUTTON.primary") { :host { background-color: red !important; border-color: blue; border-width: 2px; } } | 將按鈕的背景顏色設定為紅色,並套用藍色邊框。 | |
@supports (ptcs-style-unit: "PTCS-BUTTON.danger") { [part=label] { color: Blue; font-style: Italic; } } | 將按鈕危險變體的標籤顏色設為藍色,並將字型樣式設定為斜體。 | |
@supports (ptcs-style-unit: "PTCS-BUTTON.primary") { :host(:not([disabled]):hover) { border-color: red; border-width: 2px; } } | 當暫留狀態為使用中時,在按鈕周圍顯示紅色邊框。 |
CSS | 描述 | 預覽 |
---|---|---|
@supports (ptcs-style-unit: "PTCS-TEXTFIELD") { [part=clear-button] { color: red; } } | 將清除按鈕的顏色設定為紅色。 | |
@supports (ptcs-style-unit: "PTCS-TEXTFIELD") { [part=text-box] { border-color: red; } } | 將文字方塊邊框的顏色設定為紅色。 | |
@supports (ptcs-style-unit: "PTCS-TEXTFIELD") { [part=counter] { color: red; } } | 將字元計數器的顏色設定為紅色。 |
CSS | 描述 | 預覽 |
---|---|---|
@supports (ptcs-style-unit: "PTCS-DROPDOWN") { [part=label] { color: red; } } | ||
@supports (ptcs-style-unit: "PTCS-DROPDOWN") { [part=icon] { color: red; } } | ||
@supports (ptcs-style-unit: "PTCS-DROPDOWN") { [part~=selected-item-value] { color: red; } } | 將所選項目值的顏色設定為紅色。 | |
@supports (ptcs-style-unit: "PTCS-DROPDOWN") { [part=select-box] { background-color: red; border-color: blue; border-width: 2px; } } | 將下拉清單的背景顏色設定為紅色,並將邊框設為藍色。 |
CSS | 描述 | 預覽 |
---|---|---|
@supports (ptcs-style-unit: "PTCS-CHART-AXIS") { [part=label] { color: red; } } | 將圖表軸的顏色設定為紅色。 | |
@supports (ptcs-style-unit: "PTCS-CHART-CORE-BAR") { [part=bar] { border-top-left-radius:15px; border-top-right-radius:15px; } } | 使柱的右上角與左上角圓角化。 | |
@supports (ptcs-style-unit: "PTCS-CHART-CORE-BAR") { [part=value] { color: red; font-style:bold; font-size:16px; } } | 設定柱資料標籤的顏色與字型樣式。 |