react figma ui下载 - react figma ui源代码下载

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，正常重量，正应用正常

执照

展开