UI Kit

查看本页面的 markdown 源代码

块引用 :id=blockquotes

Cras aliquet nulla quis metus tincidunt, sed placerat enim cursus. Etiam turpis nisl, posuere eu condimentum ut, interdum a risus. Sed non luctus mi. Quisque malesuada risus sit amet tortor aliquet, a posuere ex iaculis. Vivamus ultrices enim dui, eleifend porttitor elit aliquet sed.

- 引用来源

嵌套 :id=nested

第 1 级

第 2 级

第 3 级

按钮 :id=buttons

默认按钮 :id=default

按钮

基础按钮 :id=basic

按钮链接按钮

主按钮 :id=primary

按钮链接按钮

次要按钮 :id=secondary

按钮链接按钮

标注 :id=callouts

Caution

Caution callout with inline code.

Important

Important callout with inline code.

Note

Note callout with inline code.

Tip

Tip callout with inline code.

Warning

Warning callout with inline code.

多行

Note

List item 1
List item 2

Text

<p>Hello, World!</p>

嵌套

Note

Level 1

[!NOTE] Level 2

[!NOTE] Level 3

旧版风格

!> Legacy Important callout with inline code.

?> Legacy Tip with inline code.

代码 :id=code

这是 内联代码

const add = (num1, num2) => num1 + num2;
const total = add(1, 2);

console.log(total); // 3

<body>
  <p>Hello</p>
</body>

颜色 :id=colors

主题 :id=theme

<figcaption>1<figcaption>

<figcaption>2<figcaption>

<figcaption>3<figcaption>

<figcaption>4<figcaption>

<figcaption>主题颜色<figcaption>

<figcaption>5<figcaption>

<figcaption>6<figcaption>

<figcaption>7<figcaption>

<figcaption>8<figcaption>

单色 :id=monochromatic

<figcaption>Min<figcaption>

<figcaption>1<figcaption>

<figcaption>2<figcaption>

<figcaption>3<figcaption>

<figcaption>4<figcaption>

<figcaption>5<figcaption>

<figcaption>6<figcaption>

<figcaption>7<figcaption>

<figcaption>8<figcaption>

<figcaption>9<figcaption>

<figcaption>Max<figcaption>

详细信息 :id=details

详细信息（点击打开）

Suscipit nemo aut ex suscipit voluptatem laboriosam odio velit. Ipsum eveniet labore sequi non optio vel. Ut culpa ad accusantium est aut harum ipsam voluptatum. Velit eum incidunt non sint. Et molestiae veniam natus autem vel assumenda ut numquam esse. Non nisi id qui vero corrupti quos et.

详细信息（默认打开）

表格要素 :id=form-elements

Fieldset

Legend

Label

Input

Checkbox

HTML
CSS
JavaScript

Datalist

Label
Earth Jupiter Mars Mercury Neptune Saturn Uranus Venus

Radio

HTML
CSS
JavaScript

Text

First name

Toggles

Checkbox (multi-select)

HTML
CSS
JavaScript

Radio (single-select)

HTML
CSS
JavaScript

Select

Label
Select a planet... Earth Jupiter Mars Mercury Neptune Saturn Uranus Venus

Textarea

<textarea rows="5" cols="40">Ipsam totam tempora. Dolorum voluptas error tempore asperiores vitae error laboriosam autem possimus. </textarea>

Headings

Heading 1 {docsify-ignore}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse luctus nulla eu ex varius, a varius elit tincidunt. Aenean arcu magna, gravida id purus a, interdum convallis turpis. Aenean id ipsum eu tortor sollicitudin scelerisque in quis elit.

Heading 2 {docsify-ignore}

Vestibulum lobortis laoreet nunc vel vulputate. In et augue non lectus pellentesque molestie et ac justo. Sed sed turpis ut diam gravida sagittis nec at neque. Vivamus id tellus est. Nam ac dignissim mi. Vestibulum nec sem convallis, condimentum augue at, commodo diam.

Heading 3 {docsify-ignore}

Suspendisse sit amet tincidunt nibh, ac interdum velit. Ut orci diam, dignissim at enim sit amet, placerat rutrum magna. Mauris consectetur nibh eget sem feugiat, sit amet congue quam laoreet. Curabitur sed massa metus.

Heading 4 {docsify-ignore}

Donec odio orci, facilisis ac vehicula in, vestibulum ut urna. Ut bibendum ullamcorper risus, ac euismod leo maximus sed. In pulvinar sagittis rutrum. Morbi quis cursus diam. Cras ac laoreet nulla, rhoncus sodales dui.

Heading 5 {docsify-ignore}

Commodo sit veniam nulla cillum labore ullamco aliquip quis. Consequat nulla fugiat consequat ex duis proident. Adipisicing excepteur tempor exercitation ad. Consectetur voluptate Lorem sint elit exercitation ullamco dolor.

Heading 6 {docsify-ignore}

Ipsum ea amet dolore mollit incididunt fugiat nulla laboris est sint voluptate. Ex culpa id amet ipsum amet pariaturipsum officia sit laborum irure ullamco deserunt. Consequat qui tempor occaecat nostrud proident.

Horizontal Rule

Text before rule.

Text after rule.

IFrame

Example

Images

Inline-style

Reference-style

Light / Dark Theme

Keyboard

Default

&#8963&#8997&#9003

CtrlAltDel

⌃ Control⌥ Alt⌫ Delete

Alternate

&#8963&#8997&#9003

CtrlAltDel

⌃ Control⌥ Alt⌫ Delete

Entities

↑

Arrow Up

↓

Arrow Down

←

Arrow Left

→

Arrow Right

⇪

Caps Lock

⌘

Command

⌃

Control

⌫

Delete

⌦

Delete (Forward)

↘

End

⌤

Enter

⎋

Escape

↖

Home

⇞

Page Up

⇟

Page Down

⌥

Option, Alt

↵

Return

⇧

Shift

␣

Space

⇥

Tab

⇤

Tab + Shift

链接 :id=links

Reference link by self

列表 :id=lists

有序列表 :id=ordered-list

Ordered
Ordered
1. Nested
2. Nested (Wrapping): Similique tempora et. Voluptatem consequuntur ut. Rerum minus et sed beatae. Consequatur ut nemo laboriosam quo architecto quia qui. Corrupti aut omnis velit.
Ordered (Wrapping): Error minima modi rem sequi facere voluptatem. Est nihil veritatis doloribus et corporis ipsam. Pariatur eos ipsam qui odit labore est voluptatem enim. Veritatis est qui ut pariatur inventore.

无序列表 :id=unordered-list

Unordered
Unordered
- Nested
- Nested (Wrapping): Quia consectetur sint vel ut excepturi ipsa voluptatum suscipit hic. Ipsa error qui molestiae harum laboriosam. Rerum non amet illo voluptatem odio pariatur. Ut minus enim.
Unordered (Wrapping): Fugiat qui tempore ratione amet repellendus repudiandae non. Rerum nisi officia enim. Itaque est alias voluptatibus id molestiae accusantium. Cupiditate sequi qui omnis sed faceere aliquid quia ut.

任务清单 :id=task-list

Task
Task
- Subtask
- Subtask
- Subtask
Task (Wrapping): Earum consequuntur itaque numquam sunt error omnis ipsum repudiandae. Est assumenda neque eum quia quisquam laborum beatae autem ad. Fuga fugiat perspiciatis harum quia dignissimos molestiae. Officia quo eveniet tempore modi voluptates consequatur. Eum odio adipisci labore.
- Subtask (Wrapping): Vel possimus eaque laborum. Voluptates qui debitis quaerat atque molestiae quia explicabo doloremque. Reprehenderit perspiciatis a aut impedit temporibus aut quasi quia. Incidunt sed recusandae vitae asperiores sit in.

Output

Et cum fugiat nesciunt voluptates. A atque quos doloribus dolorem quo. Et dignissimos omnis nam. Recusandae voluptatem nam. Tenetur veniam et qui consequatur. Aut sequi atque fuga itaque iusto eum nihil quod iure.

Item
Item
Item

表格 :id=tables

Alignment

Left Align	Center Align	Right Align	Non‑Breaking Header
A1	A2	A3	A4
B1	B2	B3	B4
C1	C2	C3	C4

Headerless


A1	A2	A3	A4
B1	B2	B3	B4
C1	C2	C3	C4

Scrolling

Header
Dicta in nobis dolor adipisci qui. Accusantium voluptates est dolor laboriosam qui voluptatibus. Veritatis eos aspernatur iusto et dicta quas. Fugit voluptatem dolorum qui quisquam. nihil
Aut praesentium officia aut delectus. Quas atque reprehenderit saepe. Et voluptatibus qui dolores rem facere in dignissimos id aut. Debitis excepturi delectus et quos numquam magnam.
Sed eum atque at laborum aut et repellendus ullam dolor. Cupiditate saepe voluptatibus odit est pariatur qui. Hic sunt nihil optio enim eum laudantium. Repellendus voluptate.

Text Elements

Marked text

Preformatted text

Sample Output

Small Text

This is _subscript

This is ^superscript

Underlined Text

Text Styles

Body text

Bold text

Italic text

Bold and italic text

~~Strikethrough~~

Uh oh!

FilesExpand file tree

ui-kit.md

Latest commit

History

ui-kit.md

File metadata and controls

UI Kit

块引用 :id=blockquotes

嵌套 :id=nested

按钮 :id=buttons

默认按钮 :id=default

基础按钮 :id=basic

主按钮 :id=primary

次要按钮 :id=secondary

标注 :id=callouts

代码 :id=code

颜色 :id=colors

主题 :id=theme

单色 :id=monochromatic

详细信息 :id=details

表格要素 :id=form-elements

Fieldset

Input

Checkbox

Datalist

Radio

Text

Toggles

Select

Textarea

Headings

Heading 1 {docsify-ignore}

Heading 2 {docsify-ignore}

Heading 3 {docsify-ignore}

Heading 4 {docsify-ignore}

Heading 5 {docsify-ignore}

Heading 6 {docsify-ignore}

Horizontal Rule

IFrame

Images

Inline-style

Reference-style

Light / Dark Theme

Keyboard

Default

Alternate

Entities

链接 :id=links

列表 :id=lists

有序列表 :id=ordered-list

无序列表 :id=unordered-list

任务清单 :id=task-list

Output

表格 :id=tables

Alignment

Headerless

Scrolling

Text Elements

Text Styles