如何改变UIkit.notification的宽度？

Question

在 getuikit 网络库中，如何更改通知的宽度？

UIkit.notification({message: 'Primary message...', status: 'primary'})

Answer 1

据我所知，没有编程方式，但您可以使用 CSS 来扩大通知范围。根据通知的对齐方式，您还需要调整定位以反映新的宽度（这里通知是 600px，margin-left 是它的一半，所以 -300px）

UIkit.notification({message: 'Primary message ...', status: 'primary', timeout: 60000});

UIkit.notification({message: 'Another short ...', status: 'primary', timeout: 60000});

UIkit.notification({message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', status: 'primary', timeout: 60000});

.uk-notification {
  width: 100%!important;
  display: flex!important;
  flex-direction: column;
}
.uk-notification-message {
  padding-right: 2em!important;
  width: auto!important;
  max-width: 70%!important;
  text-align: left;
  display: inline-flex;
}
.uk-notification-top-center,
.uk-notification-top-left,
.uk-notification-top-right {
  margin: 0!important;
  left: unset!important;
  text-align: center;
}
.uk-notification-top-center > .uk-notification-message {
  margin: 10px auto 0;
}
.uk-notification-top-left > .uk-notification-message {
  margin: 10px auto 0 10px;
}
.uk-notification-top-right > .uk-notification-message {
  margin: 10px 10px 0 auto;
}

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

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



<p uk-margin>
    <button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: 'Right align ...', status: 'primary', timeout: 60000, pos: 'top-right'})">Right text</button>
    
    <button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: 'Left align ...', status: 'primary', timeout: 60000, pos: 'top-left'})">Left text</button>

    <button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', status: 'primary', timeout: 60000})">Long text</button>
</p>

如何改变UIkit.notification的宽度？

How to change the width of UIkit.notification?

getuikit