UNPKG

@rocketsofawesome/mirage

Version:

[Live Demo of the Pattern Library](https://rocketsofawesome.github.io/mirage/)

rocketsofawesome.github.io/mirage/

mealeyst/mirage

96 lines (88 loc) • 2.13 kB
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
```js <UL> <li><Link>Example 1</Link></li> <li><Link>Example 2</Link></li> <li><Link>Example 3</Link></li> <li><Link>Example 4</Link></li> <li><Link>Example 5</Link></li> </UL> ``` ### Setting inline: ```js <UL inline> <li><Link>Example 1</Link></li> <li><Link>Example 2</Link></li> <li><Link>Example 3</Link></li> <li><Link>Example 4</Link></li> <li><Link>Example 5</Link></li> </UL> ``` ### Setting item height: ```js <UL itemHeight='4rem'> <li><Link>Example 1</Link></li> <li><Link>Example 2</Link></li> <li><Link>Example 3</Link></li> <li><Link>Example 4</Link></li> <li><Link>Example 5</Link></li> </UL> ``` ### Setting left padding: ```js <UL leftPad='2rem'> <li><Link>Example 1</Link></li> <li><Link>Example 2</Link></li> <li><Link>Example 3</Link></li> <li><Link>Example 4</Link></li> <li><Link>Example 5</Link></li> </UL> ``` ### Setting the color: ```js <UL color='#00003C'> <li><Link>Example 1</Link></li> <li><Link>Example 2</Link></li> <li><Link>Example 3</Link></li> <li><Link>Example 4</Link></li> <li><Link>Example 5</Link></li> </UL> ``` ### Changing bullet type: ```js <UL type='square'> <li><Link>Example 1</Link></li> <li><Link>Example 2</Link></li> <li><Link>Example 3</Link></li> <li><Link>Example 4</Link></li> <li><Link>Example 5</Link></li> </UL> ``` ### No Bullets: ```js <UL type='none'> <li><Link>Example 1</Link></li> <li><Link>Example 2</Link></li> <li><Link>Example 3</Link></li> <li><Link>Example 4</Link></li> <li><Link>Example 5</Link></li> </UL> ``` ### Setting bullets inside: ```js <UL outside={false}> <li><Link>Example 1</Link></li> <li><Link>Example 2</Link></li> <li><Link>Example 3</Link></li> <li><Link>Example 4</Link></li> <li><Link>Example 5</Link></li> </UL> ``` ### Setting bullet to be an image: ```js <UL image='https://d2lknnt52h7uhg.cloudfront.net/roa-canon/image/upload/c_scale,w_14/v1554922788/web/rocket_1f680.png'> <li><Link>Example 1</Link></li> <li><Link>Example 2</Link></li> <li><Link>Example 3</Link></li> <li><Link>Example 4</Link></li> <li><Link>Example 5</Link></li> </UL>