Dropdown

Use Glamorous dropdowns to show a contextual popup associated with a UI element on click. This can be achieved by adding BrGlamorousWithDropdownAptitude BrWithDropdownAptitude subclass: #BrGlamorousWithDropdownAptitude instanceVariableNames: '' classVariableNames: '' package: 'Brick-Glamorous-Dropdown' look to any visual component, such as Button BlElement subclass: #BrButton uses: TBrEnableable + TBrLayoutAlignable + TBrLayoutResizable + TBrSizeAdjustable instanceVariableNames: 'labelModel iconModel interactiveModel' classVariableNames: '' package: 'Brick-Button - UI' .

Dropdown for a button with a label

BrGlamorousComponentsDropdowns>>#buttonWithLabel
	<gtExample>

	^ BrButton new
		aptitude: BrGlamorousButtonWithLabelAptitude +
			(BrGlamorousWithDropdownAptitude
				handle: [
					BrButton new
						aptitude: BrGlamorousButtonRectangularAptitude + BrGlamorousButtonLabelAptitude;
						label: 'Click me' ]
				content: [
					BlElement new
						background: (Color gray alpha: 0.2);
						size: 100 @ 100;
						margin: (BlInsets all: 10) ]);
		label: 'Click me'

Dropdown for a button with an icon

BrGlamorousComponentsDropdowns>>#buttonWithIcon
	<gtExample>

	^ BrButton new
		aptitude: BrGlamorousButtonWithIconAptitude +
			(BrGlamorousWithDropdownAptitude
				handle: [
					BrButton new
						aptitude: BrGlamorousButtonRectangularAptitude + BrGlamorousButtonIconAptitude;
						icon: BrGlamorousIcons menu ]
				content: [
					BlElement new
						background: (Color gray alpha: 0.2);
						size: 100 @ 100;
						margin: (BlInsets all: 10) ]);
		icon: BrGlamorousIcons menu;
		label: 'Click me'

Programmatically hide a dropdown

Sometimes it is necessary to hide a dropdown due to some user action, this can be achieved by firing BrDropdownHideWish BrAnchoredHideWish subclass: #BrDropdownHideWish instanceVariableNames: '' classVariableNames: '' package: 'Brick-Dropdown - Events' wish:

BrGlamorousComponentsDropdowns>>#hideDropdown
	<gtExample>

	^ BrButton new
		aptitude: BrGlamorousButtonWithIconAptitude +
			(BrGlamorousWithDropdownAptitude
				handle: [
					BrButton new
						aptitude: BrGlamorousButtonRectangularAptitude + BrGlamorousButtonIconAptitude;
						icon: BrGlamorousIcons menu ]
				content: [
					BrButton new
						aptitude: BrGlamorousButtonWithLabelAptitude;
						margin: (BlInsets all: 20);
						label: 'Close';
						action: [ :aButton | aButton fireEvent: BrDropdownHideWish new ] ]);
		icon: BrGlamorousIcons menu;
		label: 'Click me'