چند سبک در متن

Figma به طراحان اجازه می‌دهد تا چندین تغییر سبک متن را در یک عنصر متنی اعمال کنند. به عنوان مثال، کلمه "قهوه ای" در کامپوننت Figma بسته بندی شده زیر یک عنصر متن واحد است که شامل انواع سبک ها، از جمله اندازه های متن مختلف در یک کلمه است.

سبک های متن مخلوط در یک عنصر متنی واحد

Relay از ترجمه طرح به کد چندین سبک متنی که روی زیر رشته ها در لایه متن Figma اعمال می شود پشتیبانی می کند. در کد منبع تولید شده، از Compose's AnnotatedString و SpanStyle برای نمایش چندین سبک در لایه های متن استفاده می شود.

سبک های پشتیبانی شده عبارتند از:

  • تایپ فیس
  • اندازه متن
  • وزن فونت
  • رنگ
  • فاصله حروف
  • مورب
  • ضربه از طریق
  • زیر خط بکش

در کد Compose ایجاد شده، Relay's RelayText composable می تواند String یا AnnotatedString را بپذیرد. Relay کد Kotlin را تولید می‌کند که از کلاس‌های AnnotatedString.Builder و SpanStyle برای ارائه چندین سبک در متن استفاده می‌کند. قطعه کد زیر فاصله حروف گسترده ای را نشان می دهد که روی کلمه "jumps" اعمال می شود، به دنبال آن یک فاصله بدون سبک سفارشی، و پس از آن کلمه "over" به صورت پررنگ به صورت مورب قرار می گیرد.

RelayText(
   content = buildAnnotatedString {
       append("The ")
       ...
       withStyle(
           style = SpanStyle(
               letterSpacing = 8.64.sp,
           )
       ) { // AnnotatedString.Builder
           append("jumps")
       }
       append(" ")
       withStyle(
           style = SpanStyle(
               fontFamily = inter,
               fontSize = 32.0.sp,
               fontWeight = FontWeight(700.0.toInt()),
               fontStyle = FontStyle.Italic,
           )
       ) { // AnnotatedString.Builder
           append("over")
       }
       ...
   },
   ...
)

محدودیت ها

{% کلمه به کلمه %} {% آخر کلمه %} {% کلمه به کلمه %} {% آخر کلمه %}