Skip to content

Commit d3514fe

Browse files
rigor789rigor789
committed
feat: new tabs
1 parent 211e3ca commit d3514fe

File tree

7 files changed

+2087
-494
lines changed

7 files changed

+2087
-494
lines changed

‎.vitepress/theme/cliLanguage.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
// https://mysticmind.dev/vitepress-fenced-code-block-syntax-highlighting-quirks-with-net-or-other-languages
2-
import { BUNDLED_LANGUAGES } from "shiki";
3-
import cliLanguageGrammar from "./shiki/cli.tmLanguage.json";
2+
import { bundledLanguages } from 'shiki'
3+
import cliLanguageGrammar from './shiki/cli.tmLanguage.json'
44

5-
BUNDLED_LANGUAGES.push({
6-
id: "cli",
7-
scopeName: "source.cli",
8-
// @ts-ignore
5+
bundledLanguages['cli'] = {
6+
id: 'cli',
7+
scopeName: 'source.cli',
98
grammar: cliLanguageGrammar,
10-
});
9+
}
10+
// bundledLanguages.push()

‎content/dev-reference.md‎

Lines changed: 104 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -100,18 +100,116 @@ For example:
100100
![some image](../assets/images/setup/windows/<some_image>.png)
101101
```
102102

103-
<!-- <Tabs>
104-
<Tab name="Vue">
103+
## Tabs
105104

106-
SOMETHING SOMETHING
105+
:::warning
107106

108-
```ts
109-
asd
107+
In order to render Markdown inside a tab, you **must** have one line break above and below the markdown content.
108+
109+
For example:
110+
111+
```xml
112+
<Tab>
113+
# Test
114+
</Tab>
110115
```
111116

117+
Will render `# Test` literally, while
118+
119+
```xml
120+
<Tab>
121+
122+
# Test
123+
112124
</Tab>
125+
```
126+
127+
Will render a `h1` Test title.
128+
129+
:::
130+
131+
<Tabs>
132+
<Tab title="Simple Tab">
133+
This is the most basic tab there is. Pure html content or whatever.
134+
</Tab>
135+
136+
<Tab title="With Code Block">
137+
138+
```ts
139+
console.log('Hello World!')
140+
```
141+
142+
</Tab>
143+
144+
<Tab title="With External Code Block">
145+
146+
<<< @/../examples/typescript/src/ui/ActionBar/page.xml#example
147+
148+
</Tab>
149+
150+
<Tab title="With Two Ext-Code Blocks">
151+
152+
<<< @/../examples/typescript/src/ui/ActionBar/page.xml#example
153+
154+
And another one:
155+
156+
<<< @/../examples/typescript/src/ui/ActionBar/page.xml#example
113157

114-
</Tabs> -->
158+
</Tab>
159+
</Tabs>
160+
161+
### Flavor Tabs
162+
163+
<Tabs>
164+
<Tab flavor="vue">
165+
This is the vue tab
166+
</Tab>
167+
<Tab flavor="typescript">
168+
This is the typescript tab
169+
</Tab>
170+
<Tab flavor="javascript">
171+
This is the javascript tab
172+
</Tab>
173+
<Tab flavor="angular">
174+
This is the angular tab
175+
</Tab>
176+
<Tab flavor="svelte">
177+
This is the svelte tab
178+
</Tab>
179+
<Tab flavor="react">
180+
This is the react tab
181+
</Tab>
182+
<Tab flavor="solid">
183+
This is the solid tab
184+
</Tab>
185+
186+
</Tabs>
187+
188+
All Flavor tabs will be synchronized and ordered consistently:
189+
190+
<Tabs>
191+
<Tab flavor="typescript">
192+
This is the typescript tab
193+
</Tab>
194+
<Tab flavor="javascript">
195+
This is the javascript tab
196+
</Tab>
197+
<Tab flavor="angular">
198+
This is the angular tab
199+
</Tab>
200+
<Tab flavor="svelte">
201+
This is the svelte tab
202+
</Tab>
203+
<Tab flavor="react">
204+
This is the react tab
205+
</Tab>
206+
<Tab flavor="vue">
207+
This is the vue tab
208+
</Tab>
209+
<Tab flavor="solid">
210+
This is the solid tab
211+
</Tab>
212+
</Tabs>
115213

116214
## StepList
117215

‎content/ui/activity-indicator.md‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,43 @@ contributors:
1515
<img src="../assets/images/screenshots/android/ActivityIndicator.png"/>
1616
</DeviceFrame>
1717

18+
<Tabs>
19+
<Tab flavor="vue">
20+
21+
<<< @/../examples/vue/src/ui/ActivityIndicator/component.vue#example
22+
23+
</Tab>
24+
<Tab flavor="typescript">
25+
26+
<<< @/../examples/typescript/src/ui/ActivityIndicator/template.xml#example
27+
28+
</Tab>
29+
<Tab flavor="javascript">
30+
1831
<<< @/../examples/typescript/src/ui/ActivityIndicator/template.xml#example
32+
33+
</Tab>
34+
<Tab flavor="angular">
35+
1936
<<< @/../examples/angular/src/ui/ActivityIndicator/component.html#example
37+
38+
</Tab>
39+
<Tab flavor="svelte">
40+
41+
<<< @/../examples/svelte/app/components/ui/ActivityIndicator.svelte#example
42+
43+
</Tab>
44+
<Tab flavor="react">
45+
2046
<<< @/../examples/react/src/components/ui/activityindicator.tsx#example
47+
48+
</Tab>
49+
<Tab flavor="solid">
50+
2151
<<< @/../examples/solid/src/ui/activityindicator.tsx#example
22-
<<< @/../examples/svelte/app/components/ui/ActivityIndicator.svelte#example
23-
<<< @/../examples/vue/src/ui/ActivityIndicator/component.vue#example
52+
53+
</Tab>
54+
</Tabs>
2455

2556
## Examples
2657

0 commit comments

Comments
 (0)