@megalabs/react-bayan

<!-- STORY -->

Stats

StarsIssuesVersionUpdatedCreatedSize
@megalabs/react-bayan
0.4.262 years ago3 years agoMinified + gzip package size for @megalabs/react-bayan in KB

Readme

Компонент 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;

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.