Skip to content

Commit 09d500f

Browse files
TechQueryTechQuery
committed
[add] Media Object component
1 parent 37ab215 commit 09d500f

2 files changed

Lines changed: 265 additions & 2 deletions

File tree

‎document/source/components/MediaObject.mdx‎

Lines changed: 263 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,263 @@
1+
---
2+
layout: docs
3+
title: Media object
4+
description: Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like.
5+
group: Components
6+
---
7+
8+
import { MediaObject } from 'boot-cell/source/Content/MediaObject';
9+
import { Button } from 'boot-cell/source/Form/Button';
10+
11+
import { Example } from '../../../source/component/Example';
12+
13+
## Example
14+
15+
The [media object][1] helps build complex and repetitive components where some media is positioned alongside content
16+
that doesn’t wrap around said media.
17+
18+
Below is an example of a single media object.
19+
20+
<Example>
21+
<MediaObject
22+
image="https://web-cell.dev/WebCell-0.f1ffd28b.png"
23+
title="WebCell"
24+
>
25+
Web Components engine based on JSX &amp; TypeScript
26+
</MediaObject>
27+
</Example>
28+
29+
```JavaScript
30+
import { render } from 'web-cell';
31+
import { MediaObject } from 'boot-cell/source/Content/MediaObject';
32+
33+
render(
34+
<MediaObject
35+
image="https://web-cell.dev/WebCell-0.f1ffd28b.png"
36+
title="WebCell"
37+
>
38+
Web Components engine based on JSX &amp; TypeScript
39+
</MediaObject>
40+
);
41+
```
42+
43+
## Nesting
44+
45+
Media objects can be infinitely nested, though we suggest you stop at some point.
46+
Place nested `<MediaObject />` within the `defaultSlot` of a parent media object.
47+
48+
<Example>
49+
<MediaObject
50+
image="https://web-cell.dev/WebCell-0.f1ffd28b.png"
51+
title="WebCell"
52+
>
53+
Web Components engine based on JSX &amp; TypeScript
54+
<MediaObject
55+
className="mt-3"
56+
image="https://web-cell.dev/WebCell-0.f1ffd28b.png"
57+
title="BootCell"
58+
>
59+
Web Components UI library based on WebCell v2 &amp; BootStrap v4
60+
</MediaObject>
61+
</MediaObject>
62+
</Example>
63+
64+
```JavaScript
65+
import { render } from 'web-cell';
66+
import { MediaObject } from 'boot-cell/source/Content/MediaObject';
67+
68+
render(
69+
<MediaObject
70+
image="https://web-cell.dev/WebCell-0.f1ffd28b.png"
71+
title="WebCell"
72+
>
73+
Web Components engine based on JSX &amp; TypeScript
74+
<MediaObject
75+
className="mt-3"
76+
image="https://web-cell.dev/WebCell-0.f1ffd28b.png"
77+
title="BootCell"
78+
>
79+
Web Components UI library based on WebCell v2 &amp; BootStrap v4
80+
</MediaObject>
81+
</MediaObject>
82+
);
83+
```
84+
85+
## Alignment
86+
87+
Media in a media object can be aligned with `imageRow` property to
88+
the top (default), middle, or end of your content.
89+
90+
<Example>
91+
<MediaObject
92+
image="https://web-cell.dev/WebCell-0.f1ffd28b.png"
93+
title="Top-aligned media"
94+
>
95+
<p>Web Components engine based on JSX &amp; TypeScript</p>
96+
<p>Web Components engine based on JSX &amp; TypeScript</p>
97+
<p>Web Components engine based on JSX &amp; TypeScript</p>
98+
</MediaObject>
99+
</Example>
100+
101+
```JavaScript
102+
import { render } from 'web-cell';
103+
import { MediaObject } from 'boot-cell/source/Content/MediaObject';
104+
105+
render(
106+
<MediaObject
107+
image="https://web-cell.dev/WebCell-0.f1ffd28b.png"
108+
title="Top-aligned media"
109+
>
110+
<p>Web Components engine based on JSX &amp; TypeScript</p>
111+
<p>Web Components engine based on JSX &amp; TypeScript</p>
112+
<p>Web Components engine based on JSX &amp; TypeScript</p>
113+
</MediaObject>
114+
);
115+
```
116+
117+
<Example>
118+
<MediaObject
119+
imageRow="center"
120+
image="https://web-cell.dev/WebCell-0.f1ffd28b.png"
121+
title="Center-aligned media"
122+
>
123+
<p>Web Components engine based on JSX &amp; TypeScript</p>
124+
<p>Web Components engine based on JSX &amp; TypeScript</p>
125+
<p>Web Components engine based on JSX &amp; TypeScript</p>
126+
</MediaObject>
127+
</Example>
128+
129+
```JavaScript
130+
import { render } from 'web-cell';
131+
import { MediaObject } from 'boot-cell/source/Content/MediaObject';
132+
133+
render(
134+
<MediaObject
135+
imageRow="center"
136+
image="https://web-cell.dev/WebCell-0.f1ffd28b.png"
137+
title="Center-aligned media"
138+
>
139+
<p>Web Components engine based on JSX &amp; TypeScript</p>
140+
<p>Web Components engine based on JSX &amp; TypeScript</p>
141+
<p>Web Components engine based on JSX &amp; TypeScript</p>
142+
</MediaObject>
143+
);
144+
```
145+
146+
<Example>
147+
<MediaObject
148+
imageRow="end"
149+
image="https://web-cell.dev/WebCell-0.f1ffd28b.png"
150+
title="Bottom-aligned media"
151+
>
152+
<p>Web Components engine based on JSX &amp; TypeScript</p>
153+
<p>Web Components engine based on JSX &amp; TypeScript</p>
154+
<p>Web Components engine based on JSX &amp; TypeScript</p>
155+
</MediaObject>
156+
</Example>
157+
158+
```JavaScript
159+
import { render } from 'web-cell';
160+
import { MediaObject } from 'boot-cell/source/Content/MediaObject';
161+
162+
render(
163+
<MediaObject
164+
imageRow="end"
165+
image="https://web-cell.dev/WebCell-0.f1ffd28b.png"
166+
title="Bottom-aligned media"
167+
>
168+
<p>Web Components engine based on JSX &amp; TypeScript</p>
169+
<p>Web Components engine based on JSX &amp; TypeScript</p>
170+
<p>Web Components engine based on JSX &amp; TypeScript</p>
171+
</MediaObject>
172+
);
173+
```
174+
175+
## Order
176+
177+
<Example>
178+
<MediaObject
179+
imageColumn="right"
180+
image="https://web-cell.dev/WebCell-0.f1ffd28b.png"
181+
title="WebCell"
182+
>
183+
Web Components engine based on JSX &amp; TypeScript
184+
</MediaObject>
185+
</Example>
186+
187+
```JavaScript
188+
import { render } from 'web-cell';
189+
import { MediaObject } from 'boot-cell/source/Content/MediaObject';
190+
191+
render(
192+
<MediaObject
193+
imageColumn="right"
194+
image="https://web-cell.dev/WebCell-0.f1ffd28b.png"
195+
title="WebCell"
196+
>
197+
Web Components engine based on JSX &amp; TypeScript
198+
</MediaObject>
199+
);
200+
```
201+
202+
## Media list
203+
204+
On your `<ul />` or `<ol />`, add the `.list-unstyled` to remove any browser default list styles,
205+
and then add `listItem` property to your `<MediaObject />`.
206+
As always, use spacing utilities wherever needed to fine tune.
207+
208+
<Example>
209+
<ul class="list-unstyled">
210+
<MediaObject
211+
listItem
212+
image="https://web-cell.dev/WebCell-0.f1ffd28b.png"
213+
title="WebCell"
214+
>
215+
<p>Web Components engine based on JSX &amp; TypeScript</p>
216+
<p>Web Components engine based on JSX &amp; TypeScript</p>
217+
</MediaObject>
218+
<MediaObject
219+
listItem
220+
image="https://web-cell.dev/WebCell-0.f1ffd28b.png"
221+
title="BootCell"
222+
>
223+
<p>
224+
Web Components UI library based on WebCell v2 &amp; BootStrap v4
225+
</p>
226+
<p>
227+
Web Components UI library based on WebCell v2 &amp; BootStrap v4
228+
</p>
229+
</MediaObject>
230+
</ul>
231+
</Example>
232+
233+
```JavaScript
234+
import { render } from 'web-cell';
235+
import { MediaObject } from 'boot-cell/source/Content/MediaObject';
236+
237+
render(
238+
<ul class="list-unstyled">
239+
<MediaObject
240+
listItem
241+
image="https://web-cell.dev/WebCell-0.f1ffd28b.png"
242+
title="WebCell"
243+
>
244+
<p>Web Components engine based on JSX &amp; TypeScript</p>
245+
<p>Web Components engine based on JSX &amp; TypeScript</p>
246+
</MediaObject>
247+
<MediaObject
248+
listItem
249+
image="https://web-cell.dev/WebCell-0.f1ffd28b.png"
250+
title="BootCell"
251+
>
252+
<p>
253+
Web Components UI library based on WebCell v2 &amp; BootStrap v4
254+
</p>
255+
<p>
256+
Web Components UI library based on WebCell v2 &amp; BootStrap v4
257+
</p>
258+
</MediaObject>
259+
</ul>
260+
);
261+
```
262+
263+
[1]: http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"name": "bootcell-document",
3-
"version": "0.15.0",
3+
"version": "0.16.0",
44
"description": "Re-implemented Official Document site of BootStrap & FontAwesome based on WebCell, BootCell & MarkCell",
55
"dependencies": {
6-
"boot-cell": "^1.0.0-beta.4",
6+
"boot-cell": "^1.0.0-beta.5",
77
"cell-router": "^2.0.0-rc.6",
88
"classnames": "^2.2.6",
99
"lodash.groupby": "^4.6.0",

0 commit comments

Comments
 (0)