57wng 中文文档教程

发布于 3年前 浏览 40 项目主页 更新于 3年前

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

自述文件 文本编辑器

  1. Getting Started
  2. Data Inputs
    1. Button
    2. Input
    3. Textarea
    4. Radio
    5. Slider
    6. Dropdown
  3. Info Display
    1. Card
    2. Modal
    3. Avatar
    4. Loading
  4. TODO

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

PROPS
value - 用户输入的输入内的文本(这是基于状态)
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;

top

Radio

PROPS
options - 采用整数或字符串数​​组并将这些值显示为选项
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;

top

PROPS
label - 用户输入的下拉菜单的标题。
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

top

Card

PROPS
color - 传递字符串“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;

top

PROPS
value - 打开模式
的按钮内的文本 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 - 指向图像文件的 url
customClass - 添加一个类到头像组件容器

Sizesize
"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

PROPS
customClass - 将自定义类添加到加载容器。

加载组件不带任何定制道具。 外部旋转圈是 $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 列中的姓名。

tagsin progressbyexample
Badgehere
Chiphere
Ahere

如果当前正在进行中,请在 in progress 列中放置工作分支的链接,并在 by 列中放置您的姓名。

componentsin progressbyexample
AlertPerri L.here
Accordionhere
Navhere

LOW PRIORITY

DO NOT DELETE FROM LIST UNTIL DOCUMENTATION AND TESTING IS COMPLETE

如果当前正在进行中,请在 in progress 列中放置工作分支的链接,并在 by 列中放置您的姓名。

tagsin progressbyexample
Tooltiphere
Notificationhere
Paperhere

如果当前正在进行中,请在 in progress 列中放置工作分支的链接,并在 by 列中放置您的姓名。

componentsin progressbyexample
Tablehere
Togglehere
GhostLoaderhere
Graphhere

顶部

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

  1. Getting Started
  2. Data Inputs
    1. Button
    2. Input
    3. Textarea
    4. Radio
    5. Slider
    6. Dropdown
  3. Info Display
    1. Card
    2. Modal
    3. Avatar
    4. Loading
  4. TODO

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

top

Button

PROPS
value - The text inside the button
color - 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

PROPS
value - 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 input
required - 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

PROPS
value - 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 textarea
rows - General height of the textarea
required - 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;

top

Radio

PROPS
options - takes an array of Integers or Strings and displays these values as options
name - sets a title for the radio group to tie the different radio options to a group
inline - Boolean value to force radio to inline. (Defaults to a column view)
onChange - Accepts a state function
state - REQUIRED** changes the state from the onChange prop
customClass - 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

PROPS
value - 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 slider
min - Minimum value for slider
max - Maximum value for slider
step - Sets the increment of values in a given slider
size - height of the slider
defaultValue - Sets the default number for a slider
required - 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;

top

PROPS
label - 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

top

Card

PROPS
color - 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;

top

PROPS
value - The text inside the button that opens the modal
customClass - 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

PROPS
size - changes the size of the avatar image
image - url pointing to an image file
customClass - adds a class to the avatar component container

Sizesize
"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

PROPS
customClass - 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.

tagsin progressbyexample
Badgehere
Chiphere
Ahere

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.

componentsin progressbyexample
AlertPerri L.here
Accordionhere
Navhere

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.

tagsin progressbyexample
Tooltiphere
Notificationhere
Paperhere

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.

componentsin progressbyexample
Tablehere
Togglehere
GhostLoaderhere
Graphhere

top

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文