tessl/npm-element-ui
A comprehensive Vue.js 2.0 component library providing 90 UI components for building modern web applications
—
Pending
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
layout.mddocs/
Layout System
Flexible layout components for creating responsive grid systems and application layouts with containers, rows, columns, and semantic layout elements.
Capabilities
Grid System
24-column responsive grid system for creating flexible layouts with responsive design support.
/**
* Row component for grid layout container
*/
const Row = Vue.component;
interface RowProps {
gutter?: number;
type?: 'flex';
justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between';
align?: 'top' | 'middle' | 'bottom';
tag?: string;
}
/**
* Column component for grid layout items
*/
const Col = Vue.component;
interface ColProps {
span?: number;
offset?: number;
push?: number;
pull?: number;
xs?: number | object;
sm?: number | object;
md?: number | object;
lg?: number | object;
xl?: number | object;
tag?: string;
}
// Responsive breakpoint configuration
interface ResponsiveConfig {
span?: number;
offset?: number;
push?: number;
pull?: number;
}Usage Examples:
// Basic grid
<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
// Grid with gutter
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
// Offset and responsive
<el-row>
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
// Responsive design
<el-row :gutter="10">
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
<div class="grid-content bg-purple"></div>
</el-col>
</el-row>Flex Layout
Flexbox-based layout system for advanced alignment and distribution control.
/**
* Flex row with advanced alignment options
*/
interface FlexRowProps extends RowProps {
type: 'flex';
justify: 'start' | 'end' | 'center' | 'space-around' | 'space-between';
align: 'top' | 'middle' | 'bottom';
}Usage Examples:
// Flex alignment
<el-row type="flex" justify="center">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
// Vertical alignment
<el-row type="flex" justify="space-around" align="middle" style="height: 100px;">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light" style="height: 50px;"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>Container Layout
Semantic layout containers for structuring application layouts with header, sidebar, main content, and footer areas.
/**
* Main container wrapper
*/
const Container = Vue.component;
interface ContainerProps {
direction?: 'horizontal' | 'vertical';
}
/**
* Header container for top navigation and branding
*/
const Header = Vue.component;
interface HeaderProps {
height?: string;
}
/**
* Sidebar container for navigation and secondary content
*/
const Aside = Vue.component;
interface AsideProps {
width?: string;
}
/**
* Main content area
*/
const Main = Vue.component;
/**
* Footer container for bottom information
*/
const Footer = Vue.component;
interface FooterProps {
height?: string;
}Usage Examples:
// Common layout pattern
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
// Layout with sidebar
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
// Full layout with footer
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</el-container>
// Sidebar on right
<el-container>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
<el-aside width="200px">Aside</el-aside>
</el-container>Space and Divider Components
Utility components for creating visual separation and spacing in layouts.
/**
* Divider component for content separation
*/
const Divider = Vue.component;
interface DividerProps {
direction?: 'horizontal' | 'vertical';
contentPosition?: 'left' | 'center' | 'right';
}Usage Examples:
// Horizontal divider
<div>
<span>Youth is not a time of life, it is a state of mind.</span>
<el-divider></el-divider>
<span>Youth is not a time of life, it is a state of mind.</span>
</div>
// Divider with custom content
<div>
<span>Youth is not a time of life, it is a state of mind.</span>
<el-divider content-position="left">Youth</el-divider>
<span>Youth is not a time of life, it is a state of mind.</span>
</div>
// Vertical divider
<div>
<span>rain</span>
<el-divider direction="vertical"></el-divider>
<span>home</span>
<el-divider direction="vertical"></el-divider>
<span>manage</span>
</div>Responsive Design
Built-in responsive design utilities and breakpoint system for mobile-first development.
// Responsive breakpoints
interface ResponsiveBreakpoints {
xs: '< 768px'; // Extra small devices
sm: '>= 768px'; // Small devices
md: '>= 992px'; // Medium devices
lg: '>= 1200px'; // Large devices
xl: '>= 1920px'; // Extra large devices
}
// Hidden utilities (via CSS classes)
interface HiddenUtilities {
'hidden-xs-only': 'hidden on xs';
'hidden-sm-only': 'hidden on sm';
'hidden-sm-and-down': 'hidden on sm and down';
'hidden-sm-and-up': 'hidden on sm and up';
'hidden-md-only': 'hidden on md';
'hidden-md-and-down': 'hidden on md and down';
'hidden-md-and-up': 'hidden on md and up';
'hidden-lg-only': 'hidden on lg';
'hidden-lg-and-down': 'hidden on lg and down';
'hidden-lg-and-up': 'hidden on lg and up';
'hidden-xl-only': 'hidden on xl';
}Usage Examples:
// Responsive column spans
<el-row :gutter="10">
<el-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">
<div class="grid-content bg-purple"></div>
</el-col>
<el-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4">
<div class="grid-content bg-purple-light"></div>
</el-col>
<el-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">
<div class="grid-content bg-purple"></div>
</el-col>
</el-row>
// Responsive object configuration
<el-col :xs="{span: 4, offset: 4}" :md="{span: 6, offset: 6}">
<div class="grid-content bg-purple"></div>
</el-col>Install with Tessl CLI
npx tessl i tessl/npm-element-ui