Как изменить ширину заголовков вкладок (вертикальные вкладки) для Semantic-UI React

Я использую Semantic-UI React.

<Tab
  menu={{
    fluid: true,
    vertical: true,
    tabular: true
  }}
  panes={this.getTabPanes()}
/>

Он отлично работает, но заголовки вкладок имеют две ширины. введите здесь описание изображения

Как изменить его на абсолютное значение (например, 100 пикселей)?


reactjs javascript semantic-ui-react semantic-ui
person Valerii    schedule 10.10.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если вы посмотрите документацию для Tab, есть реквизит под названием grid, который принимает объект с двумя значениями для ширины этих столбцов сетки. Например, вы можете передать это, и он изменит размер grid={{paneWidth: 6, tabWidth: 2}}

person brianespinosa    schedule 11.10.2018
comment
Привет. Спасибо за Ваш ответ. Это сработает, но это относительный размер в столбцах. Я хочу установить этот размер, скажем, 100 пикселей. - person Valerii; 11.10.2018
comment
То, чего вы пытаетесь достичь, потребует от вас добавления пользовательского CSS. Эти реквизиты предназначены только для определения ширины столбца сетки так, как они определены в основных стилях семантического пользовательского интерфейса. Вы можете передать класс или идентификатор в Tab, а затем написать CSS для цели .my-class > .ui.grid. > .two.wide.column {} - person brianespinosa; 11.10.2018
comment
Я уже посмотрел код реакции семантического пользовательского интерфейса и думаю, что вы правы. Это единственный способ сделать это :(. Спасибо за помощь. - person Valerii; 11.10.2018
comment
Рад, что смог помочь. Если выяснится, что это решило вашу проблему, рассмотрите возможность пометить этот ответ как правильный. - person brianespinosa; 11.10.2018
comment
не могли бы вы, ребята, знать, это эксклюзивно для вертикальных вкладок? свойство grid={{paneWidth: 6, tabWidth: 2}} абсолютно ничего не делает на моей стороне, независимо от того, какие значения я использую. - person keponk; 28.05.2020