57wng 中文文档教程
57 Wing Component Library
QUICK NOTE
DO NOT WORK ON MASTER
BRANCH
请更新自述文件底部的进度表。
Branch Naming
功能/错误/Hotfix_NameOfComponent_BranchedFrom_ByDeveloper
Feature/Radio_Main_FirstNameLastName
Table Of Contents
自述文件 文本编辑器
GETTING STARTED
安装 - npm i 57wng
Import - import {Componenent} from '57wng/dist';
Change Standard SCSS Variables
这将进入您的 variables.scss
文件。
$primary: #00308f;
$secondary: #d1af3a;
$success: #4acc4b;
$warn: #f3d60e;
$danger: #c50400;
$white: #efefef;
$black: #111111;
$grey-light: #ccc;
$grey: #888;
$grey-dark: #444;
@import '../node_modules/57wng/src/Style/import.scss';
@import '../node_modules/57wng/src/Style/variable.scss';
@import '../node_modules/57wng/src/Style/main.scss';
DATA INPUTS
Button
道具value
- 按钮内的文本color
- 按钮的颜色(“primary”、“secondary”、“success”、“warn”、“danger”)onClick
- 单击按钮时调用的函数。customClass
- 将自定义类添加到按钮的容器
import React from 'react';
import { Button } from '57wng/dist';
const Component = () => {
const buttonTest = () => {
console.log("Button is working");
};
return (
<div>
<Button
value="Button Text"
color="primary"
onClick={() => buttonTest()}
customClass="custom-button-class"
/>
</div>
)
}
export default Component;
Input
PROPSvalue
- 用户输入的输入内的文本(这是基于状态)type
- 您需要的输入字段类型 ex:("text", "email", "number", "password")onChange
- 改变值状态的函数。name
- 如果您想使用 formData 进行状态更改,则采用一个字符串。placeholder
- 输入的占位符/标签required
- 这是必填字段吗? 采用布尔值。customClass
- 将自定义类添加到 Modal
import React, { useState } from 'react;
import { Input } from '57wng/dist';
const Component = () => {
const [text, setText] = useState('');
return (
<div>
<Input
value={text}
type="text"
placeholder="Text Placeholder"
required={true}
onChange={(event) => setText(event)}
customClass="custom-input-class"
/>
</div>
)
}
export default Component;
Textarea
PROPS
的容器中 value
- 用户输入的输入内的文本(这是基于状态)onChange
- 改变值状态的函数。placeholder
- 文本区域的占位符/标签rows
- 文本区域的一般高度required
- 这是必填字段吗? 采用布尔值。customClass
- 将自定义类添加到模态框
import React, { useState } from 'react;
import { Textarea } from '57wng/dist';
const Component = () => {
const [text, setText] = useState('');
return (
<div>
<Textarea
value={text}
type="text"
rows={5}
placeholder="Text Placeholder"
required={true}
onChange={(event) => setText(event)}
customClass="custom-textarea-class"
/>
</div>
)
}
export default Component;
Radio
PROPSoptions
- 采用整数或字符串数组并将这些值显示为选项name
- 为单选组设置标题以将不同的单选选项绑定到一个组inline
- 强制无线电内联的布尔值。 (默认为列视图)onChange
- 接受一个状态函数state
- 需要**从 onChange 属性更改状态customClass
- 将自定义类添加到 Radio
import React, { useState } from 'react';
import { Radio } from '57wng/dist';
const Component = () => {
const [state, setState] = useState('');
return (
<div>
<Radio
customClass="custom-radio-class"
options={['Option 1', 'Option 2']}
name={'TEST'}
inline={true}
onChange={(event) => setState(event)}
state={state}
/>
</div>
)
}
export default Component;
Input
PROPS
的容器中 value
- 用户输入的输入内的文本(这是基于状态)onChange
- 改变值状态的函数。label
- 滑块的标签min
- 滑块的最小值max
- 滑块的最大值step
- 设置给定滑块中值的增量size
- 滑块的高度defaultValue
- 设置滑块的默认值required
- 这是必填字段吗? 采用布尔值。customClass
- 将自定义类添加到模态框
import React, { useState } from 'react;
import { Slider } from '57wng/dist';
const Component = () => {
const [text, setValue] = useState('');
return (
<div>
<Slider
value={text}
defaultValue={30}
label="Slider Label"
required={true}
size={"md"}
step={10}
min={0}
max={100}
onChange={(event) => setValue(event)}
customClass="custom-slider-class"
/>
</div>
)
}
export default Component;
Dropdown
PROPSlabel
- 用户输入的下拉菜单的标题。value
- 这是父组件的状态。setState
- 更改值状态的函数。options
- 下拉菜单下可用选项的数组。customClass
- 将自定义类添加到下拉列表的容器
import React, { useState } from 'react;
import { Dropdown } from '57wng/dist';
const Component = () => {
const [state, setState] = useState('');
return (
<div>
<Dropdown
label={'text'}
value={state}
setState={(event) => setState(event)}
options={[]}
customClass="custom-dropdown-class"
/>
</div>
)
}
export default Component;
INFO DISPLAY
Card
PROPScolor
- 传递字符串“dark”将使其具有深色背景和浅色文本。elevation
- 输入一个 1 - 5 的数字。数字越高,悬停的效果就越明显。hover
- 布尔值。 如果这是真的,那么当您将鼠标悬停在它上面时,该卡片会看起来升高了。customClass
- 将自定义类添加到卡片的容器
import React from 'react;
import { Card } from '57wng/dist';
const Component = () => {
return (
<div>
<Card
color="dark"
elevation={3}
hover={true}
customClass="custom-dropdown-class"
/>
</div>
)
}
export default Component;
Modal
PROPSvalue
- 打开模式
的按钮内的文本 customClass
- 将自定义类添加到 Modal
import React from 'react';
import { Modal } from '57wng/dist';
const Component = () => {
return (
<div>
<Modal value="Open Modal" customClass="custom-modal-class">
<h1>Modal Title</h1>
<p>Some Content for the Modal</p>
</Modal
</div>
)
}
export default Component;
Avatar
PROPS
的容器中 size
- 改变头像图片的大小image
- 指向图像文件的 urlcustomClass
- 添加一个类到头像组件容器
Size | size |
---|---|
"lg" | 200px |
"md" | 100px |
"sm" | 50px |
import React from 'react';
import { Avatar } from '57wng/dist';
const Component = () => {
return (
<div>
<Avatar size="md" image="image.jpg" customClass="custom-avatar-class"/>
</div>
)
}
export default Component;
Loading
PROPScustomClass
- 将自定义类添加到加载容器。
加载组件不带任何定制道具。 外部旋转圈是 $secondary
颜色,内部旋转圈是 $primary
颜色。
要自定义圆圈颜色,请添加 customClass
属性,然后选择 .external-circle
和 .internal-circle
。 要更改颜色,请使用 stroke: $color;
import React from 'react';
import { Loading } from '57wng/dist';
const Component = () => {
return (
<div>
<Loading customClass="custom-loading-class"/>
</div>
)
}
export default Component;
TODO
WHEN EDITING THE TODO LIST PLEASE EDIT README DIRECTLY IN GITHUB.`
HIGH PRIORITY
DO NOT DELETE FROM LIST UNTIL DOCUMENTATION AND TESTING IS COMPLETE
如果当前正在进行中,请在 in progress
列中放置指向工作分支的链接,并且您在 by
列中的姓名。
tags | in progress | by | example |
---|---|---|---|
Badge | here | ||
Chip | here | ||
A | here |
如果当前正在进行中,请在 in progress
列中放置工作分支的链接,并在 by
列中放置您的姓名。
components | in progress | by | example |
---|---|---|---|
Alert | Perri L. | here | |
Accordion | here | ||
Nav | here |
LOW PRIORITY
DO NOT DELETE FROM LIST UNTIL DOCUMENTATION AND TESTING IS COMPLETE
如果当前正在进行中,请在 in progress
列中放置工作分支的链接,并在 by
列中放置您的姓名。
tags | in progress | by | example |
---|---|---|---|
Tooltip | here | ||
Notification | here | ||
Paper | here |
如果当前正在进行中,请在 in progress
列中放置工作分支的链接,并在 by
列中放置您的姓名。
components | in progress | by | example |
---|---|---|---|
Table | here | ||
Toggle | here | ||
GhostLoader | here | ||
Graph | here |
57 Wing Component Library
QUICK NOTE
DO NOT WORK ON MASTER
BRANCH
Please update the in progress chart at the bottom of ReadMe.
Branch Naming
Feature/Bug/Hotfix_NameOfComponent_BranchedFrom_ByDeveloper
Feature/Radio_Main_FirstNameLastName
Table Of Contents
README text editor
GETTING STARTED
Install - npm i 57wng
Import - import {Componenent} from '57wng/dist';
Change Standard SCSS Variables
This will go in your variables.scss
file.
$primary: #00308f;
$secondary: #d1af3a;
$success: #4acc4b;
$warn: #f3d60e;
$danger: #c50400;
$white: #efefef;
$black: #111111;
$grey-light: #ccc;
$grey: #888;
$grey-dark: #444;
@import '../node_modules/57wng/src/Style/import.scss';
@import '../node_modules/57wng/src/Style/variable.scss';
@import '../node_modules/57wng/src/Style/main.scss';
DATA INPUTS
Button
PROPSvalue
- The text inside the buttoncolor
- color of the button ("primary", "secondary", "success", "warn", "danger")onClick
- Function to be called when the button is clicked.customClass
- adds a custom class to the container of the Button
import React from 'react';
import { Button } from '57wng/dist';
const Component = () => {
const buttonTest = () => {
console.log("Button is working");
};
return (
<div>
<Button
value="Button Text"
color="primary"
onClick={() => buttonTest()}
customClass="custom-button-class"
/>
</div>
)
}
export default Component;
Input
PROPSvalue
- The text inside the input that the user enters (this is based on state)type
- The type of input field you need ex:("text", "email", "number", "password")onChange
- Function to change the state of the value.name
- Takes a string if you are wanting to use formData for state change.placeholder
- Placeholder/ Label for the inputrequired
- Is this a required field or not? Takes a boolean value.customClass
- adds a custom class to the container of the Modal
import React, { useState } from 'react;
import { Input } from '57wng/dist';
const Component = () => {
const [text, setText] = useState('');
return (
<div>
<Input
value={text}
type="text"
placeholder="Text Placeholder"
required={true}
onChange={(event) => setText(event)}
customClass="custom-input-class"
/>
</div>
)
}
export default Component;
Textarea
PROPSvalue
- The text inside the input that the user enters (this is based on state)onChange
- Function to change the state of the value.placeholder
- Placeholder/ Label for the textarearows
- General height of the textarearequired
- Is this a required field or not? Takes a boolean value.customClass
- adds a custom class to the container of the Modal
import React, { useState } from 'react;
import { Textarea } from '57wng/dist';
const Component = () => {
const [text, setText] = useState('');
return (
<div>
<Textarea
value={text}
type="text"
rows={5}
placeholder="Text Placeholder"
required={true}
onChange={(event) => setText(event)}
customClass="custom-textarea-class"
/>
</div>
)
}
export default Component;
Radio
PROPSoptions
- takes an array of Integers or Strings and displays these values as optionsname
- sets a title for the radio group to tie the different radio options to a groupinline
- Boolean value to force radio to inline. (Defaults to a column view)onChange
- Accepts a state functionstate
- REQUIRED** changes the state from the onChange propcustomClass
- adds a custom class to the container of the Radio
import React, { useState } from 'react';
import { Radio } from '57wng/dist';
const Component = () => {
const [state, setState] = useState('');
return (
<div>
<Radio
customClass="custom-radio-class"
options={['Option 1', 'Option 2']}
name={'TEST'}
inline={true}
onChange={(event) => setState(event)}
state={state}
/>
</div>
)
}
export default Component;
Input
PROPSvalue
- The text inside the input that the user enters (this is based on state)onChange
- Function to change the state of the value.label
- Label for the slidermin
- Minimum value for slidermax
- Maximum value for sliderstep
- Sets the increment of values in a given slidersize
- height of the sliderdefaultValue
- Sets the default number for a sliderrequired
- Is this a required field or not? Takes a boolean value.customClass
- adds a custom class to the container of the Modal
import React, { useState } from 'react;
import { Slider } from '57wng/dist';
const Component = () => {
const [text, setValue] = useState('');
return (
<div>
<Slider
value={text}
defaultValue={30}
label="Slider Label"
required={true}
size={"md"}
step={10}
min={0}
max={100}
onChange={(event) => setValue(event)}
customClass="custom-slider-class"
/>
</div>
)
}
export default Component;
Dropdown
PROPSlabel
- The title of the dropdown that the user enters.value
- This is the parent component's state.setState
- Function to change the state of the value.options
- Array of available options under the dropdown menu.customClass
- adds a custom class to the container of the Dropdown
import React, { useState } from 'react;
import { Dropdown } from '57wng/dist';
const Component = () => {
const [state, setState] = useState('');
return (
<div>
<Dropdown
label={'text'}
value={state}
setState={(event) => setState(event)}
options={[]}
customClass="custom-dropdown-class"
/>
</div>
)
}
export default Component;
INFO DISPLAY
Card
PROPScolor
- passing the string "dark" will make it have a dark background with light text.elevation
- Enter a number 1 - 5. The higher the number the more it appears to hover.hover
- Boolean. If this is true then the card will appear to elevate when you hover over it.customClass
- adds a custom class to the container of the Card
import React from 'react;
import { Card } from '57wng/dist';
const Component = () => {
return (
<div>
<Card
color="dark"
elevation={3}
hover={true}
customClass="custom-dropdown-class"
/>
</div>
)
}
export default Component;
Modal
PROPSvalue
- The text inside the button that opens the modalcustomClass
- adds a custom class to the container of the Modal
import React from 'react';
import { Modal } from '57wng/dist';
const Component = () => {
return (
<div>
<Modal value="Open Modal" customClass="custom-modal-class">
<h1>Modal Title</h1>
<p>Some Content for the Modal</p>
</Modal
</div>
)
}
export default Component;
Avatar
PROPSsize
- changes the size of the avatar imageimage
- url pointing to an image filecustomClass
- adds a class to the avatar component container
Size | size |
---|---|
"lg" | 200px |
"md" | 100px |
"sm" | 50px |
import React from 'react';
import { Avatar } from '57wng/dist';
const Component = () => {
return (
<div>
<Avatar size="md" image="image.jpg" customClass="custom-avatar-class"/>
</div>
)
}
export default Component;
Loading
PROPScustomClass
- adds a custom class to loading container.
The loading component does not take any customization props. The external spinning circle is the $secondary
color and the inner spinning circle is the $primary
color.
To customize the circles color add a customClass
prop and then select .external-circle
and .internal-circle
. to change the color use stroke: $color;
import React from 'react';
import { Loading } from '57wng/dist';
const Component = () => {
return (
<div>
<Loading customClass="custom-loading-class"/>
</div>
)
}
export default Component;
TODO
WHEN EDITING THE TODO LIST PLEASE EDIT README DIRECTLY IN GITHUB.`
HIGH PRIORITY
DO NOT DELETE FROM LIST UNTIL DOCUMENTATION AND TESTING IS COMPLETE
if it is currently in progress please put a link to the working branch in the in progress
column and your name in the by
column.
tags | in progress | by | example |
---|---|---|---|
Badge | here | ||
Chip | here | ||
A | here |
if it is currently in progress please put a link to the working branch in the in progress
column and your name in the by
column.
components | in progress | by | example |
---|---|---|---|
Alert | Perri L. | here | |
Accordion | here | ||
Nav | here |
LOW PRIORITY
DO NOT DELETE FROM LIST UNTIL DOCUMENTATION AND TESTING IS COMPLETE
if it is currently in progress please put a link to the working branch in the in progress
column and your name in the by
column.
tags | in progress | by | example |
---|---|---|---|
Tooltip | here | ||
Notification | here | ||
Paper | here |
if it is currently in progress please put a link to the working branch in the in progress
column and your name in the by
column.
components | in progress | by | example |
---|---|---|---|
Table | here | ||
Toggle | here | ||
GhostLoader | here | ||
Graph | here |