我可以将 uk-offcanvas-close、uk-close 中的图标替换为 chevron-right 吗？

Question

getuikit 版本 3.1.5，无 jquery 依赖项

我想将某些 uk-offcanvas-close 的 "x" 图标改为“>”：
如果是“.closedetail> 按钮”，则图标是 "chevron-right" (>) 而不是 "close" (X)

<div class="closedetail">
    <button class="uk-offcanvas-close" type="button" uk-close></button>
</div>

Answer 1

你可以这样操作

$(".closedetail > button").html("<i class='fas fa-chevron-right'></i>")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<div class="closedetail">
    <button class="uk-offcanvas-close" type="button" uk-close></button>
</div>

Answer 2

这可能不是最佳答案，但您可以使用 uk-toggle 而不是 uk-offcanvas-close。开关的使用方式与打开 offcanvas 的按钮的使用方式相同 - 因为它是一个开关，所以它会在 offcanvas 已经打开时关闭它。通过替换它，你就可以设置你想要的任何图标

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/js/uikit-icons.min.js"></script>

<button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-usage">Open</button>

<div id="offcanvas-usage" uk-offcanvas>
    <div class="uk-offcanvas-bar">

        <!-- Instead of using uk-offcanvas-close, we can use uk-toggle -->
        <button type="button" class="uk-align-right" uk-toggle="target: #offcanvas-usage" uk-icon="chevron-right"></button>

        <h3>Title</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>
</div>

我可以将 uk-offcanvas-close、uk-close 中的图标替换为 chevron-right 吗？

Can I replace the icon in the uk-offcanvas-close, uk-close to chevron-right?

javascript

getuikit