คุณกําลังดูเอกสารประกอบของ Apigee Edge
ไปที่เอกสารประกอบของ Apigee X info
ธีมประกอบด้วยชีตสไตล์ส่วนกลางที่ให้รูปลักษณ์ที่สอดคล้องกันสำหรับหน้าเว็บทั้งหมดในพอร์ทัล เป้าหมายของธีมคือช่วยให้คุณเปลี่ยนรูปลักษณ์ของหน้าพอร์ทัลทั้งหมดพร้อมกันได้
คุณสามารถปรับแต่ง แสดงตัวอย่าง และเผยแพร่ธีมได้ตามที่อธิบายไว้ในส่วนต่อไปนี้
สำรวจเครื่องมือแก้ไขธีม
ปรับแต่ง แสดงตัวอย่าง และเผยแพร่ธีมสำหรับพอร์ทัลในตัวแก้ไขธีม
วิธีเข้าถึงเครื่องมือแก้ไขธีม
- เลือกเผยแพร่ > พอร์ทัลในแถบเครื่องมือการนำทางด้านข้าง เลือกพอร์ทัล แล้วคลิกธีมในหน้า Landing Page
- เมื่อแก้ไขพอร์ทัล ให้คลิกธีมในเมนูแบบเลื่อนลงในแถบเครื่องมือการนําทางด้านบน
เครื่องมือแก้ไขธีมช่วยให้คุณทำสิ่งต่อไปนี้ได้ดังที่ไฮไลต์ไว้ในรูปภาพก่อนหน้า
- ปรับแต่งสไตล์พื้นฐานอย่างรวดเร็วโดยใช้เครื่องมือแก้ไขธีมสไตล์พื้นฐาน ซึ่งรวมถึงองค์ประกอบต่อไปนี้
- ลบล้างตัวแปรธีมหรือปรับแต่งองค์ประกอบสไตล์ธีมในเครื่องมือแก้ไขธีมขั้นสูง ซึ่งรวมถึง (แต่ไม่จํากัดเพียง) องค์ประกอบต่อไปนี้
- ดูตัวอย่างการเปลี่ยนแปลงธีม
- แสดงตัวอย่างพอร์ทัลในเบราว์เซอร์
- เผยแพร่ธีมไปยังพอร์ทัลที่เผยแพร่อยู่
เกี่ยวกับธีมพื้นฐาน
กฎสไตล์ธีมพื้นฐานส่วนใหญ่ที่กําหนดลักษณะที่ปรากฏของเว็บไซต์จะอิงตาม Angular Material Design การออกแบบ Material ของ Angular ใช้เลย์เอาต์ตามตารางกริด รวมถึงคอมโพเนนต์และการจัดสไตล์ที่สอดคล้องกันเพื่อมอบประสบการณ์แบบอินเทอร์แอกทีฟที่รวมเป็นหนึ่งเดียว
กฎสไตล์จะกำหนดโดยใช้ Sassy Cascading Style Sheet (SCSS) SCSS เป็นชุดที่รวม Cascading Style Sheets (CSS) ไว้ด้วย ซึ่งมีข้อดีดังต่อไปนี้
- ตัวแปรส่วนกลางที่นำกลับมาใช้ใหม่ได้ตลอดทั้งสไตล์ชีต
- กฎที่ฝังอยู่เพื่อประหยัดเวลาในการพัฒนาสไตล์ชีต
- ความสามารถในการสร้างมิกซ์อินและฟังก์ชัน
เช่น
// Variable declaration
$my-variable: 12px;
// Nested selectors
.container-selector {
.element-selector {
padding: $my-variable;
}
}
// The SCSS compiler will compile the above code to:
.container-selector .element-selector {
padding: 12px;
}
// Function declaration
@function double($x) { return $x * 2; }
// Call function
.my-selector { height: double(12px); }
// The SCSS compiler will compile the above code to:
.my-selector { height: 24px; }
ระบบจะคอมไพล์และแปลง SCSS เป็น CSS ธรรมดาก่อนที่จะแสดงผลเนื้อหาในหน้าเว็บ
ธีมพื้นฐานใช้ไฟล์สไตล์ชีต Angular Material ซึ่งเป็นไฟล์ SCSS การจัดธีม Material (material-theming.scss) สไตล์ชีตนี้จะประกาศตัวแปร ฟังก์ชัน และมิกซ์อินที่ลบล้างได้โดยใช้ตัวแปรที่กำหนดเองและส่วน SCSS ตามที่อธิบายไว้ในปรับแต่งธีมโดยใช้เครื่องมือแก้ไขธีมขั้นสูง
ระบบจะประกาศตัวแปร SCSS จํานวนหนึ่งซึ่งกําหนดรูปแบบตัวอักษร สี และเลย์เอาต์ตามธีม UI ที่เลือก และจะใช้โดยสไตล์ชีตพื้นฐาน คุณสามารถลบล้างตัวแปรที่แสดงในการอ้างอิงตัวแปรธีม
ปรับแต่งชุดสี
ปรับแต่งชุดสีโดยใช้เครื่องมือแก้ไขสไตล์พื้นฐาน หรือการลบล้างตัวแปรธีม
เกี่ยวกับหมวดหมู่ชุดสี
คําจํากัดความของชุดสีสําหรับพอร์ทัลแบบรวมจะแบ่งออกเป็นหมวดหมู่ต่อไปนี้ ซึ่งกําหนดโดยใช้การจัดสไตล์สีของดีไซน์ Material ในธีมพื้นฐาน
| หมวดหมู่ | รูปแบบ |
| หลัก | แถบเครื่องมือการนำทาง ส่วนหัว ส่วนหัวของการ์ด และปุ่ม |
| เสียงรอง | <pre> และข้อความ <code>
|
| สำเนียง | ปุ่มนำทาง ลิงก์ และปุ่มที่มีเครื่องหมายกำกับการออกเสียง |
| แจ้งเตือน | คำเตือนและข้อผิดพลาด |
ปรับแต่งชุดสีโดยใช้เครื่องมือแก้ไขสไตล์พื้นฐาน
ปรับแต่งชุดสีหลักและเฉพาะจุดได้อย่างรวดเร็วโดยใช้เครื่องมือแก้ไขสไตล์พื้นฐาน
วิธีปรับแต่งชุดสีโดยใช้เครื่องมือแก้ไขสไตล์พื้นฐาน
- เข้าถึงเครื่องมือแก้ไขธีม
- หากต้องการปรับแต่งสีหลัก ให้เลือกสีในเมนูแบบเลื่อนลงสีหลัก หรือคลิกกำหนดเอง แล้วป้อนค่าสีฐานสิบหกที่กำหนดเองในกล่องข้อความ
- หากต้องการปรับแต่งสีเฉพาะจุด ให้เลือกสีในเมนูแบบเลื่อนลงสีเฉพาะจุด หรือคลิกกำหนดเอง แล้วป้อนค่าสีแบบเลขฐานสิบหกที่กำหนดเองในกล่องข้อความ
- คลิกบันทึกเพื่อบันทึกการเปลี่ยนแปลง
- ดูการเปลี่ยนแปลงในแผงแสดงตัวอย่าง หรือคลิกแสดงตัวอย่างเพื่อดูตัวอย่างการเปลี่ยนแปลงในพอร์ทัลในเบราว์เซอร์
หมายเหตุ: คุณสามารถคลิกไปยังส่วนต่างๆ ของพอร์ทัลในแผงแสดงตัวอย่างเพื่อดูการเปลี่ยนแปลงในทุกหน้า - คลิกเผยแพร่เพื่อเผยแพร่ธีม ระบบจะแจ้งให้คุณยืนยันการอัปเดต
ปรับแต่งชุดสีโดยการลบล้างตัวแปรธีม
หากต้องการปรับแต่งชุดสีโดยการลบล้างตัวแปรธีม ให้เข้าถึงเครื่องมือแก้ไขธีมขั้นสูง และใส่ตัวแปรต่อไปนี้อย่างน้อย 1 รายการพร้อมค่าที่ปรับแล้วในส่วนตัวแปรเพื่อเปลี่ยนสีข้อความหลัก รอง เน้น หรือคำเตือนตามลำดับ โปรดดูเกี่ยวกับหมวดหมู่ชุดสี
$primary: mat-palette($mat-grey, 800, 100, 900);
$secondary: mat-palette($mat-green, 700, 100, 900);
$accent: mat-palette($mat-blue, 600, 700, 900);
$warn: mat-palette($mat-red);
ดูเนื้อหาของไฟล์ SCSS การจัดธีมวัสดุที่นําเข้า (material-theming.scss) เพื่อระบุตัวแปรสีที่กําหนดไว้ล่วงหน้า (เช่น $mat-grey) ค่าตัวเลขจะระบุค่าการแรเงาสําหรับองค์ประกอบเริ่มต้น อ่อนลง และเข้มขึ้นตามลําดับ
หรือจะสร้างตัวแปรสีของคุณเองก็ได้ เช่น
$my-color-variable: (
50 : #f9f0e7,
100 : #f0d8c2,
200 : #e6bf9a,
300 : #dba572,
400 : #d49153,
500 : #cc7e35,
600 : #c77630,
700 : #c06b28,
800 : #b96122,
900 : #ad4e16,
A100 : #ffebe0,
A200 : #ffc9ad,
A400 : #ffa77a,
A700 : #ff9661,
// Color to render text presented on a background of the same level
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #000000,
600 : #000000,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);
จากนั้นใช้เพื่อเปลี่ยนชุดสี ดังที่แสดงในตัวอย่างต่อไปนี้
$primary: mat-palette($my-color-variable, 900, 200, 400);
ปรับแต่งชุดแบบอักษรและรูปแบบ
ปรับแต่งชุดแบบอักษรและสไตล์โดยใช้เครื่องมือแก้ไขสไตล์พื้นฐาน หรือการลบล้างตัวแปรธีม นอกจากนี้ คุณยังนำเข้าแบบอักษรที่กำหนดเองได้ด้วย
ปรับแต่งชุดแบบอักษรและรูปแบบโดยใช้เครื่องมือแก้ไขรูปแบบพื้นฐาน
ปรับแต่งชุดแบบอักษรและสไตล์ได้อย่างรวดเร็วโดยใช้เครื่องมือแก้ไขสไตล์พื้นฐาน ดังที่แสดงในรูปภาพต่อไปนี้
วิธีปรับแต่งชุดแบบอักษรและสไตล์โดยใช้เครื่องมือแก้ไขสไตล์พื้นฐาน
- เข้าถึงเครื่องมือแก้ไขธีม
- หากต้องการเปลี่ยนชุดแบบอักษร ให้เลือกค่าในเมนูแบบเลื่อนลงแบบอักษร
- หากต้องการเปลี่ยนรูปแบบแบบอักษร ให้ขยายส่วนรูปแบบแบบอักษร แล้วแก้ไขรูปแบบตามต้องการ ซึ่งรวมถึงขนาดแบบอักษร ความสูงบรรทัด และน้ำหนักแบบอักษรสำหรับองค์ประกอบ HTML ที่ต้องการ
- คลิกบันทึกเพื่อบันทึกการเปลี่ยนแปลง
- ดูการเปลี่ยนแปลงในแผงแสดงตัวอย่าง หรือคลิกแสดงตัวอย่างเพื่อดูตัวอย่างการเปลี่ยนแปลงในพอร์ทัลในเบราว์เซอร์
หมายเหตุ: คุณสามารถคลิกไปยังส่วนต่างๆ ของพอร์ทัลในแผงแสดงตัวอย่างเพื่อดูการเปลี่ยนแปลงในทุกหน้า - คลิกเผยแพร่เพื่อเผยแพร่ธีม ระบบจะแจ้งให้คุณยืนยันการอัปเดต
ปรับแต่งชุดแบบอักษรและรูปแบบโดยลบล้างตัวแปรธีม
หากต้องการปรับแต่งชุดแบบอักษรและสไตล์โดยการลบล้างตัวแปรธีม ให้เข้าถึงเครื่องมือแก้ไขธีมขั้นสูง และใส่ตัวแปรชุดแบบอักษรและสไตล์อย่างน้อย 1 รายการที่มีค่าที่ปรับแล้วในส่วนตัวแปร
เช่น หากต้องการเปลี่ยนแบบอักษรเริ่มต้นเป็น Arial ให้กําหนดตัวแปรต่อไปนี้
$typography-main-font-family: 'Arial';
นำเข้าแบบอักษรที่กำหนดเอง
นําเข้าแบบอักษรของ Google (ไม่รวมอยู่ในชุดแบบอักษรเริ่มต้น) หรือแบบอักษรที่กําหนดเอง จากนั้นอ้างอิงแบบอักษรที่กําหนดเองในสไตล์ชีต ตามที่อธิบายไว้ด้านล่าง
นําเข้าแบบอักษร Google
หากต้องการนำเข้าแบบอักษรของ Google ให้เข้าถึงเครื่องมือแก้ไขธีมขั้นสูงและนำเข้าแบบอักษรในส่วนสไตล์ที่กำหนดเอง ดังที่แสดงด้านล่าง
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
นำเข้าแบบอักษรที่กำหนดเอง
นําเข้าแบบอักษรที่กําหนดเองของคุณเองโดยใช้กฎ CSS @font-face กฎ @font-face รองรับรูปแบบไฟล์หลายประเภท เช่น TrueType (TTF), Web Open Font Format (WOFF) และอื่นๆ
วิธีนําเข้าแบบอักษรที่กําหนดเอง
- (ไม่บังคับ) อัปโหลดไฟล์แบบอักษรไปยังเครื่องมือจัดการชิ้นงานตามที่อธิบายไว้ในอัปโหลดไฟล์
เข้าถึงเครื่องมือแก้ไขธีมขั้นสูง แล้วเพิ่มกฎ
@font-faceลงในส่วนสไตล์ที่กำหนดเอง โดยที่font-familyจะระบุชื่อแบบอักษร,urlจะระบุตำแหน่งของไฟล์แบบอักษร (ในกรณีนี้คือเครื่องมือจัดการชิ้นงาน),MyCustomFont.tffคือชื่อไฟล์แบบอักษรที่กำหนดเอง และformatจะระบุรูปแบบแบบอักษร@font-face { font-family: 'MyCustomFont'; src: url('files/MyCustomFont.tff') format('truetype') }
อ้างอิงแบบอักษรที่กําหนดเองในชีตสไตล์
อ้างอิงแบบอักษรที่กำหนดเองในตัวแปรชุดแบบอักษรและสไตล์รายการใดรายการหนึ่งในส่วนตัวแปร เช่น
$typography-main: mat-typography-config(
$font-family: '"Indie Flower", "Oxygen", sans-serif',
$display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers
$display-3: mat-typography-level(56px, 56px, 400), // One-off large headers
$display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers
$display-1: mat-typography-level(34px, 40px, 400), // One-off small headers
$headline: mat-typography-level(24px, 32px, 400), // <h1> tags
$title: mat-typography-level(20px, 32px, 500), // <h2> tags
$subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags
$subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags
$body-2: mat-typography-level(14px, 24px, 500), // Bolder body text
$body-1: mat-typography-level(16px, 22px, 400), // Base body text
$caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text
$button: mat-typography-level(14px, 14px, 500), // Buttons
$input: mat-typography-level(16px, 1.125, 400) // Input form fields
);
ปรับแต่งโลโก้
คุณปรับแต่งโลโก้ที่ใช้ในพอร์ทัลได้ที่ตำแหน่งต่อไปนี้
| ตำแหน่งโลโก้ | ขนาดไฟล์เริ่มต้น |
|---|---|
| แถบเครื่องมือการนําทางบนเดสก์ท็อป | 196 x 32 พิกเซล |
| แถบเครื่องมือการนำทางบนอุปกรณ์เคลื่อนที่ | 156 x 32 พิกเซล |
| ไอคอน Fav ในแถบที่อยู่ของเบราว์เซอร์ (และตำแหน่งอื่นๆ) | 32 x 32 พิกเซล |
| หน้าลงชื่อเข้าใช้ | 392 x 64 พิกเซล |
ปรับแต่งโลโก้ในแถบเครื่องมือการนำทางสำหรับการแสดงผลบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่
ปรับแต่งโลโก้ในแถบเครื่องมือการนำทางสำหรับการแสดงผลบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่ คุณอาจเห็นโลโก้เวอร์ชันเดสก์ท็อปหรือเวอร์ชันอุปกรณ์เคลื่อนที่ ทั้งนี้ขึ้นอยู่กับความกว้างของเบราว์เซอร์
คุณลบโลโก้หลักไม่ได้ ทำได้เพียงแทนที่เท่านั้น หากคุณไม่ได้ระบุโลโก้สําหรับการแสดงผลบนอุปกรณ์เคลื่อนที่ ระบบจะใช้โลโก้หลักโดยค่าเริ่มต้น
วิธีปรับแต่งโลโก้ที่ใช้ในแถบเครื่องมือการนำทางสำหรับการแสดงผลบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่
- เตรียมสำเนาโลโก้บริษัทอย่างน้อย 1 รายการที่เหมาะสำหรับการใช้งาน
ดูขนาดที่แนะนำในตารางก่อนหน้า - เข้าถึงเครื่องมือแก้ไขธีม
- วิธีแทนที่โลโก้ในแถบเครื่องมือการนำทางด้านบนในเดสก์ท็อปมีดังนี้
a. ในส่วนสไตล์พื้นฐานในแผงด้านขวา ให้คลิก
ในช่องโลโก้หลัก
ข. เรียกดูโลโก้เวอร์ชันเดสก์ท็อปในไดเรกทอรีในเครื่อง
ค. คลิกเปิดเพื่ออัปโหลดไฟล์ - วิธีแทนที่โลโก้ในแถบเครื่องมือการนำทางด้านบนในการแสดงผลอุปกรณ์เคลื่อนที่
a. ในส่วนสไตล์พื้นฐานในแผงด้านขวา ให้ขยายตัวเลือกโลโก้ แล้วคลิก ในช่องโลโก้สำหรับอุปกรณ์เคลื่อนที่
ข. เรียกดูโลโก้เวอร์ชันอุปกรณ์เคลื่อนที่ในไดเรกทอรีในเครื่อง
ค. คลิกเปิดเพื่ออัปโหลดไฟล์ - คลิกบันทึกเพื่อดูตัวอย่างการเปลี่ยนแปลงในแผงด้านซ้าย
- คลิกเผยแพร่เพื่อเผยแพร่การเปลี่ยนแปลงในพอร์ทัล ยืนยันการดำเนินการเมื่อได้รับข้อความแจ้ง
ปรับแต่งไอคอน Fav
วิธีปรับแต่ง Favicon ที่ใช้ในแถบที่อยู่ของเว็บเบราว์เซอร์ (และตำแหน่งอื่นๆ
- หาสำเนาโลโก้บริษัทที่เหมาะสำหรับใช้เป็น Favicon
ดูขนาดที่แนะนำในตารางก่อนหน้า - เข้าถึงเครื่องมือแก้ไขธีม
- ในส่วนสไตล์พื้นฐานในแผงด้านขวา ให้ขยายตัวเลือกโลโก้ แล้วคลิก ในช่องFavicon
- เรียกดูโลโก้เวอร์ชันไอคอน Fav ในไดเรกทอรีในเครื่อง
- คลิกเปิดเพื่ออัปโหลดไฟล์
- คลิกบันทึกเพื่อดูตัวอย่างการเปลี่ยนแปลงในแผงด้านซ้าย
- คลิกเผยแพร่เพื่อเผยแพร่การเปลี่ยนแปลงในพอร์ทัล ยืนยันการดำเนินการเมื่อได้รับข้อความแจ้ง
ปรับแต่งโลโก้ในหน้าลงชื่อเข้าใช้
ปรับแต่งโลโก้ในหน้าลงชื่อเข้าใช้เมื่อกำหนดค่าประสบการณ์การลงทะเบียนและลงชื่อเข้าใช้สำหรับโปรแกรมสำหรับนักพัฒนาแอป ตามที่อธิบายไว้ในจัดการข้อมูลบริษัท
ปรับแต่งแถบเครื่องมือการนำทาง
ต่อไปนี้เป็นเคล็ดลับสั้นๆ ในการปรับแต่งแถบเครื่องมือการนำทาง
- ปรับแต่งสีของแถบเครื่องมือการนำทางในส่วนหัวและส่วนท้ายโดยเปลี่ยนสีหลัก ตามที่อธิบายไว้ในปรับแต่งชุดสี
- ปรับแต่งขนาดและสไตล์แบบอักษรของรายการเมนูในแถบเครื่องมือการนำทางในส่วนหัวและท้ายกระดาษโดยเปลี่ยนสไตล์แบบอักษรและปุ่ม ตามที่อธิบายไว้ในปรับแต่งชุดแบบอักษรและสไตล์
- ปรับแต่งความสูงของแถบเครื่องมือการนําทางส่วนหัวโดยเข้าถึงเครื่องมือแก้ไขธีมขั้นสูง และใส่ตัวแปรต่อไปนี้พร้อมกับค่าที่ปรับแล้วในส่วนตัวแปร
$layout-header-height: 64px; - ปรับแต่งความสูงของแถบเครื่องมือการนําทางส่วนท้ายโดยเข้าถึงเครื่องมือแก้ไขธีมขั้นสูง และใส่ตัวแปรต่อไปนี้พร้อมกับค่าที่ปรับแล้วในส่วนตัวแปร
$layout-footer-height: 44px; - ปรับแต่งโลโก้ในแถบนำทางสำหรับจอแสดงผลบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่
ปรับแต่งภาพพื้นหลัง
ปรับแต่งภาพพื้นหลังในหน้าแรกโดยทํางานอย่างใดอย่างหนึ่งต่อไปนี้
อัปโหลดรูปภาพ home-background.jpg เวอร์ชันของคุณเองไปยังเครื่องมือจัดการชิ้นงานโดยใช้ชื่อเดียวกันและขนาดไฟล์แบบสัมพัทธ์ (3000 พิกเซล x 1996 พิกเซล) ดูข้อมูลเพิ่มเติมได้ที่จัดการชิ้นงาน
แก้ไขชื่อไฟล์ภาพพื้นหลังและการเยื้องโดยเข้าถึงเครื่องมือแก้ไขธีมขั้นสูง และใส่ SCSS ต่อไปนี้ที่มีค่าที่ปรับแล้วในส่วนสไตล์ที่กำหนดเอง
#index { &.main { .main-content { padding: 0; background-image: url('/files/home-background.jpg'); background-size: cover; } } }เพิ่มภาพพื้นหลังลงในหน้าทั้งหมดในพอร์ทัลโดยเข้าถึงเครื่องมือแก้ไขธีมขั้นสูง และใส่ SCSS ต่อไปนี้พร้อมค่าที่ปรับแล้วในส่วนสไตล์ที่กำหนดเอง
body { background-image: url('/files/background-image.jpg'); }
ปรับแต่งแบบอักษร
ปรับแต่งแบบอักษรโดยไปที่การเข้าถึงเครื่องมือแก้ไขธีมขั้นสูง และปรับค่าสำหรับตัวแปรแบบอักษรต่อไปนี้อย่างน้อย 1 รายการในส่วนตัวแปร
$typography-main$typography-header$typography-footer$typography-context-bar
เช่น
// Main content typography (includes dialog and notification popups)
$typography-main: mat-typography-config(
$font-family: 'Roboto, "Oxygen", sans-serif',
$display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers
$display-3: mat-typography-level(56px, 56px, 400), // One-off large headers
$display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers
$display-1: mat-typography-level(34px, 40px, 400), // One-off small headers
$headline: mat-typography-level(24px, 32px, 400), // <h1> tags
$title: mat-typography-level(20px, 32px, 500), // <h2> tags
$subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags
$subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags
$body-2: mat-typography-level(14px, 24px, 500), // Bolder body text
$body-1: mat-typography-level(16px, 22px, 400), // Base body text
$caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text
$button: mat-typography-level(14px, 14px, 500), // Buttons
$input: mat-typography-level(16px, 1.125, 400) // Input form fields
);
จากนั้นคุณสามารถใช้แบบอักษรกับตัวเลือก CSS ที่เฉพาะเจาะจงได้ ดังที่แสดงในตัวอย่างต่อไปนี้
@include mat-base-typography($custom-typography-config, '.css-selector');
หรือจะใช้ระดับแบบอักษรที่เฉพาะเจาะจงซึ่งกำหนดไว้ในแบบอักษรที่กำหนดเองกับตัวเลือก CSS ก็ได้ ดังที่แสดงในตัวอย่างต่อไปนี้
.css-selector {
@include mat-typography-level-to-styles($custom-typography-config, display-3);
}
ปรับแต่งธีมโดยใช้เครื่องมือแก้ไขธีมขั้นสูง
ปรับแต่งธีมโดยลบล้างตัวแปรธีม หรือปรับแต่งองค์ประกอบสไตล์ธีมในเครื่องมือแก้ไขธีมขั้นสูงโดยตรง
ลบล้างตัวแปรธีม
ลบล้างตัวแปรธีมในส่วนตัวแปรของเครื่องมือแก้ไขธีมขั้นสูง โปรดดูรายการตัวแปรธีมในหัวข้อการอ้างอิงตัวแปรธีม
เช่น หากต้องการปรับแต่งความสูงของแถบเครื่องมือการนําทางส่วนหัวและส่วนท้าย ให้ใส่ตัวแปรต่อไปนี้ตามลําดับพร้อมค่าที่ปรับแล้วในส่วนตัวแปรของเครื่องมือแก้ไขธีมขั้นสูง
ดูตัวอย่างเพิ่มเติมได้ที่
วิธีลบล้างตัวแปรธีม
- เข้าถึงเครื่องมือแก้ไขธีม
- คลิกขั้นสูงในแผงด้านขวา
- คลิกตัวแปร
- เพิ่มการลบล้างตัวแปร
ดูรายการตัวแปรที่ลบล้างได้ได้ที่ข้อมูลอ้างอิงตัวแปรธีม - คลิกบันทึกเพื่อบันทึกการเปลี่ยนแปลง
- คลิก x เพื่อปิดเครื่องมือแก้ไขธีมขั้นสูง
- ดูการเปลี่ยนแปลงในแผงแสดงตัวอย่าง หรือคลิกแสดงตัวอย่างเพื่อดูตัวอย่างการเปลี่ยนแปลงในพอร์ทัลในเบราว์เซอร์ หมายเหตุ: คุณสามารถคลิกไปยังส่วนต่างๆ ของพอร์ทัลในแผงแสดงตัวอย่างเพื่อดูการเปลี่ยนแปลงในทุกหน้า
- คลิกเผยแพร่เพื่อเผยแพร่ธีม ระบบจะแจ้งให้คุณยืนยันการอัปเดต
ปรับแต่งองค์ประกอบสไตล์ธีม
ปรับแต่งองค์ประกอบสไตล์ธีมได้โดยตรงในส่วนสไตล์ที่กำหนดเองของเครื่องมือแก้ไขธีมขั้นสูง
ตัวอย่างเช่น หากต้องการเปลี่ยนสีปุ่มสร้างในหน้าแอปใหม่ซึ่งปรากฏขึ้นเมื่อลงทะเบียนแอปในพอร์ทัล ให้ใส่องค์ประกอบสไตล์ธีมต่อไปนี้พร้อมค่าที่ปรับแล้ว
.main .main-content button.app-save {
color: blue;
}
โปรดดูหัวข้อปรับแต่งภาพพื้นหลังด้วย
วิธีปรับแต่งองค์ประกอบสไตล์ธีม
- เข้าถึงเครื่องมือแก้ไขธีม
- คลิกขั้นสูงในแผงด้านขวา
- คลิกสไตล์ที่กำหนดเอง
- เพิ่มองค์ประกอบสไตล์ธีม
- คลิกบันทึกเพื่อบันทึกการเปลี่ยนแปลง
- ปิด x เพื่อปิดเครื่องมือแก้ไขธีมขั้นสูง
- ดูการเปลี่ยนแปลงในแผงแสดงตัวอย่าง หรือคลิกแสดงตัวอย่างเพื่อดูตัวอย่างการเปลี่ยนแปลงในพอร์ทัลในเบราว์เซอร์
หมายเหตุ: คุณสามารถคลิกไปยังส่วนต่างๆ ของพอร์ทัลในแผงแสดงตัวอย่างเพื่อดูการเปลี่ยนแปลงในทุกหน้า - คลิกเผยแพร่เพื่อเผยแพร่ธีม ระบบจะแจ้งให้คุณยืนยันการอัปเดต
สร้างแผงแบบเต็มความกว้างในหน้าพอร์ทัล
วิธีสร้างแผงแบบเต็มความกว้างในหน้าพอร์ทัล
- เพิ่มองค์ประกอบสไตล์ธีมต่อไปนี้ในเครื่องมือแก้ไขธีมขั้นสูงตามที่อธิบายไว้ในปรับแต่งองค์ประกอบสไตล์ธีม
.full-width__container { position: relative; left: 50%; right: 50%; max-width: 100vw; margin-left: -50vw; margin-right: -50vw; background-image: url("/files/your-image.jpg"); background-size: cover; background-position: 50% 50%; padding: 0; } .full-width__centered { @include centered-content(); } .full-width__content { // Add any 'additional' padding here and NOT in .full-width__centered. Adding padding to // .full-width__centered will result in a horizontal scroll bar. You can exclude this class // and corresponding <div> container if no additional padding control other than the // min page padding is needed. } - แก้ไขเนื้อหาหน้าพอร์ทัลให้รวมองค์ประกอบ
<div>ต่อไปนี้ตามที่อธิบายไว้ในพัฒนาเนื้อหาพอร์ทัลโดยใช้เครื่องมือแก้ไขหน้าเว็บ<div class="full-width__container"> <div class="full-width__centered"> <div class="full-width__content"> <!-- Include this div if you need additional padding --> <h2>Full Width Container</h2> <p> This content will align with the page header and other content outside of this full width container </p> </div> </div> </div>
เผยแพร่ธีม
วิธีเผยแพร่การปรับแต่งธีมและสไตล์ที่คุณเพิ่มลงในพอร์ทัลเวอร์ชันที่ใช้งานอยู่
- เข้าถึงเครื่องมือแก้ไขธีม
- คลิกเผยแพร่
หากต้องการดูเนื้อหาที่เผยแพร่ในพอร์ทัลเวอร์ชันที่ใช้งานอยู่ ให้คลิกดูพอร์ทัลในแถบเครื่องมือการนำทางด้านบน
ทําความเข้าใจกฎความเฉพาะเจาะจงของ CSS
ความเฉพาะเจาะจงของ CSS อธิบายวิธีที่เบราว์เซอร์ใช้เพื่อกำหนดลําดับความสําคัญของการประกาศองค์ประกอบสไตล์ CSS เมื่อเกิดข้อขัดแย้ง ระบบจะคํานวณความเฉพาะเจาะจงของ CSS โดยใช้น้ำหนักกับประกาศองค์ประกอบสไตล์ CSS ที่เฉพาะเจาะจงตามประเภทตัวเลือก ยิ่งตัวเลือก CSS เฉพาะเจาะจงมากเท่าใด น้ำหนักก็จะยิ่งสูงเท่านั้น เช่น แอตทริบิวต์รหัสจะมีน้ำหนักในการคำนวณสูงกว่าตัวเลือกประเภท
ตัวอย่างเช่น หากคุณกำหนดองค์ประกอบสไตล์ต่อไปนี้ในโค้ด CSS องค์ประกอบย่อหน้าจะเป็นสีแดงเนื่องจากการประกาศองค์ประกอบสไตล์ p ภายในองค์ประกอบ div มีความเฉพาะเจาะจงมากกว่าการประกาศองค์ประกอบสไตล์ p
div p { color: red } ← More specific
p { color: blue }
ในทำนองเดียวกัน หากคุณกำหนดประกาศองค์ประกอบสไตล์ต่อไปนี้ในโค้ด CSS ข้อความที่อยู่ในแท็ก <div class="test"></div> จะมีสีน้ำเงินเนื่องจากประกาศสไตล์แอตทริบิวต์ id ภายในองค์ประกอบ div มีความเฉพาะเจาะจงมากกว่าประกาศองค์ประกอบสไตล์ div
div#test { background-color: blue; } ← More specific
div { background-color: red; }
สําหรับการประกาศองค์ประกอบสไตล์ที่มีความเฉพาะเจาะจงเท่ากัน การประกาศองค์ประกอบสไตล์รายการล่าสุดที่กําหนดไว้จะมีลําดับความสําคัญเหนือกว่า ตัวอย่างเช่น เมื่อพิจารณาลำดับการประกาศองค์ประกอบสไตล์ต่อไปนี้ องค์ประกอบย่อหน้าจะเป็นสีน้ำเงิน
p { color: red }
p { color: blue } ← Last specified
การอ้างอิงตัวแปรธีม
ส่วนต่อไปนี้สรุปตัวแปรที่ลบล้างได้ในส่วนตัวแปรของเครื่องมือแก้ไขธีมขั้นสูง ตามที่อธิบายไว้ในลบล้างตัวแปรธีม
ตัวแปรธีมพื้นฐาน
ปรับแต่งสีพื้นหน้าของธีมพื้นฐานที่ใช้ทั่วทั้งเว็บไซต์ ค่าที่ใช้ได้คือ light และ dark
$base-theme: light;
ตัวแปรชุดสี
ปรับแต่งชุดสีโดยแก้ไขตัวแปรต่อไปนี้เพื่อเปลี่ยนสีข้อความหลัก สีรอง สีเฉพาะจุด และสีข้อความเตือนตามลำดับ โปรดดูเกี่ยวกับหมวดหมู่ชุดสี
$primary: mat-palette($mat-grey, 800, 100, 900);
$secondary: mat-palette($mat-green);
$accent: mat-palette($mat-blue);
$warn: mat-palette($mat-red);
ค่าตัวเลขแสดงค่าการแรเงาสําหรับองค์ประกอบเริ่มต้น อ่อนลง และเข้มขึ้นตามลําดับ ดูเนื้อหาของไฟล์ SCSS การจัดธีมแบบ Material (material-theming.scss) เพื่อระบุตัวแปรสีที่กำหนดไว้ล่วงหน้า
เช่น คุณเปลี่ยนจานสีหลักเป็นสีเขียวได้โดยทำดังนี้
$primary: mat-palette($mat-green, 800, 100, 900);
หากต้องการปรับแต่งเฉพาะค่าแรเงาสำหรับชุดสีเริ่มต้นที่กำหนดไว้ในธีมพื้นฐาน ให้ใส่โค้ดต่อไปนี้พร้อมค่าแรเงาที่ปรับแล้ว
$primary: mat-palette($custom-hex-primary, 800, 100, 900);
$secondary: mat-palette($custom-hex-secondary, 800, 100, 900);
$accent: mat-palette($custom-hex-accent, 800, 100, 900);
$warn: mat-palette($custom-hex-warn, 800, 100, 900);
ตัวแปรชุดแบบอักษรและสไตล์
ปรับแต่งชุดแบบอักษรและรูปแบบ
// If using a custom font, import it by URL.
$typography-main-font-family: 'Roboto, sans-serif';
// Must resolve to a pixel value
$layout-responsive-breakpoint: 900px;
$layout-header-height: 64px;
$layout-header-menu-item-height: 36px;
$layout-header-menu-item-horiz-padding: 16px;
$layout-header-nested-menu-item-vert-padding: 5px;
$layout-header-menu-resp-item-height: 64px;
$layout-footer-height: 44px;
$layout-footer-menu-item-height: 36px;
$layout-footer-menu-item-horiz-padding: 16px;
$layout-footer-nested-menu-item-vert-padding: 5px;
$layout-context-bar-height: 60px;
$layout-context-bar-button-height: 36px;
$layout-context-bar-button-horiz-padding: 16px;
$layout-main-content-max-width: 1400px;
$layout-main-content-vert-padding: 38px;
$layout-horizontal-min-padding: 24px;
// Uses variables declared above
$typography-header: $typography-main;
$typography-footer: $typography-main;
$typography-context-bar: $typography-main;
ระบุแบบอักษรที่กําหนดเองเพื่อการควบคุมแบบละเอียดยิ่งขึ้น ดังที่แสดงในตัวอย่างต่อไปนี้
$typography-context-bar: mat-typography-config(
$font-family: 'Ubuntu, sans-serif',
$headline: mat-typography-level(30px, 30px, 500), // Title
$button: mat-typography-level(19px, 19px, 200) // Action buttons
);
ตัวแปรการพิมพ์
ปรับแต่งแบบอักษร Material แบบเชิงมุม ระดับการจัดรูปแบบตัวอักษรแต่ละระดับจะกำหนดขนาดแบบอักษร ความสูงของบรรทัด และน้ำหนักแบบอักษร
$typography-main-display-4: mat-typography-level(112px, 112px, 300);
$typography-main-display-3: mat-typography-level(56px, 56px, 400);
$typography-main-display-2: mat-typography-level(45px, 48px, 400);
$typography-main-display-1: mat-typography-level(34px, 40px, 400);
$typography-main-headline: mat-typography-level(24px, 32px, 400);
$typography-main-title: mat-typography-level(20px, 32px, 400);
$typography-main-subheading-2: mat-typography-level(16px, 28px, 400);
$typography-main-subheading-1: mat-typography-level(15px, 24px, 400);
$typography-main-body-2: mat-typography-level(14px, 24px, 400);
$typography-main-body-1: mat-typography-level(16px, 22px, 400);
$typography-main-caption: mat-typography-level(12px, 20px, 400);
$typography-main-button: mat-typography-level(14px, 14px, 700);
$typography-main-input: mat-typography-level(16px, 1.125, 400);
// Copies properties declared above into a cohesive object
$typography-main: mat-typography-config(
$font-family: $typography-main-font-family,
$display-4: $typography-main-display-4,
$display-3: $typography-main-display-3,
$display-2: $typography-main-display-2,
$display-1: $typography-main-display-1,
$headline: $typography-main-headline,
$title: $typography-main-title,
$subheading-2: $typography-main-subheading-2,
$subheading-1: $typography-main-subheading-1,
$body-2: $typography-main-body-2,
$body-1: $typography-main-body-1,
$caption: $typography-main-caption,
$button: $typography-main-button,
$input: $typography-main-input);