انت دیزاین

انت دیزاینانت دیزاین یک لایبری uicomponent است که اکثر react دولوپرها وبعضی از vue دولوپرها ازش استفاده می کنند من بعضی از تگ های که در react به موارد استفاده می شود را توضیح می دهم.تو این مقاله قرار است در انت دیزاین در مورد تگ های divider،row،Col،dropdown،pagination،cascader،Select،Switch،timepicker ،treeselect،treenode،upload،badge،Collapse ،popover،tabs،Drawer،modal،Result، توضیح بدهم و این تگ ها چه خصوصیت هایی در پروژه های که از انت دیزاین استفاده می کنید دارد.Dividerبا این تگ میتوانیم با اتربیوتorientationهمه تگ ها را به چپ چین یا راست چین نشان دهد📷📷📷📷Row col typegraphyبا تگrow و اتربیوت gutter چه قدر در مطالبمون فاصله بگذاریممثالم در کلیپ بدون صدا در مورد row col typography نشان میدهم.اگه در کلیپ دیده باشیم رفتارهای Row ,col با خصوصیاتی که میدهیم کاملا فرق میکندDropdownاین مثال در کلیپ نشان میدهم که چطور می شود باهاش کار کرد وچه خصوصیاتی داردشرمنده کمی کلیپ طولانی کردم میخواستم همه حالت های dropdown تا حدی نشان دهم . توی dropdown یک خصوصیت trigger داریم که حالتش مشخص میکنیم که من رو حالت click گذاشتم و overlay داشتیم که قرا ر است چه چیزی وقتی کلیک کردم نشان دهد و placement این نشون میدهد وقتی کلیک کردی همه تگ هات در کجا نشان دهد که مثلا خصوصیات هایی مثل top left top right bottom center bottom right داره و من برای استایل دهی از tailwindcss استفاده می کنم.Modalاون سری چون فایل css در index.js نگذاشتم درست حسابی کار نکرد ولی الان همه چی خوب استimport { Modal, Button } from ‘antd’;import {PureComponent,Fragment} from “react”;export default class App extends PureComponent {state={visible:false,loading:false}showModal(){this.setState({visible:true})}handleOk(){this.setState({loading:true})}handleCancel(){this.setState({loading:false})}render(){return(<Fragment><Button ={this.showModal}><Modal width={100} height={100}visible={this.state.visible} onok={this.handleOk}={this.handleCancel}Footer={<Button loading={this.state.loading}>sumbit</Button>,<Button>Cancel</Button>}></Modal></Button></Fragment>)}}import React from ‘react’;

import ReactDOM from ‘react-dom’;

import App from ‘./App’;

import reportWebVitals from ‘./reportWebVitals’;

import &quot./assets/tailwind.css”

import &quot./assets/style.css”

import ‘antd/dist/antd.css’;

ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>,

document.getElementById(‘root’)

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();ببینیم همین کد در خروجی چه می شودجواب کد در یک کلیپ نشان دادم این modal چه در کلاس یا فانشن کامپونت وhook میتوانید استفاده کنیدDrawer📷📷مثل modal بود فقط برای closable گذاشتمSwitchimport {Switch}from &quotantd&quot

export default function App(){

return(

<>

<Switch style={{

backgroundColor:&quotgreen&quot

}}/>

</>

)

}اینم جواب در خروجی که در کلیپ کوتاه نشان دادمPaginationimport {Pagination}from &quotantd&quot

export default function App(){

return(

<>

<Pagination defaultCurrent={1} total={20}>

</Pagination>

</>

)

}defult carrent مثلا از یک شروع شود تاtotal که اخرین صفحه 20 است📷Cascadeimport {Cascader}from &quotantd&quot

const options=[

{

value:&quotشهر&quot,

label:&quotاستان&quot,

children:[

{

value:&quotمشهد&quot,

label:&quotخراسان&quot

}

]

},

]

export default function App(){

return(

<>

<Cascader options={options} placeholder=&quotشهر شما&quot>

</Cascader>

</>

)

}📷مثلا با drop down📷Select📷📷Timepicker📷Tree select treenode📷خروجی📷Upload📷خروجی📷📷خروجی کد📷collapse📷خروجی📷Popver📷خروجی📷📷خروجیدر کلیپResult📷خروجی📷

Author: admin

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *