Местоположение
Россия, Москва и Московская обл., Москва

Достижения

Все достижения (8)

Наибольший вклад в теги

Все теги (60)

Лучшие ответы пользователя

Все ответы (213)
  • Data в Vue.component?

    Madeas
    @Madeas Автор вопроса
    UI / UX Designer, Frontend Developer
    Решил

    <div id="navbar">
      <block-navigation></block-navigation>
      <span>World!</span>
      <other-components></other-components>
    </div>


    Vue.component('block-navigation', {
        props: ['val'],
        data() {
          return {
            navlist: [
              { link: 'name-1', name: 'linkName-1' },
              { link: 'name-2', name: 'linkName-2' },
              { link: 'name-3', name: 'linkName-3' },
              { link: 'name-4', name: 'linkName-4' },
              { link: 'name-5', name: 'linkName-5' },
            ]
          }
        },
        template: `
        <ul>
        	<li 
          	v-for="val in navlist"
            :key="val.id">
            <a :href=val.link :title=val.name>{{ val.name }}</a>
          </li>
        </ul>
        `
      })
    
      new Vue({
        el: '#navbar'
      })
    Ответ написан
  • Как в html + css сделать меню плитку?

    Madeas
    @Madeas
    UI / UX Designer, Frontend Developer
    Нет в сети, потому что просто

    <div class="menu">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>


    .menu {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
    }
    
    .menu div {
      border: 1px solid lightgray;
    }


    Можно даже еще круче сделать, как у вас в примере, без внешних рамок:

    .menu {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
    }
    
    .menu div {
      border-top: 1px solid lightgray;
      border-right: 1px solid lightgray;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      // добавляете в див иконку и текст, все само встанет как надо
    }
    
    .menu div:nth-child(-n+3) {
      border-top: 0;
    }
    
    .menu div:nth-child(3n) {
      border-right: 0;
    }
    Ответ написан
    6 комментариев

Лучшие вопросы пользователя

Все вопросы (136)