https://codesandbox.io/s/blueprint-sandbox-f6ekm
Some components with BlueprintJS are not working.
I'm following the docs but it doesn't work at all.
Could you specify more details? Your sandbox example is rendering fine.
I use Blueprint for building desktop apps, everything works fine (except some bugs) and I just love this UI toolkit.
If you want to see how Switch component works convert it a class component and add the switch position into the state.
return (
<div>
<Switch
label={this.state.enabled ? "Enabled" : "Disabled"}
checked={this.state.enabled}
onChange={() => this.setState({ enabled: !this.state.enabled})}
/>
</div>
);
See your example extended https://codesandbox.io/s/blueprint-sandbox-biq69
EDIT
Also onChange passes ChangeEvent as the first argument.
<Switch onChange={(event: ChangeEvent<HTMLInputElement>) => this.yourHandler(event)}/>
In yourHandler you can get the state of the switch like this: event.target.checked
Related
I'm a graphic designer who has to customize a project done with strapi - and I am sooo lost. I managed to change backgroundcolors, backgroundimages so far - no problem. BUT: I am totally unable to customize the elements like the primary buttons.
I found lots of class definitions ".primary", changed them - without a result ... in the end I removed them all ... but the primary buttons stills look the same. How? Why?
The only why to get rid of the visual appearance of the primary button, was by removing (e.g. of the login page -> within the index.js under admin/src/containers/AuthPage) "primary" of the buttons declaration.
<Button primary label="users-permissions.Auth.form.button.login" type="submit" />
But that's not what I wanted. I want to customize e.g. the primary buttons. Not getting rid of it.
I searched stackoverflow for strapi customization or ui issues but couldn't find a solution. I found a lot of strategies of overriding bootstrap CSS, e.g.:
How can I override Bootstrap CSS styles?
But strapis SCSS seems to something different I obviously don't understand yet.
If anyone has an idea or did already overrides to e.g. primary button - please let me know.
Thanks in advance, Stef.
You have two ways to override the default style of a button
You can pass a style prop to the component
<Button label="Label" type="button" style={{ background: 'red' }} />
You can pass a custom className prop:
In order to do so, you need to add the class in your 'plugins/users-permissions/admin/src/containers/Auth/styles.scss` file (where the component is going to be used)
.customButton {
background: red;
}
Then in your index.js file
import Button from 'components/Button';
import styles from './styles.scss';
render() {
return (
<Button label="label" className={styles.customButton} />
);
}
I'm trying to setup a RadioGroup component that has the Radio component with the 'Data' label initially checked. But when I use the following code:
<RadioGroup
onChange={(e) => {
this.store.setDataFilterSelection(e.target.value)
}}
>
<Radio label='Data'
defaultChecked
value='1'
className='radio-selectors' />
<Radio label='Description'
value='2'
className='radio-selectors' />
<Radio label='Data Source'
value='3'
className='radio-selectors' />
</RadioGroup>
I get the following warning in my console.
Blueprint.Radio contains an input of type radio with both checked and
defaultChecked props. Input elements must be either controlled or
uncontrolled (specify either the checked prop, or the defaultChecked
prop, but not both). Decide between using a controlled or uncontrolled
input element and remove one of these props. More info:
react-controlled-components
I've tried a couple of variations and can't seem to get it right, basically I want to be able to monitor a change in the Radio buttons, but I can't tie them into state as they've done in the example here: http://blueprintjs.com/docs/#components.forms.radio
defaultChecked is only supported in uncontrolled usage (this is a core React concept, not a Blueprint thing), whereas checked is only supported in controlled usage--this is what the React error is telling you.
But if you're using RadioGroup then all the Radio children are forced into controlled mode and all state should go through RadioGroup. However RadioGroup does not currently support a defaultValue prop so this is not actually possible. I'd call this a bug in Blueprint, so good find!
Please file an issue on the repo and we'll look into implementing this (or even better, submit a PR with the fix!)
I had same error and I used useState and set the value which we want to be default while declaring the state like
const [radio, setRadio] = useState('defaultValue');.
Since we cant use defaultChecked I used the above method to get the option to be default checked.
i want to play an animation when a new message is added in the DOM.
but i don't know how to find my object and edit it with code in (this.zone.run) function :
addMessage(message: string){
this.messages.unshift(message);
// renderer
this.zone.run(() => {
});
}
here's the app.component.html
<StackLayout #container>
<ScrollView>
<WrapLayout #red>
<Label class="message" *ngFor="let message of messages" [text]="message"></Label>
</WrapLayout>
</ScrollView>
</StackLayout>
i want to edit the first child of the WrapLayout element
There is no DOM with NativeScript.
However a major community contributor wrote a plugin to help transition web developers into native development with NativeScript. This plugin provides helper methods that you'll find familiar to the web and DOM. https://github.com/NathanaelA/nativescript-dom
Just remember these are helper methods are not something provided out of the box by NativeScript. You can get any view by its id in NativeScript several ways and during different events (page/frame and component level).
I recall there's no page component with NativeScript with angular but I think you still have the frame module which you could do something like
frame.topmost().currentPage.getViewById('yourID');
Making sure you import(require) the frame module.
I'm newbie to Angular 2. What are the corresponding events from AngularJS to Angular 2?
eg: ng-click to (click)
How about ng-init and all others events? I'm not having intellisense in VS .NET, so it's hard to guess.
Any help please!
Thanks
The default handled events should be mapped from the original HTML DOM component's events:
http://www.w3schools.com/jsref/dom_obj_event.asp
by just removing the on prefix.
onclick ---> (click)
onkeypress ---> (keypress)
etc...
You can also create your custom events.
However ngInit is not an HTML event, this is part of the Angular's Component lifecycle, and in Angular 2 they are handled using "hooks", which are basically specific method names inside your component that will be called whenever the component enters the specific cycle. Like:
ngOnInit
ngOnDestroy
etc...
Here is the list of events in Angular
Please check in the documentation if required for more info
(focus)="myMethod()"
(blur)="myMethod()"
(submit)="myMethod()"
(scroll)="myMethod()"
(cut)="myMethod()"
(copy)="myMethod()"
(paste)="myMethod()"
(keydown)="myMethod()"
(keypress)="myMethod()"
(keyup)="myMethod()"
(mouseenter)="myMethod()"
(mousedown)="myMethod()"
(mouseup)="myMethod()"
(click)="myMethod()"
(dblclick)="myMethod()"
(drag)="myMethod()"
(dragover)="myMethod()"
(drop)="myMethod()"
This is one of the big advantages of Angular2. Not every event needs a customized ng-xxx directive anymore.
With custom elements and all other libraries producing all kinds of custom events, this approach doesn't fly.
In Angular2 the (eventName)="expression" binding syntax allows to subscribe to any known and unknown event.
The $event variable is still available (eventName)="myEventHandler($event)"
See also https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding
A great place to begin to understand Angular 2 is the official Web Page.
Here you can see all the angular2/common ng-XXX although now it is as follows ngXxxx
In my case the best way to understand the differences between Angular 1 and Angular 2 was doing the tutorials:
Tour of Heroes
The Developer Guide: this is a practical guide to Angular for experienced programmers who are building client applications in HTML and JavaScript.
You can use the following syntax to handle events (for example click like ng-click with Angular1):
<button (click)="callSomeMethodOfTheComponent()">Click</button>
The difference here is that this is more generic. I mean you can use DOM events directly but also custom ones defined using the EventEmitter class.
Here is a sample that describes how to handle a click event and a custom event (my-event) trigged by a sub component:
#Component({
selector: 'my-selector',
template: `
<div>
<button (click)="callSomeMethodOfTheComponent()">Click</button>
<sub-component (my-event)="callSomeMethodOfTheComponent()"></sub-component>
</div>
`,
directives: [SubComponent]
})
export class MyComponent {
callSomeMethodOfTheComponent() {
console.log('callSomeMethodOfTheComponent called');
}
}
#Component({
selector: 'sub-component',
template: `
<div>
<button (click)="myEvent.emit()">Click (from sub component)</button>
</div>
`
})
export class SubComponent {
#Output()
myEvent: EventEmitter;
constructor() {
this.myEvent = new EventEmitter();
}
}
Hope it helps you,
Thierry
I am developing a cusom component and I would like it to support rich text fields. Possibly the same way it is done in com_content.
in the form definition I have the following field:
<field
name="description"
type="editor"
label="COM_MYCOMPONENT_DESCRIPTION_LABEL"
description="COM_MYCOMPONENT_DESCRIPTION_DESC"
class="inputbox"
filter="MyComponentHelper::filterText"
buttons="true"
/>
So basically what happens is that the editor appears as it is supposed to but the text is saved without formatting.
The MyComponentHelper::filterText method was added later after investigating com_content and copying the filterText method to my helper, but it did not work either with or without the line. I even tried to use ContentHelper::filterText but without success.
In joomla 1.5, you had to do this in the model (in function that does the saving):
$data['description'] = JRequest::getVar('description', '', 'post', 'string', JREQUEST_ALLOWRAW);
if (!$row->bind($data)) {
...
Don't know if it still exists in Joomla 1.6. Hope it helps.
OK, so this was my bad. As I have followed the tutorial MyComponenetHelper ended up as an abstract class. I made it a normal class and everything works fine.