@megalabs/react-bayan

Компонент Bayan

Установка

npm i @megalabs/react-bayan

Описание

Компонент состоит из 2 элементов, это оболочка и дочерний элемент Элементов Item может быть бесконечное количество

Параметры <item>

propName	propType	defaultValue	isRequired	Description
title	String			Заголовок .
icon	String			Иконка слева от заголовка

Пример использования

import React, { Component } from 'react';
import {Bayan, Item} from '@megalabs/react-bayan';
const data={"items": [
      {
        "icon": "/icons/O-platezh_24.svg",
        "title": "Lorem ipsum dolor",
        "content": "<h3>Lorem ipsum dolor</h3><br/><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia sed neque magnam. Recusandae velit praesentium distinctio quod ad quidem delectus modi corporis itaque, nemo quos quae neque dolore hic quis.</p>",
        "image": "/images/vks/1tab.jpg"
      },
      {
        "icon": "/icons/Question_24.svg",
        "title": "Lorem ipsum dolor",
        "content": "<h3>Lorem ipsum dolor</h3><br/><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia sed neque magnam. Recusandae velit praesentium distinctio quod ad quidem delectus modi corporis itaque, nemo quos quae neque dolore hic quis.</p>",
        "image": "/images/vks/2tab.jpg"
      },
      {
        "icon": "/icons/Promo_24.svg",
        "title": "Lorem ipsum dolor",
        "content": "<h3>Lorem ipsum dolor</h3><br/><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia sed neque magnam. Recusandae velit praesentium distinctio quod ad quidem delectus modi corporis itaque, nemo quos quae neque dolore hic quis.</p>",
        "image": "/images/vks/3tab.jpg"
      },
      {
        "icon": "/icons/Map_24.svg",
        "title": "Lorem ipsum dolor",
        "content": "<h3>Lorem ipsum dolor</h3><br/><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia sed neque magnam. Recusandae velit praesentium distinctio quod ad quidem delectus modi corporis itaque, nemo quos quae neque dolore hic quis.</p>",
        "image": "/images/vks/4tab.jpg"
      }
    ]}
class App extends Component {
  render() {
    return (
      <div className="App">
				<Bayan>
					{data.items.map((item,index)=>{
					return <Item key={index}
								title={item.title}
								icon={item.icon}
								image={item.image}>
								<div className={`${s.tab} ${index%2!==0?s.tab_imgleft:''}`} style={{backgroundImage:`url(${item.image})`}}>
										<div className={s.text} dangerouslySetInnerHTML={{__html: item.content}}/>
								</div>
						</Item>	})}
				</Bayan>
      </div>
    );
  }
}

export default App;