问如何使日历颜色反转，或改变其他颜色特征？
EN

Stack Overflow用户

提问于 2020-01-20 17:39:44

回答 1查看 282关注 0票数 0

背景:在撰写本文时，Fomantic-UI是语义-UI的实时开发分支，总有一天会被卷到语义-UI中，同时也是语义-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>

semantic-ui

fomantic-ui

回答 1

Stack Overflow用户

发布于 2020-01-20 17:39:44

复制自Disord对话:答案是在日历调用JS中包含日历表css的设置。请看下面的代码片段，我在其中添加了第二个倒置的日历以进行说明。

注意: ccalendar > className > table CSS设置似乎是对table css class设置的完全替换。作为一个好处，这可以允许更精细的调整。消极的是，如果组件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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59820486

复制

相似问题

问如何使日历颜色反转，或改变其他颜色特征？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使日历颜色反转，或改变其他颜色特征？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使日历颜色反转，或改变其他颜色特征？
EN