精华内容
下载资源
问答
  • 基于vue响应式ui框架 Framevuerk (Framevuerk) Fast, Responsive, Multi Language, Both Direction Support and Configurable UI Framework based on Vue.js. 快速,响应式,多语言,方向支持和基于Vue.js的可...

    基于vue的响应式ui框架

    Framevuerk (Framevuerk)

    Fast, Responsive, Multi Language, Both Direction Support and Configurable UI Framework based on Vue.js.

    快速,响应式,多语言,方向支持和基于Vue.js的可配置UI框架。

    建立 (Setup)

    First at all, you should install Framevuerk and of course Vue from terminal.

    首先,您应该从终端安装Framevuerk ,当然还要安装Vue

    npm install vue --save
    npm install framevuerk --save

    You can also install these, just if you want active touch actions support, fvDatepicker jalaali dates supoort and icons.

    您也可以安装这些,就算需要主动触摸操作支持,也可以安装fvDatepicker jalaali fvDatepicker supoort和图标。

    npm install idate --save
    npm install hammerjs --save
    npm install font-awesome --save

    And just follow the example and use it! (commonjs syntax and require also available)

    并按照示例进行操作即可! ( commonjs语法和require也可用)

    // Vue package
    import Vue from 'vue'
    
    // Framevuerk main js file
    import Framevuerk from 'framevuerk/dist/framevuerk.js'
    
    // If you handle styles with webpack, import this. Else you can include this via <link rel="stylesheet">
    import 'framevuerk/dist/framevuerk.css'
    
    // IDate package, just if you want globally support jalaali dates for fvDatepicker
    import IDate from 'idate'
    Framevuerk.use('date', IDate)
    
    // Hammer package, just if you want active touch actions support
    import Hammer from 'hammerjs'
    Framevuerk.use('hammer', Hammer)
    
    // Font-Awesome icons, just if you want active icons
    // If you handle styles with webpack, import this. Else you can include this via <link rel="stylesheet">
    import 'font-awesome/css/font-awesome.css'
    
    // Active Framevuerk...
    Vue.use(Framevuerk)
    
    // And finally, Initializing app
    const app = new Vue({
      el: "#app"
    });"

    Finally you need to create your template just like this.

    最后,您需要像这样创建模板。

    <html>
      <head>
        <link rel="stylesheet" href="path/to/your/app.css"/>
      </head>
      <body>
        <fv-main id="app">
          <!-- Your Content -->
        </fv-main>
        <script src="path/to/your/app.js"></script>
      </body>
    </html>

    定制 (Customize)

    Framevuerk can have different language, direction, and colors based on the user's taste. To setup your custom version, create a file called .framevuerkrc.js in root of your project and put these on:

    Framevuerk可以根据用户的口味使用不同的语言,方向和颜色。 要设置您的自定义版本, .framevuerkrc.js在项目的根目录中创建一个名为.framevuerkrc.js的文件,并将其放在以下位置:

    module.export = {
      // config name
      'config-name': 'foobar',
    
      // your locale and direction.
      locale: 'en', // or 'fa'
      direction: 'ltr', // or 'rtl'
    
      // theme colors:
      'primary-color': '#41b883',
      'secondary-color': '#35485d',
      'danger-color': '#dd4b39',
      'warning-color': '#ef8f00',
      'info-color': '#14b0cf',
      'bg-color': '#f9f9f9',
    
      // base padding size
      padding: '15px',
    
      // base animation speed
      'transition-speed': '0.35s',
    
      // base border radius applied to buttons, inputs and etc.
      'border-radius': '4px',
    
      // base shadow size applied to header, footer, form elements and etc.
      'shadow-size': '3px'
    }

    And output files goes to ./node_modules/framevuerk/dist directory:

    输出文件进入./node_modules/framevuerk/dist目录:

    • framevuerk-foobar.js

      framevuerk-foobar.js

    • framevuerk-foobar.css

      framevuerk-foobar.css

    • framevuerk-foobar.min.js

      framevuerk-foobar.min.js

    • framevuerk-foobar.min.css

      framevuerk-foobar.min.css

    You can also use .framevuerkrc.json, .framevuerkrc or framevuerk key inside your package.json to pass this variables to Framevuerk!

    您还可以在package.json使用.framevuerkrc.json.framevuerkrcframevuerk键,以将此变量传递给Framevuerk!

    Framevuerk apply these config by this cli command:

    Framevuerk通过此cli命令应用以下配置:

    ./node_modules/.bin/framevuerk
    # or on npm scripts, just:
    framevuerk

    翻译自: https://vuejsexamples.com/responsive-and-configurable-ui-framework-based-on-vue-js/

    基于vue的响应式ui框架

    展开全文
  • amaze-vue —— 基于Vue.js和amazeui样式的响应式UI框架
    展开全文
  • vue 响应式uiAre you thinking of building something awesome with one of the popular modern frameworks out there right now, but don’t know how to get started? 您是否正在考虑使用当前流行的现代框架之一...

    vue 响应式ui

    Are you thinking of building something awesome with one of the popular modern frameworks out there right now, but don’t know how to get started?

    您是否正在考虑使用当前流行的现代框架之一来构建出色的东西,但不知道如何入门?

    If yes, then this post will help you get a kick started and build something awesome.

    如果是的话,那么这篇文章将帮助您入门并建立一些很棒的东西。

    What are we going to build?

    我们要建造什么?

    We will be building a responsive client side search of the 7 wonders of the world with the following features:

    我们将通过以下功能对世界7大奇观进行响应式客户端搜索:

    1. Text Search & Filters based on Ratings and Likes.

      基于评级和喜欢的文本搜索过滤器

    2. 2 items per row for Tablet and Desktop, 1 item per row for Mobile.

      平板电脑台式机每行2项, 移动设备每行1项。

    3. Fetching data asynchronously from external API on client side.

      从客户端的外部API异步获取数据。
    4. Responsive view as shown below:

      响应视图如下图:

    Live Demo: https://vue-responsive-search.herokuapp.com

    现场演示https : //vue-sensitive-search.herokuapp.com

    Source Code: https://github.com/honey93/VueSearchExample

    源代码https : //github.com/honey93/VueSearchExample

    科技架构 (Tech Architecture)

    We will be working with the following technologies:

    我们将使用以下技术:

    1. Vue.js: The Progressive JavaScript Framework

      Vue.js 渐进式JavaScript框架

    2. BootstrapVue: It provides one of the most comprehensive implementations of Bootstrap V4 components and grid system available for Vue.js 2.5+, complete with extensive and automated WAI-ARIA accessibility markup.

      BootstrapVue 它提供了适用于Vue.js 2.5+的Bootstrap V4组件和网格系统的最全面的实现之一,并带有大量且自动的WAI-ARIA可访问性标记。

    3. Vue Cli 3: Standard Tooling for Vue.js Development

      Vue Cli 3 用于Vue.js开发的标准工具

    项目结构 (Project Structure)

    To get started with our Vue project, we need to setup many things like Vue, Bootstrap, Vue Router, Vuex, etc.

    要开始我们的Vue项目,我们需要设置许多东西,例如Vue,Bootstrap,Vue Router,Vuex等。

    Vue Cli provides us the command to create the project with most of the needed configurations.

    Vue Cli向我们提供了使用大多数所需配置来创建项目的命令。

    npm install -g @vue/cli
    vue create project-name

    For the remaining things like BootstrapVue, vue-star-rating, etc, we can use the npm install command.

    对于BootstrapVue,vue-star-rating等其余内容,我们可以使用npm install命令。

    The default project created using vuecli has the following structure:

    使用vuecli创建的默认项目具有以下结构:

    /Root Folder 
     
     Public/
    
     src/
      
      assets/  /* Static assets like images goes here */
      components/ /* Small part of a view */
      views/  /* View represents a page composed of several components*/
      App.vue /* The main view inside which the routing logic goes */
      main.js  /* App initialisation happens here  */
      router.js /* Router logic is defined here */
      store.js /* Optional state management library Vuex */
    
     package.json /* It consist of all the dependencies of the project. */
     ......

    The above things are there to explain the project architecture to you and the way to initialise it.

    以上是向您解释项目架构以及初始化方式的内容。

    We can get started by cloning the repository and writing the following commands:

    我们可以通过克隆存储库并编写以下命令来开始使用:

    npm install 
    npm run serve

    Some important components explained:

    一些重要的组件进行了解释:

    components/Header.vue

    组件/Header.vue

    The header has been created in the form of a single independent component so that it can be reused across pages, avoiding duplication of the code.

    标头以单个独立组件的形式创建,因此可以在页面之间重用,从而避免了代码重复。

    /* Vue style of writing component: template, script and style*/
    <template>
      <div class="pad-15-hor pad-15-ver header">
        <div>
          <img src="@/assets/logo.png" width="25px"> Responsive Search
        </div>
        <div>
          <i class="fas fa-bars"></i>
        </div>
      </div>
    </template>
    <script>
    export default {
      name: "Header"
    };
    </script>
    <style scoped>
    .header {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
    }
    </style>

    components/Main.vue

    组件/Main.vue

    This component consist of the entire logic of search / filters and display of results fetched from the API.

    此组件包含搜索/过滤器的整个逻辑以及从API提取的结果的显示。

    This component is using the above Header by importing it in the script.

    该组件通过将其导入脚本中来使用上述标题。

    <template>
      <div>
        <Header/>
        <div class="pad-15-hor pad-15-ver search-parent">
          <div class="search-bar">
            <b-form-input
              @input="search_text()"
              v-model="search.text"
              type="text"
              placeholder="Search by Name"
            ></b-form-input>
            <span class="search-icon">
              <i class="fas fa-search"></i>
            </span>
          </div>
          <div>
            <span class="bold">Total Likes:</span>
            {{likes.count}}
            <span class="bold">Hits:</span>
            {{likes.hit}}
          </div>
          <div>
            <b-form-select @input="sort()" v-model="search.filter" :options="options"/>
          </div>
        </div>
    <div class="container-fluid">
          <div class="row">
            <div class="col-md-6 pad-15-ver" v-for="wonder in wonders_data" :key="wonder.id">
              <div
                class="card-inner"
                @mouseover="show_hover(true,wonder.id)"
                @mouseout="show_hover(false,0)"
              >
                <img class="card-img" :src="wonder.imageURL">
    <div class="card-bottom pad-15-hor" v-show="!hover_flag || active_id != wonder.id">
                  <div class="min-width-160">
                    <span class="bold">Ratings:</span>
                    <star-rating
                      :rating="wonder.ratings"
                      :show-rating="false"
                      :inline="true"
                      :star-size="15"
                    ></star-rating>
                  </div>
                  <div class="max-width-160">
                    <span class="bold">{{wonder.place}}</span>
                  </div>
                </div>
    <div :class="{'card-hover':1}" v-show="hover_flag && active_id == wonder.id">
                  <span
                    @click="make_active(wonder.id)"
                    :class="{'fas':1, 'fa-heart':1, 'absolute-star':1, 'green':check_active(wonder.id)}"
                  >{{wonder.likes}}</span>
                  <h5>{{wonder.place}}</h5>
                  <p>{{wonder.description}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <script>
    /* Importing Header to use in this component */ 
    import Header from "@/components/Header.vue";
    /* Importing axios for async REST calls */
    import axios from "axios";
    export default {
      name: "Main",
    /* mounted gets called when the component gets mounted. AJAX calls are preferred in mounted lifecycle method */
      mounted() {
        this.hover_flag = false;
    var inside = this;
    axios
          .get("https://www.mocky.io/v2/5c7b98562f0000c013e59f07")
          .then(function(response) {
            //console.log(response);
    inside.wonders_data_actual = response.data.data;
    response.data.data.map(function(wonder) {
              inside.likes.count += wonder.likes;
            });
    inside.wonders_data_actual = inside.wonders_data_actual.map(function(
              wonder
            ) {
              wonder.active_like = false;
              return wonder;
            });
            inside.wonders_data = response.data.data;
          })
          .catch(function(error) {
            // console.log(error);
          });
      },
    /* All the data variable declaration are done here:  */
      data() {
        return {
          hover_flag: false,
          wonders_data_actual: [],
          wonders_data: [],
          active_id: 0,
          options: [
            { value: null, text: "Sort By" },
            { value: "a", text: "Ratings" },
            { value: "b", text: "Likes" }
          ],
          search: { filter: null, text: "" },
          likes: { count: 0, hit: 0 }
        };
      },
    /* Methods are defined here */
      methods: {
        show_hover(flag, active_id) {
          this.hover_flag = flag;
          this.active_id = active_id;
        },
        sort() {
          //console.log(this.search.filter);
          this.search.filter == "b"
            ? this.wonders_data.sort(function(a, b) {
                return b.likes - a.likes;
              })
            : this.wonders_data.sort(function(a, b) {
                return b.ratings - a.ratings;
              });
        },
        search_text() {
          //console.log(this.search.text);
    var inside = this;
    this.wonders_data = this.wonders_data_actual.filter(function(wonder) {
            if (
              wonder.place
                .toLowerCase()
                .indexOf(inside.search.text.toLowerCase()) != "-1"
            ) {
              return wonder;
            }
          });
        },
        check_active(id) {
          var flag = false;
          this.wonders_data_actual.map(function(wonder) {
            if (wonder.id == id) {
              flag = wonder.active_like;
            }
          });
          return flag;
        },
        make_active(id) {
          this.likes.hit++;
          this.wonders_data_actual = this.wonders_data_actual.map(function(wonder) {
            if (wonder.id == id) {
              wonder.active_like = !wonder.active_like;
              wonder.active_like ? wonder.likes++ : wonder.likes--;
            }
    return wonder;
          });
          var inside = this;
    inside.likes.count = 0;
          this.wonders_data_actual.map(function(wonder) {
            inside.likes.count += wonder.likes;
          });
        }
      },
      components: {
        Header
      }
    };
    </script>
    <style scoped> /* Styles are scoped to this component only.*/
    /* Style for Desktop/Tablet  */
    .search-parent {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      background-color: lightgray;
    }
    .card-inner {
      position: relative;
      overflow: hidden;
      box-shadow: 2px 2px 8px grey;
    }
    .card-img {
      width: 100%;
    }
    .card-bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 30px;
      width: 100%;
      background-color: white;
      opacity: 0.7;
      display: flex;
      justify-content: space-between;
    }
    .card-hover {
      position: absolute;
      right: 15px;
      left: 15px;
      top: 15px;
      bottom: 15px;
      background-color: white;
      opacity: 0.7;
      display: flex;
      flex-flow: column wrap;
      justify-content: center;
      align-items: center;
    }
    .absolute-star {
      position: absolute;
      top: 10px;
      right: 10px;
    }
    .card-hover p {
      font-size: 10px;
      text-align: center;
    }
    .bold {
      font-weight: 500;
    }
    .rating-div {
      width: 200px;
    }
    .search-bar {
      position: relative;
    }
    .search-bar input {
      padding-left: 30px;
    }
    .search-icon {
      position: absolute;
      top: 8px;
      left: 8px;
    }
    /* For Mobile Device, we will be going with column wrap approach */
    @media screen and (max-width: 550px) {
      .search-parent {
        display: flex;
        flex-flow: column wrap;
        justify-content: center;
        align-items: center;
        background-color: lightgray;
      }
    .search-parent div {
        width: 100%;
        text-align: center;
      }
    }
    </style>

    I hope you have a better understanding of how to get started with Vue and create something awesome.

    我希望您对如何开始使用Vue并创建很棒的东西有更好的了解。

    If you found this helpful, clap below, give stars to the project repo and share with your friends too.

    如果您觉得有帮助,请在下面一下,给项目回购加注 星号 ,并与您的朋友分享。

    翻译自: https://www.freecodecamp.org/news/how-to-set-up-responsive-ui-search-in-vue-js-bf6007b7fc0f/

    vue 响应式ui

    展开全文
  • 前端vue框架 响应式框架Responsive frameworks are very popular nowadays. Today we look at a great compilation of all currently existing responsive frameworks. This table is a deep comparative analysis ...

    前端vue框架 响应式框架

    Responsive frameworks are very popular nowadays. Today we look at a great compilation of all currently existing responsive frameworks. This table is a deep comparative analysis of frameworks, reflecting their advantages and disadvantages. The table list consists of paid and free open-source projects. All the projects are evaluated by the following parameters:: the use of css preprocessors, using a js library, dependence on third-party solutions that support Responsive web design and common elements in developing web projects.

    响应框架在当今非常流行。 今天,我们看一下当前所有现有响应框架的出色汇编。 该表是对框架的深入比较分析,反映了它们的优缺点。 表格列表包含付费和免费的开源项目。 所有项目均由以下参数评估:使用css预处理程序,使用js库,对支持响应式Web设计的第三方解决方案的依赖以及开发Web项目中的常见元素。

    In today’s review we provide the following frameworks:

    在今天的回顾中,我们提供以下框架:

    Here is the result comparative table:

    这是结果比较表:

    Property

    Twitter

    Bootstrap

    Gumby

    Foundation

    Semantic-ui

    metroui

    Kube

    Skeleton

    Responsive

    Framework

    ZinoUI

    FlatUI

    Preprocessors

    LESS,

    SASS

    SCSS

    SCSS

    No

    LESS

    LESS

    No

    LESS, SCSS, SASS, Stylus

    No

    LESS,

    SASS

    JS-library

    Jquery

    Jquery

    Jquery

    Jquery

    Jquery

    Jquery

    No

    Pure JS, Jquery, AngularJS

    Jquery

    Jquery

    using external plugins

    No

    jquery.validation, modernizr

    Modernizr,

    FastClick

    No

    Yes

    (jquery.widget.min.js)

    No

    No

    No

    No

    No

    Grid system

    Yes

    Yes

    Yes

    Yes

    Yes

    Yes

    Yes

    Yes

    No

    Yes

    Responsive

    Yes

    Yes

    Yes

    Yes

    Yes

    Yes

    Yes

    Yes

    No

    Yes

    Typography

    Yes

    Yes

    Yes

    Yes

    Yes

    Yes

    No

    No

    Yes

    Tables

    Yes

    Yes

    Yes

    Yes

    Yes

    Yes

    Yes

    yes

    Yes

    No

    Inputs

    Yes

    Yes

    Yes

    Yes

    Yes

    Yes

    Yes

    yes

    No

    Yes

    SelectBox

    Yes

    Yes

    Yes

    Yes

    Yes

    Yes

    No

    Yes

    Yes

    Yes

    RadioBox

    No

    Yes

    No

    Yes

    Yes

    No

    No

    Yes

    Yes

    Yes

    Checkbox

    No

    Yes

    No

    Yes

    Yes

    No

    No

    Yes

    Yes

    Yes

    Slider

    No

    No

    Yes

    Yes

    Yes

    No

    No

    Yes

    Yes

    Yes

    Rating

    No

    No

    No

    Yes

    Yes

    No

    No

    Yes

    Yes

    No

    Search

    Yes

    No

    Yes

    Yes

    Yes

    Yes

    No

    Yes

    No

    Yes

    Buttons

    Yes

    Yes

    Yes

    Yes

    Yes

    Yes

    Yes

    Yes

    Yes

    Yes

    Switches

    No

    Yes

    Yes

    Yes

    No

    Yes

    No

    Yes

    Progress bar

    Yes

    No

    Yes

    Yes

    Yes

    Yes

    No

    No

    Yes

    Yes

    Carousel

    Yes

    No

    Yes

    No

    Yes

    No

    No

    Yes (Layred carousel, full-screen, 11 effects, touch, drag)

    Yes

    No

    Tabs

    Yes

    Yes

    Yes

    Yes

    Yes

    Yes

    No

    Yes (7 effects)

    Yes

    No

    Accordion

    Yes

    No

    Yes

    Yes

    Yes

    Yes

    No

    Yes

    Yes

    No

    Navs

    Yes

    Yes

    Yes

    Yes

    Yes

    Yes

    No

    Yes

    Yes

    Yes

    Drop-down menu

    Yes

    Yes

    Yes

    Yes

    yes

    Yes

    No

    Yes

    Yes

    Yes

    Side menu

    No

    No

    Yes

    Yes

    Yes

    No

    No

    Yes

    No

    No

    Full-screen menu

    No

    No

    No

    No

    No

    No

    No

    Yes(5 effects)

    No

    No

    On-canvas menu

    No

    No

    Yes

    No

    Yes

    No

    No

    Yes(5 effects)

    No

    No

    Breadcrumbs

    Yes

    No

    Yes

    Yes

    Yes

    No

    No

    No

    No

    No

    Pagination

    Yes

    No

    Yes

    No

    Yes

    Yes

    No

    No

    No

    Yes

    Labels

    Yes

    Yes

    Yes

    Yes

    Yes

    No

    No

    No

    No

    No

    Alerts

    Yes

    Yes

    Yes

    Yes

    Yes

    Yes

    No

    No

    No

    No

    Preloaders

    No

    No

    No

    Yes

    (3 types)

    No

    No

    No

    Yes (19 types)

    No

    No

    Tooltips

    Yes

    Yes

    Yes

    Yes

    Yes

    Yes

    No

    Yes (64 effects)

    Yes

    No

    Modal

    Yes

    Yes

    Yes

    Yes

    Yes

    Yes

    No

    Yes (64 effects)

    Yes

    No

    Price

    Free

    Free

    Free

    Free

    Free

    Free

    Free

    9$

    59$

    39$

    Site

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    属性

    推特

    引导程序

    古比

    基础

    语义用户界面

    Metroui

    库贝

    骨架

    React灵敏

    构架

    ZinoUI

    FlatUI

    预处理器

    减,

    萨斯

    SCSS

    SCSS

    没有

    没有

    更少,SCSS,SASS,手写笔

    没有

    减,

    萨斯

    JS-

    jQuery的

    jQuery的

    jQuery的

    jQuery的

    jQuery的

    jQuery的

    没有

    纯JS,Jquery,AngularJS

    jQuery的

    jQuery的

    使用外部插件

    没有

    jquery.validation,modernizr

    Modernizr,

    快速点击

    没有

    (jquery.widget.min.js)

    没有

    没有

    没有

    没有

    没有

    网格系统

    没有

    React灵敏

    没有

    版式

    没有

    没有

    桌子

    没有

    输入项

    没有

    选择框

    没有

    单选框

    没有

    没有

    没有

    没有

    复选框

    没有

    没有

    没有

    没有

    滑杆

    没有

    没有

    没有

    没有

    评分

    没有

    没有

    没有

    没有

    没有

    没有

    搜索

    没有

    没有

    没有

    纽扣

    开关

    没有

    没有

    没有

    进度条

    没有

    没有

    没有

    轮播

    没有

    没有

    没有

    没有

    是(分层轮播,全屏,11种效果,触摸,拖动)

    没有

    标签

    没有

    是(7种效果)

    没有

    手风琴

    没有

    没有

    没有

    海军

    没有

    下拉式菜单

    没有

    侧面菜单

    没有

    没有

    没有

    没有

    没有

    没有

    全屏菜单

    没有

    没有

    没有

    没有

    没有

    没有

    没有

    是(5种效果)

    没有

    没有

    画布上的菜单

    没有

    没有

    没有

    没有

    没有

    是(5种效果)

    没有

    没有

    面包屑

    没有

    没有

    没有

    没有

    没有

    没有

    分页

    没有

    没有

    没有

    没有

    没有

    标签

    没有

    没有

    没有

    没有

    没有

    警报

    没有

    没有

    没有

    没有

    预紧器

    没有

    没有

    没有

    (3种)

    没有

    没有

    没有

    是(19种)

    没有

    没有

    工具提示

    没有

    是(64种效果)

    没有

    模态

    没有

    是(64种效果)

    没有

    价钱

    自由

    自由

    自由

    自由

    自由

    自由

    自由

    9 $

    59 $

    39 $

    现场

    1个

    2

    3

    4

    5

    6

    7

    8

    9

    10

    Next, we need to mention the components that were not included in the table, but they are unique and can help in the development.

    接下来,我们需要提及表中未包括的组件,但是它们是唯一的,可以为开发提供帮助。

    Metro UI (Metro UI)

    Data Tables.

    数据表。

    Using this component you can display the information in a table. Supports sorting data, search data, different output number of records, the switches pages of notes.

    使用此组件,您可以在表中显示信息。 支持排序数据,搜索数据,不同的输出记录数,笔记的切换页面。

    Tree View.

    树视图。

    This component displays information in a tree view.

    该组件以树状视图显示信息。

    Steamer.

    汽船。

    This component is designed to create a timeline. There is support for filtering.

    该组件旨在创建时间轴。 支持过滤。

    Calendar.

    日历。

    DatePicer.

    DatePicer。

    Times.

    时间。

    Window.

    窗口。

    Component in exactly the same dialog box of the Windows operating system.

    与Windows操作系统完全相同的对话框中的组件。

    基础 (Foundation)

    Lightbox.

    灯箱。

    Joyride.

    Joyride。

    This component helps to make the easy site navigation, using smooth animated scrolling.

    此组件使用平滑的动画滚动有助于简化站点导航。

    Pricing table.

    定价表。

    语义用户界面 (Semantic-ui)

    The Reveal.

    揭示。

    This component helps to make 7 hover effects.

    该组件有助于制作7种悬停效果。

    Shape

    形状

    Using Shapes

    使用形状

    A shape must have defined the width and heights for each side or else text flow may change during the animation.

    形状必须定义了每一边的宽度和高度,否则在动画过程中文本流可能会改变。

    The module uses 3D transformations which are currently only supported in modern versions of Chrome, Safari, and Firefox.

    该模块使用3D转换,当前仅在现代版本的Chrome,Safari和Firefox中支持。

    Sticky.

    黏。

    This component captures the blocks on the page when scrolling.

    滚动时,此组件捕获页面上的块。

    Framework has 29 css animation.

    框架有29个CSS动画。

    库贝 (Kube)

    Autocomplete.

    自动完成。

    Infinite Scroll.

    无限滚动。

    This component carries out the loading content when scrolling.

    滚动时,此组件执行加载内容。

    Livesearch.

    实时搜索。

    Navigation Fixed.

    导航固定。

    Upload.

    上载。

    响应框架 (Responsive framework)

    Responsive cart.

    响应式购物车。

    With this component you can create a responsive shopping cart. There is a version based on Jquery, and the second version of AngularJS. You can remove an item, change the number. Implemented AJAX requests.

    使用此组件,您可以创建响应式购物车。 有一个基于Jquery的版本,另一个是AngularJS的版本。 您可以删除一个项目,更改编号。 实施的AJAX请求。

    Responsive filter (dynamic grid).

    响应式过滤器(动态网格)。

    This components you can use to create a dynamic grid.

    您可以使用此组件来创建动态网格。

    DataTable.

    数据表。

    The component is based on AngularJS. Have a search through the records. Appearance corresponds to Material Design.

    该组件基于AngularJS。 搜索记录。 外观与材料设计相对应。

    Components for Material Design

    材料设计组件

    Implemented several components for Material Design (Tabs, Accordion, Form elements, Cards, Preloaders, Table)

    为材料设计实现了几个组件(制表符,手风琴,表格元素,卡片,预加载器,表格)

    ZinoUI (ZinoUI)

    Upload.

    上载。

    Tree View.

    树视图。

    This component displays information in a tree view.

    该组件以树状视图显示信息。

    Calendar.

    日历。

    Chart.

    图表。

    ComboBox

    组合框

    FlatUI (FlatUI)

    Video Player

    视频播放器

    Tags Input

    标签输入

    结论 (Conclusion)

    In this article we reviewed the advantages and disadvantages of 10 frameworks. Each of them may help you in your work. Do not limit yourself to one. Use them all, but wisely!

    在本文中,我们回顾了10个框架的优缺点。 他们每个人都可以帮助您的工作。 不要限制自己。 全部使用它们,但要明智!

    翻译自: https://www.script-tutorials.com/comparative-table-of-responsive-frameworks/

    前端vue框架 响应式框架

    展开全文
  • UI组件及框架 element- 饿了么出品的Vue2的web UI工具套件 ... muse-ui- 三端样式一致的响应式 UI 库 vuetify- 为移动而生的Vue JS 2组件框架 vonic- 快速构建移动端单页应用 vue-blu- 帮助...
  • 引言这是一个Vue的后端开箱即用UI项目框架,和之前的ReactAdmin类似,它是一个框架,也就意味着它帮你完成了很多公用的部分,你只需要在其基础上进行自己的项目扩展即可。大体上这是由Vue和bootstrap4构建的,其中还...
  • 1. 数据响应式 2. 组件化 3. 编译 4. 事件、双向绑定、插槽 5. 缓存组件、动画(transition) 6. Vue-Router 9. Vuex 组件计划 switch组件 button组件 table组件 modal组件 table组件 scroll组件 Datepicker...
  • 效果页面比如我们要实现这样列表、新增、编辑三个页面:列表页面新增页面编辑页面安装element我们使用 vue-cli@3 进行安装vue add element列表组件(TodoListWithUI.vue)与我们上次讲的无UI的列表组件逻辑基本都是...
  • Vue框架设置响应式布局

    万次阅读 多人点赞 2018-09-03 09:51:20
    回到主题,自适应响应式布局这个话题古老而新颖,从最早的不同分辨率的屏幕,到现在遍布各个生活角落的移动设备,响应式布局已经成了几乎所有互联网公司必备的条件。在我的映像中,bootstrap一直是响应式的头号选择...
  • 基于vue框架ui组件 声望 (Vuecidity) Vuecidity is a free, open source and licensed under MIT component library for the Vue.js framework, inspired by Google Material Design and Bootstrap. Vuecidity是...
  • 基于方向支持和可配置UI框架,快速,响应Swift,无依赖。 建立 首先,您应该从终端安装Framevuerk ,当然还要安装Vue ,然后按照示例使用即可! npm i vue npm i framevuerk 并将它们放在您的主脚本中:(还可以...
  • 前端采用vue,但是再项目开发过程中遇到一个比较麻烦的问题,项目工期比较紧,页面要美观好看,如果自己封装组件的话用时比较长,使用第三方框架成了不错的选择,在这里我总结了一下常用的vue UI框架,希望对大家...
  • 但是,使用专用的UI框架您可以选择预先构建的组件和可复用的UI交互,例如切换按钮,浮动操作按钮,滑动窗格,选项卡,滚动刷新等等。  对于Android,我们有许多可用的响应式  material design web框架 ,这些...
  • vue统计组件库和ui框架

    千次阅读 2020-01-07 10:09:30
    element★13489 - 饿了么出品的Vue2的web UI工具套件 Vux★8133 - 基于Vue和WeUI的组件库 iview★6634 - 基于 Vuejs 的... muse-ui★3705 - 三端样式一致的响应式 UIvue-material★3328 - 通过Vue Materia...
  • 安装Element UI框架: 1、在项目中执行下列代码:npm install element-ui --save-dev 2、在src\main.js文件中引入: import ElementUI from ‘element-ui’; import ‘element-ui/lib/theme-chalk/index.css’; Vue....
  • vueUI 框架

    2018-11-21 14:13:34
    Star 数为 11K,提供了 80 多个 Vue.js 组件,这些组件是根据谷歌 Material Design 指南实现的。Vuetify 支持所有平台上的浏览器,包括 IE11 和 Safari 9+(使用 polyfill),并提供了 8 个 vue-cli 模板。 地址: ...
  • Buefy是一个基于Bulma框架和设计的Vue.js响应式UI组件轻量级库
  • 11个基于vueUI框架

    万次阅读 2020-07-21 18:57:50
    Element UI Element UI 来自中国,由与 Mint UI 相同的开发者所创建。Element UI 是用于 Web 和桌面应用程序的桌面 UI 工具包,如果你需要开发 Electron 应用,这个库会是你的理想之选。 iView iView 是一个 UI ...
  • Vue响应式原理的简单模型

    千次阅读 2021-05-01 23:28:40
    其实之前也尝试过了解vue响应式的原理,毕竟现在面试看你用的是vue的话,基本上都会问你几句vue响应式的原理。以往学习这块就是看看别人写的文章,或者翻翻源码。这个过程中发现相当一部分文章看完之后一句话总结...
  • 2020年最火vueUI框架

    万次阅读 2020-05-14 17:08:25
    随着vue的开发者越来越多,各种框架也渐渐多起来,面对众多的框架,如何选择一款适合自己业务的框架,还是一件比较纠结的事情,今天总结了一下2020年GitHub上面比较受欢迎,star较高的几个UI框架。 1:饿了么...
  • vue 响应式布局组件A few years ago I started to hear a lot about Web Components. I got pretty excited and then totally forgot about them as the noise settled down. It turns out there has been some good...
  • Inkline是可定制的Vue.js UI / UX库,旨在创建完美的响应式网站。 Inkline由编写和维护。 ·· 目录 安装 阅读页面,找到有关框架内容,模板,示例等的信息。 错误和功能要求 有错误或功能要求吗? 请首先搜索现有...
  • 随着vue的开发者越来越多,各种框架也渐渐多起来,面对众多的框架,如何选择一款适合自己业务的框架,还是一件比较纠结的事情,今天总结了一下2020年GitHub上面比较受欢迎,star较高的几个UI框架。 1:饿了么...
  • vue响应式的网站

    2021-06-18 10:30:45
    一、cmd搭建框架 这里就不说安装node、npm... npm install -g @vue/cli 这是vue3.0的框架vue3.0的框架他的node.js是 >= 8/9) 3. vue create leftmenubar 创建vue项目(CSDN自己去查创建) 4. npm install axios
  • 2020最流行的vueUI框架

    千次阅读 2020-08-13 10:30:19
    随着vue的开发者越来越多,各种框架也渐渐多起来,面对众多的框架,如何选择一款适合自己业务的框架,还是一件比较纠结的事情,今天总结了一下2020年GitHub上面比较受欢迎,star较高的几个UI框架。 1:饿了么...
  • 效果页面比如我们要实现这样列表、新增、编辑三个页面:列表页面新增页面编辑页面安装element我们使用 vue-cli@3 进行安装vue add element列表组件(TodoListWithUI.vue)与我们上次讲的无UI的列表组件逻辑基本都是...
  • 随着vue的开发者越来越多,各种框架也渐渐多起来,面对众多的框架,如何选择一款适合自己业务的框架,还是一件比较纠结的事情,今天总结了一下2020年GitHub上面比较受欢迎,star较高的几个UI框架。 1:饿了么...
  • 2020年流行的vueui框架

    千次阅读 2020-05-28 21:49:40
    随着vue的开发者越来越多,各种框架也渐渐多起来,面对众多的框架,如何选择一款适合自己业务的框架,还是一件比较纠结的事情,今天总结了一下2020年GitHub上面比较受欢迎,star较高的几个UI框架。 1:饿了么...
  • 11个有关vueUI框架

    2021-02-05 11:38:37
    Element UI Element UI 来自中国,由与 Mint UI 相同的...iView 团队维护非常及时,最近一次的更新在19年3月18日,这次更新带来了一个Vue CLI 3的 iView 插件,你可以使用该插件快速构建基于 iView 的项目。 Vueti
  • 基于vueUI框架集锦(移动端+pc端)

    万次阅读 多人点赞 2018-04-26 18:09:42
    1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k中文文档 在线预览2.vux 基于WeUI和Vue(2.x)开发的移动端UI组件库 star 10k基于webpack...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,453
精华内容 3,781
热门标签
关键字:

vue响应式ui框架

vue 订阅