diff --git a/docs/app/Examples/modules/Accordion/Advanced/AccordionExampleForm.js b/docs/app/Examples/modules/Accordion/Advanced/AccordionExampleForm.js new file mode 100644 index 0000000000..f69a603f5b --- /dev/null +++ b/docs/app/Examples/modules/Accordion/Advanced/AccordionExampleForm.js @@ -0,0 +1,30 @@ +import React from 'react' +import { Accordion, Button, Form, Segment } from 'semantic-ui-react' + +const panels = [ + { + title: 'Optional Details', + content: { + as: Form.Input, + key: 'content', + label: 'Maiden Name', + placeholder: 'Maiden Name', + }, + }, +] + +const AccordionExampleForm = () => ( + +
+ + + + + + + + +
+) + +export default AccordionExampleForm diff --git a/docs/app/Examples/modules/Accordion/Advanced/AccordionExampleMenu.js b/docs/app/Examples/modules/Accordion/Advanced/AccordionExampleMenu.js new file mode 100644 index 0000000000..ec5969d5e7 --- /dev/null +++ b/docs/app/Examples/modules/Accordion/Advanced/AccordionExampleMenu.js @@ -0,0 +1,64 @@ +import React, { Component } from 'react' +import { Accordion, Form, Menu } from 'semantic-ui-react' + +const ColorForm = ( +
+ + + + + + +
+) + +const SizeForm = ( +
+ + + + + + +
+) + +export default class AccordionExampleMenu extends Component { + state = { activeIndex: 0 } + + handleClick = (e, titleProps) => { + const { index } = titleProps + const { activeIndex } = this.state + const newIndex = activeIndex === index ? -1 : index + + this.setState({ activeIndex: newIndex }) + } + + render() { + const { activeIndex } = this.state + + return ( + + + + + + + + + + + + ) + } +} diff --git a/docs/app/Examples/modules/Accordion/Advanced/AccordionExampleNested.js b/docs/app/Examples/modules/Accordion/Advanced/AccordionExampleNested.js new file mode 100644 index 0000000000..ed3c4a855f --- /dev/null +++ b/docs/app/Examples/modules/Accordion/Advanced/AccordionExampleNested.js @@ -0,0 +1,37 @@ +import React from 'react' +import { Accordion } from 'semantic-ui-react' + +const level1Panels = [ + { title: 'Level 1A', content: 'Level 1A Contents' }, + { title: 'Level 1B', content: 'Level 1B Contents' }, +] + +const Level1Content = ( +
+ Welcome to level 1 + +
+) + +const level2Panels = [ + { title: 'Level 2A', content: 'Level 2A Contents' }, + { title: 'Level 2B', content: 'Level 2B Contents' }, +] + +const Level2Content = ( +
+ Welcome to level 2 + +
+) + +const rootPanels = [ + { title: 'Level 1', content: { content: Level1Content, key: 'content-1' } }, + { title: 'Level 2', content: { content: Level2Content, key: 'content-2' } }, +] + +const AccordionExampleNested = () => ( + +) + +export default AccordionExampleNested diff --git a/docs/app/Examples/modules/Accordion/Advanced/AccordionExampleShorthand.js b/docs/app/Examples/modules/Accordion/Advanced/AccordionExampleShorthand.js new file mode 100644 index 0000000000..a358a6c5b0 --- /dev/null +++ b/docs/app/Examples/modules/Accordion/Advanced/AccordionExampleShorthand.js @@ -0,0 +1,27 @@ +import faker from 'faker' +import _ from 'lodash' +import React from 'react' +import { Accordion, Label, Message } from 'semantic-ui-react' + +const panels = _.times(3, i => ({ + title: { + content: