Svelte: как динамически изменить стиль CSS табличного компонента

В предыдущей статье таблица была создана с использованием этого Svelte REPL. Если вы хотите проверить это раньше, не стесняйтесь:

Несмотря на это, вы можете просто пропустить это чтение и применить то, что мы обсудим здесь, к любой таблице HTML, которую вы хотите, просто помните, что любая ссылка на файлы и таблицы указывает на эту статью. Кроме того, используемый здесь CSS был сгенерирован с помощью Divtable, отличного веб-сайта, который сгенерировал код CSS, который был применен к нашему столы.

Изменение стиля

Для этого в файле Table.svelte мы создадим и экспортируем переменную, которая получит имя класса, который мы передадим в нашу таблицу. Имя класса является идентификатором элемента. Делая это, мы можем разделить различные элементы в документе. Также в этом же файле мы создадим два разных стиля на выбор и применим их к таблице в соответствии с ее значениями. Для выбора между ними класс таблицы получит переменную с именем стиля, который мы хотим к ней применить. После этого в App.svelte мы создадим переменную с именем одного из созданных нами стилей и передадим ее элементу ‹Table/›. Код должен выглядеть примерно так:

• Создание стилей таблицы:

Table.svelte

<style>
 table, th, td {
  border: 1px solid;
  border-collapse: collapse;
  margin: 10px;
  
 }
 
 table.redTable {
  border: 2px solid #A40808;
  background-color: #EEE7DB;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
 }
 table.redTable td, table.redTable th {
  border: 1px solid #AAAAAA;
  padding: 3px 2px;
 }
 table.redTable tbody td {
  font-size: 13px;
 }
 table.redTable tr:nth-child(even) {
  background: #F5C8BF;
 }
 table.redTable thead {
  background: #A40808;
  background: -moz-linear-gradient(top, #bb4646 0%, #ad2020 66%, #A40808 100%);
  background: -webkit-linear-gradient(top, #bb4646 0%, #ad2020 66%, #A40808 100%);
  background: linear-gradient(to bottom, #bb4646 0%, #ad2020 66%, #A40808 100%);
 }
 table.redTable thead th {
  font-size: 19px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  border-left: 2px solid #A40808;
 }
 table.redTable thead th:first-child {
  border-left: none;
 }
table.blueTable {
  border: 1px solid #1C6EA4;
  background-color: #EEEEEE;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
 }
 table.blueTable td, table.blueTable th {
  border: 1px solid #AAAAAA;
  padding: 3px 2px;
 }
 table.blueTable tbody td {
  font-size: 13px;
 }
 table.blueTable tr:nth-child(even) {
  background: #D0E4F5;
 }
 table.blueTable thead {
  background: #1C6EA4;
  background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  border-bottom: 2px solid #444444;
 }
 table.blueTable thead th {
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
  border-left: 2px solid #D0E4F5;
 }
 table.blueTable thead th:first-child {
  border-left: none;
 }
</style>

• Создайте переменную для ссылки на стиль и примените ее к классу таблицы:

Table.svelte

<script>
  (...)
  export let style;
</script>
<table class={style}>
  (...)

Теперь я буду использовать один тип стиля для каждой из двух моих таблиц, созданных в другой статье:

• Добавьте переменные с именами стилей, созданных в Table.svelte файле, и примените его к ‹Table/›. элемент:

Приложение.svelte

<script>
  (...)
  
  let redStyle = "redTable";
  let blueStyle = "blueTable";
</script>
<Table tableData={$studentsArray} style={redStyle}/>
<Table tableData={$colors} style={blueStyle}/>

Если вы следовали моему примеру, ваши таблицы также должны выглядеть так:

Что будет дальше?

Отлично! Теперь мы узнали, как создать табличный компонент и как динамически применять стили с помощью CSS и Svelte. В следующей статье мы узнаем, как добавить или удалить строку таблицы; как редактировать значение в таблице; и должна ли таблица отображаться или нет.

Увидимся в следующей статье!