markdown/tabs.md at main

estel/markdown

Fork 0

Files

estel c9574a02de 初次提交旧的文档与blog

2025-08-08 10:01:03 +08:00

8.5 KiB

Raw Permalink Blame History

title, icon, badges

title

icon

badges

Tabs

lucide:table-2

value	to	target
Nuxt UI Pro	https://ui.nuxt.com/pro/prose/tabs	_blank

value	icon	to	target
Source	lucide:code	https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Tabs.vue	_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
  ```
  ::
::

::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!'); :: ::

::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>
    }
    ```
  ::
::

::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
  ```
  ::
::

::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!');
  ```
::

#### 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] ::

8.5 KiB Raw Permalink Blame History