0.4.26 • Published 5 years ago
@megalabs/react-benefits v0.4.26
Компонент Benefit
Установка
npm i @megalabs/react-benefit
Параметры <Benefit>
propName | propType | defaultValue | isRequired | Description |
---|---|---|---|---|
title | String | Заголовок | ||
icon | String | Иконка слева от заголовка | ||
text | String | Текст под заголовком |
Пример использования
import React, { Component } from 'react';
import {Benefits} from '@megalabs/react-benefits';
const data={ "items": [
{
"imgLink": "/icons/Family_24.svg",
"title": "",
"text": "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."
},
{
"imgLink": "/icons/Edit_24.svg",
"title": "",
"text": "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."
},
{
"imgLink": "/icons/Video_24.svg",
"title": "",
"text": "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."
},
{
"imgLink": "/icons/Social_24.svg",
"title": "",
"text": "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."
},
{
"imgLink": "/icons/Call_slider_24.svg",
"title": "",
"text": "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."
},
{
"imgLink": "/icons/MegaFon-TV_24.svg",
"title": "",
"text": "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."
}
]}
class App extends Component {
render() {
return (
<div className="App">
<Benefits benefits={data.items}/>
</div>
);
}
}
export default App;
Использование отдельного элемента
import React, { Component } from 'react';
import {Benefit} from '@megalabs/react-benefits';
class App extends Component {
render() {
return (
<div className="App">
<Benefit icon={`ссылка на svg иконку`} title="Заголовок" text="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."/>
</div>
);
}
}
export default App;
0.4.26
5 years ago
0.4.25
5 years ago
0.4.24
5 years ago
0.4.20
5 years ago
0.4.18
5 years ago
0.4.17
5 years ago
0.4.16
5 years ago
0.4.15
6 years ago
0.4.12
6 years ago
0.4.5
6 years ago
0.4.4
6 years ago
0.4.3
6 years ago
0.4.2
6 years ago
0.4.1
6 years ago
0.4.0
6 years ago
0.3.21
6 years ago
0.3.20
6 years ago
0.3.13
6 years ago
0.3.12
6 years ago
0.3.11
6 years ago
0.3.4
6 years ago
0.3.3
6 years ago
0.3.2
6 years ago
0.2.26
6 years ago
0.2.25
6 years ago
0.2.24
6 years ago
0.2.22
6 years ago