Web前端UI组件设计

最新推荐文章于 2024-07-03 11:45:00 发布
最新推荐文章于 2024-07-03 11:45:00 发布
阅读量2.1k 收藏 4
点赞数 3
分类专栏： JavaScript 文章标签： 组件化 JavaScript UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq937654393/article/details/88214270
版权

注：内容来自奇舞学院前端星课程

一、如何UI组件设计

组件的设计分三个步骤，如下:

  1. 结构设计：分析组件UI的布局，用相应的dom元素设计html结构
  2. API设计：设计JavaScript API来实现交互效果
  3. 控制流设计：为用户提供交互所触发的事件。组件中的控制流可作为插件抽象出来，并模板化。

二、轮播图组件具体设计

接下来以轮播图组件的设计过程具体讲解组件设计过程。

步骤1. 结构设计

  1. 图片结构是一个列表型结构，所以主体用 <ul>，图片放<li>
  2. 使用 css 绝对定位将图片重叠在同一个位置
  3. 轮播图切换的状态使用修饰符（modifier），用挂类名的方式修改状态对应样式
  4. 轮播图的切换动画使用 css transition

HTML代码

<div id="my-slider" class="slider-list">
  <ul>
    <li class="slider-list__item--selected">
      <img src="https://p5.ssl.qhimg.com/t0119c74624763dd070.png"/>
    </li>
    <li class="slider-list__item">
      <img src="https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg"/>
    </li>
    <li class="slider-list__item">
      <img src="https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg"/>
    </li>
    <li class="slider-list__item">
      <img src="https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg"/>
    </li>
  </ul>
</div>

css代码

#my-slider{
  position: relative;
  width: 790px;
}
.slider-list ul{
  list-style-type:none;
  position: relative;
  padding: 0;
  margin: 0;
}
.slider-list__item,
.slider-list__item--selected{
  position: absolute; /* 绝对定位使列表项目重叠在一起 */
  transition: opacity 1s;
  opacity: 0; /* 默认透明隐藏元素 */
  text-align: center;
}
.slider-list__item--selected{
  transition: opacity 1s;
  opacity: 1; /* 选中时显示元素 */
}

步骤2.API设计

  • 轮播图组件的API设计还是比较简单，用户的交互主要是手动切换轮播图，而切换轮播图的过程需要获取当前选中的选项元素以及其索引。轮播图组件的API设计如下类图。
    轮播图组件的类图
  • 具体实现：
    使用ES6的class，用面向对象的方式实现。
 class Slider {
    constructor(id) { // 构造函数的参数id为要轮播图组件的id,初始化container和items属性
      // 获取轮播图的容器元素
      this.container = document.getElementById(id)
      // 获取轮播图中的图片列表
      this.items = this.container.querySelectorAll('.slider-list__item,.slider-list__item--selected')
    }
    /* Slider类的方法 */
    getSelectedItem () {
      const selectedItem = this.container.querySelector('.slider-list__item--selected')
      return selectedItem
    }
    getSelectedItemIndex () {
      const selectedItem = this.container.querySelector('.slider-list__item--selected')
      // this.items的类型是类数组对象，需要转换为数组类型
      return Array.from(this.items).indexOf(selectedItem)
    }
    slideTo (index) {
      const selectedItem = this.getSelectedItem()
      if(selectedItem) selectedItem.className = 'slider-list__item'
      const idx = index%this.items.length
      if(this.items[idx]) this.items[idx].className = 'slider-list__item--selected'
    }
    slideNext () {
      const currentId = this.getSelectedItemIndex()
      this.slideTo(currentId + 1)
    }
    slidePrevious () {
      const currentId = this.getSelectedItemIndex()
      this.slideTo(this.tems.length + currentId - 1)
    }
  }
  // 实例化对象
  const slider = new Slider('my-slider')
  // 自动轮播
  setInterval(() => {
    slider.slideNext()
  }, 3000);

步骤3.控制流设计

首先要添加控制结构，即在html和css中添加轮播图的上下切换按钮和控制条。然后在组件构造函数中给控制结构添加相应事件处理。
添加控制流版本的轮播图代码如下：

代码中的修改：html中加入按钮和控制条并给相应的样式，Slider类构造函数中给控制条添加悬浮事件切换选项和上下切换按钮添加点击事件，Slider类加了两个函数start和stop来控制是否自动轮播效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
      #my-slider{
        position: relative;
        width: 790px;
        height: 340px;
      }
      .slider-list ul{
        list-style-type:none;
        position: relative;
        padding: 0;
        margin: 0;
      }
      .slider-list__item,
      .slider-list__item--selected{
        position: absolute; /* 绝对定位使列表项目重叠在一起 */
        transition: opacity 1s;
        opacity: 0; /* 默认透明隐藏元素 */
        text-align: center;
      }
      .slider-list__item--selected{
        transition: opacity 1s;
        opacity: 1; /* 选中时显示元素 */
      }
      /* 上下切换按钮 */
      .slide-list__next,
      .slide-list__previous{
        display: inline-block;
        position: absolute;
        top: 50%;
        margin-top: -25px;
        width: 30px;
        height:50px;
        text-align: center;
        font-size: 24px;
        line-height: 50px;
        overflow: hidden;
        border: none;
        background: transparent;
        color: white;
        background: rgba(0,0,0,0.2);
        cursor: pointer;
        opacity: 0;
        transition: opacity .5s;
      }
      .slide-list__previous {
        left: 0;
      }
      .slide-list__next {
        right: 0;
      }
      #my-slider:hover .slide-list__previous {
        opacity: 1;
      }
      #my-slider:hover .slide-list__next {
        opacity: 1;
      }
      .slide-list__previous:after {
        content: '<';
      }
      .slide-list__next:after {
        content: '>';
      }
      /* 控制条样式 */
      .slide-list__control{
        position: relative;
        display: table;
        background-color: rgba(255, 255, 255, 0.5);
        padding: 5px;
        border-radius: 12px;
        top: 280px;
        margin: auto;
      }
      .slide-list__control-buttons,
      .slide-list__control-buttons--selected{
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        margin: 0 5px;
        background-color: white;
        cursor: pointer;
      }
      .slide-list__control-buttons--selected {
        background-color: red;
      }

    </style>
</head>
<body>
  <div id="my-slider" class="slider-list">
    <ul>
      <li class="slider-list__item--selected">
        <img src="https://p5.ssl.qhimg.com/t0119c74624763dd070.png"/>
      </li>
      <li class="slider-list__item">
        <img src="https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg"/>
      </li>
      <li class="slider-list__item">
        <img src="https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg"/>
      </li>
      <li class="slider-list__item">
        <img src="https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg"/>
      </li>
    </ul>
    <a class="slide-list__next"></a>
    <a class="slide-list__previous"></a>
    <div class="slide-list__control">
      <span class="slide-list__control-buttons--selected"></span>
      <span class="slide-list__control-buttons"></span>
      <span class="slide-list__control-buttons"></span>
      <span class="slide-list__control-buttons"></span>
    </div>
  </div>
  <script>
  class Slider {
    constructor(id, cycle = 3000) { // 构造函数的参数id为要轮播图组件的id,cycle为轮播周期
      this.cycle = cycle
      // 获取轮播图的容器元素
      this.container = document.getElementById(id)
      // 获取轮播图中的图片列表
      this.items = this.container.querySelectorAll('.slider-list__item,.slider-list__item--selected')
      // 添加控制流
      const controller = this.container.querySelector('.slide-list__control')
      // 控制轮播图选中控制条显示对应图
      if (controller) {
        const buttons = controller.querySelectorAll('.slide-list__control-buttons,.slide-list__control-buttons--selected')
        controller.addEventListener('mouseover', event => {
          const idx = Array.from(buttons).indexOf(event.target)
          if (idx >= 0) {
            this.slideTo(idx)
            this.stop()
          }
        })
        controller.addEventListener('mouseout', event => {
          this.start()
        })
        // 滑动时修改控制条选中样式
        this.container.addEventListener('slide', event => {
          const idx = event.detail.index
          console.log('索引', idx, buttons)
          const selectedItem = controller.querySelector('.slide-list__control-buttons--selected')
          if(selectedItem) selectedItem.className = 'slide-list__control-buttons'
          if(buttons[idx]) buttons[idx].className = 'slide-list__control-buttons--selected'
        })
      }
      // 为上下切换按钮添加点击事件
      const previous = this.container.querySelector('.slide-list__previous')
      if(previous){
        previous.addEventListener('click', evt => {
          this.stop()
          this.slidePrevious()
          this.start()
          evt.preventDefault()
        });
      }
      const next = this.container.querySelector('.slide-list__next')
      if(next){
        next.addEventListener('click', evt => {
          this.stop()
          this.slideNext()
          this.start()
          evt.preventDefault()
        });
      }
    }
    /* Slider类的方法 */
    getSelectedItem () {
      const selectedItem = this.container.querySelector('.slider-list__item--selected')
      return selectedItem
    }
    getSelectedItemIndex () {
      const selectedItem = this.container.querySelector('.slider-list__item--selected')
      // this.items的类型是类数组对象，需要转换为数组类型
      return Array.from(this.items).indexOf(selectedItem)
    }
    slideTo (index) {
      const selectedItem = this.getSelectedItem()
      if(selectedItem) selectedItem.className = 'slider-list__item'
      const idx = index%this.items.length
      if(this.items[idx]) this.items[idx].className = 'slider-list__item--selected'
      // 触发滑动事件
      const event = new CustomEvent('slide', 
        {
          bubbles:true, 
          detail: {index: idx}
        }
      )
      this.container.dispatchEvent(event)
    }
    slideNext () {
      const currentId = this.getSelectedItemIndex()
      this.slideTo(currentId + 1)
    }
    slidePrevious () {
      const currentId = this.getSelectedItemIndex()
      this.slideTo(this.items.length + currentId - 1)
    }
    start () {
      this.stop()
      this._timer = setInterval(() => {
        this.slideNext()
      }, this.cycle);
    }
    stop () {
      if(this._timer) clearInterval(this._timer)
    }
  }
  // 实例化对象
  const slider = new Slider('my-slider')
  // 自动轮播
  slider.start()
  </script>
</body>
</html>

这个版本的轮播图已经实现了该有的功能，但是代码还需要进行优化，将组件中的一些东西抽象出来。在Slider组件的切换按钮和控制条都可以抽象出来作为插件，然后插件将Slider组件对象作为依赖注入，降低控制流插件与组件的耦合度。
在这里插入图片描述
js代码中在组件的构造函数中添加的控制流抽离出来作为注册插件函数，组件对象作为参数传入注册插件函数。
修改后的js代码如下：

class Slider {
    constructor(id, cycle = 3000) { // 构造函数的参数id为要轮播图组件的id,cycle为轮播周期
      this.cycle = cycle
      // 获取轮播图的容器元素
      this.container = document.getElementById(id)
      // 获取轮播图中的图片列表
      this.items = this.container.querySelectorAll('.slider-list__item,.slider-list__item--selected')
    }
    /* Slider类的方法 */
    registerPlugins (...plugins) { // 引入插件函数
      plugins.forEach(plugin => plugin(this))
    }
    getSelectedItem () {
      const selectedItem = this.container.querySelector('.slider-list__item--selected')
      return selectedItem
    }
    getSelectedItemIndex () {
      const selectedItem = this.container.querySelector('.slider-list__item--selected')
      // this.items的类型是类数组对象，需要转换为数组类型
      return Array.from(this.items).indexOf(selectedItem)
    }
    slideTo (index) {
      const selectedItem = this.getSelectedItem()
      if(selectedItem) selectedItem.className = 'slider-list__item'
      const idx = index%this.items.length
      if(this.items[idx]) this.items[idx].className = 'slider-list__item--selected'
      // 触发滑动事件
      const event = new CustomEvent('slide', 
        {
          bubbles:true, 
          detail: {index: idx}
        }
      )
      this.container.dispatchEvent(event)
    }
    slideNext () {
      const currentId = this.getSelectedItemIndex()
      this.slideTo(currentId + 1)
    }
    slidePrevious () {
      const currentId = this.getSelectedItemIndex()
      this.slideTo(this.items.length + currentId - 1)
    }
    start () {
      this.stop()
      this._timer = setInterval(() => {
        this.slideNext()
      }, this.cycle);
    }
    stop () {
      if(this._timer) clearInterval(this._timer)
    }
  }
  /* 抽象出来的插件函数 */ 
  // 控制条
  function pluginController(slider) { 
    // 添加控制流
    const controller = slider.container.querySelector('.slide-list__control')
    // 控制轮播图选中控制条显示对应图
    if (controller) {
      const buttons = controller.querySelectorAll('.slide-list__control-buttons,.slide-list__control-buttons--selected')
      controller.addEventListener('mouseover', event => {
        const idx = Array.from(buttons).indexOf(event.target)
        if (idx >= 0) {
        slider.slideTo(idx)
        slider.stop()
        }
      })
      controller.addEventListener('mouseout', event => {
        slider.start()
      })
      // 滑动时修改控制条选中样式
      slider.container.addEventListener('slide', event => {
        const idx = event.detail.index
        console.log('索引', idx, buttons)
        const selectedItem = controller.querySelector('.slide-list__control-buttons--selected')
        if(selectedItem) selectedItem.className = 'slide-list__control-buttons'
        if(buttons[idx]) buttons[idx].className = 'slide-list__control-buttons--selected'
      })
    }
  }
  // 上一页按钮
  function pluginPrevious(slider){
    const previous = slider.container.querySelector('.slide-list__previous');
    if(previous){
      previous.addEventListener('click', evt => {
        slider.stop();
        slider.slidePrevious();
        slider.start();
        evt.preventDefault();
      });
    }  
  }
  // 下一页按钮
  function pluginNext(slider){
    const next = slider.container.querySelector('.slide-list__next');
    if(next){
      next.addEventListener('click', evt => {
        slider.stop();
        slider.slideNext();
        slider.start();
        evt.preventDefault();
      })
    }  
  }
  // 实例化对象
  const slider = new Slider('my-slider')
  // 自动轮播
  slider.registerPlugins(pluginController, pluginPrevious, pluginNext)
  slider.start()

经过js的修改将控制流作为插件引入，但是这样插件的是否引入对html结构并没有影响。所以这里还需要改进插件，将组件和插件模板化。这里需要再设计了组件和插件API（如下图），在插件中加入了render和action方法：render方法根据传入render方法的数据data来构造html结构；action方法根据传入的组件对象component作为依赖注入，从而给组件添加事件和行为。
在这里插入图片描述
具体实现：

  • html代码：
<div id="my-slider" class="slider-list"></div>
  • js代码：
  class Slider {
    constructor(id, options={images: [], cycle: 3000}) { 
    // 构造函数的参数id为要轮播图组件的id,options为参数
      // 获取轮播图的容器元素
      this.container = document.getElementById(id)
      // 获取渲染组件的参数
      this.options = options
      this.container.innerHTML = this.render()
      // 获取轮播图中的图片列表
      this.items = this.container.querySelectorAll('.slider-list__item,.slider-list__item--selected')
      this.cycle = options.cycle || 3000
      this.slideTo(0)
    }
    /* Slider类的函数 */
    // 渲染html结构
    render () {
      const images = this.options.images
      const content = images.map(item => `
        <li class="slider-list__item">
          <img src="${item}"/>
        </li> 
      `.trim())
      return `<ul>${content.join('')}</ul>`
    }
    // 引入插件函数
    registerPlugins (...plugins) { 
      plugins.forEach(plugin => {
        const pluginContainer = document.createElement('div')
        pluginContainer.className = '.slider-list__plugin'
        // 渲染插件html结构
        pluginContainer.innerHTML = plugin.render(this.options.images)
        this.container.appendChild(pluginContainer)
        // 添加事件和行为
        plugin.action(this)
      })
    }
 	/*
 	......
 	此处省略了未改动的函数
	*/
  }
  /* 抽象出来的插件函数 */ 
  // 控制条
  const pluginController = {
    render (data) {
      return `
        <div class="slide-list__control">
          ${data.map(item=>`
            <span class="slide-list__control-buttons"></span>
          `).join('')}
        </div>
      `.trim()
    },
    action (component) {
      // 添加控制流
      const controller = component.container.querySelector('.slide-list__control')
      // 控制轮播图选中控制条显示对应图
      if (controller) {
        const buttons = controller.querySelectorAll('.slide-list__control-buttons,.slide-list__control-buttons--selected')
        controller.addEventListener('mouseover', event => {
          const idx = Array.from(buttons).indexOf(event.target)
          if (idx >= 0) {
          component.slideTo(idx)
          component.stop()
          }
        })
        controller.addEventListener('mouseout', event => {
          component.start()
        })
        // 滑动时修改控制条选中样式
        component.container.addEventListener('slide', event => {
          const idx = event.detail.index
          console.log('索引', idx, buttons)
          const selectedItem = controller.querySelector('.slide-list__control-buttons--selected')
          if(selectedItem) selectedItem.className = 'slide-list__control-buttons'
          if(buttons[idx]) buttons[idx].className = 'slide-list__control-buttons--selected'
        })
      }
    }
  }
  // 上一页按钮
  const pluginPrevious = {
    render (data) {
      return `
        <a class="slide-list__previous"></a>
      `.trim()
    },
    action (slider) {
      const previous = slider.container.querySelector('.slide-list__previous');
      if(previous){
        previous.addEventListener('click', evt => {
          slider.stop();
          slider.slidePrevious();
          slider.start();
          evt.preventDefault();
        })
      }  
    }
  }
  // 下一页按钮
  const pluginNext = {
    render (data) {
      return `
        <a class="slide-list__next"></a>
      `.trim()
    },
    action (slider) {
      const next = slider.container.querySelector('.slide-list__next');
      if(next){
        next.addEventListener('click', evt => {
          slider.stop();
          slider.slideNext();
          slider.start();
          evt.preventDefault();
        })
      }  
    }
  }
  const images = [
    'https://p5.ssl.qhimg.com/t0119c74624763dd070.png',
    'https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg',
    'https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg',
    'https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg'
  ]
  // 实例化对象
  const slider = new Slider('my-slider', {images})
  // 自动轮播
  slider.registerPlugins(pluginController, pluginPrevious, pluginNext)
  slider.start()

现在将插件模板化后，当不引用某个插件时界面上也不显示了。现在通过组件模型抽象来进一步改进，其类图结构如下。
在这里插入图片描述
具体实现：

  class Component {
    constructor(id, options = {data:[]}) {
      this.container = document.getElementById(id)
      this.options = options
      this.container.innerHTML = this.render(options.data)
    }
    registerPlugins(...plugins) {
      plugins.forEach(plugin => {
        const pluginContainer = document.createElement('div')
        pluginContainer.className = '.slider-list__plugin'
        // 渲染插件html结构
        pluginContainer.innerHTML = plugin.render(this.options.data)
        this.container.appendChild(pluginContainer)
        // 添加事件和行为
        plugin.action(this)
      })
    }
    render(data) {
      /* 抽象函数 */
      return ''
    }
  }
  class Slider extends Component {
    constructor(id, options={name: 'slider-list',data: [], cycle: 3000}) { 
      super(id,options)
      // 获取轮播图中的图片列表
      this.items = this.container.querySelectorAll('.slider-list__item,.slider-list__item--selected')
      this.cycle = options.cycle || 3000
      this.slideTo(0)
    }
    /* Slider类的方法 */
    // 渲染html结构
    render (data) {
      const content = data.map(item => `
        <li class="slider-list__item">
          <img src="${item}"/>
        </li> 
      `.trim())
      return `<ul>${content.join('')}</ul>`
    }
 	/*
 	......
 	此处省略了未改动的函数
	*/
  }
  /* 抽象出来的插件函数 */ 
  // 控制条
  const pluginController = {
    render (data) {
      return `
        <div class="slide-list__control">
          ${data.map(item=>`
            <span class="slide-list__control-buttons"></span>
          `).join('')}
        </div>
      `.trim()
    },
    action (component) {
      // 添加控制流
      const controller = component.container.querySelector('.slide-list__control')
      // 控制轮播图选中控制条显示对应图
      if (controller) {
        const buttons = controller.querySelectorAll('.slide-list__control-buttons,.slide-list__control-buttons--selected')
        controller.addEventListener('mouseover', event => {
          const idx = Array.from(buttons).indexOf(event.target)
          if (idx >= 0) {
          component.slideTo(idx)
          component.stop()
          }
        })
        controller.addEventListener('mouseout', event => {
          component.start()
        })
        // 滑动时修改控制条选中样式
        component.container.addEventListener('slide', event => {
          const idx = event.detail.index
          console.log('索引', idx, buttons)
          const selectedItem = controller.querySelector('.slide-list__control-buttons--selected')
          if(selectedItem) selectedItem.className = 'slide-list__control-buttons'
          if(buttons[idx]) buttons[idx].className = 'slide-list__control-buttons--selected'
        })
      }
    }
  }
  // 上一页按钮
  const pluginPrevious = {
    render (data) {
      return `
        <a class="slide-list__previous"></a>
      `.trim()
    },
    action (slider) {
      const previous = slider.container.querySelector('.slide-list__previous');
      if(previous){
        previous.addEventListener('click', evt => {
          slider.stop();
          slider.slidePrevious();
          slider.start();
          evt.preventDefault();
        })
      }  
    }
  }
  // 下一页按钮
  const pluginNext = {
    render (data) {
      return `
        <a class="slide-list__next"></a>
      `.trim()
    },
    action (slider) {
      const next = slider.container.querySelector('.slide-list__next');
      if(next){
        next.addEventListener('click', evt => {
          slider.stop();
          slider.slideNext();
          slider.start();
          evt.preventDefault();
        })
      }  
    }
  }
  const images = [
    'https://p5.ssl.qhimg.com/t0119c74624763dd070.png',
    'https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg',
    'https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg',
    'https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg'
  ]
  // 实例化对象
  const slider = new Slider('my-slider', {data:images})
  // 自动轮播
  slider.registerPlugins(pluginController, pluginPrevious, pluginNext)
  slider.start()
  </script>

通过一步步地拆解和抽象出来，减少他们之间的依赖关系，无论是组件还是插件都能独立出来。当我们的界面交互发生一小部分变化时我们只需要去修改所涉及到的插件就行，而不需要去修改整个组件代码结构，增加代码的可维护性。

Keen__
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ercharts一个页面能放几个_解决vue一个页面中复用同一个echarts组件的问题
weixin_39713833的博客
12-23 737
因为页面中要用echarts图表的地方比较多，所以封装了组件，方便复用，如图：我需要这样一个饼图，并且接下来在很多次地方要用到。直接复制官网的代码，再改改数据，需要用的时候直接拿来用。但是接下来出现了一个问题：如果我在同一个页面多次使用这个组件，图表将不能正常显示。分析了一下， echarts通过id获取对象// 基于准备好的dom，初始化echarts实例var myChart = echart...
Vaadin Web应用开发教程(27):UI组件-自定义组件
mmdev
08-22 178
Vaadin 支持自定义组件，典型的用法是将各种Vaadin内置的组件组合而成构成自定义组件。 创建自定义组件可以通过派生CustomComponent 然后调用setCompositionRoot 为自定义组件设置根容器。例如： class MyComposite extends CustomComponent { public MyComposite(String message)...
2024 热门前端 UI 组件库超全汇总！
最新发布
leyang0910的博客
07-03 2854
Radix UI 是一个开源的UI组件库，专为快速开发、易于维护和可访问性优化而设计。它是一个无样式的组件库，允许开发者完全控制组件的样式，同时提供了一套全面的UI组件和工具，帮助开发者构建美观、易于访问且具有高性能的应用。在前端开发的过程中，UI 组件库扮演着至关重要的角色。它们不仅助力开发者迅速构建页面原型，还能确保页面风格的统一性，从而显著提升开发效率。本文就来盘点那些前端领域广泛认可且常用的 UI 组件库，为开发者提供参考。图片。
80个高品质UI设计组件 Adobe XD
07-19
内含80个高品质的UI设计组件 Adobe XD设计专用 Adobe XD设计专用
UI组件：整体的结构设计、UI的设计
tiangej的专栏
03-10 2444
UI组件是构成UI界面的基本元素，具有相同基础结构和行为模式的多种UI组件在一起形成了组件库。一部分组件之间有一定的关联：类的继承，组合。 UI组件设计的本质就是：       1.   骨架设计：基础结构  +  行为模式       2.   外观设计：UI UI组件库中，骨架设计是相对不变的部分；而UI设计是丰富的，是多变的。 不变 + 多变 = 千变万化的UI ==
推荐几个精致的web UI框架及常用前端UI框架(1)，web开发进阶
2401_84093490的博客
04-06 1362
6.H-uiH-ui是轻量级前端框架，简单免费，兼容性好，适用于中国网站。官网地址：http://www.h-ui.net/7.WeuiweUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。官网地址：https://github.com/weui/weui8.layui。
NaiveUI前端UI框架，UI组件库的js文件资源下载
08-29
NaiveUI是一个基于Vue 3的现代化前端UI框架，它为开发者提供了丰富的组件库，以帮助构建具有专业外观和交互性的Web应用。该框架的核心特点包括其完整的功能集、高度可定制的主题以及对TypeScript的支持。 1. **Vue ...
LayUI 一款 Web UI 前端开发框架
10-26
4. **丰富的组件库**：LayUI提供了丰富的UI组件，包括但不限于导航、面包屑、表格、按钮、图标、弹窗、提示、轮播图、树形结构等。这些组件已经预设了样式和交互，只需简单调用就能实现复杂功能，大大提升了开发效率...
web前端UI集合
07-30
【web前端UI集合】是一个汇集了多种前端用户界面（UI）资源的压缩包，它包含了一系列用于构建现代网页应用的工具和库。这些资源对于开发者来说是宝贵的，可以帮助他们快速创建美观、交互性强且功能丰富的网页。让...
使用 Web Components 实现，遵循 Material You 设计规范的 Web 前端组件库
05-13
Web Components 是一种在 Web ...总的来说，Web Components 结合 Material You 设计规范的组件库，为现代 Web 开发提供了一种高效、可扩展的解决方案，让开发者能够更专注于业务逻辑，而无需过多关注 UI 的实现细节。
Layui前端UI框架压缩包
06-25
Layui是一款轻量级、灵活的前端UI框架，是一套采用自有模块规范编写的前端框架，适用于各种Web开发。Layui具有简洁的CSS框架和直观易用的JavaScript库，内置了丰富实用的UI组件，能够帮助开发人员快速构建现代化、...
安卓的UI组件，对话框的设计
01-15
安卓提供了丰富的对话框支持，它提供了如下4种常用的对话框。 AlertDialog:功能最丰富、实际应用最广泛的对话框。 ProgressDialog：进度对话框，这个对话框只是对进度条的包装。 DataPickerDialog：日期选择对话框，这个对话框只是对DataPicker的包装。 TimePickerDialog：时间选择对话框，这个对话框只是对TimePicker的包装。
Web界面设计规范（Web Form的UI设计）
04-11
为了使最终设计出来的Web界面风格一致化，开发者之间相互协作更轻松，特制定此Web界面设计规范！1. 此规范适合所有Web Form的UI设计
Web UI设计基础
莫邪莫急的博客
07-31 1万+
WebUI设计基础 User-Interface,用户界面，交互设计，界面设计 WUI，网页用户设计，以人体验即用户为主，传统以功能为主 分辨率 显示器分辨率，垂直方向和水平方向像素的个数，因而像素尺寸不固定的 5：4 4：3 16：10 16：9 自适应布局 Web基本分类 门户类：新浪、搜狐、网易、腾讯，信息杂而多 分类信息：58同城、赶集网，生活相关的 交易类：B...
UI素材|最全面的移动端 UI组件设计
awayaya1的博客
08-11 1101
什么是UI组件 UI 设计组件（UI KIT），直译过来就是用户界面成套元件，是界面设计常用控件或元件，「组」是设计元素的组合方式，「件」由不同的元件组成。 组件的优势 1、保证一致性 Consistency 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。 2、反馈用户 Feedback 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；页面反馈：操作后，通过页面元.
前端小白来说说vue 组件基础
weixin_45494667的博客
08-28 139
vue 组件基础 组件概念 组件的命名 注册组件 1. 组件的概念 web 中的组件就是页面中的各个组成部分，就好比电脑中的每一个元件，是独立的，可以快速进行替换的。 一个页面，正是由各种各样的组件组成的，例如：导航、列表、弹窗、按钮、下拉列表等。 组件化的特性 高内聚性，组件功能必须是完整的，如我要实现下拉菜单功能，那在下拉菜单这个组件中，就把下拉菜单所需要的所有功能全部实现。 低耦合度，通俗点说，代码独立不会和项目中的其他代码发生冲突。在实际工程中，我们经常会涉及到团队协作，传统按照业务线去编写代码
UI组件设计根本出发点
tiangej的专栏
01-29 1201
1. 什么人使用UI组件      Web应用技术开发者（非艺术设计师）   2.  他们如何使用UI组件      由于缺乏相应的设计技能，99%的情况下，他们被分派专注实现业务逻辑。与外观相关的，他们一般会涉及到：      设置宽高，调整位置（xy坐标），设置有效无效属性。      * 遗憾的是，在企业WebApp领域，绝大多数的客户只注重功能设计，很少投入到UI/UE设计（艺
创新实训博客（8）——前端界面设计（基本部分）
一位不愿意透露姓名的热心网友
06-11 381
初步的界面设计构想，后期可能会根据实际需要进行一定的修改。 复用组件（1）—Tip-Item 复用组件（2）—Tag-Item 复用组件（3）—Blog-Item 复用组件（4）—Blog-Detail-Item 复用组件（5）—Author-Detail-Item 用户登录界面 这部分比较简单，就是一个用户名输入框和密码输入框 然后登录按钮是向后端发请求，返回对应的信息然后进行处理 这里点击用户名这个列表后，会展示一个下拉列表，记录着曾经使用过的用户名 用户注册
学会Web UI框架--Bootstrap，快速搭建出漂亮的前端界面
热门推荐
景天科技苑
03-10 1万+
bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。 Bootstrap诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架。 是一个用于快速开发Web应用程序和网站的前端框架。 Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷。
web前端工业组态组件
09-13
对于工业组态的前端开发，通常会使用一些特定的组件库来满足需求。以下是几个常见的组态组件库： 1. Ant Design：Ant Design 是一套由蚂蚁金服开发的企业级 UI 设计语言和 React 实现的组件库。它提供了一系列用于构建工业组态应用的常用组件，如按钮、表格、图表等，并且有丰富的主题样式可供选择。 2. Element UI：Element UI 是一套基于 Vue.js 的组件库，也适用于工业组态开发。它提供了一系列易于使用和定制的组件，如表单、菜单、弹窗等，并且支持国际化和响应式设计。 3. Kendo UI：Kendo UI 是由 Telerik 开发的一套跨平台的商业级 UI 组件库，支持多种框架，包括 jQuery、Angular 和 React。它提供了丰富的图表、数据表格、日历等组件，适用于复杂的工业组态应用。 4. PrimeReact：PrimeReact 是针对 React 的一套开源 UI 组件库，适用于 Web 和移动端开发。它包含了许多常用的工业组态组件，如面板、时间轴、树形控件等，并且提供了灵活的主题和布局选项。 这些组件库都有完善的文档和示例代码，可以根据具体需求选择适合的组件库进行开发。同时，你也可以根据项目需求自定义开发组态组件，以满足特定的业务需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值