Как сделать в календаре инвертированные цвета или изменить другие цветовые характеристики? - PullRequest
Новая
       43

Как сделать в календаре инвертированные цвета или изменить другие цветовые характеристики?

0 голосов
/ 20 января 2020

Предыстория: на момент написания, Fomanti c -UI - это ветка разработки в реальном времени Semanti c -UI, которая однажды будет внедрена в Semanti c -UI и в то же время является Фактически поддерживаемый род Semanti c -UI.

Fomanti c имеет возможность выбора календаря / даты, но как мне сделать так, чтобы он отображался с перевернутыми цветами? 

$('#standard_calendar')
  .calendar();

$('#inverted_calendar')
  .calendar({
    className: {
      table: 'ui inverted celled center aligned unstackable table'
    }
  });
<link href="https://fomantic-ui.com/dist/semantic.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fomantic-ui.com/dist/semantic.js"></script>


<body>
  <div class='daContent'>
    <p>
      An example of a Fomantic calendar.

    </p>
    <span>Standard colors calendar</span>
    <div class="ui calendar" id="standard_calendar">
      <div class="ui input left icon">
        <i class="calendar icon"></i>
        <input type="text" placeholder="Date/Time">
      </div>
    </div>

    </p>



</body>

1 Ответ

1 голос
/ 20 января 2020

Скопировано из разговора Disord. Ответ заключается в том, чтобы включить параметр для календарной таблицы css в вызове календаря JS. См. Фрагмент ниже, где я добавил второй перевернутый календарь для иллюстрации.

Примечания. Похоже, что настройка ccalendar> className> table CSS полностью заменяет настройки класса css таблицы. Как преимущество, это может позволить более тонкую настройку. Отрицательно, если компонент CSS был изменен, а наш код остался неизменным, то это может быть критический случай изменения. 

$('#standard_calendar')
  .calendar();

$('#inverted_calendar')
  .calendar({
    className: {
      table: 'ui inverted celled center aligned unstackable table'
    }
  });
<link href="https://fomantic-ui.com/dist/semantic.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fomantic-ui.com/dist/semantic.js"></script>

<body>
  <div class='daContent'>
    <p>
      The first calendar is using standard colors, the second is inverted.

    </p>
    <span>Standard colors calendar</span>
    <div class="ui calendar" id="standard_calendar">
      <div class="ui input left icon">
        <i class="calendar icon"></i>
        <input type="text" placeholder="Date/Time">
      </div>
    </div>

    </p>

    <p>
      <span>Inverted colors calendar</span>
      <div class="ui calendar" id="inverted_calendar">
        <div class="ui input left icon">
          <i class="calendar icon"></i>
          <input type="text" placeholder="Date/Time">
        </div>
      </div>
    </p>


</body>
...