Ian Design

一套高仿原生 IOS 组件 React UI 组件库。 持续更新中……

支持移动端和web端

版本

v0.0.1

持续更新中…

快速开始

$ npm install iand --save

或者

$ yarn add iand

示例

import { Button } from 'iand';
ReactDOM.render(<Button />, document.getElementById('App'));

组件

Button/按钮

API

type: 设置button的样式，可选值有 block border link bad small style: 如果默认样式不满足需求，可以通过 style 设置自定义样式 value: 设置 button 中的文案

function MyComponent(){
    return(
        <Button type="block" value="确定" style={{width: '200px'}}/>
    )
}

Input/输入框

API

placeholder: 设置 input 内默认文案 style: 可以自定义 width height 属性 value: 属性为一个回调函数接收 input 中的 value

function MyComponent(){
    const [value,setValue] = useState('')
    const getValue = (value) => {
        useState(value)
    }
    return(
        <Input placeholder="Search" value={getValue} />
    )
}

Action/功能

API

content: content 接收一个对象属性有 describe buttonValue actions ; describe 设置 action 的简短介绍，buttonValue 设置底部按钮的文案，actions 接收一个 action 集合的数组 style: 可以修改底部按钮的颜色 onClick: 接收 onClick 回调函数，获取当前点击元素

function MyComponent(){
    const [name,setName] = useState('')
    const currentTarget = (name) => {
        setName(name)
    }
    return(
        <Action content={
            {
            describe: 'action介绍',
            buttonValue: '取消',
            actions: ['action1','action2','action3']
            }
        }
            style={{color:'blue'}}
            onClick={currentTarget}
        />
    )
}

Alert/弹窗

API

type: 设置弹窗的样式属性有 one-button two-button three-button content: content 接收一个对象属性有 title context, title 设置弹窗标题，context 设置提示内容 buttonName: buttonName 可设置 button 内的文案，它接收一个对象属性有 button1 button2 button2 style: 可设置按钮的 color 属性和 弹窗的 width 属性

function MyComponent(){
    return(
        <Alert type="one-button" 
                content={{title:'标题',context:'提示内容'}}
                buttonName={{button1:'确定'}}
                style={{color:'blue',width:'270px'}}
         />
    )
}

Tab/标签页

API

type: 设置tab的样式，属性有 new old items: 接收一个tab分页集合的数组 style: 可以修改tab的字体大小

function MyComponent(){
    return(
        <Tab type="new" 
              items={['tab1','tab2']}
              style={{fontSize: '13px'}}
        >
            <section>
                <main name="tab1">我是tab1</main>
                <main name="tab2">我是tab2</main>
            </section>
        </Tab>
    )
}

Switch/开关

API

type: 设置Switch的样式，属性有 icon style: 可以设置Switch选中状态下的颜色 onClick: 接收一个 onClick 回调函数，获取Switch当前的状态 defaultChecked: 接收一个Boolean值，可以设置Switch默认是否被选中

function MyComponent(){
    const [switchState, setSwitchState] = useState('')
    const getState = (state) => {
        setSwitchState(state)
    }
    return (
        <Switch type="icon" 
                style={{ backgroundColor: 'red' }} 
                onClick={getState} 
                defaultChecked={false}
        />
    )
}