I try to implement further html elements like title (h1) or img src. I took an approach in my code with h1 one which is sadly not working. The buttons and the inputs, I found in the documentation but I don't really get (also from other tutorials) how to implement other elements.
-- VIEW
view : Model -> Html Msg
view model =
div []
[ h1 [] [ text "todos" ]
]
[ div[] [ input [ placeholder "🏅 Team 1", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color" "#488aff", value model.content] []
, input [ placeholder "💪🏼 Strength", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color" "#32db64", value model.content ] []
]
, div []
[ button [ style "background-color" "#66cc81", style "color" "white", style "margin-top" "20px", style "width" "610px", style "border-radius" "25px", style "height" "60px", style "font-size" "30px", style "margin-right" "70px"] [ text "+ADD" ]
]
]
also this version doesn't work:
view : Model -> Html Msg
view model =
div []
[ div [h1 [] [ text "todos" ]
]
,div[] [ input [ placeholder "🏅 Team 1", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color" "#488aff", value model.content] []
, input [ placeholder "💪🏼 Strength", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color" "#32db64", value model.content ] []
]
, div []
[ button [ style "background-color" "#66cc81", style "color" "white", style "margin-top" "20px", style "width" "610px", style "border-radius" "25px", style "height" "60px", style "font-size" "30px", style "margin-right" "70px"] [ text "+ADD" ]
]
]
There are a lot of stray brackets in your code. I've reformatted it to produce the following:
view : Model -> Html Msg
view model =
div []
[ h1 [] [ text "todos" ]
, div[] [ input [ placeholder "🏅 Team 1", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color" "#488aff", value model.content] [] ]
, input [ placeholder "💪🏼 Strength", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color" "#32db64", value model.content ] []
, div [] [ button [ style "background-color" "#66cc81", style "color" "white", style "margin-top" "20px", style "width" "610px", style "border-radius" "25px", style "height" "60px", style "font-size" "30px", style "margin-right" "70px"] [ text "+ADD" ] ]
]
Here is a diff of your version and mine.
The div function takes two arguments: A list of attributes and a list of elements. Notice in my version above, there are some stray brackets removed that were causing compilation failures.
Related
I am trying to set the opacity of this hover class so that when it is hovered instead of just the entire background color being this gray color it will be just a slightly lighter version. I have tried to change the opacity in style but it changes everything to be transparent not just on the hover function.
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-fontSize-20 ms-bgColor-info--hover dbi-tileview-tile"
},
"style": {
"display": "flex",
"flex-wrap": "wrap",
"height": "272px"
}
I have tried changing the opacity within the style but it changes everything to be transparent. What I am trying to do is make a function that will act on the hover to make it transparent or a lighter variant.
Description and bug walk-through available on Stackblitz (see Project>INFO)
Goal
Given the following template:
div 1 and div 2 stacked in a parent div
Animate the following sequence for the parent div's DOM entrance:
100 ms from each other, the children div:
Step 1: go from dark cyan to light green (1 s)
Step 2: flash in light blue (250 ms)
Constraint
The blue flash implementation must be nested in a group()
Suggested implementation
animations: [
// parent animation
trigger('stagger', [
transition(':enter', [
query('#color', [stagger(100, [animateChild()])]),
]),
]),
// children animation
trigger('color', [
transition(':enter', [
style({
'background-color': 'darkcyan',
}),
animate(
'1s ease-out',
style({
'background-color': 'lightgreen',
})
),
group([
sequence([
animate(
'125ms',
style({
'background-color': 'cyan',
})
),
animate(
'125ms',
style({
'background-color': 'inherit',
})
),
]),
]),
]),
]),
]
Bug
Step 1 does not work. The color is stuck on the end color (light green) during the whole step.
It works correctly when
The constraint is ignored (the flash sequence is written directly, no group/sequence).
The parent animation is removed and the children animations are run simultaneously
The flash targets the text color instead of the background color
My thoughts
I have no idea what's going on. Help? 👀
I want to change the background color of a button in a toolbar.
I need this button to show a summary-value.
I tried with
cls: 'button-matching-auto',
and in css-file
.x-btn-button .button-matching-auto {
background-color: #10E0E0;
}
No effect.
Then i tried with
style: {color:'red'},
It's the same: no effect
In Developer Tools of chrome i can see, that the colors were applied,
but not visible.
What's wrong?
"It's because the button has a CSS class named 'x-button' with a background-color set to '#CCC' by default..." http://www.sencha.com/forum/showthread.php?208417-Change-image-button
{
xtype: 'button',
baseCls: 'null',
cls: 'buttonRed
}
... if you only want the default look and feel of a button not the gray one ...
I've done this to change the look and feel to get the default one:
dockedItems: [{
xtype: 'toolbar',
layout: {
pack: 'center'
},
defaultButtonUI: 'default', // get default look and feel
dock: 'bottom',
items: [{
xtype: 'button',
width: 200,
text: 'Download to Excel',
},{
xtype: 'button',
width: 200,
text: 'Another action',
}]
I have a combo box that i am simply trying to make bold. The data is in a store. I can bold the item in the list, but i cannot bold the item after it is selected in the text box.
I have tried:
fontWeight: 'bold',
cls: 'make-bold',
itemCls:'make-bold',
I can bold the list via a template but not the item actually in the text field.
items:[
{
xtype: 'combobox',
name: 'inputType',
id: 'inputType',
padding : '6 5 5 5',
store: 'Codes',
displayField: 'display',
valueField: 'code',
value: 'Inp_CODE',
editable: false,
width: 80,
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">','<div class="x-boundlist-item"><b>{display}</b></div>','</tpl>')
}, {
this did it
fieldCls: 'make-bold',
style: {
fontWeight: 'bold'
}
why do i need both?
I have a button. and i need to align it to the right, make the font size increase and bold etc. When i googled it says i should use CSS.
How can i use CSS, to style the button that i added ?
My Question :
Where should i add the CSS file in my application, and how can i use it to style the button ?
items: [
{
xtype: 'button',
align: 'right',
text:'Assign'
}
]
items: [
{
xtype: 'button',
align: 'right',
text:'Assign',
cls : 'foo'
}
]
And in a CSS file:
.foo { background:black; }
This adds a CSS class to the outer most element of the Button. There may be many elements involved in the DOM markup, so use Firebug to figure out which elements you want to style.
More details in Ext docs: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.button.Button-cfg-cls