Как сделать вертикальные вкладки с React - PullRequest
Новая
       43

Как сделать вертикальные вкладки с React

0 голосов
/ 28 декабря 2018

Может ли кто-нибудь предоставить мне способ создания вертикальных вкладок с помощью React?

Я экспериментировал с различными пакетами npm, такими как Reaction-Web-Tabs, Reactionstrap и Reaction-bootstrap. Последние два имели только примеры для горизонтальныхtabs.React-web-tabs имеет пример вертикальной вкладки в своих документах, но он не работает.

import { Tabs, Tab, TabPanel, TabList } from 'react-web-tabs';

class NewNavigation extends React.Component{
render(){
return(
    <Tabs defaultTab="vertical-tab-one" vertical>
        <TabList>
            <Tab tabFor="vertical-tab-one">Tab 1</Tab>
            <Tab tabFor="vertical-tab-two">Tab 2</Tab>
            <Tab tabFor="vertical-tab-three">Tab 3</Tab>
        </TabList>

        <TabPanel tabId="vertical-tab-one">
            <p>Tab 1 content</p>
        </TabPanel>

        <TabPanel tabId="vertical-tab-two">
            <p>Tab content</p>
        </TabPanel>

        <TabPanel tabId="vertical-tab-three">
            <p>Tab 3 content</p>
        </TabPanel>
    </Tabs>
    );
}
}

На данный момент он отображает основные горизонтальные вкладки, и я хочу исправить этот код, так как он отображает вертикальные вкладки. Это также высоко ценится, если вы порекомендуете другой способ.

1 Ответ

0 голосов
/ 28 декабря 2018

Добавление следующего CSS поможет вам: 

.rwt__tab  {
  width: 100%
}

Другой способ - импортировать файл CSS в ваш компонент, добавив следующую строку: 

import 'react-web-tabs/dist/react-web-tabs.css';

Здесь пример если для справки.

...