doc(menu): add documentation about menu widget

algolia · Oct 18, 2017 · e8cab73 · e8cab73
1 parent e7a3a15
commit e8cab73
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 0 deletions.
diff --git a/docs/src/components/menu.md b/docs/src/components/menu.md
@@ -0,0 +1,42 @@
+---
+title: Menu
+mainTitle: Components
+layout: main.pug
+category: Components
+withHeadings: true
+navWeight: 6
+editable: true
+githubSource: docs/src/components/menu.md
+---
+
+Create a menu based on a facet. A menu displays facet values and let the user selects only one value at a time. It also displays an empty value which lets the user “unselect” any previous selection.
+
+## Usage
+
+```html
+<ais-menu :attribute="category"></ais-menu>
+```
+
+## Props
+
+| Name       | Type   | Default                                        | Description                      |
+|------------|--------|------------------------------------------------|----------------------------------|
+| attribute  | String |                                                | The attribute name to refine on. |
+| limit      | Number | `10`                                           | The number of values to display  |
+| sort-by    | Array  | `['isRefined:desc', 'count:desc', 'name:asc']` | The sorting strategy             |
+
+## Slots
+
+| Name    | Props                | Description                                                                                     |
+|---------|----------------------|-------------------------------------------------------------------------------------------------|
+| header  |                      | Add content to the top of the component, which will be hidden when the component is hidden      |
+| footer  |                      | Add content to the bottom of the component, which will be hidden when the component is hidden   |
+
+## CSS Classes
+
+| ClassName                     | Description                 |
+|-------------------------------|-----------------------------|
+| `ais-menu`               | Container class             |
+| `ais-menu__item`         | A refinement option         |
+| `ais-menu__item--active` | An active refinement option |
+| `ais-menu__count`        | A refinement option count   |
diff --git a/docs/src/getting-started/using-components.md b/docs/src/getting-started/using-components.md
@@ -25,6 +25,7 @@ You can try most of them out in our playground.
 * [Results](components/results.html)
 * [No Results](components/no-results.html)
 * [Refinement List](components/refinement-list.html)
+* [Menu](components/menu.html)
 * [Tree Menu](components/tree-menu.html)
 * [Pagination](components/pagination.html)
 * [Clear](components/clear.html)