mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-14 02:03:20 +00:00
create custom tags in whiteframe component (#170)
* create custom tags in whiteframe * add custom tag in api. fix #169 * add custom tag in examples. fix #169
This commit is contained in:
Marcos Moura
GitHub
parent
c40357e515
commit
9df9f27a4a
4 changed files with 66 additions and 63 deletions
|
|
@ -1,31 +1,33 @@
|
|||
<template>
|
||||
<page-content page-title="Introduction">
|
||||
<div class="main-content">
|
||||
<div class="button-actions">
|
||||
<div class="example">
|
||||
<img src="assets/vue-material-example.png" alt="Material Design">
|
||||
<div class="introduction">
|
||||
<div class="button-actions">
|
||||
<div class="example">
|
||||
<img src="assets/vue-material-example.png" alt="Material Design">
|
||||
</div>
|
||||
|
||||
<div class="introduction">Build well-crafted apps with Material Design and Vue 2</div>
|
||||
|
||||
<md-button class="md-primary md-raised" href="#/getting-started">Getting Started</md-button>
|
||||
<md-button class="md-primary md-raised" href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener">Github</md-button>
|
||||
</div>
|
||||
|
||||
<div class="introduction">Build well-crafted apps with Material Design and Vue 2</div>
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<h2 class="md-headline">Material Design</h2>
|
||||
<p>Vue Material is lightweight framework built exactly according to the <a href="http://material.google.com" target="_blank" rel="noopener">Material Design</a> specs. Build powerful and well-designed web apps that can can fit on every screen.</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-primary md-raised" href="#/getting-started">Getting Started</md-button>
|
||||
<md-button class="md-primary md-raised" href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener">Github</md-button>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h2 class="md-headline">Full-featured</h2>
|
||||
<p>You can generate and use themes dynamically, use components on demand, take advantage of UI Elements and Components with an ease-to-use API and more...</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<h2 class="md-headline">Material Design</h2>
|
||||
<p>Vue Material is lightweight framework built exactly according to the <a href="http://material.google.com" target="_blank" rel="noopener">Material Design</a> specs. Build powerful and well-designed web apps that can can fit on every screen.</p>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<h2 class="md-headline">Full-featured</h2>
|
||||
<p>You can generate and use themes dynamically, use components on demand, take advantage of UI Elements and Components with an ease-to-use API and more...</p>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<h2 class="md-headline">Compatible</h2>
|
||||
<p>It aims to deliver a collection of reusable components and a series of UI Elements to build applications with support to all modern Web Browsers through Vue 2.0.</p>
|
||||
<div class="column">
|
||||
<h2 class="md-headline">Compatible</h2>
|
||||
<p>It aims to deliver a collection of reusable components and a series of UI Elements to build applications with support to all modern Web Browsers through Vue 2.0.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -33,7 +35,7 @@
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main-content {
|
||||
.introduction {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,12 @@
|
|||
<md-table-cell><code>Number</code></md-table-cell>
|
||||
<md-table-cell>The amount of elevation. From 0 to 24. <br>Default: <code>1</code></md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-table-row>
|
||||
<md-table-cell>md-tag</md-table-cell>
|
||||
<md-table-cell><code>String</code></md-table-cell>
|
||||
<md-table-cell>The generated html tag <br>Default: <code>div</code></md-table-cell>
|
||||
</md-table-row>
|
||||
</md-table-body>
|
||||
</md-table>
|
||||
</api-table>
|
||||
|
|
@ -30,7 +36,7 @@
|
|||
<div slot="example">
|
||||
<example-box card-title="Default">
|
||||
<div slot="demo">
|
||||
<md-whiteframe>1dp</md-whiteframe>
|
||||
<md-whiteframe md-tag="section">1dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="2">2dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="3">3dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="4">4dp</md-whiteframe>
|
||||
|
|
@ -58,7 +64,7 @@
|
|||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<md-whiteframe>1dp</md-whiteframe>
|
||||
<md-whiteframe md-tag="section">1dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="2">2dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="3">3dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="4">4dp</md-whiteframe>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,23 @@
|
|||
<template>
|
||||
<div class="md-tabs" :class="tabClasses">
|
||||
<md-whiteframe :md-elevation="mdElevation">
|
||||
<div class="md-tabs-navigation" :class="navigationClasses" ref="tabNavigation">
|
||||
<button
|
||||
v-for="header in tabList"
|
||||
:key="header.id"
|
||||
type="button"
|
||||
class="md-tab-header"
|
||||
:class="getHeaderClass(header)"
|
||||
:disabled="header.disabled"
|
||||
@click="setActiveTab(header)"
|
||||
ref="tabHeader">
|
||||
<md-ink-ripple :md-disabled="header.disabled"></md-ink-ripple>
|
||||
<div class="md-tab-header-container">
|
||||
<md-icon v-if="header.icon">{{ header.icon }}</md-icon>
|
||||
<span v-if="header.label">{{ header.label }}</span>
|
||||
</div>
|
||||
</button>
|
||||
<md-whiteframe md-tag="nav" class="md-tabs-navigation" :md-elevation="mdElevation" :class="navigationClasses" ref="tabNavigation">
|
||||
<button
|
||||
v-for="header in tabList"
|
||||
:key="header.id"
|
||||
type="button"
|
||||
class="md-tab-header"
|
||||
:class="getHeaderClass(header)"
|
||||
:disabled="header.disabled"
|
||||
@click="setActiveTab(header)"
|
||||
ref="tabHeader">
|
||||
<md-ink-ripple :md-disabled="header.disabled"></md-ink-ripple>
|
||||
<div class="md-tab-header-container">
|
||||
<md-icon v-if="header.icon">{{ header.icon }}</md-icon>
|
||||
<span v-if="header.label">{{ header.label }}</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<span class="md-tab-indicator" :class="indicatorClasses" ref="indicator"></span>
|
||||
</div>
|
||||
<span class="md-tab-indicator" :class="indicatorClasses" ref="indicator"></span>
|
||||
</md-whiteframe>
|
||||
|
||||
<div class="md-tabs-content" ref="tabContent" :style="{ height: contentHeight }">
|
||||
|
|
@ -129,7 +127,7 @@
|
|||
attributeOldValue: true,
|
||||
characterDataOldValue: true
|
||||
});
|
||||
this.navigationObserver.observe(this.$refs.tabNavigation, {
|
||||
this.navigationObserver.observe(this.$refs.tabNavigation.$el, {
|
||||
attributes: true
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,40 +1,37 @@
|
|||
<template>
|
||||
<div class="md-whiteframe" :class="classes">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./mdWhiteframe.scss"></style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
mdElevation: [String, Number]
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
elevation: this.mdElevation === 0 ? 0 : this.mdElevation || 1
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
mdElevation() {
|
||||
this.elevation = this.mdElevation;
|
||||
mdElevation: {
|
||||
type: [String, Number],
|
||||
default: 1
|
||||
},
|
||||
mdTag: {
|
||||
type: String,
|
||||
default: 'div'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes() {
|
||||
let numberedElevation = parseInt(this.elevation, 10);
|
||||
let numberedElevation = parseInt(this.mdElevation, 10);
|
||||
let elevationClass = 'md-whiteframe-';
|
||||
|
||||
if (!isNaN(numberedElevation) && typeof numberedElevation === 'number') {
|
||||
elevationClass += numberedElevation;
|
||||
elevationClass += 'dp';
|
||||
} else if (this.elevation.indexOf('dp') > -1) {
|
||||
elevationClass += this.elevation;
|
||||
} else if (this.mdElevation.indexOf('dp') > -1) {
|
||||
elevationClass += this.mdElevation;
|
||||
}
|
||||
|
||||
return elevationClass;
|
||||
}
|
||||
},
|
||||
render(createElement) {
|
||||
return createElement(this.mdTag, {
|
||||
staticClass: 'md-whiteframe',
|
||||
class: this.classes
|
||||
}, this.$slots.default);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue