Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save ZhipingYang/c1a9c0835aa0c1630487bf6fa134078b to your computer and use it in GitHub Desktop.

Select an option

Save ZhipingYang/c1a9c0835aa0c1630487bf6fa134078b to your computer and use it in GitHub Desktop.
How to add a collapsible section in markdown.

A collapsible section with markdown

Click to expand!

Heading

  1. A numbered
  2. list
    • With some
    • Sub bullets

A collapsible section with code

Click to expand!
  function whatIsLove() {
    console.log('Baby Don't hurt me. Don't hurt me');
    return 'No more';
  }

How to structure the markup

# A collapsible section with markdown
<details>
  <summary>Click to expand!</summary>
  
  ## Heading
  1. A numbered
  2. list
     * With some
     * Sub bullets
</details>

NB: Make sure you have an empty line after the closing </summary> tag.

NB: Make sure you have an empty line after the closing </details> tag if you have multiple collapsible sections.

Make collapsible section default opened

Note:
all the UIKit's accessibilityIdentifier is a preperty of the protocol UIAccessibilityIdentification and all enum's rawValue is default to follow RawRepresentable

Expand for steps details
  • 1.1 Define the enums
    • set rawValue in String
    • append PrettyRawRepresentable if need
  • 1.2 set UIKit's accessibilityIdentifier by enums's rawValue
    • method1: infix operator
    • method2: UIAccessibilityIdentification's extension
  • 1.3 Apply in UITest target
<p align="center">
<img width=150 src="https://user-images.githubusercontent.com/9360037/62184933-ecbe4380-b392-11e9-82dd-802b6b2e8b82.png">
</p>
<br>
<p align="center">
<a href="https://zhipingyang.github.io/Einstein">
<img alt="Documentation" src="http://img.shields.io/badge/read_the-docs-2196f3.svg">
</a>
<a href="http://cocoapods.org/pods/Einstein">
<image alt="Version" src="https://img.shields.io/cocoapods/v/Einstein.svg?style=flat">
</a>
<image alt="CI Status" src="https://img.shields.io/badge/Swift-5.0-orange.svg">
<a href="http://cocoapods.org/pods/Einstein">
<image alt="License" src="https://img.shields.io/cocoapods/l/Einstein.svg?style=flat">
</a>
<a href="http://cocoapods.org/pods/Einstein">
<image alt="Platform" src="https://img.shields.io/cocoapods/p/Einstein.svg?style=flat">
</a>
<a href="https://travis-ci.org/ZhipingYang/Einstein">
<image alt="CI Status" src="http://img.shields.io/travis/ZhipingYang/Einstein.svg?style=flat">
</a>
</p>
| **LineChart** | **BarChart** |
|:-------:|:---------:|
| ![WechatIMG65](https://user-images.githubusercontent.com/9360037/62707044-4671de00-ba23-11e9-9ddc-57509edba0dc.jpeg) | ![WechatIMG66](https://user-images.githubusercontent.com/9360037/62707048-47a30b00-ba23-11e9-90a9-c414a92da2cc.jpeg) |
| single datas in linechart | single datas in linechart |
| ![WechatIMG70](https://user-images.githubusercontent.com/9360037/62711726-20047080-ba2c-11e9-8890-022fe4e58df9.jpeg) | ![click](https://user-images.githubusercontent.com/9360037/62712419-5ee6f600-ba2d-11e9-9605-aeaba3097e9b.gif) |
| **LineDotsClicked:** show all if the dots closed in multi-datas | **BarClicked:** custom click effects in multi-datas |
| ![gif](https://user-images.githubusercontent.com/9360037/62709107-54c1f900-ba27-11e9-8312-8fcec88a58d5.gif) | ![gif](https://user-images.githubusercontent.com/9360037/62709087-48d63700-ba27-11e9-86f3-e92e4e1bd094.gif) |
| scrolling linechart (did set row width) | scrolling barchart (did set row width) |
<p align="center">
<img width=33% src="https://user-images.githubusercontent.com/9360037/34407789-45fd3d5e-ebfb-11e7-91ca-71eefd1fc97c.png"> <img width=33% src="https://user-images.githubusercontent.com/9360037/34407792-46d402ee-ebfb-11e7-8776-5e11c6564cbe.png">
<img width=33% src="https://user-images.githubusercontent.com/9360037/34407800-480a2ee0-ebfb-11e7-9ccf-7e945ca5d88d.png">
</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment