Uikit 上的 Uikit 进度条 Table

Question

我在将 uikit progress bar 放入 uikit table cell 时遇到问题，我在 getuikit 中搜索了 progress bar and table 文档我用谷歌搜索了所有内容，但没有找到任何好的社区或资源在那里。

这是我为 table 简化的 html 文件：

<table class="uk-table uk-table-hover uk-overflow-container">
    <thead>
        <tr>
            <th>
                Employee
            </th>
            <th>
                <label class="uk-form-label" for="name" style="font-weight: lighter;">
                    Contact
                </label>
            </th>
            <th>
                Workplace/Position
            </th>
            <th>
                Status
            </th>
            <th>
                Work Completed (%)
            </th>
    </thead>
    <tbody>
        <tr>
            <td>Luigi Lascuña</td>
            <td>Igi@skyes8.com</td>
            <td>Main Office/General Manager</td>
            <td>Regular</td>
            <td class="uk-progress">
                <div class="uk-progress-bar" style="width: 40%;">40%</div>
            </td>
        </tr>
    </tbody>
</table>

这是我的输出：

There result will only display the 40% text inside a table cell but not just like in the documentation.

Answer 1

我只是将 components/progress.css 添加到主 html 文件头部的样式块中。这解决了我的问题！

Uikit 上的 Uikit 进度条 Table

Uikit Progress bar on Uikit Table

html

getuikit