elgis-ui-component

为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践。 除了官方组件，我们也提供了社区精选组件作为必要的补充，另外如果您是内网用户，欢迎 尝试使用。

特性

• 提炼自企业级中后台产品的交互语言和视觉风格。
• 开箱即用的高质量 Vue 组件。
• 完美支持按需引入

支持环境

• 现代浏览器。1.x 版本支持 IE 9+（需要 polyfills）
• 支持服务端渲染。
• Electron
• 支持 Vue 3

Install

$ npm install elgis-ui-component

[elgis-ui-component Api 文档]

支持

+ 支持自定义样式

使用 elgis-ui-component/lib/theme-customize 可以自定义配置样式。

自定义颜色配置

:root {
	--default-font-family: 'Arial';
	// Page color
	// 主色调
	--default-color: #f5222d;
	// hover
	--default-active-color: #f5222d;
	// hover background
	--default-active-background-color: rgba(245, 34, 45, 0.06);
	// 边框颜色
	--default-border-color: #d9d9d9;
	// 字体颜色
	--default-font-color: #333;
	// 文字描述色
	--describe-font-color: #999;
	// 默认边线颜色
	--default-boder-color: #dcdcdc;
	// 默认背景色颜色
	--default-background-color: #fafafa;
	// 头部投影
	--default-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	// 禁用
	--default-disabled-color: #999;
	--default-disabled-background: #fafafa;
	--default-disabled-border-color: #dcdcdc;

	// 国际警告色组
	--btn-success-color: #67c23a;
	--btn-primary-color: #3ca2e6;
	--btn-warning-color: #e6a23c;
	--btn-info-color: #909399;
	--btn-danger-color: #f56c6c;

	// 弹窗蒙层背景色
	--model-mask: #00000073;
	// 弹窗背景色
	--model-background-color: white;
	// 弹窗蒙层shadow
	--model-shadow: 0 0 26px rgba(0, 0, 0, 0.15);
}

自定义尺寸配置

:root {
	// page commom size
	// 默认字体大小
	--default-font-size: 14px;
	// 默认边框大小
	--default-boder-size: 1px;
	// 描述及提示文字大小
	--default-prompt-font-size: 12px;
	// 小标题文字大小
	--min-title-size: 14px;
	// 一遍标题文字大小
	--default-title-size: 16px;
	// h5文字大小
	--default-h5-size: 14px;
	// h4文字大小
	--default-h4-size: 16px;
	// h3文字大小
	--default-h3-size: 20px;
	// h2文字大小
	--default-h2-size: 24px;
	// h1文字大小
	--default-h1-size: 38px;
	// 大标题文字大小
	--max-title-size: 20px;
	// h5文字大小行间距
	--default-h5-height: 22px;
	// h4文字大小行间距
	--default-h4-height: 24px;
	// h3文字大小行间距
	--default-h3-height: 28px;
	// h2文字大小行间距
	--default-h2-height: 32px;
	// h1文字大小行间距
	--default-h1-height: 46px;
	// 行间距
	--default-line-height: 1.777777777;
	// 间距
	--default-spacing: 15px;
	// 边角
	--default-radius: 4px;
	// 边线宽
	--default-border-width: 1px;
	// 边线样式
	--default-border-style: solid;

	// 图标高宽
	--default-icon-size: 32px;
	// label 高度
	--default-label-line-height: 38px;
}

@import 'elgis-ui-component/lib/theme-customize/index.css';

+ 支持默认样式

使用 elgis-ui-component/lib/theme-default 可以直接使用默认样式。

@import 'elgis-ui-component/lib/theme-default/index.css';