Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: add charts installations step

Browse Source
This commit is contained in:
zernonia 2023-12-05 13:19:30 +08:00
parent b682af02a9
commit eff7d65f78
4 changed files with 114 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
apps/www/src/content/docs/charts/area.md
View File

@ -8,9 +8,36 @@ description: Displays a callout for user attention.
## Installation
<Callout>
Only works with Vue >3.3
</Callout>
<Steps>
### Run the following command
```bash
npx shadcn-vue@latest add chart-area
```
### Update `css`
Add the following tooltip styling to your `tailwind.css` file:
```css
@layer base {
:root {
/* ... */
--vis-tooltip-background-color: none !important;
--vis-tooltip-border-color: none !important;
--vis-tooltip-text-color: none !important;
--vis-tooltip-shadow-color: none !important;
--vis-tooltip-backdrop-filter: none !important;
--vis-tooltip-padding: none !important;
}
```
</Steps>

30
apps/www/src/content/docs/charts/bar.md
View File

@ -8,9 +8,35 @@ description: Displays a callout for user attention.
## Installation
<Callout>
Only works with Vue >3.3
</Callout>
<Steps>
### Run the following command
```bash
npx shadcn-vue@latest add chart-bar
```
### Update `css`
Add the following tooltip styling to your `tailwind.css` file:
```css
@layer base {
:root {
/* ... */
--vis-tooltip-background-color: none !important;
--vis-tooltip-border-color: none !important;
--vis-tooltip-text-color: none !important;
--vis-tooltip-shadow-color: none !important;
--vis-tooltip-backdrop-filter: none !important;
--vis-tooltip-padding: none !important;
}
```
</Steps>

31
apps/www/src/content/docs/charts/donut.md
View File

@ -8,9 +8,36 @@ description: Displays a callout for user attention.
## Installation
<Callout>
Only works with Vue >3.3
</Callout>
<Steps>
### Run the following command
```bash
npx shadcn-vue@latest add chart-donut
```
### Update `css`
Add the following tooltip styling to your `tailwind.css` file:
```css
@layer base {
:root {
/* ... */
--vis-tooltip-background-color: none !important;
--vis-tooltip-border-color: none !important;
--vis-tooltip-text-color: none !important;
--vis-tooltip-shadow-color: none !important;
--vis-tooltip-backdrop-filter: none !important;
--vis-tooltip-padding: none !important;
}
```
</Steps>

30
apps/www/src/content/docs/charts/line.md
View File

@ -8,9 +8,35 @@ description: Displays a callout for user attention.
## Installation
<Callout>
Only works with Vue >3.3
</Callout>
<Steps>
### Run the following command
```bash
npx shadcn-vue@latest add chart-line
```
### Update `css`
Add the following tooltip styling to your `tailwind.css` file:
```css
@layer base {
:root {
/* ... */
--vis-tooltip-background-color: none !important;
--vis-tooltip-border-color: none !important;
--vis-tooltip-text-color: none !important;
--vis-tooltip-shadow-color: none !important;
--vis-tooltip-backdrop-filter: none !important;
--vis-tooltip-padding: none !important;
}
```
</Steps>