Skip to content

list.md

Latest commit

聽

History

History
390 lines (279 loc) 路 7.52 KB

list.md

File metadata and controls

390 lines (279 loc) 路 7.52 KB
Raw
icon list-unordered
tags
component

List

Retype includes broad support for creating lists of items, including unordered, ordered, and description lists.

Unordered lists

Unordered list variations include:

  1. - for bullet
  2. - [x] for checked item
  3. - [ ] for unchecked item

Bullet

- Item 1
- Item 2
- Item 3
  • Item 1
  • Item 2
  • Item 3

Task list

- [x] Item 1
- [x] Item 2
- [ ] Item 3
  • Item 1
  • Item 2
  • Item 3

Icon list

By applying the following {.list-icon} generic attribute, you can convert a bullet list into an icon list.

{.list-icon}
- :icon-check-circle: Item 1
    - :icon-check-circle: This is sub-item 1.1
    - :icon-alert: This is sub-item 1.2
    - :icon-circle-slash: This is sub-item 1.3
- :icon-check-circle: Item 2
    - :icon-check-circle: This is sub-item 2.1
    - :icon-check-circle: This is sub-item 2.2
    - :icon-alert: This is sub-item 2.3
    - :icon-circle-slash: This is sub-item 2.4

{.list-icon}

  • :icon-check-circle: Item 1
    • :icon-check-circle: This is sub-item 1.1
    • :icon-alert: This is sub-item 1.2
    • :icon-circle-slash: This is sub-item 1.3
  • :icon-check-circle: Item 2
    • :icon-check-circle: This is sub-item 2.1
    • :icon-check-circle: This is sub-item 2.2
    • :icon-alert: This is sub-item 2.3
    • :icon-circle-slash: This is sub-item 2.4

Without the {.list-icon} css class applied, the above sample would render as:

  • :icon-check-circle: Item 1
    • :icon-check-circle: This is sub-item 1.1
    • :icon-alert: This is sub-item 1.2
    • :icon-circle-slash: This is sub-item 1.3
  • :icon-check-circle: Item 2
    • :icon-check-circle: This is sub-item 2.1
    • :icon-check-circle: This is sub-item 2.2
    • :icon-alert: This is sub-item 2.3
    • :icon-circle-slash: This is sub-item 2.4

!!!tip Additional techniques for creating icon and emoji lists are outlined in issues #603 and #370. !!!

Ordered lists

Ordered list variations include:

  1. 1. for numbers (default)
  2. a. for lowercase letters
  3. A. for uppercase letters
  4. i. for lowercase Roman numerals
  5. I. for uppercase Roman numerals

Numbers

1. Item 1
2. Item 2
3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3

Lowercase letters

a. Item 1
b. Item 2
c. Item 3

a. Item 1 b. Item 2 c. Item 3

Uppercase letters

A. Item 1
B. Item 2
C. Item 3

A. Item 1 B. Item 2 C. Item 3

!!! Uppercase letter ordered lists are not broadly supported across all web browsers, so the above sample might render as a lowercase letter list for you. Hopefully, support within the web browsers will improve over time. !!!

Lowercase Roman numerals

i. Item 1
ii. Item 2
iii. Item 3

i. Item 1 ii. Item 2 iii. Item 3

Uppercase Roman numerals

I. Item 1
II. Item 2
III. Item 3

I. Item 1 II. Item 2 III. Item 3

!!! Uppercase Roman numeral ordered lists are not broadly supported across all web browsers, so the above sample might render as a lowercase Roman numeral list for you. Hopefully, support within the web browsers will improve over time. !!!

Description List

A Description List (<dl>) is a way to display Terms (<dt>) along with their corresponding Details (<dd>).

The Description List is commonly used to create a glossary or dictionary where you have a word and its meaning listed together.

Basic list

Term 1
: Detail 1

Term 2
: Detail 2

Term 3
: Detail 3

Term 1 : Detail 1

Term 2 : Detail 2

Term 3 : Detail 3

Include nested components

Term 1
: Detail 1
  With a paragraph
  > This is a block quote

  - Nested item 1
  - Nested item 2

Term 2
: Detail 2
  This is a paragraph continuing the details.

  > This is a blockquote inside the details.

Term 3
: Detail 3

Term 1 : Detail 1 With a paragraph

This is a block quote

  • Nested item 1
  • Nested item 2

Term 2 : Detail 2 This is a paragraph continuing the details.

This is a blockquote inside the details.

Tight vs Loose Lists

Markdown supports two types of list formatting: tight and loose lists. The difference between them is determined by whether list items are separated by blank lines or not.

Tight Lists

Tight lists have no blank lines between list items. They are more compact and are useful for simple, concise lists.

- First item
- Second item
    - Nested item 1
    - Nested item 2
- Third item

Here's what the above tight list will be created as in the generated website:

  • First item
  • Second item
    • Nested item 1
    • Nested item 2
  • Third item

Loose Lists

Loose lists have blank lines between list items. They are useful when list items contain multiple paragraphs or complex content.

- First item with multiple paragraphs.

  This is a second paragraph in the first item.

- Second item with nested content.

    - Nested item 1
    
    - Nested item 2

- Third item with a blockquote.

  > This is a blockquote inside a list item.

Here's what the above loose list will be created as in the generated website:

  • First item with multiple paragraphs.

    This is a second paragraph in the first item.

  • Second item with nested content.

    • Nested item 1

    • Nested item 2

  • Third item with a blockquote.

    This is a blockquote inside a list item.

!!!tip When mixing tight and loose lists, be aware that the rendering may appear inconsistent. For best results, maintain consistent formatting within nested lists by using either all tight or all loose formatting. !!!

Generic Attributes

Generic attributes can be applied to list items to customize their appearance, add an id or any other custom attributes.

To add a custom CSS class, add the generic attribute syntax {.class-name} to the end of a list item.

Custom Marker Colors

You can customize the color of list item markers using CSS and generic attributes:

<style>
li.item-green::marker {
    color: green;
}

li.item-yellow::marker {
    color: yellow;
}

li.item-red::marker {
    color: red;
}
</style>

- Item 1 (green) {.item-green}
- Item 2 (yellow) {.item-yellow}
- Item 3 (red) {.item-red}
<style> li.item-green::marker { color: green; } li.item-yellow::marker { color: yellow; } li.item-red::marker { color: red; } </style>
  • Item 1 (green) {.item-green}
  • Item 2 (yellow) {.item-yellow}
  • Item 3 (red) {.item-red}

Custom Text Colors

You can also apply a custom color to a list item:

<style>
.item-orange {
    color: orange;
}
</style>

- Item 1
- Item 2 (orange) {.item-orange}
- Item 3
<style> .item-orange { color: orange; } </style>
  • Item 1
  • Item 2 (orange) {.item-orange}
  • Item 3

Custom id

A custom id can be added to the list item by appending the {#id-name} generic attribute syntax:

- Regular item
- Item with custom ID {#custom-id}
- Another regular item

The above will create one list item with the custom id attribute:

<li>Regular item</li>
<li id="custom-id">Item with custom ID </li>
<li>Another regular item</li>