ถัดไป ก่อนหน้า

3.4 Content Formatting

     e. Theming content

สีธีมของพื้นที่เนื้อหา(Theming the content area)
   พื้นที่เนื้อหาหลักของเพจสามารถกำหนดธีมได้โดยเพิ่ม attribute : data-theme ลงใน ส่วนที่เป็น data-role="page"ซึ่งจะเป็นการสร้างสีพื้นหลังทั้งหมดของเพจ โดยไม่คำนึงถึงความยาวของเนื้อหา ถ้าใส่ attribute : data-theme ในส่วนของเนื้อหาอาจทำให้มีช่องว่างระหว่างเนื้อหากับส่วนล่างสุดของเพจ
   นอกจากนี้พื้นที่เนื้อหาของ collapsible สามารถเพิ่มสีให้match กับสีธีมส่วนหัว ของ collapsibleโดยใช้ attribute : data-content-theme
เช่น

<div data-role="page" data-theme="a" data-content-theme="a">

ธีมสีของ block collapsible(Theming collapsible blocks)
   การกำหนดสีธีมส่วนหัว ของcollapsible และเพิ่ม attribute: data-theme ลงในพื้นที่ของ collapsible สามารถกำหนดไอคอนด้วย attribute: data-collapsed-icon เพื่อบอกสถานะว่า “หุบ” และ attribute: data-expanded-icon เพื่อบอกสถานะว่า “ขยาย” และสามารถเพิ่มธีม attribute data-content-theme ลงในเนื้อหา
เช่น

<div data-role="collapsible" data-collapsed="true" data-theme="a">

ตัวอย่างธีม(Themed examples)

• Swatch "a" ใน content และ collapsible

  ตัวอย่างหน้าจอ

  H1 Heading

  I'm a themed collapsible

  I have data-theme attribute set manually on my container to set the color to match the content block I'm in.

  I'm a themed collapsible with a themed content

  I have data-content-theme attribute set manually on my container to set the color to match the content block I'm in.

• Swatch "b" ใน content และ collapsible

  ตัวอย่างหน้าจอ

  H1 Heading

  I'm a themed collapsible

  I have data-theme attribute set manually on my container to set the color to match the content block I'm in.

  I'm a themed collapsible with a themed content

  I have data-content-theme attribute set manually on my container to set the color to match the content block I'm in.

• Swatch "c" ใน content และ collapsible

  ตัวอย่างหน้าจอ

  H1 Heading

  I'm a themed collapsible

  I have data-theme attribute set manually on my container to set the color to match the content block I'm in.

  I'm a themed collapsible with a themed content

  I have data-content-theme attribute set manually on my container to set the color to match the content block I'm in.

• Swatch "d" ใน content และ collapsible

  ตัวอย่างหน้าจอ

  H1 Heading

  I'm a themed collapsible

  I have data-theme attribute set manually on my container to set the color to match the content block I'm in.

  I'm a themed collapsible with a themed content

  I have data-content-theme attribute set manually on my container to set the color to match the content block I'm in.

• Swatch "e" ใน content และ collapsible

  ตัวอย่างหน้าจอ

  H1 Heading

  I'm a themed collapsible

  I have data-theme attribute set manually on my container to set the color to match the content block I'm in.

  I'm a themed collapsible with a themed content

  I have data-content-theme attribute set manually on my container to set the color to match the content block I'm in.

• Swatch "b" ใน content และ collapsible กับการใช้ไอคอนที่ต่างกัน

  H1 Heading

  I'm a themed collapsible

  I have data-theme attribute set manually on my container to set the color to match the content block I'm in.

  I'm a themed collapsible with a themed content

  I have data-content-theme attribute set manually on my container to set the color to match the content block I'm in.