Скрыть бумагу-вкладку - возможно ли это с помощью Css

Question

Я создаю приложение, которое должно быть очень удобным для мобильных устройств. У меня есть простой класс Css (.hide-mobile-small), который я использую медиа-запрос, чтобы скрыть определенные вещи на экране, когда ширина устройства < 500.

Он работает на Divs (но не нацелен только на divs - - его определяют как .hide-mobile-small - НЕ div.hide-mobile-small).

Я полагал, что это должно работать и на любом полимерном элементе. Я попробовал это на элементе paper-tab, потому что я хочу скрыть некоторые вкладки на макете страницы с несколькими вкладками, когда пользователь просматривает телефон. Но, похоже, это не работает.

Любые мысли о том, как заставить это работать без необходимости обновления компонента бумажной вкладки?

Спасибо за любые мысли

Answer 1

Да, вы можете использовать CSS, чтобы скрыть <paper-tab>.

Для example, вы можете скрыть любую <paper-tab>, который имеет hidden класс применяется:

paper-tab.hidden { 
    display: none; 
} 

Этот example использует медиа-запрос, чтобы скрыть вторую вкладку, когда ширина меньше 480px:

<style> 
    @media screen and (max-width: 480px) { 
    paper-tab:nth-of-type(2n) { 
     display: none; 
    } 
    } 
</style> 
<paper-tabs selected="0"> 
    <paper-tab>ITEM ONE</paper-tab> 
    <paper-tab>ITEM TWO</paper-tab> 
    <paper-tab>ITEM THREE</paper-tab> 
</paper-tabs>