+359
-0
lines changedFilter options
+359
-0
lines changed Original file line number Diff line number Diff line change
@@ -134,6 +134,10 @@ export default {
134 134
title: 'Avatar',
135 135
description: 'Avatars can be used to represent people. When used with a specific logo, avatars can also be used to represent a brand.'
136 136
},
137 +
badge: {
138 +
title: 'Badge',
139 +
description: 'Small status descriptors for UI elements.'
140 +
},
137 141
bottomBar: {
138 142
title: 'Bottom Bar',
139 143
description: 'Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.'
@@ -0,0 +1,70 @@
1 +
<example src="./examples/Buttons.vue" />
2 +
<example src="./examples/Lists.vue" />
3 +
<example src="./examples/Dense.vue" />
4 + 5 +
<template>
6 +
<page-container centered :title="$t('pages.badge.title')">
7 +
<div class="page-container-section">
8 +
<p>Small status descriptors for UI elements.</p>
9 +
</div>
10 + 11 +
<div class="page-container-section">
12 + 13 +
<p>Some components like <b>button, avatar</b> needs to be wrapped with <code>md-badge</code> component.</p>
14 +
<code-example title="Example with buttons" :component="examples['buttons']" />
15 + 16 +
<code-example title="Example with lists" :component="examples['lists']" />
17 + 18 +
<code-example title="Dense" :component="examples['dense']" />
19 + 20 +
<api-item title="API - md-badge">
21 +
<p>The following option can be applied to any badge:</p>
22 + 23 +
<api-table :headings="props.headings" :props="props.props" slot="props" />
24 +
<api-table :headings="classes.headings" :props="classes.props" slot="classes" />
25 +
</api-item>
26 +
</div>
27 +
</page-container>
28 +
</template>
29 + 30 +
<script>
31 +
import examples from 'docs-mixins/docsExample'
32 + 33 +
export default {
34 +
name: 'DocBadge',
35 +
mixins: [examples],
36 +
data: () => ({
37 +
classes: {
38 +
headings: ['Name', 'Description'],
39 +
props: [
40 +
{
41 +
name: 'md-square',
42 +
description: 'Created square type badge.'
43 +
}
44 +
]
45 +
},
46 +
props: {
47 +
headings: ['Name', 'Description', 'Default'],
48 +
props: [
49 +
{
50 +
name: 'md-content',
51 +
type: 'String, Number',
52 +
description: 'A content for badge'
53 +
},
54 +
{
55 +
name: 'md-position',
56 +
type: 'String',
57 +
description: 'Position of badge <code>top</code> or <code>bottom</code>',
58 +
defaults: 'top'
59 +
},
60 +
{
61 +
name: 'md-dense',
62 +
type: 'Boolean',
63 +
description: 'Enables the dense layout',
64 +
defaults: 'false'
65 +
},
66 +
]
67 +
}
68 +
})
69 +
}
70 +
</script>
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
1 +
<template>
2 +
<div class="demo-badge">
3 +
<div>
4 +
<md-badge md-content="1">
5 +
<md-button class="md-icon-button">
6 +
<md-icon>notifications</md-icon>
7 +
</md-button>
8 +
</md-badge>
9 + 10 +
<md-badge class="md-primary" md-content="1">
11 +
<md-button class="md-icon-button">
12 +
<md-icon>home</md-icon>
13 +
</md-button>
14 +
</md-badge>
15 + 16 +
<md-badge md-position="bottom" md-content="2">
17 +
<md-button class="md-icon-button">
18 +
<md-icon>home</md-icon>
19 +
</md-button>
20 +
</md-badge>
21 +
</div>
22 + 23 +
<div>
24 +
<md-badge class="md-primary" md-content="12">
25 +
<md-avatar>
26 +
<img src="/assets/examples/avatar.png" alt="Avatar">
27 +
</md-avatar>
28 +
</md-badge>
29 +
</div>
30 + 31 +
<div>
32 +
<md-badge class="md-primary md-square" md-position="bottom" md-content="12">
33 +
<md-button>
34 +
Button with
35 +
</md-button>
36 +
</md-badge>
37 +
</div>
38 +
</div>
39 +
</template>
40 + 41 +
<script>
42 +
export default {
43 +
name: 'Buttons'
44 +
}
45 +
</script>
46 + 47 +
<style lang="scss" scoped>
48 +
.demo-badge {
49 +
> div {
50 +
margin-bottom: 16px;
51 +
}
52 +
}
53 +
</style>
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
1 +
<template>
2 +
<div class="demo-badge">
3 +
<div>
4 +
<md-badge md-content="1" md-dense>
5 +
<md-button class="md-icon-button">
6 +
<md-icon>notifications</md-icon>
7 +
</md-button>
8 +
</md-badge>
9 + 10 +
<md-badge class="md-primary" md-content="12" md-dense>
11 +
<md-button class="md-icon-button">
12 +
<md-icon>home</md-icon>
13 +
</md-button>
14 +
</md-badge>
15 +
</div>
16 +
</div>
17 +
</template>
18 + 19 +
<script>
20 +
export default {
21 +
name: 'Dense'
22 +
}
23 +
</script>
24 + 25 +
<style lang="scss" scoped>
26 +
.demo-badge {
27 +
> div {
28 +
margin-bottom: 16px;
29 +
}
30 +
}
31 +
</style>
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
1 +
<template>
2 +
<div>
3 +
<md-list>
4 +
<md-list-item>
5 +
<md-icon>move_to_inbox</md-icon>
6 +
<span class="md-list-item-text">Inbox</span>
7 +
<md-badge class="md-primary md-square" md-content="6" />
8 +
</md-list-item>
9 + 10 +
<md-list-item>
11 +
<md-icon>send</md-icon>
12 +
<span class="md-list-item-text">Sent Mail</span>
13 +
</md-list-item>
14 + 15 +
<md-list-item>
16 +
<md-icon>delete</md-icon>
17 +
<span class="md-list-item-text">Trash</span>
18 +
<md-badge class="md-primary" md-content="6" />
19 +
</md-list-item>
20 + 21 +
<md-list-item>
22 +
<md-icon>error</md-icon>
23 +
<span class="md-list-item-text">Spam</span>
24 +
<md-badge class="md-square" md-content="New" />
25 +
</md-list-item>
26 +
</md-list>
27 +
</div>
28 +
</template>
29 + 30 +
<script>
31 +
export default {
32 +
name: 'Lists'
33 +
}
34 +
</script>
35 + 36 +
<style lang="scss" scoped>
37 +
.md-list {
38 +
width: 320px;
39 +
max-width: 100%;
40 +
display: inline-block;
41 +
vertical-align: top;
42 +
border: 1px solid rgba(#000, .12);
43 +
}
44 +
</style>
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
1 1
export const routes = [
2 +
{
3 +
path: '/components/badge',
4 +
name: 'components/badge',
5 +
page: 'Components/Badge/Badge.vue'
6 +
},
2 7
{
3 8
path: '/components/autocomplete',
4 9
name: 'components/autocomplete',
@@ -24,6 +24,7 @@
24 24
<div class="main-nav-level">
25 25
<router-link to="/components/app">{{ $t('pages.app.title') }}</router-link>
26 26
<router-link to="/components/avatar">{{ $t('pages.avatar.title') }}</router-link>
27 +
<router-link to="/components/badge">{{ $t('pages.badge.title') }}</router-link>
27 28
<router-link to="/components/bottom-bar">{{ $t('pages.bottomBar.title') }}</router-link>
28 29
<router-link to="/components/button">{{ $t('pages.button.title') }}</router-link>
29 30
<router-link to="/components/card">{{ $t('pages.card.title') }}</router-link>
@@ -0,0 +1,17 @@
1 +
import mountTemplate from 'test/utils/mountTemplate'
2 +
import MdBadge from './MdBadge.vue'
3 + 4 +
test('should render the badge', async () => {
5 +
const template = '<md-badge>Lorem ipsum</md-badge>'
6 +
const wrapper = await mountTemplate(MdBadge, template)
7 + 8 +
expect(wrapper.hasClass('md-badge')).toBe(true)
9 +
expect(wrapper.text()).toBe('Lorem ipsum')
10 +
})
11 + 12 +
test('should render the theme class', async () => {
13 +
const template = '<md-badge md-theme="alt">Lorem ipsum</md-badge>'
14 +
const wrapper = await mountTemplate(MdBadge, template)
15 + 16 +
expect(wrapper.hasClass('md-theme-alt')).toBe(true)
17 +
})
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
1 +
<template>
2 +
<div class="md-badge-content" v-if="hasDefaultSlot">
3 +
<slot />
4 +
<md-badge-standalone :class="badgeClasses">
5 +
<div>
6 +
{{ mdContent }}
7 +
</div>
8 +
</md-badge-standalone>
9 +
</div>
10 +
<md-badge-standalone :class="badgeClasses" v-else>
11 +
{{ mdContent }}
12 +
</md-badge-standalone>
13 +
</template>
14 + 15 +
<script>
16 +
import MdComponent from 'core/MdComponent'
17 + 18 +
import MdBadgeStandalone from './MdBadgeStandalone'
19 + 20 +
export default new MdComponent({
21 +
name: 'MdBadge',
22 +
components: {
23 +
MdBadgeStandalone
24 +
},
25 +
props: {
26 +
mdContent: [String, Number],
27 +
mdPosition: {
28 +
type: String,
29 +
default: 'top'
30 +
},
31 +
mdDense: Boolean
32 +
},
33 +
computed: {
34 +
hasDefaultSlot () {
35 +
return !!this.$slots.default
36 +
},
37 +
badgeClasses () {
38 +
return {
39 +
['md-position-' + this.mdPosition]: true,
40 +
'md-dense': this.mdDense
41 +
}
42 +
}
43 +
}
44 +
})
45 +
</script>
46 + 47 +
<style lang="scss">
48 +
@import "~components/MdAnimation/variables";
49 + 50 +
.md-badge-content {
51 +
position: relative;
52 +
display: inline-block;
53 +
.md-position {
54 +
&-top {
55 +
top: -4px;
56 +
}
57 +
&-bottom {
58 +
bottom: -4px;
59 +
}
60 +
}
61 +
}
62 +
</style>
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
1 +
<template>
2 +
<div class="md-badge" :class="[$mdActiveTheme]">
3 +
<slot />
4 +
</div>
5 +
</template>
6 + 7 +
<script>
8 +
import MdComponent from 'core/MdComponent'
9 + 10 +
export default new MdComponent({
11 +
name: 'MdBadgeStandalone'
12 +
})
13 +
</script>
14 + 15 +
<style lang="scss">
16 +
@import "~components/MdAnimation/variables";
17 + 18 +
.md-badge {
19 +
position: absolute;
20 +
transition: .3s $md-transition-default-timing;
21 +
display: flex;
22 +
align-items: center;
23 +
justify-content: center;
24 +
right: -4px;
25 +
font-size: 10px;
26 +
font-style: normal;
27 +
width: 22px;
28 +
height: 22px;
29 +
border-radius: 50%;
30 +
color: #fff;
31 +
pointer-events: none;
32 +
z-index: 11;
33 +
.md-list-item-content & {
34 +
position: relative;
35 +
top: 0;
36 +
bottom: 0;
37 +
right: 0;
38 +
}
39 +
&.md-dense {
40 +
width: 18px;
41 +
height: 18px;
42 +
font-size: 8px;
43 +
}
44 +
&.md-square {
45 +
width: auto;
46 +
border-radius: 3px;
47 +
height: 18px;
48 +
padding: 0 4px;
49 +
}
50 +
}
51 +
</style>
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4