react figma ui
1.0.0
تطبيق رد الفعل ل figma-plugin-DS بواسطة Tom Lowry
Playground - العب مع المكتبة في Storybook
أولاً ، قم بتثبيت المكتبة في مشروعك بواسطة NPM:
$ npm install react-figma-uiأو الغزل:
$ yarn add react-figma-uiلاستخدام الزر ، استخدم المكون التالي. كل زر له خيار مدمر. الأزرار الثلاثية مصممة مثل الارتباطات التشعبية.
import { Button } from 'react-figma-ui' ;
// Primary
< Button tint = "primary" > Label </ Button >
< Button tint = "primary" destructive > Label < / Button>
< Button tint = "primary" disabled > Label </ Button >
// Secondary
< Button tint = "secondary" > Label < / Button>
< Button tint = "secondary" destructive > Label </ Button >
< Button tint = "secondary" disabled > Label < / Button>
// Tertiary (Hyperlink style button)
< Button tint = "tertiary" > Label </ Button >
< Button tint = "tertiary" destructive > Label < / Button>
< Button tint = "tertiary" disabled > Label </ Button > الدعائم العناصر الزر HTML والمعاملات المخصصة
| بارام | وصف |
|---|---|
tint | نمط العرض للزر: الأساسي (مملوء) ، ثانوي (محدد) ، التعليم العالي (الارتباط التشعبي) |
destructive | أضف البديل المدمر الأحمر لأفعال مثل حذف شيء ما |
لاستخدام مربع الاختيار ، استخدم المكون التالي. تذكر أن كل مربع اختيار يجب أن يحصل على معرف فريد.
import { Checkbox } from 'react-figma-ui' ;
// Checkbox unchecked
< Checkbox id = "uniqueId" > Label </ Checkbox >
// Checkbox checked
< Checkbox id = "uniqueId" checked > Label < / Checkbox>
// Checkbox disabled
< Checkbox id = "uniqueId" disabled > Label </ Checkbox > الدعائم عنصر إدخال HTML والمعاملات المخصصة
| بارام | وصف |
|---|---|
containerProps | الدعائم لحاوية مربع الاختيار |
labelProps | الدعائم لعنصر التسمية |
لاستخدام لوحة الكشف ، يجب عليك استخدام المكون التالي.
import { Disclosure , DisclosureItem } from 'react-figma-ui' ;
// Example items
const items = [
{ heading : 'Heading 1' , content : 'Content 1' , id : 1 } ,
{ heading : 'Heading 2' , content : 'Content 2' , id : 2 } ,
{ heading : 'Heading 3' , content : 'Content 3' , id : 3 } ,
] ;
< Disclosure
items = { items }
render = { ( { heading , content , id } , index ) => (
< DisclosureItem
heading = { heading }
content = { content }
section = { index % 2 === 0 }
expanded = { index % 2 === 1 }
key = { id }
/>
) }
/> الكشف
الدعائم العنصر HTML UL والمعاملات المخصصة
| بارام | وصف |
|---|---|
items | صفيف مع عناصر الكشف |
render | تقديم الدعائم للكشف |
الكشف
الدعائم العنصر HTML LI والمعلمات المخصصة
| بارام | وصف |
|---|---|
heading | عنوان النص |
content | قيمة نص المحتوى |
section | تسمية النمط مثل العنوان |
expanded | أضف هذا الخيار لتوسيع عنصر عند التحميل |
labelProps | الدعائم لعنصر التسمية |
contentProps | الدعائم لعنصر المحتوى |
لاستخدام الرمز ، استخدم المكون التالي. قم بتطبيق اسم الرمز المناسب لتحديد العنصر الذي ترغب في استخدامه ، يمكنك أيضًا إضافة خيار لتغيير اللون ، أو حتى تدور الرمز. يمكنك أيضًا تحديد أي اسم أيقونة لاستخدام حرف نصي كرمز (على سبيل المثال ، كما هو موجود في مدخلات Icon Width + الارتفاع في Figma)
import { Icon } from 'react-figma-ui' ;
// Icon
< Icon iconName = "theme" />
// Icon with blue colorName to change color
< Icon iconName = "theme" colorName = "blue" / >
// Spinner Icon with spinning animation
< Icon iconName = "spinner" spin />
// Text Icon
< Icon > W < / Icon>الدعائم العنصر HTML DIV والمعلمات المخصصة
| بارام | وصف |
|---|---|
iconName | حدد أي رمز لاستخدامه (على سبيل المثال: alert ، draft ، settings ) |
spin | يتسبب في أن يدور الرمز في حلقة لا نهاية لها (على سبيل المثال: محمل يستخدم مع أيقونة spinner ) |
colorName * | تمرير اسم أي لون Figma var لهذا الدعامة (على سبيل المثال: blue ، black3 ) |
*ألوان مقبولة: blue ، purple ، purple4 ، hot-pink ، green ، red ، yellow ، black ، black8 ، black3 ، white white8 ، white4
معاينة الرموز المتاحة هنا
زر الرمز هو في الأساس غلاف لمكون الأيقونة.
import { IconButton } from 'react-figma-ui' ;
// Icon button with a blend icon
< IconButton iconProps = { { iconName : 'blend' } } />
// Icon button with selected option
< IconButton iconProps = { { iconName : 'blend' } } selected / > الدعائم العنصر HTML DIV والمعلمات المخصصة
| بارام | وصف |
|---|---|
selected | أضف هذا الخيار ليكون نمطًا محددًا للزر |
iconProps | الدعائم لمكون الأيقونة |
لاستخدام الإدخال ، استخدم المكون التالي.
import { Input } from 'react-figma-ui' ;
// Input with placeholder
< Input placeholder = "Placeholder" />
// Input with initial value
< Input value = "Initial value" / >
// Disabled input
< Input value = "Initial value" disabled />
// Input with icon
< Input value = "Value" iconProps = { { iconName : 'angle' } } / > الدعائم عنصر إدخال HTML والمعاملات المخصصة
| بارام | وصف |
|---|---|
containerProps | الدعائم لحاوية التبديل |
iconProps | الدعائم لمكون الأيقونة |
لاستخدام تسمية أو قسم ، استخدم المكونات التالية.
import { Label , SectionTitle } from 'react-figma-ui' ;
// Label
< Label > Label </ Label >
// Section title
< SectionTitle > Section title < / SectionTitle>الدعائم العنصر HTML DIV
لإنشاء نصيحة على متن الطائرة ، استخدم المكون التالي.
import { OnboardingTip } from 'react-figma-ui' ;
< OnboardingTip iconProps = { { iconName : 'styles' } } >
Onboarding tip goes here.
</ OnboardingTip > الدعائم العنصر HTML DIV والمعلمات المخصصة
| بارام | وصف |
|---|---|
containerProps | الدعائم لحاوية التبديل |
iconProps | الدعائم لمكون الأيقونة |
لإنشاء زر راديو ، استخدم المكون التالي. تذكر أن كل مجموعة من أزرار الراديو يجب أن تشارك نفس الاسم بحيث تكون مرتبطة ببعضها البعض. يجب أن يحتوي كل زر على معرف فريد بحيث يرتبط الملصق به ويظل جزءًا من منطقة ضرب النقر.
import { Radio } from 'react-figma-ui' ;
// Radio button
< Radio value = "Value" id = "radioButton1" name = "radioGroup" > Radio button </ Radio >
// Radio button checked
< Radio value = "Value" id = "radioButton2" name = "radioGroup" checked > Radio button < / Radio>
// Radio button disabled
< Radio value = "Value" id = "radioButton3" name = "radioGroup" disabled > Radio button </ Radio > الدعائم عنصر إدخال HTML والمعاملات المخصصة
| بارام | وصف |
|---|---|
containerProps | الدعائم لحاوية الراديو |
labelProps | الدعائم لعنصر التسمية |
لإنشاء قائمة تحديد ، استخدم المكونات التالية.
سيتم فتح القائمة المحددة وتضع القائمة على الكائن المحدد. إذا لم تكن هناك غرفة رأسية داخل iframe المكوّن الإضافي الخاص بك ، فسيتم نقل موضع القائمة لضمان ملاءمة داخل IFRAME. إذا كان لديك قائمة تحديد مع العديد من الخيارات التي تتناسب مع IFRAME ، فسيتم تمرير القائمة رأسياً.
import { SelectMenu , SelectMenuOption } from 'react-figma-ui' ;
// Example options
const options = [
{ value : 1 , label : 'Option 1' } ,
{ value : 2 , label : 'Option 2' } ,
{ value : 3 , label : 'Option 3' } ,
] ;
( ) => (
< SelectMenu
options = { options }
render = { ( { value , label } ) => (
< SelectMenuOption value = { value } key = { value } >
{ label }
</ SelectMenuOption >
) }
/>
) ; SelectMenu
HTML Select Element Props و Pradical Params
| بارام | وصف |
|---|---|
options | صفيف مع اختيار خيارات القائمة |
render | تقديم الدعائم للاختيار |
SelectMenuoption
الدعائم العناصر خيار HTML
لاستخدام المفتاح ، استخدم المكون التالي. تذكر أن كل مفتاح يجب أن يحصل على معرف فريد مشار إليه في الملصق. هذا يضمن أن التبديل والتسمية بأكملها قابلة للنقر.
import { Switch } from 'react-figma-ui' ;
// Switch
< Switch id = "uniqueId" > Label </ Switch >
// Switch checked
< Switch id = "uniqueId" checked > Label < / Switch>
// Switch disabled
< Switch id = "uniqueId" disabled > Label </ Switch > الدعائم عنصر إدخال HTML والمعاملات المخصصة
| بارام | وصف |
|---|---|
containerProps | الدعائم لحاوية التبديل |
labelProps | الدعائم لعنصر التسمية |
لاستخدام textarea ، استخدم المكون التالي.
import { Textarea } from 'react-figma-ui' ;
// Textarea
< Textarea value = "Initial value" rows = { 2 } />
// Textarea disabled
< Textarea value = "Initial value" rows = { 2 } disabled / > الدعائم العنصر HTML Textarea
لاستخدام الطباعة التي تم تصميمها كما هو الحال في واجهة مستخدم Figma ، استخدم المكون التالي بالإضافة إلى خيارات إضافية لتعديل الحجم والوزن وتبديل الحروف المحسّنة للاتصالات الإيجابية (النص المظلم على خلفية الضوء) وتطبيقات سلبية (نص الضوء على الخلفية المظلمة).
import { Type } from 'react-figma-ui' ;
< Type > UI11, size: xsmall (default) weight: normal, positive </ Type >
< Type > UI13 , size : large , weight : bold , positive < / Type>
< Type size = "large" weight = "medium" inverse > UI12, size: large, weight: medium, negative </ Type > الدعائم العنصر HTML DIV والمعلمات المخصصة
| بارام | وصف |
|---|---|
size | حجم الخط: صغير - 12 بكسل ، كبير - 13 بكسل ، xlarge - 14px |
weight | وزن الخط: متوسط ، جريء |
inverse | تطبيق مقلوب (سلبي) حيث يكون نص الضوء على خلفية مظلمة مع زيادة الحروف |
الافتراضيات: حجم الخط 11 بكسل ، الوزن الطبيعي ، التطبيق الإيجابي
تم ترخيص هذا المشروع بموجب ترخيص معهد ماساتشوستس للتكنولوجيا © 2020-جاكوب بيسيدا
