Question

getuikit版本3.1.5，没有jquery依赖

我想将一些uk-offcanvas-close的“ x”图标更改为“>”：
如果是“ .closedetail>按钮”，则图标为“人字形向右”（>）而不是“关闭”（X）

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

Answer 1

这可能不是最佳答案，但是您可以使用uk-toggle代替uk-offcanvas-close。切换按钮的使用方式与打开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>

Answer 2

您可以通过这种方式完成

$(".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>

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

2 个答案: