SHARE
TWEET

Untitled

a guest Jul 16th, 2019 64 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import '@vkontakte/vkui/dist/vkui.css';
  2. import React from 'react';
  3.  
  4. import {Root,Epic, Tabbar,Panel,PanelHeader,TabbarItem,View,Icon28More, Icon28Notifications,Icon28Messages,Icon28Search,Icon28Newsfeed} from '@vkontakte/vkui';
  5.  
  6. class App extends React.Component {
  7.     constructor (props) {
  8.         super(props);
  9.  
  10.         this.state = {
  11.             activeStory: 'more'
  12.         };
  13.         this.onStoryChange = this.onStoryChange.bind(this);
  14.     }
  15.  
  16.     onStoryChange (e) {
  17.         this.setState({ activeStory: e.currentTarget.dataset.story })
  18.     }
  19.  
  20.     render () {
  21.         return (
  22.                 <Epic activeStory={this.state.activeStory} tabbar={
  23.                     <Tabbar>
  24.                         <TabbarItem
  25.                             onClick={this.onStoryChange}
  26.                             selected={this.state.activeStory === 'feed'}
  27.                             data-story="feed"
  28.                             text="Новости"
  29.                         ><Icon28Newsfeed /></TabbarItem>
  30.                         <TabbarItem
  31.                             onClick={this.onStoryChange}
  32.                             selected={this.state.activeStory === 'discover'}
  33.                             data-story="discover"
  34.                             text="Поиск"
  35.                         ><Icon28Search /></TabbarItem>
  36.                         <TabbarItem
  37.                             onClick={this.onStoryChange}
  38.                             selected={this.state.activeStory === 'messages'}
  39.                             data-story="messages"
  40.                             label="12"
  41.                             text="Сообщения"
  42.                         ><Icon28Messages /></TabbarItem>
  43.                         <TabbarItem
  44.                             onClick={this.onStoryChange}
  45.                             selected={this.state.activeStory === 'notifications'}
  46.                             data-story="notifications"
  47.                             text="Уведомлен."
  48.                         ><Icon28Notifications /></TabbarItem>
  49.                         <TabbarItem
  50.                             onClick={this.onStoryChange}
  51.                             selected={this.state.activeStory === 'more'}
  52.                             data-story="more"
  53.                             text="Ещё"
  54.                         ><Icon28More /></TabbarItem>
  55.                     </Tabbar>
  56.                 }>
  57.                     <View id="feed" activePanel="feed">
  58.                         <Panel id="feed">
  59.                             <PanelHeader>Feed</PanelHeader>
  60.                         </Panel>
  61.                     </View>
  62.                     <View id="discover" activePanel="discover">
  63.                         <Panel id="discover">
  64.                             <PanelHeader>Discover</PanelHeader>
  65.                         </Panel>
  66.                     </View>
  67.                     <View id="messages" activePanel="messages">
  68.                         <Panel id="messages">
  69.                             <PanelHeader>Messages</PanelHeader>
  70.                         </Panel>
  71.                     </View>
  72.                     <View id="notifications" activePanel="notifications">
  73.                         <Panel id="notifications">
  74.                             <PanelHeader>Notifications</PanelHeader>
  75.                         </Panel>
  76.                     </View>
  77.                     <View id="more" activePanel="more">
  78.                         <Panel id="more">
  79.                             <PanelHeader>More</PanelHeader>
  80.                         </Panel>
  81.                     </View>
  82.                 </Epic>
  83.         )
  84.     }
  85. }
  86.  
  87. export default App;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top