0

背景：在撰写本文时，Fomantic-UI 是 Semantic-UI 的实时开发分支，有朝一日将被纳入 Semantic-UI，同时也是 Semantic-UI 事实上支持的属类。

Fomantic 有一个功能强大的日历/日期选择器，但我怎样才能让它以反色显示？

$('#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>

4

1 回答 1

1

从 Disord 对话中复制：答案是在日历调用 JS 中包含日历表 css 的设置。请参阅下面的片段，其中我添加了第二个倒置日历来说明。

注意：似乎 ccalendar > className > table CSS 设置完全替代了 table 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>

于 2020-01-20T09:39:43.977 回答