มันฝรั่งทอด
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
คอมโพเนนต์ชิปคือองค์ประกอบแบบอินเทอร์แอกทีฟที่แสดงอินพุต แอตทริบิวต์ หรือการดำเนินการ
คำแนะนำเกี่ยวกับบรรทัด
ขั้นต่ำ
ข้อความหลัก > 1 บรรทัด
ป้ายกำกับรอง > 1 บรรทัด
สูงสุด
ข้อความหลัก > 2 บรรทัด
ป้ายกำกับรอง > 3 บรรทัด
กายวิภาคศาสตร์
ชิปมีป้ายกำกับข้อความได้สูงสุด 2 รายการและไอคอน (ไม่บังคับ) ต้องระบุป้ายกำกับข้อความหรือไอคอนอย่างน้อย 1 รายการ ชิปอาจตัดข้อความให้สั้นลงหากป้ายกำกับข้อความยาวเกินไป ป้ายกำกับหลักคือข้อความ 1 บรรทัดหากมีป้ายกำกับรอง ป้ายกำกับหลักอาจมีข้อความ 2 บรรทัดหากไม่มีป้ายกำกับรอง
หากมีป้ายกำกับเพียงป้ายเดียว ป้ายกำกับดังกล่าวควรอยู่ตรงกลาง หากมีป้ายกำกับหรือไอคอนรอง ป้ายกำกับควรอยู่ทางด้านซ้าย
ก. ป้ายกำกับหลัก
ข. ป้ายกำกับรอง (ไม่บังคับ)
ค. ไอคอน (ไม่บังคับ)
ง. คอนเทนเนอร์
การไล่ระดับสีของชิป
ชิปมาตรฐาน
ด้านบน/ซ้าย = 50% หลัก
ด้านล่าง/ขวา = 0% พื้นผิว
(การไล่ระดับสีวางซ้อนบนพื้นหลังสีพื้นผิว)
ชิปรูปภาพ
ด้านบน/ซ้าย = 30% หลัก
0, 0, 45° (ด้านล่าง/ขวา) = 20% บนตัวแปรพื้นผิว
ประเภทชิปอื่น
ชิปที่มีภาพพื้นหลัง
ชิปรูปภาพมีการดำเนินการที่เกี่ยวข้องกับรูปภาพที่เลือก ชิปรูปภาพเหมาะอย่างยิ่งในการสื่อสารรูปลักษณ์และความรู้สึกที่เฉพาะเจาะจงมากขึ้น
เราขอแนะนำให้ชิปเหล่านี้มีความสูงคงที่ 52 dp
ชิปรูปโปรไฟล์
ใช้ชิปอวตาตาร์สําหรับการดําเนินการที่เกี่ยวข้องกับอวาตาร์ที่เลือก ชิปรูปโปรไฟล์ยังมีไอคอนที่ช่วยให้จดจำรูปโปรไฟล์ได้ง่ายขึ้นด้วย เช่น รูปบัตรประจำตัว ไอคอนรูปโปรไฟล์มีขนาด 32x32 dp
ชิปขนาดกะทัดรัด
คอมโพเนนต์ที่เกี่ยวข้องอย่าง CompactChip เป็นคอมโพเนนต์ Chip รูปแบบหนึ่งที่ปรากฏขึ้นขนาดเล็กลงและออกแบบมาสำหรับกรณีการใช้งานที่มีพื้นที่น้อย
ชิปขนาดกะทัดรัดมีช่องสำหรับไอคอนและช่องสำหรับป้ายข้อความแบบบรรทัดเดียว ชิปขนาดกะทัดรัดมีพื้นที่ที่แตะได้สูง 48 dp
ลำดับชั้น
ใช้การเติมสีที่แตกต่างกันเพื่อระบุลําดับชั้นของชิป ออกแบบแต่ละหน้าจอให้มีชิปที่โดดเด่นรายการเดียวสําหรับการดําเนินการหลัก
เน้นสูง
ใช้ชิปที่เน้นสูงสําหรับการดําเนินการที่สําคัญต่อหน้า ใช้สีหลักเป็นสีพื้นของชิปที่เน้นสูง
การเน้นระดับปานกลาง
ใช้ชิปที่เน้นระดับปานกลางสําหรับการดําเนินการที่สําคัญน้อยกว่าการดําเนินการหลัก ใช้สีรองในการเติมชิปการเน้นระดับกลาง
หรือจะใช้คอมโพเนนต์ OutlinedChip ที่กําหนดเองก็ได้ ชิปที่ขีดเส้นขอบจะมีพื้นหลังโปร่งใส เส้นขอบสีของตัวแปรหลักที่มีความทึบแสง 60% และเนื้อหาสีหลัก
เน้นต่ำ
ชิปที่เน้นต่ำจะมีการเติมแบบโปร่งใสและมีป้ายกำกับข้อความเท่านั้น ใช้ชิปที่เน้นต่ำเพื่อระบุความสัมพันธ์ของชิปย่อยกับชิปหลักหรือรอง
ขนาด
ชิปเริ่มต้น
ไอคอน: 24 dp
ความสูง: 52 dp
ชิปขนาดกะทัดรัด
ไอคอน: 20 dp
ความสูง: 32 dp
พื้นที่ที่โต้ตอบได้: 48 dp
การใช้งาน
ดูตัวอย่างการใช้ชิป เช่น ชิปมาตรฐานในการตั้งค่าและชิปรูปภาพในแอปออกกำลังกาย
เลย์เอาต์แบบปรับอัตโนมัติ
ลักษณะการทํางานแบบตอบสนอง
ชิปจะขยายให้เต็มความกว้างที่มีในจอแสดงผลขนาดใหญ่
ไอคอน (24 x 24 dp)
คอนเทนเนอร์ (52 x XX dp)
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-27 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2025-07-27 UTC"],[],[],null,["# Chips\n\nThe [Chip](/reference/kotlin/androidx/wear/compose/material/package-summary#Chip(kotlin.Function0,androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.ChipBorder,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)) component is an interactive element that represents an input, attribute, or action.\n\nLine Recommendations\n--------------------\n\n**Minimum**\n\nPrimary Text \\\u003e 1 Lines \n\nSecondary Label \\\u003e 1 Lines \n\n**Maximum**\n\nPrimary Text \\\u003e 2 Lines \n\nSecondary Label \\\u003e 3 Lines\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAnatomy\n-------\n\nChips can contain up to two text labels and an optional icon. At least one text label or an icon must be provided. Chips may truncate text if the text label is too long. The primary label is one line of text if the secondary label is present. The primary label can contain two lines of text if the secondary label is not present. \n\nIf there's only one label, it should be centered. If a secondary label or icon is present, the labels should be left-aligned. \n\n**A. Primary label\nB. Secondary label (optional)\nC. Icon (optional)\nD. Container**\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Chips Gradient**\n------------------\n\n**Standard Chip**\n\nTop/Left = 50% Primary \n\nBottom/Right = 0% Surface \n\n(Gradient overlays on a background of Surface color)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Image Chip**\n\nTop/Left = 30% Primary \n\n0, 0, 45° (Below Bottom/Right) = 20% On Surface Variant\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAlternative Chip types\n----------------------\n\n**Chip with background image**\n\nImage chips contain actions which relate to a chosen image. Image chips work well to communicate a more specific look and feel.\n\nIt is recommended that these Chips should have a fixed height of 52 dp.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Avatar Chip**\n\nUse avatar chips for actions that are related to a chosen avatar. Avatar chips can also have icons used to make the avatar more easily recognizable, such as a contact ID photo. Avatar icons are 32x32 dp.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nRelated components\n------------------\n\n**Compact Chip**\n\nThe related component, CompactChip is a variant of the Chip component that appears smaller and is designed for use cases where there is less space. \n\n\nCompact chips have a slot for an icon and a slot for a single line text label. Compact chips have a tappable area with a height of 48 dp.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nHierarchy\n---------\n\nUse different color fills to denote chip hierarchy. Design each screen to contain a single prominent chip for the primary action. \n\n**High emphasis** \n\n\nUse high-emphasis chips for actions that are primary to the page. Use primary colors as the fill of a high emphasis chip. \n\n**Medium emphasis** \n\n\nUse medium emphasis chips for actions that are less important than the primary actions. Use secondary colors for the fill of a medium emphasis chip. \n\n\nAlternatively, use the custom OutlinedChip component. The outlined chip has a transparent background, a primary variant colored stroke of 60% opacity, and primary colored content. \n\n**Low emphasis** \n\n\nLow emphasis chips have a transparent fill and only a text label. Use low emphasis chips to indicate a child relationship to a primary or secondary chip.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### **Sizes**\n\n**Default Chip**\n\nIcon: 24 dp \nHeight: 52 dp \n**Compact Chip**\n\nIcon: 20 dp \nHeight: 32 dp \nTappable Area: 48 dp\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### **Usage**\n\nSee examples of chip usage such as standard chips in Settings and image chips in an exercise app.\n\n### **Adaptive layouts**\n\n**Responsive behavior**\n\nChips stretch to fill the available width on larger displays. \n\n\nIcon (24 x 24 dp) \n\nContainer (52 x XX dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]
