uikit/uikit

📢 NO LONGER MAINTAINED: Please join our new commmunity here https://discord.gg/NEt4Pv7

Mark Joseph Rivera

@imarkdesigns

Hi guys, I may need your help about uk-toggle to accomplish the effect of the uk-accordion slide-down when toggling the container to display the form... however the toggling effect only does carried inside the main container and not the entire container which I wanted to slide it down to reveal the content.

I'd like to use the uk-toggle without breaking the css...

Andreas B

@andreasba

Hi all. One question: do you have an example at hand where the value of uikit attribute (for example data-uk-icon: "icon:facebook; ratio: 0.8" => data-uk-icon: "icon:twitter, ratio: 0.8") is manupilated via vue?

Sebastian

@zzseba78

@andreasba <span :uk-icon="'ratio:2; icon: twitter'"></span>

Andreas B

@andreasba

Thank you @zzseba78 !

Sebastian

@zzseba78

@andreasba You are welcome

Paulo--M--

@Paulo--M--

Best wishes for the year that starts to everyone on this "list" :-) :-) Especially for those more knowledgable that help the less knowledgable of us... ;-) Happy 2019!!!

Andreas B

@andreasba

@zzseba78 coming back to <span :uk-icon="'ratio:2; icon: twitter'"></span> - how could I access this via vue? When I set a data property called "uk-icon" and then change it, nothing happens. Wouldnt it be encessary to come up with a custom component?

Andreas B

@andreasba

Ah got it!

For all the other new to vue: this is in my html: <span :uk-icon="icon"></span> and this is in my vue js file: data: function () {
return {
icon: 'ratio:2; icon: twitter',
}
},
(notice it say "data: function()" and not just "data:" because it is defined in a prop. I can also recommend https://www.vuemastery.com/ - they really explain it very well

May Kittens Devour Your Soul

@diomed

@zzseba78 ever thought of creating generator?

Sebastian

@zzseba78

@andreasba well done

@diomed never :)

Sebastian

@zzseba78

@andreasba You also can make it this way, with a method:
html

<div id="app">
    <span :uk-icon="createIcon('instagram', 1.5)"></span>
</div>

and script

new Vue({
    el: '#app',
    data: {

    },

    methods: {
        createIcon: function(icon, ratio) {
            return 'icon: ' + icon + '; ratio: ' + ratio;
        }
    }
});

Sebastian

@zzseba78

Or in your use case:

<div id="app">
    <span :uk-icon="createIcon()"></span>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            icon: 'instagram',
            ratio: 3.5
        ,
        methods: {
            createIcon: function() {
                return 'icon: ' + this.icon + '; ratio: ' + this.ratio;
            }
        }
});
</script>

Damian Engel

@dlusions

Not sure if this is the right forum, but I can't seem to find too many outlets that include UIKit as a skill set. I'm looking for efficient and experienced freelance front end developers that are interested in building out HTML page templates for a headless CMS from provided designs using the latest version of UIKit. Developer would be working directly with myself and a few other team members in a divide and conquer approach. Please private chat me if interested. Thanks

PavelNSH

@PavelNSH

In firefox (linux) no bullet in first line right column
https://codepen.io/pavelnsh/pen/zyWOqm?&editable=true

Sebastian

@zzseba78

@PavelNSH Remove uk-grid-item-match

PavelNSH

@PavelNSH

@zzseba78 Thank

sdraper69

@sdraper69

is there a way to stop scroll spy animations when viewing on a mobile device ?

Igor Apfentaler

@IgorApfentaler_twitter

Question, i need to make draggable cards from sidebar in to main section, but when i drag them, they also need stay in main place, so i can reuse them.
basically i'm building draggable builder (drag & drop). https://codepen.io/Igor86/pen/maLaVx

Sascha

@saschadube

@/all

📢 Gitter chat for UIkit is moving to Discord

We have finally decided to leave Gitter. We were looking for a better and more sophisticated chat service for a while now, and Discord looks like the best choice. Many Open Source project like Vue.js, React and Laravel have left Slack and Gitter in favor of Discord. So, please join the new Discord server for UIkit. Here is the official invite link. See you there 🥳🎉 https://discord.gg/NEt4Pv7

May Kittens Devour Your Soul

@diomed

ayo! :thumbsup:

Sascha

@saschadube

@/all 📢 Gitter chat for UIkit is moving to Discord

Ryan Valenzuela Alvar

@alvar_ryan_twitter

Cv bnc

Jürgen Hörmann

@jhit

Hello. I need some help with the JS side of UIkit.
I want to create a custom component for UIkit that listens to tthe scroll event in UIKit and then triggers custom animations to special elements.
I see two ways to do this:
1: Using the UIkit.util.on(window, 'scroll', function() {}); to run my custom code.
2: create a UIkit.myComponent. I'd prefer this method but I currently find no information if this is possible and how the code should look like.
Any advice how to properly do this?

May Kittens Devour Your Soul

@diomed

@jhit we're no longer here. go to Discord for help

Ivan Gretsky

@ivangretsky

Good day!
I heard UIkit javascript can be used without the css part. I want to write the css part myself, making it custom, but use UIkit's js components. For example, the Offcanvas component. Is there anything to read on that? Maybe some codepens (I could not find anything on topic)? Is it even possible?

Aaron

@aarongerig

@ivangretsky > @/all 📢 Gitter chat for UIkit is moving to Discord
We have finally decided to leave Gitter. We were looking for a better and more sophisticated chat service for a while now, and Discord looks like the best choice. Many Open Source project like Vue.js, React and Laravel have left Slack and Gitter in favor of Discord. So, please join the new Discord server for UIkit. Here is the official invite link. See you there 🥳🎉 https://discord.gg/NEt4Pv7

Jdeboysere

@Jdeboysere

Hi here! I have a problem with Uikit 3 last version

I have an <div uk-grid>...</div> inside a container with uk-hidden

When I remove the uk-hidden classe, the grid does not apply the following classes : uk-first-column, uk-grid-margin

Is it a bug? How can I fix that?

Theses classes are added if I resize my browser, but $(window).resize() does not help

Aaron

@aarongerig

@Jdeboysere Have a look at my message above.

Jdeboysere

@Jdeboysere

Oh, I forget that !

Thanks you

bingrui pan

@pan87232494

hello guys ?is there compatiable timepicker for uikitv3?

Chris Hoppe

@choppe3766

@pan87232494 I use Flatpickr, you will found it on https://flatpickr.js.org/

bingrui pan

@pan87232494

@choppe3766 thank you so much, look awesome

Nedrarick

@nedrarick_twitter

Hadi

@Al_Musamim_twitter

hello is there a way to get the value of offcanvas whether it is shown or not?

Aaron

@aarongerig

@Al_Musamim_twitter

@/all 📢 Gitter chat for UIkit is moving to Discord
We have finally decided to leave Gitter. We were looking for a better and more sophisticated chat service for a while now, and Discord looks like the best choice. Many Open Source project like Vue.js, React and Laravel have left Slack and Gitter in favor of Discord. So, please join the new Discord server for UIkit. Here is the official invite link. See you there 🥳🎉 https://discord.gg/NEt4Pv7

Hadi

@Al_Musamim_twitter

@aarongerig thank you

Joo Han Kim

@deadthingy

Hello guys, is it possible to let the slider switch from the last to first item (or reversed) without going through all items?

Joo Han Kim

@deadthingy

+using javascript (slider.show())

webitproff

@webitproff

Please, help me! How made slider with lightbox, when click on a picture of slider?

May Kittens Devour Your Soul

@diomed

All who ask for help here should first watch this video

woxinjidu

@woxinjidu

有人吗

有大神不求教

俺想学前端

Where communities thrive

People

Repo info

Activity

All who ask for help here should first watch this video