Как изменить точку останова, при которой таблица списка изменений становится накопленной?

В Unfold admin таблица списков изменений переключается на многоуровневый макет на маленьких экранах — вероятно, из-за попутных классов, таких как block и lg:table.

Я бы хотел изменить точку останова, при которой происходит переключение макета (например, использовать md вместо lg или полностью отключить ее, чтобы сохранить горизонтальную прокрутку).

Как можно полностью настроить или переопределить это поведение?

Параметр, изменяющий точку останова в lg для md, является альтернативным классом для md:таблица. Параметр, позволяющий выполнить замену блока и применить таблицу ранее.

Что нужно для перехода с CSS, чтобы изменить положение дел и чтобы попутный ветер не мешал:

.custom-changelist-table {
@apply table md:table;
}

Компонент Unfold table содержит жестко запрограммированные классы, поэтому точка останова установлена на lg. У вас есть два варианта.

Во-первых, вы можете переопределить точку останова lg в Tailwind CSS. Однако это повлияет на внешний вид всего проекта, а не только компонента таблицы.

@import "tailwindcss";

@theme {
  /* You can set a fixed value or use the value of another breakpoint. */
  --breakpoint-lg: theme(--breakpoint-md);
}

Примечание: Важно отметить, что по умолчанию точки останова задаются в rem-единицах измерения. Если вы хотите отклониться от этого, следуйте другому ответу, на который ссылаетесь.

Во-вторых, вы можете попробовать изменить поведение точки останова только в компоненте таблицы.

@import "tailwindcss";

@layer base {
  div[data-simplebar] > table.lg\:table {
    /* Set display: table at the new breakpoint */
    @variant xl {
      display: table;
    }

    /* This is only necessary if you need to set a larger breakpoint (in the case of a smaller one, it may still remain valid) */
    @variant lg {
      display: revert; /* Revert changes only in the Unfold table */ 
    }
  }
}

Или:

@import "tailwindcss";

@layer base {
  div[data-simplebar] > table.lg\:table {
    /* Set display: table at the new breakpoint */
    @variant md {
      display: table;
    }
  }
}
Вернуться на верх