คุณกำลังดูเอกสารประกอบของ Apigee Edge
ไปที่เอกสารประกอบของ
Apigee X info
ธีมประกอบด้วยชีตสไตล์ส่วนกลางที่ให้รูปลักษณ์และความรู้สึกที่สอดคล้องกันสำหรับทุกหน้าในพอร์ทัล เป้าหมายของธีมคือการช่วยให้คุณเปลี่ยนรูปลักษณ์และความรู้สึกในหน้าพอร์ทัลทั้งหมดได้ในครั้งเดียว
คุณปรับแต่ง ดูตัวอย่าง และเผยแพร่ธีมได้ตามที่อธิบายไว้ในส่วนต่อไปนี้
สำรวจตัวแก้ไขธีม
ปรับแต่ง ดูตัวอย่าง และเผยแพร่ธีมสำหรับพอร์ทัลในตัวแก้ไขธีม
วิธีเข้าถึงตัวแก้ไขธีม
- เลือกเผยแพร่ > พอร์ทัลในแถบเครื่องมือการนำทางด้านข้าง เลือกพอร์ทัล แล้วคลิกธีมในหน้า Landing Page
- เมื่อแก้ไขพอร์ทัล ให้คลิกธีมในเมนูแบบเลื่อนลงในแถบเครื่องมือการนำทางด้านบน
ดังที่ไฮไลต์ไว้ในรูปก่อนหน้า เครื่องมือแก้ไขธีมช่วยให้คุณทำสิ่งต่อไปนี้ได้
- ปรับแต่งสไตล์พื้นฐานได้อย่างรวดเร็วโดยใช้เอดิเตอร์ธีมสไตล์พื้นฐาน ซึ่งรวมถึงองค์ประกอบต่อไปนี้
- ลบล้างตัวแปรของธีมหรือปรับแต่งองค์ประกอบสไตล์ของธีมในเครื่องมือแก้ไขธีมขั้นสูง ซึ่งรวมถึง (แต่ไม่จำกัดเพียง) องค์ประกอบต่อไปนี้
- ดูตัวอย่างการเปลี่ยนแปลงธีม
- แสดงตัวอย่างพอร์ทัลในเบราว์เซอร์
- เผยแพร่ธีมไปยังพอร์ทัลที่ใช้งานจริง
เกี่ยวกับธีมฐาน
กฎรูปแบบธีมพื้นฐานส่วนใหญ่ที่กำหนดลักษณะที่ปรากฏของเว็บไซต์จะอิงตามการออกแบบ Angular Material การออกแบบ Material ของ Angular ใช้เลย์เอาต์แบบตารางกริด รวมถึงคอมโพเนนต์และการจัดรูปแบบที่สอดคล้องกันเพื่อมอบประสบการณ์แบบอินเทอร์แอกทีฟที่ราบรื่นไร้รอยต่อ
กฎสไตล์จะกำหนดโดยใช้ Sassy Cascading Style Sheet (SCSS) SCSS เป็นซูเปอร์เซ็ตของ Cascading Style Sheets (CSS) ซึ่งมีข้อดีดังนี้
- ตัวแปรส่วนกลางที่นำกลับมาใช้ใหม่ได้ทั่วทั้งชีตสไตล์
- กฎที่ซ้อนกันเพื่อประหยัดเวลาในการพัฒนาชีตสไตล์
- ความสามารถในการสร้าง Mixin และฟังก์ชัน
เช่น
// 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 ตามที่อธิบายไว้ในปรับแต่งธีมโดยใช้เครื่องมือแก้ไขธีมขั้นสูง
เมื่อเลือกธีม UI แล้ว ระบบจะประกาศตัวแปร SCSS จำนวนหนึ่งซึ่งกำหนดรูปแบบการจัดรูปแบบข้อความ สี และเลย์เอาต์ และสไตล์ชีตพื้นฐานจะใช้ตัวแปรเหล่านี้ คุณลบล้างตัวแปรที่แสดงในการอ้างอิงตัวแปรของธีมได้
ปรับแต่งชุดสี
ปรับแต่งชุดสีโดยใช้เครื่องมือแก้ไขรูปแบบพื้นฐานหรือการลบล้างตัวแปรของธีม
เกี่ยวกับหมวดหมู่ชุดสี
คำจำกัดความของชุดสีสำหรับพอร์ทัลแบบผสานรวมจะจัดกลุ่มเป็นหมวดหมู่ต่อไปนี้ ซึ่งกำหนดโดยใช้การจัดรูปแบบสีของดีไซน์ 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 ที่นำเข้า (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 พิกเซล |
ปรับแต่งโลโก้ในแถบเครื่องมือการนำทางสำหรับการแสดงผลบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่
ปรับแต่งโลโก้ในแถบเครื่องมือการนำทางสำหรับการแสดงบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่ คุณอาจเห็นโลโก้เวอร์ชันเดสก์ท็อปหรือเวอร์ชันสำหรับมือถือ ทั้งนี้ขึ้นอยู่กับความกว้างของเบราว์เซอร์
คุณลบโลโก้หลักไม่ได้ ทำได้เพียงแทนที่เท่านั้น หากคุณไม่ได้ระบุโลโก้สําหรับโฆษณา Display บนอุปกรณ์เคลื่อนที่ ระบบจะใช้โลโก้หลักโดยค่าเริ่มต้น
วิธีปรับแต่งโลโก้ที่ใช้ในแถบเครื่องมือการนำทางสำหรับจอแสดงผลบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่
- ขอสำเนาโลโก้บริษัทอย่างน้อย 1 ชุดที่เหมาะกับการใช้งาน
ดูขนาดที่แนะนำในตารางก่อนหน้า - เข้าถึงเครื่องมือแก้ไขธีม
- วิธีแทนที่โลโก้ในแถบเครื่องมือการนำทางด้านบนบนจอแสดงผลเดสก์ท็อป
ก. ในแผงด้านขวา ภายในรูปแบบพื้นฐาน ให้คลิก
ในช่องโลโก้หลัก
ข. เรียกดูโลโก้เวอร์ชันเดสก์ท็อปในไดเรกทอรีในเครื่อง
ค. คลิกเปิดเพื่ออัปโหลดไฟล์ - วิธีแทนที่โลโก้ในแถบเครื่องมือการนำทางด้านบนบนจอแสดงผลอุปกรณ์เคลื่อนที่
ก. ในส่วนรูปแบบพื้นฐานในแผงด้านขวา ให้ขยายตัวเลือกโลโก้ แล้วคลิก ในช่องโลโก้บนอุปกรณ์เคลื่อนที่
b. เรียกดูโลโก้เวอร์ชันสำหรับมือถือในไดเรกทอรีในเครื่อง
ค. คลิกเปิดเพื่ออัปโหลดไฟล์ - คลิกบันทึกเพื่อดูตัวอย่างการเปลี่ยนแปลงในบานหน้าต่างด้านซ้าย
- คลิกเผยแพร่เพื่อเผยแพร่การเปลี่ยนแปลงไปยังพอร์ทัล ยืนยันการดำเนินการเมื่อได้รับข้อความแจ้ง
ปรับแต่งไอคอน Fav
วิธีปรับแต่ง favicon ที่ใช้ในแถบที่อยู่ของเว็บเบราว์เซอร์ (และตำแหน่งอื่นๆ)
- ขอสำเนาโลโก้บริษัทที่เหมาะสำหรับใช้เป็น Favicon
ดูขนาดที่แนะนำได้ในตารางก่อนหน้า - เข้าถึงเครื่องมือแก้ไขธีม
- ในส่วนรูปแบบพื้นฐานในแผงด้านขวา ให้ขยายตัวเลือกโลโก้ แล้วคลิก ในช่องไอคอน Fav
- เรียกดูเวอร์ชันไอคอน 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> จะเป็นสีน้ำเงิน เนื่องจากประกาศองค์ประกอบของรูปแบบแอตทริบิวต์รหัสภายในองค์ประกอบ 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
);
ตัวแปรการพิมพ์
ปรับแต่งการจัดรูปแบบข้อความของ Angular 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);