周大福网站建设主要工作,电子商务网站建设规划方案,wordpress进入站点,多个微信管理系统文章目录 前言一、Icon 图标1.1 作用1.2 使用方法1.3 图标集合 二、Button 按钮2.1 基础用法2.2 禁用状态2.3 文字按钮2.4 图标按钮2.5 按钮组2.6 加载中2.7 不同尺寸 总结 前言
在前端开发中#xff0c;界面的设计和交互是至关重要的一部分。一个直观、易用的界面往往离不开… 文章目录 前言一、Icon 图标1.1 作用1.2 使用方法1.3 图标集合 二、Button 按钮2.1 基础用法2.2 禁用状态2.3 文字按钮2.4 图标按钮2.5 按钮组2.6 加载中2.7 不同尺寸 总结 前言
在前端开发中界面的设计和交互是至关重要的一部分。一个直观、易用的界面往往离不开各种组件的运用。本文将聚焦于Element-ui中的两个常用组件——Icon图标和Button按钮分别介绍它们的基本用法和一些实用技巧。Icon图标为界面添加了更多的元素而Button按钮则是用户与页面进行交互的重要媒介通过深入理解它们我们可以更好地打造出美观、实用的前端界面。 一、Icon 图标
1.1 作用
提供了一套常用的图标集合。
1.2 使用方法
直接通过设置类名为 el-icon-iconName 来使用即可。例如
i classel-icon-edit/i
i classel-icon-share/i
i classel-icon-delete/i
el-button typeprimary iconel-icon-search搜索/el-button我们只需要使用i标签class为图标名称即可.如果你使用的是i标签 如果是其他则使用icon属性
1.3 图标集合
图标集合如下
el-icon-platform-eleme
el-icon-eleme
el-icon-delete-solid
el-icon-delete
el-icon-s-tools
el-icon-setting
el-icon-user-solid
el-icon-user
el-icon-phone
el-icon-phone-outline
el-icon-more
el-icon-more-outline
el-icon-star-on
el-icon-star-off
el-icon-s-goods
el-icon-goods
el-icon-warning
el-icon-warning-outline
el-icon-question
el-icon-info
el-icon-remove
el-icon-circle-plus
el-icon-success
el-icon-error
el-icon-zoom-in
el-icon-zoom-out
el-icon-remove-outline
el-icon-circle-plus-outline
el-icon-circle-check
el-icon-circle-close
el-icon-s-help
el-icon-help
el-icon-minus
el-icon-plus
el-icon-check
el-icon-close
el-icon-picture
el-icon-picture-outline
el-icon-picture-outline-round
el-icon-upload
el-icon-upload2
el-icon-download
el-icon-camera-solid
el-icon-camera
el-icon-video-camera-solid
el-icon-video-camera
el-icon-message-solid
el-icon-bell
el-icon-s-cooperation
el-icon-s-order
el-icon-s-platform
el-icon-s-fold
el-icon-s-unfold
el-icon-s-operation
el-icon-s-promotion
el-icon-s-home
el-icon-s-release
el-icon-s-ticket
el-icon-s-management
el-icon-s-open
el-icon-s-shop
el-icon-s-marketing
el-icon-s-flag
el-icon-s-comment
el-icon-s-finance
el-icon-s-claim
el-icon-s-custom
el-icon-s-opportunity
el-icon-s-data
el-icon-s-check
el-icon-s-grid
el-icon-menu
el-icon-share
el-icon-d-caret
el-icon-caret-left
el-icon-caret-right
el-icon-caret-bottom
el-icon-caret-top
el-icon-bottom-left
el-icon-bottom-right
el-icon-back
el-icon-right
el-icon-bottom
el-icon-top
el-icon-top-left
el-icon-top-right
el-icon-arrow-left
el-icon-arrow-right
el-icon-arrow-down
el-icon-arrow-up
el-icon-d-arrow-left
el-icon-d-arrow-right
el-icon-video-pause
el-icon-video-play
el-icon-refresh
el-icon-refresh-right
el-icon-refresh-left
el-icon-finished
el-icon-sort
el-icon-sort-up
el-icon-sort-down
el-icon-rank
el-icon-loading
el-icon-view
el-icon-c-scale-to-original
el-icon-date
el-icon-edit
el-icon-edit-outline
el-icon-folder
el-icon-folder-opened
el-icon-folder-add
el-icon-folder-remove
el-icon-folder-delete
el-icon-folder-checked
el-icon-tickets
el-icon-document-remove
el-icon-document-delete
el-icon-document-copy
el-icon-document-checked
el-icon-document
el-icon-document-add
el-icon-printer
el-icon-paperclip
el-icon-takeaway-box
el-icon-search
el-icon-monitor
el-icon-attract
el-icon-mobile
el-icon-scissors
el-icon-umbrella
el-icon-headset
el-icon-brush
el-icon-mouse
el-icon-coordinate
el-icon-magic-stick
el-icon-reading
el-icon-data-line
el-icon-data-board
el-icon-pie-chart
el-icon-data-analysis
el-icon-collection-tag
el-icon-film
el-icon-suitcase
el-icon-suitcase-1
el-icon-receiving
el-icon-collection
el-icon-files
el-icon-notebook-1
el-icon-notebook-2
el-icon-toilet-paper
el-icon-office-building
el-icon-school
el-icon-table-lamp
el-icon-house
el-icon-no-smoking
el-icon-smoking
el-icon-shopping-cart-full
el-icon-shopping-cart-1
el-icon-shopping-cart-2
el-icon-shopping-bag-1
el-icon-shopping-bag-2
el-icon-sold-out
el-icon-sell
el-icon-present
el-icon-box
el-icon-bank-card
el-icon-money
el-icon-coin
el-icon-wallet
el-icon-discount
el-icon-price-tag
el-icon-news
el-icon-guide
el-icon-male
el-icon-female
el-icon-thumb
el-icon-cpu
el-icon-link
el-icon-connection
el-icon-open
el-icon-turn-off
el-icon-set-up
el-icon-chat-round
el-icon-chat-line-round
el-icon-chat-square
el-icon-chat-dot-round
el-icon-chat-dot-square
el-icon-chat-line-square
el-icon-message
el-icon-postcard
el-icon-position
el-icon-turn-off-microphone
el-icon-microphone
el-icon-close-notification
el-icon-bangzhu
el-icon-time
el-icon-odometer
el-icon-crop
el-icon-aim
el-icon-switch-button
el-icon-full-screen
el-icon-copy-document
el-icon-mic
el-icon-stopwatch
el-icon-medal-1
el-icon-medal
el-icon-trophy
el-icon-trophy-1
el-icon-first-aid-kit
el-icon-discover
el-icon-place
el-icon-location
el-icon-location-outline
el-icon-location-information
el-icon-add-location
el-icon-delete-location
el-icon-map-location
el-icon-alarm-clock
el-icon-timer
el-icon-watch-1
el-icon-watch
el-icon-lock
el-icon-unlock
el-icon-key
el-icon-service
el-icon-mobile-phone
el-icon-bicycle
el-icon-truck
el-icon-ship
el-icon-basketball
el-icon-football
el-icon-soccer
el-icon-baseball
el-icon-wind-power
el-icon-light-rain
el-icon-lightning
el-icon-heavy-rain
el-icon-sunrise
el-icon-sunrise-1
el-icon-sunset
el-icon-sunny
el-icon-cloudy
el-icon-partly-cloudy
el-icon-cloudy-and-sunny
el-icon-moon
el-icon-moon-night
el-icon-dish
el-icon-dish-1
el-icon-food
el-icon-chicken
el-icon-fork-spoon
el-icon-knife-fork
el-icon-burger
el-icon-tableware
el-icon-sugar
el-icon-dessert
el-icon-ice-cream
el-icon-hot-water
el-icon-water-cup
el-icon-coffee-cup
el-icon-cold-drink
el-icon-goblet
el-icon-goblet-full
el-icon-goblet-square
el-icon-goblet-square-full
el-icon-refrigerator
el-icon-grape
el-icon-watermelon
el-icon-cherry
el-icon-apple
el-icon-pear
el-icon-orange
el-icon-coffee
el-icon-ice-tea
el-icon-ice-drink
el-icon-milk-tea
el-icon-potato-strips
el-icon-lollipop
el-icon-ice-cream-square
el-icon-ice-cream-round其效果如下
二、Button 按钮
常用的操作按钮。
2.1 基础用法
基础的按钮用法。
使用type、plain、round和circle属性来定义 Button 的样式。 这些属性的意义如下
参数 说明 类型 可选值 默认值 type 类型 string primary / success / warning / danger / info / text — plain 是否朴素按钮 boolean — false round 是否圆角按钮 boolean — false circle 是否圆形按钮 boolean — false
el-rowel-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typeinfo信息按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger危险按钮/el-button
/el-rowel-rowel-button plain朴素按钮/el-buttonel-button typeprimary plain主要按钮/el-buttonel-button typesuccess plain成功按钮/el-buttonel-button typeinfo plain信息按钮/el-buttonel-button typewarning plain警告按钮/el-buttonel-button typedanger plain危险按钮/el-button
/el-rowel-rowel-button round圆角按钮/el-buttonel-button typeprimary round主要按钮/el-buttonel-button typesuccess round成功按钮/el-buttonel-button typeinfo round信息按钮/el-buttonel-button typewarning round警告按钮/el-buttonel-button typedanger round危险按钮/el-button
/el-rowel-rowel-button iconel-icon-search circle/el-buttonel-button typeprimary iconel-icon-edit circle/el-buttonel-button typesuccess iconel-icon-check circle/el-buttonel-button typeinfo iconel-icon-message circle/el-buttonel-button typewarning iconel-icon-star-off circle/el-buttonel-button typedanger iconel-icon-delete circle/el-button
/el-row2.2 禁用状态
按钮不可用状态。
el-rowel-button disabled默认按钮/el-buttonel-button typeprimary disabled主要按钮/el-buttonel-button typesuccess disabled成功按钮/el-buttonel-button typeinfo disabled信息按钮/el-buttonel-button typewarning disabled警告按钮/el-buttonel-button typedanger disabled危险按钮/el-button
/el-rowel-rowel-button plain disabled朴素按钮/el-buttonel-button typeprimary plain disabled主要按钮/el-buttonel-button typesuccess plain disabled成功按钮/el-buttonel-button typeinfo plain disabled信息按钮/el-buttonel-button typewarning plain disabled警告按钮/el-buttonel-button typedanger plain disabled危险按钮/el-button
/el-row2.3 文字按钮
没有边框和背景色的按钮。
el-button typetext文字按钮/el-button
el-button typetext disabled文字按钮/el-button2.4 图标按钮
带图标的按钮可增强辨识度有文字或节省空间无文字。
设置icon属性即可icon 的列表可以参考 Element 的 icon 组件也可以设置在文字右边的 icon 只要使用i标签即可可以使用自定义图标。
el-button typeprimary iconel-icon-edit/el-button
el-button typeprimary iconel-icon-share/el-button
el-button typeprimary iconel-icon-delete/el-button
el-button typeprimary iconel-icon-search搜索/el-button
el-button typeprimary上传i classel-icon-upload el-icon--right/i/el-button2.5 按钮组
以按钮组的方式出现常用于多项类似操作。
使用el-button-group标签来嵌套你的按钮。
el-button-groupel-button typeprimary iconel-icon-arrow-left上一页/el-buttonel-button typeprimary下一页i classel-icon-arrow-right el-icon--right/i/el-button
/el-button-group
el-button-groupel-button typeprimary iconel-icon-edit/el-buttonel-button typeprimary iconel-icon-share/el-buttonel-button typeprimary iconel-icon-delete/el-button
/el-button-group2.6 加载中
点击按钮后进行数据加载操作在按钮上显示加载状态。
要设置为 loading 状态只要设置loading属性为true即可。
el-button typeprimary :loadingtrue加载中/el-button2.7 不同尺寸
Button 组件提供除了默认值以外的三种尺寸可以在不同场景下选择合适的按钮尺寸。 额外的尺寸medium、small、mini通过设置size属性来配置它们。
el-rowel-button默认按钮/el-buttonel-button sizemedium中等按钮/el-buttonel-button sizesmall小型按钮/el-buttonel-button sizemini超小按钮/el-button
/el-row
el-rowel-button round默认按钮/el-buttonel-button sizemedium round中等按钮/el-buttonel-button sizesmall round小型按钮/el-buttonel-button sizemini round超小按钮/el-button
/el-row总结
在本文中我们深入了解了Element-ui中的Icon图标和Button按钮的基本用法和实用技巧。Icon图标为页面添加了更多的视觉元素使得界面更加生动而Button按钮则是用户与页面互动的纽带通过丰富的配置选项我们能够定制出符合项目需求的按钮样式。在实际项目中熟练掌握这两个组件的用法将有助于提升前端界面的设计水平为用户提供更好的使用体验。希望本文能够为你在Element-ui的使用过程中提供一些有益的参考。
