初次提交旧的文档与blog
This commit is contained in:
375
docs/1.简单文档/5.components/tabs.md
Normal file
375
docs/1.简单文档/5.components/tabs.md
Normal file
@@ -0,0 +1,375 @@
|
||||
---
|
||||
title: Tabs
|
||||
icon: lucide:table-2
|
||||
badges:
|
||||
- value: Nuxt UI Pro
|
||||
to: https://ui.nuxt.com/pro/prose/tabs
|
||||
target: _blank
|
||||
- value: Source
|
||||
icon: lucide:code
|
||||
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Tabs.vue
|
||||
target: _blank
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::tabs
|
||||
::div{label="PostgreSQL" icon="lucide:database"}
|
||||
### PostgreSQL column types
|
||||
|
||||
```ts
|
||||
import { integer, pgTable } from 'drizzle-orm/pg-core';
|
||||
|
||||
export const table = pgTable('table', {
|
||||
int: integer('int')
|
||||
});
|
||||
```
|
||||
::
|
||||
::div{label="MySQL"}
|
||||
### MySQL column types
|
||||
|
||||
```ts
|
||||
import { int, mysqlTable } from 'drizzle-orm/mysql-core';
|
||||
|
||||
const table = mysqlTable('table', {
|
||||
int: int('int')
|
||||
});
|
||||
```
|
||||
::
|
||||
::div{label="SQLite"}
|
||||
### SQLite column types
|
||||
|
||||
```ts
|
||||
import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
|
||||
|
||||
const table = sqliteTable('table', {
|
||||
id: integer('id')
|
||||
});
|
||||
|
||||
// you can customize integer mode to be number, boolean, timestamp, timestamp_ms
|
||||
integer('id', { mode: 'number' });
|
||||
integer('id', { mode: 'boolean' });
|
||||
integer('id', { mode: 'timestamp_ms' });
|
||||
integer('id', { mode: 'timestamp' }); // Date
|
||||
```
|
||||
::
|
||||
::
|
||||
::
|
||||
```mdc height=300
|
||||
::tabs
|
||||
::div{label="PostgreSQL" icon="lucide:database"}
|
||||
### PostgreSQL column types
|
||||
|
||||
```ts
|
||||
import { integer, pgTable } from 'drizzle-orm/pg-core';
|
||||
|
||||
export const table = pgTable('table', {
|
||||
int: integer('int')
|
||||
});
|
||||
```
|
||||
::
|
||||
::div{label="MySQL"}
|
||||
### MySQL column types
|
||||
|
||||
```ts
|
||||
import { int, mysqlTable } from 'drizzle-orm/mysql-core';
|
||||
|
||||
const table = mysqlTable('table', {
|
||||
int: int('int')
|
||||
});
|
||||
```
|
||||
::
|
||||
::div{label="SQLite"}
|
||||
### SQLite column types
|
||||
|
||||
```ts
|
||||
import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
|
||||
|
||||
const table = sqliteTable('table', {
|
||||
id: integer('id')
|
||||
});
|
||||
|
||||
// you can customize integer mode to be number, boolean, timestamp, timestamp_ms
|
||||
integer('id', { mode: 'number' });
|
||||
integer('id', { mode: 'boolean' });
|
||||
integer('id', { mode: 'timestamp_ms' });
|
||||
integer('id', { mode: 'timestamp' }); // Date
|
||||
```
|
||||
::
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Card Style
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::tabs{variant="card"}
|
||||
::div{label="Card Tab"}
|
||||
### This is a card-style tab
|
||||
::
|
||||
::div{label="Tab 2" icon="lucide:atom"}
|
||||
This is Tab #2
|
||||
::
|
||||
```ts [Code Tab]
|
||||
console.log('Hello World!');
|
||||
```
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::tabs{variant="card"}
|
||||
::div{label="Card Tab"}
|
||||
### This is a card-style tab
|
||||
::
|
||||
::div{label="Tab 2" icon="lucide:atom"}
|
||||
This is Tab #2
|
||||
::
|
||||
```ts [Code Tab]
|
||||
console.log('Hello World!');
|
||||
```
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Line Style
|
||||
:badge[0.6.4]{variant="outline"}
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::tabs{variant="line"}
|
||||
::div{label="Preview" class="border flex min-h-[200px] w-full justify-center p-10 items-center rounded-lg shadow-xs"}
|
||||
:badge[Badge]
|
||||
::
|
||||
::div{label="Code"}
|
||||
```tsx
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
|
||||
export function BadgeDemo() {
|
||||
return <Badge>Badge</Badge>
|
||||
}
|
||||
```
|
||||
::
|
||||
::
|
||||
::
|
||||
```mdc
|
||||
::tabs{variant="line"}
|
||||
::div{label="Preview" class="border flex min-h-[200px] w-full justify-center p-10 items-center rounded-lg shadow-xs"}
|
||||
:badge[Badge]
|
||||
::
|
||||
::div{label="Code"}
|
||||
```tsx
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
|
||||
export function BadgeDemo() {
|
||||
return <Badge>Badge</Badge>
|
||||
}
|
||||
```
|
||||
::
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Combobox Style
|
||||
:badge[0.7.5]{variant="outline"}
|
||||
|
||||
::stack
|
||||
::div{class="p-4"}
|
||||
::tabs{variant="combobox" search-placeholder="Search database..." search-empty="No database found."}
|
||||
::div{label="PostgreSQL"}
|
||||
### PostgreSQL column types
|
||||
|
||||
```ts
|
||||
import { integer, pgTable } from 'drizzle-orm/pg-core';
|
||||
|
||||
export const table = pgTable('table', {
|
||||
int: integer('int')
|
||||
});
|
||||
```
|
||||
::
|
||||
::div{label="MySQL"}
|
||||
### MySQL column types
|
||||
|
||||
```ts
|
||||
import { int, mysqlTable } from 'drizzle-orm/mysql-core';
|
||||
|
||||
const table = mysqlTable('table', {
|
||||
int: int('int')
|
||||
});
|
||||
```
|
||||
::
|
||||
::div{label="SQLite"}
|
||||
### SQLite column types
|
||||
|
||||
```ts
|
||||
import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
|
||||
|
||||
const table = sqliteTable('table', {
|
||||
id: integer('id')
|
||||
});
|
||||
|
||||
// you can customize integer mode to be number, boolean, timestamp, timestamp_ms
|
||||
integer('id', { mode: 'number' });
|
||||
integer('id', { mode: 'boolean' });
|
||||
integer('id', { mode: 'timestamp_ms' });
|
||||
integer('id', { mode: 'timestamp' }); // Date
|
||||
```
|
||||
::
|
||||
::
|
||||
::
|
||||
```mdc height=300
|
||||
::tabs{variant="combobox" search-placeholder="Search database..." search-empty="No database found."}
|
||||
::div{label="PostgreSQL"}
|
||||
### PostgreSQL column types
|
||||
|
||||
```ts
|
||||
import { integer, pgTable } from 'drizzle-orm/pg-core';
|
||||
|
||||
export const table = pgTable('table', {
|
||||
int: integer('int')
|
||||
});
|
||||
```
|
||||
::
|
||||
::div{label="MySQL"}
|
||||
### MySQL column types
|
||||
|
||||
```ts
|
||||
import { int, mysqlTable } from 'drizzle-orm/mysql-core';
|
||||
|
||||
const table = mysqlTable('table', {
|
||||
int: int('int')
|
||||
});
|
||||
```
|
||||
::
|
||||
::div{label="SQLite"}
|
||||
### SQLite column types
|
||||
|
||||
```ts
|
||||
import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
|
||||
|
||||
const table = sqliteTable('table', {
|
||||
id: integer('id')
|
||||
});
|
||||
|
||||
// you can customize integer mode to be number, boolean, timestamp, timestamp_ms
|
||||
integer('id', { mode: 'number' });
|
||||
integer('id', { mode: 'boolean' });
|
||||
integer('id', { mode: 'timestamp_ms' });
|
||||
integer('id', { mode: 'timestamp' }); // Date
|
||||
```
|
||||
::
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Synced Tabs
|
||||
:badge[0.8.0]{variant="outline"}
|
||||
|
||||
:read-more{to="/components/docs/pm"}
|
||||
|
||||
::stack
|
||||
::div{class="p-4 md:p-8"}
|
||||
#### Scope 1
|
||||
::tabs{variant="card" sync="your-scope-name"}
|
||||
::div{label="Card Tab"}
|
||||
### This is a card-style tab
|
||||
::
|
||||
```ts [Code Tab]
|
||||
console.log('Hello World!');
|
||||
```
|
||||
::
|
||||
::tabs{variant="card" sync="your-scope-name"}
|
||||
::div{label="Card Tab"}
|
||||
### This is a card-style tab
|
||||
::
|
||||
::div{label="Tab 2" icon="lucide:atom"}
|
||||
This is Tab #2
|
||||
::
|
||||
```ts [Code Tab]
|
||||
console.log('Hello World!');
|
||||
```
|
||||
::
|
||||
|
||||
#### Scope 2
|
||||
::tabs{variant="line" sync="scope2"}
|
||||
::div{label="Card Tab"}
|
||||
### This is a card-style tab
|
||||
::
|
||||
::div{label="Tab 2" icon="lucide:atom"}
|
||||
This is Tab #2
|
||||
::
|
||||
```ts [Code Tab]
|
||||
console.log('Hello World!');
|
||||
```
|
||||
::
|
||||
::tabs{variant="separate" sync="scope2"}
|
||||
::div{label="Card Tab"}
|
||||
### This is a card-style tab
|
||||
::
|
||||
::div{label="Tab 2" icon="lucide:atom"}
|
||||
This is Tab #2
|
||||
::
|
||||
```ts [Code Tab]
|
||||
console.log('Hello World!');
|
||||
```
|
||||
::
|
||||
::
|
||||
```mdc height=400
|
||||
#### Scope 1
|
||||
::tabs{variant="card" sync="your-scope-name"}
|
||||
::div{label="Card Tab"}
|
||||
### This is a card-style tab
|
||||
::
|
||||
```ts [Code Tab]
|
||||
console.log('Hello World!');
|
||||
```
|
||||
::
|
||||
::tabs{variant="card" sync="your-scope-name"}
|
||||
::div{label="Card Tab"}
|
||||
### This is a card-style tab
|
||||
::
|
||||
::div{label="Tab 2" icon="lucide:atom"}
|
||||
This is Tab #2
|
||||
::
|
||||
```ts [Code Tab]
|
||||
console.log('Hello World!');
|
||||
```
|
||||
::
|
||||
|
||||
#### Scope 2
|
||||
::tabs{variant="line" sync="scope2"}
|
||||
::div{label="Card Tab"}
|
||||
### This is a card-style tab
|
||||
::
|
||||
::div{label="Tab 2" icon="lucide:atom"}
|
||||
This is Tab #2
|
||||
::
|
||||
```ts [Code Tab]
|
||||
console.log('Hello World!');
|
||||
```
|
||||
::
|
||||
::tabs{variant="separate" sync="scope2"}
|
||||
::div{label="Card Tab"}
|
||||
### This is a card-style tab
|
||||
::
|
||||
::div{label="Tab 2" icon="lucide:atom"}
|
||||
This is Tab #2
|
||||
::
|
||||
```ts [Code Tab]
|
||||
console.log('Hello World!');
|
||||
```
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
::field-group
|
||||
:field{name="variant" type="'separate' | 'card' | 'line' | 'combobox'" default-value="'separate'"}
|
||||
:field{name="padded" type="boolean" default-value="true"}
|
||||
:field{name="disableSearch" type="boolean" default-value="false"}[For combobox variant]
|
||||
:field{name="searchPlaceholder" type="string" default-value="'Search Tab...'"}[For combobox variant]
|
||||
:field{name="searchEmpty" type="string" default-value="'No tab found.'"}[For combobox variant]
|
||||
:field{name="sync" type="string"}[Sync scope]
|
||||
::
|
||||
Reference in New Issue
Block a user