diff --git "a/23\346\275\230\350\276\211\350\276\276/20230508-\350\276\271\346\241\206\345\222\214\345\270\203\345\261\200.md" "b/23\346\275\230\350\276\211\350\276\276/20230508-\350\276\271\346\241\206\345\222\214\345\270\203\345\261\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..d22d957086b1038fb849e163d583f0b15ca67205 --- /dev/null +++ "b/23\346\275\230\350\276\211\350\276\276/20230508-\350\276\271\346\241\206\345\222\214\345\270\203\345\261\200.md" @@ -0,0 +1,199 @@ +Border 边框# +我们对边框进行统一规范，可用于按钮、卡片、弹窗等组件里。 + +边框样式# +我们提供了以下几种边框样式，以供选择。 + +Name Thickness Demo +Solid 1px +Dashed 2px + +圆角# +我们提供了以下几种圆角样式，以供选择。 + +No Radius +border-radius: 0px +Small Radius +border-radius: 2px +Large Radius +border-radius: 4px +Round Radius +border-radius: 20px + +阴影# +我们提供了以下几种投影样式，以供选择。 + +Basic Shadow +--el-box-shadow +Light Shadow +--el-box-shadow-light +Lighter Shadow +--el-box-shadow-lighter +Dark Shadow +--el-box-shadow-dark + +Container 布局容器# +用于布局的容器组件，方便快速搭建页面的基本结构： + +：外层容器。 当子元素中包含 或 时，全部子元素会垂直上下排列， 否则会水平左右排列。 + +：顶栏容器。 + +：侧边栏容器。 + +：主要区域容器。 + +：底栏容器。 + +TIP + +以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。 此外， 的直接子元素必须是后四个组件中的一个或多个。 后四个组件的亲元素必须是一个 + +常见页面布局# +Header +Main + +Header +Main +Footer + +Aside +Main + +Header +Aside +Main + +Header +Aside +Main +Footer + +Aside +Header +Main + +Aside +Header +Main +Footer + +例子# +Navigator One +Group 1 +Option 1 +Option 2 +Group 2 +Option 3 +Option4 +Navigator Two +Navigator Three +Group 1 +Option 1 +Option 2 +Group 2 +Option 3 +Option 4 +Tom +2016-05-02 +Tom +No. 189, Grove St, Los Angeles +2016-05-02 +Tom +No. 189, Grove St, Los Angeles +2016-05-02 +Tom +No. 189, Grove St, Los Angeles +2016-05-02 +Tom +No. 189, Grove St, Los Angeles +2016-05-02 +Tom +No. 189, Grove St, Los Angeles +2016-05-02 +Tom +No. 189, Grove St, Los Angeles +2016-05-02 +Tom +No. 189, Grove St, Los Angeles +2016-05-02 +Tom +No. 189, Grove St, Los Angeles +2016-05-02 +Tom +No. 189, Grove St, Los Angeles +2016-05-02 +Tom +No. 189, Grove St, Los Angeles +2016-05-02 +Tom +No. 189, Grove St, Los Angeles +2016-05-02 +Tom +No. 189, Grove St, Los Angeles +2016-05-02 +Tom +No. 189, Grove St, Los Angeles +2016-05-02 +Tom +No. 189, Grove St, Los Angeles +2016-05-02 +Tom +No. 189, Grove St, Los Angeles +2016-05-02 +Tom +No. 189, Grove St, Los Angeles +2016-05-02 +Tom +No. 189, Grove St, Los Angeles +2016-05-02 +Tom +No. 189, Grove St, Los Angeles +2016-05-02 +Tom +No. 189, Grove St, Los Angeles +2016-05-02 +Tom +No. 189, Grove St, Los Angeles + +Container API# +Container Attributes# +属性名 说明 类型 默认值 +direction 子元素的排列方向 +enum +子元素中有 el-header 或 el-footer 时为 vertical，否则为 horizontal +Container Slots# +插槽名 说明 子标签 +default 自定义默认内容 Container / Header / Aside / Main / Footer +Header API# +Header Attributes# +属性名 说明 类型 默认值 +height 顶栏高度 +string +60px +Header Slots# +插槽名 说明 +default 自定义默认内容 +Aside API# +Aside Attributes# +属性名 说明 类型 默认值 +width 侧边栏宽度 +string +300px +Aside Slots# +插槽名 说明 +default 自定义默认内容 +Main API# +Main Slots# +插槽名 说明 +default 自定义默认内容 +Footer API# +Footer Attributes# +属性名 说明 类型 默认值 +height 底栏高度 +string +60px +Footer Slots# +插槽名 说明 +default 自定义默认内容 +源代码 \ No newline at end of file diff --git "a/23\346\275\230\350\276\211\350\276\276/20230509-Icon\345\233\276\346\240\207.md" "b/23\346\275\230\350\276\211\350\276\276/20230509-Icon\345\233\276\346\240\207.md" new file mode 100644 index 0000000000000000000000000000000000000000..db38400f162c9fff69ffded7ccf960b6b703d6d9 --- /dev/null +++ "b/23\346\275\230\350\276\211\350\276\276/20230509-Icon\345\233\276\346\240\207.md" @@ -0,0 +1,429 @@ +Icon 图标# +Element Plus 提供了一套常用的图标集合。 + +使用图标# +如果你想像用例一样直接使用，你需要全局注册组件，才能够直接在项目里使用。 + +如若需要查看所有可用的 SVG 图标请查阅 @element-plus/icons-vue@1.x@element-plus/icons-vue@latest 和有关 Icon Collection 的源码 element-plus-icons + +安装# +使用包管理器# +# 选择一个你喜欢的包管理器 + +# NPM +$ npm install @element-plus/icons-vue +# Yarn +$ yarn add @element-plus/icons-vue +# pnpm +$ pnpm install @element-plus/icons-vue +注册所有图标# +您需要从 @element-plus/icons-vue 中导入所有图标并进行全局注册。 + +// main.ts + +// 如果您正在使用CDN引入，请删除下面一行。 +import * as ElementPlusIconsVue from '@element-plus/icons-vue' + +const app = createApp(App) +for (const [key, component] of Object.entries(ElementPlusIconsVue)) { + app.component(key, component) +} +您也可以参考 此模板。 + +浏览器直接引入# +直接通过浏览器的 HTML 标签导入 Element Plus，然后就可以使用全局变量 ElementPlusIconsVue了。 + +根据不同的 CDN 提供商有不同的引入方式， 根据不同的 CDN 提供商有不同的引入方式， 我们在这里以 unpkg 和 jsDelivr 举例。 你也可以使用其它的 CDN 供应商。 + +使用 unpkg# + +使用 jsDelivr# + +TIP + +我们建议使用 CDN 引入 Element Plus 的用户在链接地址上锁定版本，以免将来 Element Plus 升级时受到非兼容性更新的影响。 锁定版本的方法请查看 unpkg.com。 + +自动导入# +使用 unplugin-icons 和 unplugin-auto-import 从 iconify 中自动导入任何图标集。 您可以参考此模板。 + +基础用法# +WARNING + +因为 HTML 标准已经定义了一个名为 menu 的标签， 如果您注册的 menu 无法正常工作，您需要使用别名来渲染图标。 + + + +结合 el-icon 使用# +el-icon 为 raw SVG 图标提供额外的属性, 提供的详细属性请继续阅读。 + + +通过添加额外的类名 is-loading，你的图标就可以在 2 秒内旋转 360 度，当然你也可以自己改写想要的动画。 + +直接使用 SVG 图标# + +图标集合# +TIP + +只要你安装了 @element-plus/icons，就可以在任意版本里使用 SVG 图标。 + +您可以点击图标复制代码。 + + +Copy SVG content +Copy icon code +System +Plus +Minus +CirclePlus +Search +Female +Male +Aim +House +FullScreen +Loading +Link +Service +Pointer +Star +Notification +Connection +ChatDotRound +Setting +Clock +Position +Discount +Odometer +ChatSquare +ChatRound +ChatLineRound +ChatLineSquare +ChatDotSquare +View +Hide +Unlock +Lock +RefreshRight +RefreshLeft +Refresh +Bell +MuteNotification +User +Check +CircleCheck +Warning +CircleClose +Close +PieChart +More +Compass +Filter +Switch +Select +SemiSelect +CloseBold +EditPen +Edit +Message +MessageBox +TurnOff +Finished +Delete +Crop +SwitchButton +Operation +Open +Remove +ZoomOut +ZoomIn +InfoFilled +CircleCheckFilled +SuccessFilled +WarningFilled +CircleCloseFilled +QuestionFilled +WarnTriangleFilled +UserFilled +MoreFilled +Tools +HomeFilled +Menu +UploadFilled +Avatar +HelpFilled +Share +StarFilled +Comment +Histogram +Grid +Promotion +DeleteFilled +RemoveFilled +CirclePlusFilled +Arrow +ArrowLeft +ArrowUp +ArrowRight +ArrowDown +ArrowLeftBold +ArrowUpBold +ArrowRightBold +ArrowDownBold +DArrowRight +DArrowLeft +Download +Upload +Top +Bottom +Back +Right +TopRight +TopLeft +BottomRight +BottomLeft +Sort +SortUp +SortDown +Rank +CaretLeft +CaretTop +CaretRight +CaretBottom +DCaret +Expand +Fold +Document +DocumentAdd +Document +Notebook +Tickets +Memo +Collection +Postcard +ScaleToOriginal +SetUp +DocumentDelete +DocumentChecked +DataBoard +DataAnalysis +CopyDocument +FolderChecked +Files +Folder +FolderDelete +FolderRemove +FolderOpened +DocumentCopy +DocumentRemove +FolderAdd +FirstAidKit +Reading +DataLine +Management +Checked +Ticket +Failed +TrendCharts +List +Media +Microphone +Mute +Mic +VideoPause +VideoCamera +VideoPlay +Headset +Monitor +Film +Camera +Picture +PictureRounded +Iphone +Cellphone +VideoCameraFilled +PictureFilled +Platform +CameraFilled +BellFilled +Traffic +Location +LocationInformation +DeleteLocation +Coordinate +Bicycle +OfficeBuilding +School +Guide +AddLocation +MapLocation +Place +LocationFilled +Van +Food +Watermelon +Pear +NoSmoking +Smoking +Mug +GobletSquareFull +GobletFull +KnifeFork +Sugar +Bowl +MilkTea +Lollipop +Coffee +Chicken +Dish +IceTea +ColdDrink +CoffeeCup +DishDot +IceDrink +IceCream +Dessert +IceCreamSquare +ForkSpoon +IceCreamRound +Food +HotWater +Grape +Fries +Apple +Burger +Goblet +GobletSquare +Orange +Cherry +Items +Printer +Calendar +CreditCard +Box +Money +Refrigerator +Cpu +Football +Brush +Suitcase +SuitcaseLine +Umbrella +AlarmClock +Medal +GoldMedal +Present +Mouse +Watch +QuartzWatch +Magnet +Help +Soccer +ToiletPaper +ReadingLamp +Paperclip +MagicStick +Basketball +Baseball +Coin +Goods +Sell +SoldOut +Key +ShoppingCart +ShoppingCartFull +ShoppingTrolley +Phone +Scissor +Handbag +ShoppingBag +Trophy +TrophyBase +Stopwatch +Timer +CollectionTag +TakeawayBox +PriceTag +Wallet +Opportunity +PhoneFilled +WalletFilled +GoodsFilled +Flag +BrushFilled +Briefcase +Stamp +Weather +Sunrise +Sunny +Ship +MostlyCloudy +PartlyCloudy +Sunset +Drizzling +Pouring +Cloudy +Moon +MoonNight +Lightning +Other +ChromeFilled +Eleme +ElemeFilled +ElementPlus +Shop +SwitchFilled +WindPower +API# +Attributes# +属性名 说明 类型 默认值 +color svg 的 fill 颜色 +string +继承颜色 +size SVG 图标的大小，size x size +number + / +string +继承字体大小 +Slots# +名称 说明 +default 自定义默认内容 \ No newline at end of file diff --git "a/23\346\275\230\350\276\211\350\276\276/20230511-Layout\345\270\203\345\261\200.md" "b/23\346\275\230\350\276\211\350\276\276/20230511-Layout\345\270\203\345\261\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..13f81825dfb81649f44e103c98c1b4e9c0079ec1 --- /dev/null +++ "b/23\346\275\230\350\276\211\350\276\276/20230511-Layout\345\270\203\345\261\200.md" @@ -0,0 +1,122 @@ +Layout 布局# +通过基础的 24 分栏，迅速简便地创建布局。 + +TIP + +组件默认使用 Flex 布局，不需要手动设置 type="flex"。 + +请注意父容器避免使用 inline 相关样式，会导致组件宽度不能撑满。 + +基础布局# +使用列创建基础网格布局。 + +通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。 + + +分栏间隔# +支持列间距。 + +行提供 gutter 属性来指定列之间的间距，其默认值为0。 + + +混合布局# +通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。 + + +列偏移# +您可以指定列偏移量。 + +通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。 + + +对齐方式# +默认使用 flex 布局来对分栏进行灵活的对齐。 + +您可以通过justify 属性来定义子元素的排版方式，其取值为start、center、end、space-between、space-around或space-evenly。 + + +响应式布局# +参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。 + + +基于断点的隐藏类# +Element Plus 额外提供了一系列类名，用于在某些条件下隐藏元素。 这些类名可以添加在任何 DOM 元素或自定义组件上。 如果需要，请自行引入以下文件： + +import 'element-plus/theme-chalk/display.css' +这些类名为： + +hidden-xs-only - 当视口在 xs 尺寸时隐藏 +hidden-sm-only - 当视口在 sm 尺寸时隐藏 +hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏 +hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏 +hidden-md-only - 当视口在 md 尺寸时隐藏 +hidden-md-and-down - 当视口在 md 及以下尺寸时隐藏 +hidden-md-and-up - 当视口在 md 及以上尺寸时隐藏 +hidden-lg-only - 当视口在 lg 尺寸时隐藏 +hidden-lg-and-down - 当视口在 lg 及以下尺寸时隐藏 +hidden-lg-and-up - 当视口在 lg 及以上尺寸时隐藏 +hidden-xl-only - 当视口在 xl 尺寸时隐藏 +Row API# +Row Attributes# +属性名 说明 类型 默认值 +gutter 栅格间隔 +number +0 +justify flex 布局下的水平排列方式 +enum +start +align flex 布局下的垂直排列方式 +enum +top +tag 自定义元素标签 +string +div +Row Slots# +插槽名 说明 子标签 +default 自定义默认内容 Col +Col API# +Col Attributes# +属性名 说明 类型 默认值 +span 栅格占据的列数 +number +24 +offset 栅格左侧的间隔格数 +number +0 +push 栅格向右移动格数 +number +0 +pull 栅格向左移动格数 +number +0 +xs <768px 响应式栅格数或者栅格属性对象 +number + / +object +— +sm ≥768px 响应式栅格数或者栅格属性对象 +number + / +object +— +md ≥992px 响应式栅格数或者栅格属性对象 +number + / +object +— +lg ≥1200px 响应式栅格数或者栅格属性对象 +number + / +object +— +xl ≥1920px 响应式栅格数或者栅格属性对象 +number + / +object +— +tag 自定义元素标签 +string +div +Col Slots# +插槽名 说明 +default 自定义默认内容 \ No newline at end of file