首頁>編程相關>三方組件
下載

React Figma UI

關於

湯姆·勞瑞（Tom Lowry）為無花果-plugin-ds實施

演示

操場 - 與故事書中的圖書館一起玩

替代方案

  • Alexandr tovmach的反應形式-plugin-ds
  • 賈里德（Jared）的無花果樣式組件
  • 小小的編寫無花果-UI組成部分
  • Liam Martens的Figma React UI套件

內容

  • 如何安裝
  • 成分
    • 按鈕
    • 複選框
    • 披露
    • 圖示
    • 圖標按鈕
    • 輸入
    • 標籤和部分
    • 入職尖端
    • 廣播按鈕
    • 選擇菜單
    • 轉變
    • Textarea
    • 類型

如何安裝

首先，由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添加紅色破壞性變體，以刪除某些內容

複選框

要使用複選框，請使用以下組件。請記住，每個複選框應獲得唯一的ID。 

 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內容元素的道具

圖示

要使用圖標，請使用以下組件。應用適當的圖標名稱以選擇要使用的項目，還可以添加選項以更改顏色，甚至可以旋轉圖標。您還可以指定不使用文本字符作為圖標的圖標名稱（例如，如《無花果》中的寬度 +高度圖標輸入中的圖標） 

 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 ，黑色3， 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圖標組件的道具

廣播按鈕

要創建一個廣播按鈕，請使用以下組件。請記住，每組廣播按鈕必須共享相同的名稱，以便它們相互關聯。每個按鈕都應具有唯一的ID，以便其標籤與之關聯，並且仍然是可點擊命中區域的一部分。 

 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內部沒有垂直房間，則將移動菜單的位置以確保其適合IFRAGE內。如果您有一個選擇菜單，其中包含太多選項以無法安裝在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選擇元素道具和專用參數

參數描述
options帶有選擇菜單選項的數組
render渲染selectmenuoption的道具

SelectMenuOption

HTML選項元素道具

轉變

要使用開關，請使用以下組件。請記住，每個開關應獲得標籤中引用的唯一ID。這樣可以確保開關和整個標籤可單擊。 

 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

要使用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 UI中的樣式的版式，請使用以下組件加上其他選項來修改針對正面（光背景上的深色文本）和陰性（深色背景上的淺文本）應用的尺寸，重量和字母隔板。 

 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字體尺寸：小-12px，大-13px， Xlarge -14px
weight字體重量：中等，大膽
inverse倒（負）應用，其中光文本在黑暗的背景上，並增加了字母的路。

默認值：字體尺寸11px，正常重量，正應用正常

執照

該項目已獲得MIT許可證©2020-Present Jakub Biesiada的許可

展開
附加信息
相關應用
爲您推薦
相關資訊 全部