语义-UI 加载程序 <table>

Question

我正在使用 ajax 来更新 table 的内容，我想使用语义-ui 的 built-in class "Loader" 在获取内容时在 table 的中心显示一些加载动画，但这似乎不适用于 <table> 标签。

<div class="ui active loader">
  <table class="ui unstackable striped table segment">
    <tr><td>id</td><td>name</td></tr>
    <tr><td>1</td><td>test test</td></tr>
  </table>
</div>

如何让它工作？

Answer 1

加载程序并不意味着包含正在加载的内容。它与调光器一起使用。

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />
<div class="dimmable">
  <div class="ui active inverted dimmer">
    <div class="ui loader"></div>
  </div>
  <table class="ui unstackable striped table segment">
    <tr>
      <td>id</td>
      <td>name</td>
    </tr>
    <tr>
      <td>1</td>
      <td>test test</td>
    </tr>
  </table>
</div>

或者如果在段内它可以是独立的

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />
<div class="ui basic segment">
  <div class="ui active loader"></div>
  <table class="ui unstackable striped table segment">
    <tr>
      <td>id</td>
      <td>name</td>
    </tr>
    <tr>
      <td>1</td>
      <td>test test</td>
    </tr>
  </table>
</div>

语义-UI 加载程序 <table>

Semantic-UI loader inside <table>

html

javascript

jquery

semantic-ui