How to use uikit - 10 common examples

initModal: function () {
      var vm = this
      this.UImodal = UI.modal(this.$els.modal, this.options)
      this.UImodal.on('show.uk.modal', () => {
        vm.show = true
        vm.$emit('show')
        setTimeout(function () {
          // catch .uk-overflow-container
          vm.UImodal.resize()
        }, 1)
      })
      this.UImodal.on('hide.uk.modal', () => {
        vm.show = false
        vm.$emit('hide')
      })
    }
  }

mounted() {

            // If this file input is inside a collection, we can allow multi-upload.
            this.multiFileCollectionRow = this.findClosestCollectionRow(this.$el);

            // Init upload element.
            let t = this;
            let uploader = UIkit.upload(this.$el, {

                multiple: this.multiFileCollectionRow,
                name: 'file',
                type: 'PUT',
                allow: '*.' + (this.fileTypes ? this.fileTypes : '*').split(',').join('|*.'),

                beforeAll: () => {
                    this.error = null;
                    this.loading = true;
                },
                completeAll: () => {
                    this.fileName = this.tmpFileName;
                    this.fileSize = this.tmpFileSize;
                    this.fileType = this.tmpFileType;
                    this.fileId = this.tmpId;
                    this.checksum = this.tmpChecksum;

ready () {
    const vm = this
    // in our impelmentation the switcher
    // and connect change sides
    UI.switcher(this.nav, UI.Utils.options({
      connect: this.$el,
      animation: this.animation,
      swiping: this.swiping
    }))
    // listen to nav changes
    .on('show.uk.switcher', function (event, area) {
      vm.$emit('change')
    })
  }
}

import X from 'react-icons/lib/fa/close';
import { Trans } from 'react-i18next';
import { compose } from 'recompose';

import { ActionButton, WhiteButton } from 'uikit/Button';
import { applyDefaultStyles, Span } from 'uikit/Core';
import StackIcon from 'icons/StackIcon';

import { withApi } from 'services/api';

/* === ConnectButton === */
const ConnectButtonWrapper = styled(ActionButton)`
  font-size: 14px;
  background: ${({ theme }) => theme.lightBlue};
`;
const ExternalLink = applyDefaultStyles(ExternalLinkIcon);
const RightArrow = applyDefaultStyles(RightIcon);

export { ConnectButtonWrapper };

export const ConnectButton = compose(
  withApi,
  injectState,
)(({ text = 'Connect', doConnect, api, effects, ...props }) => {
  return (
    
       {text}
      
    
  );
});

import { Trans } from 'react-i18next';
import { compose } from 'recompose';

import { ActionButton, WhiteButton } from 'uikit/Button';
import { applyDefaultStyles, Span } from 'uikit/Core';
import StackIcon from 'icons/StackIcon';

import { withApi } from 'services/api';

/* === ConnectButton === */
const ConnectButtonWrapper = styled(ActionButton)`
  font-size: 14px;
  background: ${({ theme }) => theme.lightBlue};
`;
const ExternalLink = applyDefaultStyles(ExternalLinkIcon);
const RightArrow = applyDefaultStyles(RightIcon);

export { ConnectButtonWrapper };

export const ConnectButton = compose(
  withApi,
  injectState,
)(({ text = 'Connect', doConnect, api, effects, ...props }) => {
  return (
    
       {text}
      
    
  );
});

const connectedButtonCommonStyles = `

function match(pattern, path) {
                    return path.match(new RegExp(`^${pattern.replace(/\//g, '\\/').replace(/\*\*/g, '(\\/[^\\/]+)*').replace(/\*/g, '[^\\/]+').replace(/((?!\\))\?/g, '$1.')}$`, 'i'));
                }

                if (uiKitUpload.allow && !match(uiKitUpload.allow, file.name)) {
                    uiKitUpload.fail(uiKitUpload.msgInvalidName.replace('%s', uiKitUpload.allow));
                    return;
                }

                let data = new FormData();
                data.append('pre_sign_form[filename]', file.name);
                data.append('pre_sign_form[field]', this.fieldPath);
                data.append('pre_sign_form[_token]', this.uploadSignCsrfToken);

                UIkit.util.ajax(this.uploadSignUrl, {
                    method: 'POST',
                    data: data,
                    headers: { "Authentication-Fallback": true }
                }).then((result) => {
                    // Temporary save the parameter of this file. If upload is successful, we save them to the component.
                    let preSignedUrl = JSON.parse(result.responseText);
                    uiKitUpload.url = preSignedUrl.pre_signed_url;
                    this.tmpId = preSignedUrl.uuid;
                    this.tmpFileSize = file.size;
                    this.tmpFileType = file.type;
                    this.tmpFileName = preSignedUrl.filename;
                    this.tmpChecksum = preSignedUrl.checksum;

                    let headers = {};

                    if (this.acl) {

import UIkit from 'uikit'
import Icons from 'uikit/dist/js/uikit-icons'

// loads the Icon plugin
UIkit.use(Icons)

import React from "react";
import ReactDOM from "react-dom";
import Main from "./components/layout/Layout";

//import "uikit/dist/js/uikit-core.min.js";
import "uikit/dist/css/uikit.min.css";

import UIkit from "uikit";
import icons from "uikit/dist/js/uikit-icons";
window.UIkit = UIkit;
// loads the icon plugin
UIkit.use(icons);

ReactDOM.render(<main>, document.getElementById("root"));
</main>

import { unregister as unregisterServiceWorker } from './registerServiceWorker';
import { getState, getStore } from './store';
import 'uikit/dist/css/uikit.min.css';
import './css/index.css';
// Components
import Root from './components';
import Header from './components/header';
import Footer from './components/footer';
import About from './components/about';
import Dashboard from './components/dashboard';
import Event from './components/event';
import Timeline from './components/timeline';

// UIKit
UIKit.use(Icons);

// Firebase
firebase.initializeApp({
	apiKey: 'AIzaSyB22-DZ_PvhTJsA-PPf8Vs--fmcCixL-YQ',
	authDomain: 'cerebro-2018-f1052.firebaseapp.com',
	databaseURL: 'https://cerebro-2018-f1052.firebaseio.com',
	projectId: 'cerebro-2018-f1052',
	storageBucket: 'cerebro-2018-f1052.appspot.com',
	messagingSenderId: '1059299836137'
});

// Store
const store = getStore();

ReactDOM.render(

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import UIkit from 'uikit'
import Icons from 'uikit/dist/js/uikit-icons'
import 'font-awesome/css/font-awesome.css'

// loads the Icon plugin
UIkit.use(Icons)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '',
  components: {App}
})