UI2 actions для строки таблицы На рассмотрении

1

Тоже частая ситуация при работе с таблицами -- набор каких-то действий над строкой данных. Копирование, удаление и т.д.

Я пробовал сделать несколько иконок в последовательных <a>. Слишком близко.

Я пробовал сделать несколько button.circle -- великоваты и слишком привлекают внимание

Я пробовал сделать несколько button.nobutton -- большие отступы, колонка становится довольно широкой.

Сделал в общем td > ul.actions > ul > li > a. Немного страшненько, но в целом сойдёт. Может дизайнеры что-нибудь придумают более приличное и напишут рекомендацию на этот случай или даже добавят в ui2.css?

table
  ul.actions
    display inline
    padding 0
    list-style-type none
    white-space nowrap

    li
      display inline-block
      margin 0 0.3em
      white-space nowrap

      &:first-child
        margin-left 0

      &:last-child
        margin-right 0

    a
      opacity 0.5
      color var(--text-color-link);
      white-space nowrap

      &:hover
        color var(--text-color-link);
        opacity 1

2 комментария

  • +1

    Можно в данном случае использовать иконки увеличенного размера .icon.large и регулировать отступы с помощью .custom-mr-8.

    Но если действий много, то возможно, следует главное действие оформить обычной кнопкой .button.small, а остальное завернуть рядом в .waDropdown. Или же все оформить внутри .waDropdown.

    Это все мысли вслух. Пожелание по готовому решению принято. Постараемся что-то придумать и добавить пример в приложении UI.

  • 0
    info info 1 мая 2021 01:05 #

    это же калька с bootstrap - добавить класс custom-mx-8 или custom-mx-12 к кнопкам и все

    Добавить комментарий

    Чтобы добавить комментарий, зарегистрируйтесь или войдите