CapDrive
คู่มือการใช้งาน

Symbol

ใช้ SF Symbols เพื่อวาดไอคอนระบบ เช่น มาตรวัดความเร็ว เทอร์โมมิเตอร์ สามารถตั้งค่าขนาดตัวอักษรสัญลักษณ์ น้ำหนักตัวอักษร และวิธีการระบายสีได้ จะมีสัญลักษณ์เฉพาะหรือไม่นั้นขึ้นอยู่กับระบบของอุปกรณ์

ตัวอย่าง

function main() {
  return (
    <Symbol
      name="speedometer"
      fontSize={36}
      renderingMode="hierarchical"
      color={$env.accent}
    />
  );
}

การใช้งาน

  • name เป็นชื่อ SF Symbols ไม่ใช่ไฟล์ fontSize กำหนดขนาดสัญลักษณ์ width/height เป็นกรอบ paletteColors ใช้กับชั้นสี ชื่อที่ระบบไม่รองรับจะไม่กลายเป็นภาพเอง
  • ขนาดตัวเลขใช้พอยต์ auto วัดเนื้อหา ส่วน fill ใช้พื้นที่ที่พ่อแม่จัดให้ กำหนดขนาดกรอบก่อน เพราะ fill และข้อความยาวไม่ขยายกรอบที่ล็อกขนาดไว้

คุณสมบัติ

namestring

ชื่อ SF Symbols เช่น speedometer ความพร้อมขึ้นอยู่กับระบบ

ตัวอย่าง"location.north.fill"
fontSize?number

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

ตัวอย่าง14
fontWeight?"ultraLight" | "thin" | "light" | "regular" | "medium" | "semibold" | "bold" | "heavy" | "black"

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

ตัวอย่าง"regular"
imageScale?"small" | "medium" | "large"

ขนาดสัมพัทธ์ small, medium หรือ large ร่วมกับ fontSize

ตัวอย่าง"medium"
renderingMode?"monochrome" | "hierarchical" | "palette" | "multicolor"

monochrome สีเดียว hierarchical ไล่น้ำหนัก palette ใช้ paletteColors multicolor เก็บหลายสีเดิม

ตัวอย่าง"monochrome"
color?Paint

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

ตัวอย่างHDR($env.foreground)
paletteColors?[Color] | [Color, Color] | [Color, Color, Color]

สี 1–3 สีสำหรับเลเยอร์สัญลักษณ์ในโหมด palette

ตัวอย่าง["red", "blue"]
contentAnimation?ContentAnimation

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

ตัวอย่าง{type: "fade", duration: 0.25}
คุณสมบัติทั่วไป
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 (
    <HStack alignment="firstTextBaseline" spacing={8}>
      <Symbol
        name="speedometer"
        fontSize={32}
        renderingMode="hierarchical"
        color={$env.accent}
      />
      <Text fontSize={40}>78</Text>
      <Text fontSize={14}>km/h</Text>
    </HStack>
  );
}

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

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

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

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

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

คุณสมบัติเมื่อไม่ระบุ
fontSize14
fontWeight"regular"
imageScale"medium"
renderingMode"monochrome"
colorHDR($env.foreground)

Text

HStack

Color / Gradient

CardContent

ก่อนหน้า

RepeatedLayout

ขั้นตอนถัดไป

ในหน้านี้

ตัวอย่างการใช้งานคุณสมบัติตัวอย่างใช้งานภาพเคลื่อนไหวเมื่อไม่ระบุAPI ที่เกี่ยวข้อง