Text

แสดงการอ่าน หน่วย หรือข้อความอธิบาย สามารถตั้งค่าแบบอักษร ขนาดแบบอักษร การจัดแนว การตัดบรรทัด และการตัดทอนได้ เนื้อหาจะถูกแปลงเป็นสตริงอย่างสม่ำเสมอและค่าว่างจะแสดงเป็นค่าว่าง

ตัวอย่าง

function main() {
  return (
    <Text fontSize={32} font="rounded" lineLimit={2} truncationMode="tail">
      Hello, CapDrive
    </Text>
  );
}

การใช้งาน

เนื้อหาใช้ toString() ส่วน null/undefined ว่าง ห้ามซ้อน View ใน Text ให้รวมไอคอนด้วย HStack จำกัด width ก่อน lineLimit/truncationMode ค่า minimumScaleFactor=1 ไม่ย่อข้อความ
ขนาดตัวเลขใช้พอยต์ auto วัดเนื้อหา ส่วน fill ใช้พื้นที่ที่พ่อแม่จัดให้ กำหนดขนาดกรอบก่อน เพราะ fill และข้อความยาวไม่ขยายกรอบที่ล็อกขนาดไว้

คุณสมบัติ

children?TextContent | TextContent[]

เนื้อหาการวาดของมุมมองลูก

fontSize?number

ขนาดตัวอักษร หน่วยพอยต์

ตัวอย่าง14

น้ำหนักฟอนต์ ultraLight ถึง black; regular คือปกติ

ตัวอย่าง"regular"

font?"default" | "rounded" | "monospaced" | "serif"

รูปแบบฟอนต์ default, rounded, monospaced หรือ serif

ตัวอย่าง"default"

color?Paint

สีสำหรับการวาด รวมถึงสี HDR

ตัวอย่างHDR($env.foreground)

alignment?"leading" | "center" | "trailing"

จัดข้อความในความกว้างที่มีด้วย leading, center หรือ trailing

ตัวอย่าง"leading"

lineLimit?number | null

จำนวนบรรทัดสูงสุด null หรือไม่ระบุให้ขึ้นบรรทัดได้ไม่จำกัดจำนวน

ตัวอย่าง1

truncationMode?"head" | "middle" | "tail"

ตำแหน่งตัดข้อความที่เกิน: head, middle หรือ tail

ตัวอย่าง"tail"

minimumScaleFactor?number

สเกลข้อความต่ำสุดเมื่อที่ไม่พอ 0.01–1; 1 ไม่ย่อ

ตัวอย่าง0.5

monospacedDigits?boolean

ตัวเลขกว้างเท่ากัน ป้องกันการกระโดดแนวนอนเมื่อค่าเปลี่ยน

ตัวอย่างtrue

letterSpacing?number

ช่องว่างระหว่างตัวอักษรที่เพิ่มขึ้นเป็นพอยต์

ตัวอย่าง0

contentAnimation?ContentAnimation

เอฟเฟกต์เมื่อเนื้อหาเปลี่ยน ใช้ type ที่ View รองรับ duration/delay เป็นวินาที

ตัวอย่าง{type: "numericText"}

คุณสมบัติทั่วไป

width?number | "auto" | "fill"

ความกว้างเป็นพอยต์ ปรับขนาดอัตโนมัติ หรือเติมเต็มพื้นที่แม่

ตัวอย่าง100

height?number | "auto" | "fill"

ความสูงเป็นพอยต์ ปรับขนาดอัตโนมัติ หรือเติมเต็มพื้นที่แม่

ตัวอย่าง80

padding?number

ระยะขอบภายในเนื้อหา หน่วยพอยต์

ตัวอย่าง0

x?number

เลื่อนภาพเป็นพอยต์: x ไปขวา y ลงล่าง ไม่เปลี่ยนพื้นที่ในเลย์เอาต์

ตัวอย่าง0

y?number

เลื่อนภาพเป็นพอยต์: x ไปขวา y ลงล่าง ไม่เปลี่ยนพื้นที่ในเลย์เอาต์

ตัวอย่าง0

transform?ViewTransform

แปลงทั้ง View โดยไม่เปลี่ยนเลย์เอาต์ ระยะเลื่อนเป็นพอยต์ หมุน/เอียงเป็นองศา สเกล 1 ไม่เปลี่ยน จุดยึด 0–1

ตัวอย่าง{rotation: 0}

background?Paint

สีหรือไล่สีพื้นหลัง clear คือโปร่งใส

ตัวอย่าง"clear"

opacity?number

ความทึบทั้ง View: 0 โปร่งใส 1 ทึบ

ตัวอย่าง1

cornerRadius?number

รัศมีมุมโค้งเป็นพอยต์

ตัวอย่าง0

clipped?boolean

ตัดส่วนที่วาดเกินขอบ View

ตัวอย่างfalse

clip?"rectangle" | "ellipse"

รูปทรงตัด rectangle หรือ ellipse; Material ใช้ false เพื่อปิดได้

ตัวอย่าง"rectangle"

mask?View | null

View มาสก์อัลฟา จัดกึ่งกลางโดยไม่ส่งผลต่อเลย์เอาต์; null ปิดการใช้มาสก์

ตัวอย่าง<Circle width="fill" height="fill" background="white"/>

zIndex?number

ลำดับวาดระหว่างองค์ประกอบระดับเดียวกัน ค่ายิ่งมากยิ่งอยู่หน้า

ตัวอย่าง0

blur?number

รัศมีเบลอเป็นพอยต์ 0 คือปิด

ตัวอย่าง4

innerShadow?DrawingEffect

สี ความทึบ รัศมีเบลอ และระยะ x/y ของเอฟเฟกต์ ระยะเป็นพอยต์

ตัวอย่าง{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}

glow?DrawingEffect

สี ความทึบ รัศมีเบลอ และระยะ x/y ของเอฟเฟกต์ ระยะเป็นพอยต์

ตัวอย่าง{color: HDR("cyan"), radius: 8, opacity: 0.8}

shadowColor?Color

สีเงาภายนอก

ตัวอย่างHDR("black")

shadowOpacity?number

ความทึบเงา 0–1; 0 ซ่อนเงา

ตัวอย่าง0

shadowRadius?number

รัศมีเบลอเงาภายนอกเป็นพอยต์

ตัวอย่าง4

shadowX?number

เลื่อนเงาเป็นพอยต์: x ไปขวา y ลงล่าง

ตัวอย่าง0

shadowY?number

เลื่อนเงาเป็นพอยต์: x ไปขวา y ลงล่าง

ตัวอย่าง2

animations?Animation[]

แอนิเมชันเมื่อคุณสมบัติเปลี่ยน duration/delay เป็นวินาที from/to เป็นปลายทาง repeat/autoreverse ควบคุมการซ้ำ wrap เป็นคาบ

ตัวอย่าง[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

ตัวระบุที่คงที่ระหว่างองค์ประกอบระดับเดียวกัน

ตัวอย่างใช้งาน

function main() {
  return (
    <VStack width={180} spacing={12}>
      <Text width="fill" fontSize={20} lineLimit={2} truncationMode="tail">
        CapDrive — a longer instrument title
      </Text>
      <HStack alignment="firstTextBaseline" spacing={4}>
        <Text fontSize={48} monospacedDigits={true}>
          78
        </Text>
        <Text fontSize={14}>km/h</Text>
      </HStack>
    </VStack>
  );
}

ภาพเคลื่อนไหว

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYfontSizeletterSpacingminimumScaleFactorcolortransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

เมื่อไม่ระบุ

ตารางคือพฤติกรรมเมื่อไม่ระบุที่ตรวจจากโค้ด ตัวอย่างไม่ใช่ค่าเริ่มต้น หากต้องการผลแน่นอนให้ระบุค่า ขนาดและสีตามบริบทไม่ใช่ค่าคงที่

คุณสมบัติ	เมื่อไม่ระบุ
`fontSize`	`14`
`fontWeight`	`"regular"`
`font`	`"default"`
`monospacedDigits`	`true`
`minimumScaleFactor`	`1`
`lineLimit`	`null`
`alignment`	`"center"`
`truncationMode`	`"tail"`
`color`	`HDR($env.foreground)`

ตัวอย่าง

การใช้งาน

คุณสมบัติ

ตัวอย่างใช้งาน

ภาพเคลื่อนไหว

เมื่อไม่ระบุ

HStack

Symbol

Color / Gradient

ในหน้านี้

Text

ตัวอย่าง

การใช้งาน

คุณสมบัติ

ตัวอย่างใช้งาน

ภาพเคลื่อนไหว

เมื่อไม่ระบุ

API ที่เกี่ยวข้อง

HStack

Symbol

Color / Gradient

ในหน้านี้