Gist dc86a67fe2fcbf50032b3763c7309119

100%

Gist dc86a67fe2fcbf50032b3763c7309119

✓ Published0🌍 Public

Last edited Jan 24, 2018

Created on Jan 24, 2018

This example demonstrates a Material Design dialog for collecting user input, specifically asking for a favorite animal. The dialog displays a title and a text field pre-bound to a data object containing a name and an animal value. The code uses Angular 5 with Angular Material components such as `md-dialog-title`, `mat-dialog-content`, `mat-form-field`, and `mat-dialog-actions`, along with `[(ngModel)]` for two-way data binding. It includes two buttons that trigger cancel and confirm actions through click handlers.

AI-generated description

Similar vizzes

Loading thumbnail…

A multi-purpose alert/confirm/prompt replacement built with shadcn/ui AlertDialog components.

This example demonstrates a reusable dialog system that replaces native alert, confirm, and prompt functions with promise-based APIs. It provides `useAlert`, `useConfirm`, and `usePrompt` hooks that return resolved values—booleans or strings—when the user interacts with the dialog. The implementation uses React’s Context API, `useReducer`, and `useRef` to manage state across an `AlertDialogProvider` component. The UI is built with shadcn/ui’s `AlertDialog`, `Button`, and `Input` components, all rendered inside a form that submits to close the dialog and resolve the pending promise.

JJastor11

57% match

Loading thumbnail…

Gist a3686a8f89494538dbfcf1144718885c

This example shows a personal reference collection for building an Android and web app with machine learning and conversational interfaces, compiled from Google I/O Extended Lima 2019. The visualization is a text-based list that links to codelabs, documentation, and developer consoles for ML Kit Firebase, Dialogflow, Flutter UI, and Firebase Hosting. It uses no charting libraries, instead presenting raw text and URLs as the primary graphic. The code highlights Flutter’s declarative UI and notes web-specific caveats like non-clickable buttons and broken animations, with references to SharedPreferences and Fuchsia.

MMistyBlunch

57% match

Loading thumbnail…

Menu with React

This example demonstrates a simple pet-selection menu built with React. It shows a dropdown list of animal options, with a selected value managed through React's `useState` hook and displayed in the browser's console. The code uses React 16.9 and ReactDOM to render the interface, while a `Dropdown` component maps over an array of options to create the select element. The label and dropdown are styled with large, user-friendly text, and the initial selection is set to 'hamster'.

KKazushige Okuma

56% match

Loading thumbnail…

Manus with react

This example shows a pet selector interface built with React and D3, where users choose an animal from a dropdown menu. The code uses React’s `useState` hook to manage the selected pet value and a custom `Dropdown` component that renders a native `<select>` element. The dropdown options are defined as an array of objects with value and label pairs, and the selected value is displayed via React’s controlled component pattern. The visualization integrates React’s declarative rendering with D3’s data-binding capabilities, though the current implementation focuses on the interactive form rather than graphical data display.

EElliot Hill

55% match

Loading thumbnail…

Angular Materialを利用するためのAngular5用初期セットプロジェクト ref: https://qiita.com/SOhtsu/items/bc66c323e906db907d5d

This example shows a ready-to-use Angular 5 project configured for Angular Material, with dependencies on `@angular/material`, `@angular/cdk`, and `hammerjs` for gestures. The setup includes a full development toolchain with `@angular/cli`, Karma for unit testing, and Protractor for end-to-end tests. It demonstrates how to clone the repository, install dependencies via `npm install`, and launch the app with `ng serve`. The code relies on RxJS and zone.js for reactive programming and change detection.

OOhtsu

55% match

Loading thumbnail…

Menus_with_React

This example demonstrates a simple pet-selection interface with a large, interactive dropdown menu. It shows a label and a select element populated with six animal options, defaulting to "hamster," where changing the selection logs the new value to the console. Built as a React application using the `useState` hook, the code defines a reusable `Dropdown` component that manages the selected value through an `onSelectedValueChange` callback. The interface is rendered via ReactDOM, with the select and label styled at a font size of 4em for high visibility.

Mmartin

55% match

Loading thumbnail…

Dataviz 2020_Ep30 - 23. Menus (React)

This example demonstrates a simple pet-selection interface, showing how a list of animal choices updates the UI as the user picks a value. It displays the selected value in the console and the dropdown list. The implementation uses React 17 with hooks like `useState` and a custom `Dropdown` component. It renders a native `<select>` element with `onChange` handlers, and the app is mounted via `ReactDOM.render`. The code relies on React’s state management for interactivity, while styling is handled through CSS.

MMinwoo Pak

55% match

Loading thumbnail…

Menus

This example demonstrates a simple pet-selection form. A large label and dropdown menu let the user choose from a fixed list of five animals—dog, cat, hamster, parrot, and spider—with the hamster preselected. The application uses React (v16.9.0) with the `useState` hook to manage the selected value, and a custom `Dropdown` component renders the `<select>` element. The interface updates as the user chooses a new option, with the current selection highlighted in the dropdown.

WWaseem Medhat

55% match