4cd4fd28
 郭伟龙
feat: 初始化项目
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
|
# Media
> The media object helps build complex and repetitive components where some media is positioned
> alongside content that doesn't wrap around said media. Plus, it does this with only two required
> classes thanks to flexbox.
```html
<div>
<b-card>
<b-media>
<template #aside>
<b-img blank blank-color="#ccc" width="64" alt="placeholder"></b-img>
</template>
<h5 class="mt-0">Media Title</h5>
<p>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</p>
<p>
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<b-media>
<template #aside>
<b-img blank blank-color="#ccc" width="64" alt="placeholder"></b-img>
</template>
<h5 class="mt-0">Nested Media</h5>
<p class="mb-0">
Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in
faucibus.
</p>
</b-media>
</b-media>
</b-card>
</div>
<!-- b-media.vue -->
```
## Usage
```html
<div>
<b-media>
<template #aside>
<img src="..." alt="Media Aside">
</template>
<h2>Media Body</h2>
<p>Some text</p>
<!-- b-[Optional: add media children here for nesting] -->
</b-media>
</div>
```
## No body (with sub-components)
```html
<div>
<b-card>
<b-media no-body>
<b-media-aside vertical-align="center">
<b-img blank blank-color="#ccc" width="64" height="128" alt="placeholder"></b-img>
</b-media-aside>
<b-media-body>
<h5 class="mt-0">Media Title</h5>
<p>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</p>
<p class="mb-0">
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<b-media>
<template #aside>
<b-img blank blank-color="#ccc" width="64" alt="placeholder"></b-img>
</template>
<h5 class="mt-0">Nested Media</h5>
Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in
faucibus.
</b-media>
</b-media-body>
</b-media>
</b-card>
</div>
<!-- b-media-no-body.vue -->
```
## Order
Change the order of content in media objects by adding `right-align` property.
```html
<div>
<b-media right-align vertical-align="center">
<template #aside>
<b-img blank blank-color="#ccc" width="80" alt="placeholder"></b-img>
</template>
<h5 class="mt-0 mb-1">Media object</h5>
<p class="mb-0">
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</p>
</b-media>
</div>
<!-- b-media-order.vue -->
```
## Nesting
You can easily nest media objects by including another `<b-media>` inside parent's body.
## Vertical align
Aside can be vertically aligned using `vertical-align` prop, set to `top`, `center` or `end`. The
default alignment is `top`.
## Media list
Because the media object has few structural requirements, you can use this component as a list item
in HTML lists. On your `<ul>` or `<ol>`, add the class `list-unstyled` to remove any browser default
list styles, and then use the `<b-media>` component with `tag` prop set to `li`. As always, use
spacing utilities wherever needed to fine tune.
```html
<div>
<ul class="list-unstyled">
<b-media tag="li">
<template #aside>
<b-img blank blank-color="#abc" width="64" alt="placeholder"></b-img>
</template>
<h5 class="mt-0 mb-1">List-based media object</h5>
<p class="mb-0">
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</p>
</b-media>
<b-media tag="li" class="my-4">
<template #aside>
<b-img blank blank-color="#cba" width="64" alt="placeholder"></b-img>
</template>
<h5 class="mt-0 mb-1">List-based media object</h5>
<p class="mb-0">
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</p>
</b-media>
<b-media tag="li">
<template #aside>
<b-img blank blank-color="#bac" width="64" alt="placeholder"></b-img>
</template>
<h5 class="mt-0 mb-1">List-based media object</h5>
<p class="mb-0">
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</p>
</b-media>
</ul>
</div>
<!-- b-media-list.vue -->
```
<!-- Component reference added automatically from component package.json -->
|