Skip to main content
SimilarExport ZIP
100%

Contextual Components for Drop Downs?

✓ Published0🌍 Public
RRandomEtc
Last edited Oct 19, 2016
Created on Oct 19, 2016

This example shows how to build a contextual dropdown component using Ember 2.9 and its component APIs, including `{{yield}}` with a hash, `(component ...)`, and `(action ...)`. The `drop-down` component yields a trigger and content subcomponent, passing the `closed` state to the content and a toggle action to the trigger. A button toggles a CSS class that hides or shows the content paragraph. The code uses Ember.Component extensions, `classNameBindings`, and `toggleProperty` to manage the open/closed state.

AI-generated description

Similar vizzes

Loading thumbnail…

TestBug

This example demonstrates an interactive select dropdown component built with Ember.js. The component, defined in `components.select-dropdown.js`, maintains a bound `value` property and synchronizes it with the selected `<option>` element using observers and the `didRender` lifecycle hook. It supports plain string arrays or objects with `value` and `label` keys, with an optional empty default option. The application controller supplies a static `dropdownOptions` list, and the template renders the dropdown with a bound selection. The code relies on Ember’s component lifecycle methods (`didReceiveAttrs`, `didInsertElement`, `didRender`) and the `change` event handler to propagate user selections back to the controller.

FFrozenfire92
61% match
Loading thumbnail…

React dropdown

A React dropdown component demonstrates a simple interactive selector for family relationships. The example renders a dropdown menu with options like Self, Son, Daughter, and Relative, using the `react-dropdown` library and its default styling. The app is built with React 16 and ReactDOM, with the dropdown’s state managed through the component’s `value` and `options` props. The code uses a plain JavaScript array for the option data and renders the selection within a styled div using React’s JSX syntax.

AAndrea Picciau
57% match
Loading thumbnail…

Drop Down

This example demonstrates a pet selector interface built with React and D3. It shows a dropdown menu populated with five pet options, defaulting to "Dog," and logs the selected value to the console. The implementation uses React's `useState` hook to manage the selected value and a custom `DropDown` component that renders an HTML `<select>` element. The component accepts `options`, `selectedValue`, and an `onSelectedValueChange` callback, triggering the state update on user interaction. The code relies on React 16.9 and ReactDOM for rendering.

JJohn Lewis
57% match
Loading thumbnail…

dropdown

This example demonstrates a minimal React application that renders a static "Hello React" message inside a div element. The code uses React 17 and ReactDOM to mount the component into the page’s root container, with a CSS style that removes margins and hides overflow. The page loads React and ReactDOM from unpkg CDN links, and the application logic is bundled in a separate JavaScript file. No data visualization or interactive features are implemented beyond the basic text output.

Mmarianamartins87
56% match
Loading thumbnail…

Drop Downszzz

This example demonstrates how to build an interactive dropdown menu using React and D3, allowing users to select a pet from six predefined options. The code splits React components into separate files using ES6 modules and employs React Fragments to render multiple elements without extra DOM nodes. The `Dropdown` component manages user selection through React's `useState` hook, while D3 is loaded for potential data manipulation. The interface displays a labeled menu where choosing an option updates the selected value in real-time, with the current selection logged to the console.

Sseanmdalrymple@protonmail.com
56% match
Loading thumbnail…

React Dropdown - Classes

This example shows a React class-based application with a dropdown menu for selecting a pet. The dropdown updates a displayed selection using React's component state, managed through a constructor and the `handleChange` method, rather than hooks. The `Dropdown` component receives options, a selected value, and an onChange callback, rendering a native `<select>` element with styled labels. The code uses React 16.13.1, ReactDOM 17.0.1, and D3 v6.2.0, though D3 is loaded but not visibly used in the interaction logic.

DDaniel Russell-Brain
56% match
Loading thumbnail…

React Dropdown - Classes

This example shows a React class-based application with a dropdown menu for selecting a pet. The dropdown updates a displayed selection using React's component state, managed through a constructor and the `handleChange` method, rather than hooks. The `Dropdown` component receives options, a selected value, and an onChange callback, rendering a native `<select>` element with styled labels. The code uses React 16.13.1, ReactDOM 17.0.1, and D3 v6.2.0, though D3 is loaded but not visibly used in the interaction logic.

DDaniel Russell-Brain
56% match
Loading thumbnail…

New Twiddle

This Ember.js example demonstrates dynamic component composition in a template-driven interface. A parent component uses the `{{#component}}` helper to render a child component passed as a string property, while forwarding actions and properties. The child component triggers a parent action via `sendAction`, connected through the parent’s `action` parameter. The demo relies on Ember 1.13.13 and Ember CLI, with templates handling nested component yields and property binding.

RRandomEtc
55% match