Блог

Я пытаюсь использовать Native Base для создания заголовка для моего мобильного приложения Vue Native. Однако, <nb-body> похоже, он не занимает нужную ширину.

Вот <template> раздел:

 <template>
  <nb-container>
    <nb-header>
      <nb-left>
        <nb-button transparent>
          <nb-icon name="menu" :on-press="toggleDrawer" />
        </nb-button>
      </nb-left>
      <nb-body>
        <nb-title class="header-text">{{headerTitle}}</nb-title>
      </nb-body>
      <nb-right>
        <nb-button transparent>
          <nb-icon name="funnel" />
        </nb-button>
      </nb-right>
    </nb-header>
    <slot />
  </nb-container>
</template>
  

И вот мой CSS:

 <style>
  .header-text{
    font-family: Graduate-Regular;
    text-align: center;
  }
</style>
  

Пример того, как это выглядит.

Мой headerTitle обрезается на многоточия (…), даже если у него больше места для использования. Когда я добавляю что-то подобное width: 120% в свой CSS, это подходит. Но, и поправьте меня, если я здесь ошибаюсь, я не думаю, что хорошей практикой является указывать произвольную величину для ширины.

Есть ли какой-либо способ позволить nb-body занимать все пространство между nb-left и nb-right , или, может быть, способ позволить ему занимать столько места, сколько ему нужно?

Большое вам спасибо.

Использование flex . В этом сценарии они составляют до 1. Левый и правый занимают 1/5 и 1/5 заголовка. Тело занимает 3/5.

       <nb-left :style="{flex:.2}>
        <nb-button transparent>
          <nb-icon name="menu" :on-press="toggleDrawer" />
        </nb-button>
      </nb-left>
      <nb-body :style="{flex:.6}>
        <nb-title class="header-text">{{headerTitle}}</nb-title>
      </nb-body>
      <nb-right :style="{flex:.2}>
        <nb-button transparent>
          <nb-icon name="funnel" />
        </nb-button>
      </nb-right>