0
# Global Components
1

2
Globally available Vue components for content enhancement including badges, code blocks, and tabbed code groups that can be used directly in markdown files.
3

4
## Capabilities
5

6
### Badge Component
7

8
Inline badge/label component with color variants for highlighting important information.
9

10
```javascript { .api }
11
/**
12
 * Inline badge/label functional Vue component
13
 * Available globally as <Badge>
14
 */
15
const Badge: VueComponent = {
16
  functional: true,
17
  props: {
18
    /** Badge type/color variant */
19
    type: {
20
      type: String,
21
      default: 'tip'
22
    },
23
    /** Badge text content */
24
    text: String,
25
    /** Vertical alignment */
26
    vertical: {
27
      type: String,
28
      default: 'top'
29
    }
30
  },
31
  render(h, { props, slots }): VNode
32
};
33
```
34

35
**Props:**
36

37
- `type` (String, default: 'tip'): Badge color variant (tip, error, warning, etc.)
38
- `text` (String): Badge text content
39
- `vertical` (String, default: 'top'): Vertical alignment (top, middle, bottom)
40

41
**Badge Types:**
42

43
- `tip` / `green`: Green badge for tips and positive information
44
- `error`: Red badge for errors and critical information
45
- `warning` / `warn` / `yellow`: Yellow badge for warnings
46
- Default: Blue badge for general information
47

48
**Usage Examples:**
49

50
```markdown
51
<!-- In markdown files -->
52
<Badge text="new" type="tip" />
53
<Badge text="deprecated" type="warning" />
54
<Badge text="beta" type="error" />
55

56
<!-- With default slot content -->
57
<Badge type="tip">New Feature</Badge>
58

59
<!-- With custom vertical alignment -->
60
<Badge text="v2.0" vertical="middle" />
61
```
62

63
### CodeGroup Component
64

65
Tabbed code block container component for displaying multiple code examples with tab navigation.
66

67
```javascript { .api }
68
/**
69
 * Tabbed code block container Vue component
70
 * Available globally as <CodeGroup>
71
 */
72
const CodeGroup: VueComponent = {
73
  name: 'CodeGroup',
74
  data() {
75
    return {
76
      codeTabs: Array,
77
      activeCodeTabIndex: Number
78
    };
79
  },
80
  slots: {
81
    default: {} // Code blocks content
82
  },
83
  methods: {
84
    changeCodeTab(index: number): void
85
  },
86
  mounted(): void,
87
  beforeDestroy(): void
88
};
89
```
90

91
**Usage Examples:**
92

93
```markdown
94
<CodeGroup>
95
<CodeBlock title="NPM">
96

97
```bash
98
npm install package-name
99
```
100

101
</CodeBlock>
102
<CodeBlock title="YARN">
103

104
```bash
105
yarn add package-name
106
```
107

108
</CodeBlock>
109
</CodeGroup>
110
```
111
112
### CodeBlock Component
113

114
Individual code block component used within CodeGroup for tabbed code examples.
115

116
```javascript { .api }
117
/**
118
 * Individual code block Vue component for use within CodeGroup
119
 * Available globally as <CodeBlock>
120
 */
121
const CodeBlock: VueComponent = {
122
  name: 'CodeBlock',
123
  props: {
124
    /** Tab title for the code block */
125
    title: {
126
      type: String,
127
      required: true
128
    },
129
    /** Whether this code block is active */
130
    active: {
131
      type: Boolean,
132
      default: false
133
    }
134
  },
135
  slots: {
136
    default: {} // Code content
137
  }
138
};
139
```
140

141
**Props:**
142

143
- `title` (String, required): Tab title displayed in CodeGroup navigation
144
- `active` (Boolean, default: false): Whether this code block is initially active
145

146
**Usage:**
147

148
```markdown
149
<CodeBlock title="JavaScript">
150

151
```javascript
152
const result = processData(input);
153
console.log(result);
154
```
155

156
</CodeBlock>
157
```
158
159
## Advanced Usage
160

161
### Nested Components
162

163
Global components can be nested and combined:
164

165
```markdown
166
<!-- Badge within code group -->
167
<CodeGroup>
168
<CodeBlock title="Current API">
169

170
```javascript
171
// Current implementation
172
const api = new API();
173
```
174

175
</CodeBlock>
176
<CodeBlock title="Deprecated API">
177

178
```javascript
179
// Old implementation <Badge text="deprecated" type="warning" />
180
const oldApi = new OldAPI();
181
```
182

183
</CodeBlock>
184
</CodeGroup>
185
```
186
187
### Custom Styling
188

189
Components inherit theme styling but can be customized:
190

191
```stylus
192
// Custom badge styles
193
.badge
194
  &.custom
195
    background-color #ff6b6b
196
    color white
197

198
// Custom code group styles  
199
.theme-code-group
200
  .theme-code-group__nav-tab
201
    &.custom-tab
202
      background-color #f8f8f8
203
```
204

205
### Component Registration
206

207
Global components are automatically registered by VuePress and available in all markdown files without imports:
208

209
```javascript
210
// Automatic registration (handled by VuePress)
211
Vue.component('Badge', Badge);
212
Vue.component('CodeGroup', CodeGroup);
213
Vue.component('CodeBlock', CodeBlock);
214
```
215

216
## Accessibility
217

218
Global components include accessibility features:
219

220
### Badge Accessibility
221

222
- Uses semantic HTML with appropriate ARIA attributes
223
- Color variants are supplemented with text indicators
224
- Screen reader friendly text content
225

226
### CodeGroup Accessibility
227

228
- Keyboard navigation support (arrow keys, enter, space)
229
- ARIA roles and labels for tab interface
230
- Focus management and visual indicators
231
- Screen reader announcements for tab changes
232

233
```javascript { .api }
234
// Accessibility features
235
interface AccessibilityFeatures {
236
  /** Keyboard navigation support */
237
  keyboardNavigation: boolean;
238
  /** ARIA labels and roles */
239
  ariaSupport: boolean;
240
  /** Focus management */
241
  focusManagement: boolean;
242
  /** Screen reader compatibility */
243
  screenReaderSupport: boolean;
244
}
245
```
246

247
## Browser Support
248

249
Global components work in all modern browsers:
250

251
- Chrome 60+
252
- Firefox 55+  
253
- Safari 12+
254
- Edge 79+
255
- Mobile browsers with JavaScript enabled
256

257
Components gracefully degrade in older browsers with basic HTML/CSS fallbacks.