I am trying to control the attribute value of webcomponent from polymer paper input.
I am able to change values with two binding of paper input but not able to control the attribute value
I created below example and trying to change resizable-panels attribute to vertical
<resizable-panels [[text]]>
to
<resizable-panels vertical>
using paper-input
Codepen code for reference
https://codepen.io/nagasai/pen/QMjjQw
HTML:
<head>
<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="resizable-panels/resizable-panels.html">
<link rel="import" href="paper-input/paper-input.html"
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
.panel { padding: 20px; color: white; font-family: sans-serif; width: 50%; }
.p1 { background-color: #673AB7; }
.p2 { background-color: #E91E63; }
.p3 { background-color: #00BCD4; }
.p4 { background-color: #FB8C00; }
.p5 { background-color: #607D8B; }
.p6 { background-color: #4CAF50; }
</style>
<paper-input value="{{text::input}}"></paper-input>
<resizable-panels id="rp-2">
<div class="panel p1">Lorem ipsum dolor…</div>
<div class="panel p2">Second panel</div>
</resizable-panels>
<br>
<resizable-panels [[text]]>
<div class="panel p1">Lorem ipsum dolor…</div>
<div class="panel p1">Second panel</div>
<div class="panel p1">Third panel</div>
</resizable-panels>
</template>
</dom-module>
</body>
JS:
class XFoo extends Polymer.Element {
static get is() { return 'x-foo'; }
static get properties() {
return {};
}
toggle() {
this.$.collapse.toggle();
}
}
customElements.define(XFoo.is, XFoo);
Thats not how its supposed to work, you cant just slap a tag like and expect this to work - since this is not server side building - you are not supposed to treat your templates like this.
Here is a working demo: https://codepen.io/anon/pen/rzOgQX
You should be toggling a boolean property vertical between true/false to archieve what you want. Hope this helps.
Related
I am trying to adapt Bootstrap 4 tooltip to display images.
<img src="myimage.png" data-toggle="tooltip" data-html="true" title=\'<img src="myimage.png" class="d-block">\'>
In order to do it I had to add a custom CSS to allow tooltip scale to the width of the image.
.tooltip-inner {
max-width: 100%;
}
.tooltip.show {
opacity: 1;
}
.tooltip img {
margin: 5px 0;
background-color: #333;
}
It works great, however all my regular text tooltips also scale. I would like the text tooltips act as they were. I tried adding class to my code but the issue is actually in the tooltip code that is generated on hover. Is there a way to use my custom CSS only for images?
I think that tooltip's template option could help you to do what you want.
For example, you could create a specific template only for your image, using a specific class to format only its tooltip.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="tooltip-image"]').tooltip({
template:'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner image"></div></div>'
});
});
.tooltip-inner.image {
max-width: 100%;
}
.tooltip.show {
opacity: 1;
}
.tooltip img {
margin: 5px 0;
background-color: #333;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<h3>Tooltip Example</h3>
<p>Hover over me</p>
<p><img src="https://picsum.photos/500/300" data-toggle="tooltip-image" data-html="true" title='<img src="https://picsum.photos/500/300" class="d-block">'></p>
</div>
I am trying to round the corners of a paper-listbox, which is contained in a paper-dropdown-menu. However, the following CSS doesn't change the border radius as I would've expected:
paper-listbox {
border-radius: 14pt !important;
--paper-listbox: {
border-radius: 14pt;
overflow: hidden;
};
}
How can I set the border-radius of this paper-listbox?
Screenshot:
The internal DOM of <paper-dropdown-menu> looks something like this:
<paper-menu-button>
<iron-dropdown>
<div slot="dropdown-content" class="dropdown-content">
<slot name="dropdown-content"></slot> <!-- user's slot content of paper-dropdown-menu is inserted here -->
</div>
</iron-dropdown>
</paper-menu-button>
So this user code:
<paper-dropdown-menu>
<paper-listbox slot="dropdown-content"> <!-- user's slot content -->
</paper-listbox>
</paper-dropdown-menu>
becomes:
<paper-dropdown-menu>
<paper-menu-button>
<iron-dropdown>
<div slot="dropdown-content" class="dropdown-content">
<paper-listbox> <!-- user's slot content inserted -->
</paper-listbox>
</div>
</iron-dropdown>
</paper-menu-button>
</paper-dropdown-menu>
In <paper-menu-button>, the div.dropdown-content container is styled to show a box-shadow (via --shadow-elevation-2dp), making the square edges of the <div> appear. The CSS you used to style the <paper-listbox> indeed styles the listbox, but the square edges you saw were actually from the listbox's parent (div.dropdown-content) with its box-shadow edges. You can override the styles of div.dropdown-content with the --paper-menu-button-content mixin, as shown in the following steps:
Apply a class to your <paper-dropdown-menu>:
<paper-dropdown-menu class="dropdown">
Create a style for that class that sets --paper-menu-button-content:
<style>
.dropdown {
--paper-menu-button-content: {
border-radius: 14pt;
}
}
</style>
window.addEventListener('WebComponentsReady', () => {
class XFoo extends Polymer.Element {
static get is() { return 'x-foo'; }
static get properties() {
return {
customers: {
type: Array,
value: () => [
'Alice',
'Bob',
'Charlie',
'David',
]
}
};
}
}
customElements.define(XFoo.is, XFoo);
});
<head>
<base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/">
<script src="webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-listbox/paper-listbox.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="neon-animation/web-animations.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
.dropdown {
--paper-menu-button-content: {
border-radius: 14pt;
}
}
</style>
<paper-dropdown-menu id="customer"
class="dropdown"
placeholder="Select Customer">
<paper-listbox id="customerList"
slot="dropdown-content"
attr-for-selected="value"
selected="[[customer]]">
<template is="dom-repeat" items="[[customers]]" as="customer">
<paper-item value="[[customer]]">[[customer]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</template>
</dom-module>
</body>
<paper-listbox> found you a custom-property to style the element:
Custom property | Description | Default
------------------------------------|-------------------------------|-----------------------
`--paper-listbox-background-color` | Menu background color | `--primary-background-color`
`--paper-listbox-color` | Menu foreground color | `--primary-text-color`
`--paper-listbox` | Mixin applied to the listbox | `{}`
The --paper-listbox can be useful for your case :
<dom-module id="x-app">
<template>
<style>
:host {
--paper-listbox: {
border-radius: 14pt;
border: solid 1px blue;
/* you need to hide overflow */
overflow: hidden;
}
}
/* OR (if you have multiple listbox with different styles) */
paper-listbox.radius {
--paper-listbox: {
border-radius: 14pt;
border: solid 1px blue;
overflow: hidden;
}
}
</style>
<paper-listbox class="radius">
<paper-item>a</paper-item>
<paper-item>b</paper-item>
<paper-item>c</paper-item>
</paper-listbox>
</template>
</dom-module>
By default <b-modal> shows on top of the page. When attribute centered is added to the tag. It is centered.
However, I would like to show the modal with a certain amount of gap under the top of the page.
The Modal is shown when the home page is opened.
AppModal.vue
<template>
<b-modal ref="thisModalRef" :modal-class="my-modal" size="lg" hide-header hide-footer no-close-on-backdrop hide-header-close>
//...
</b-modal>
</template>
<script>
export default {
data () {
return {
mymodal: ['mymodal']
}
},
methods: {
hideModal () {
this.$refs.thisModalRef.hide()
},
showModal () {
this.$refs.thisModalRef.show()
}
}
}
</script>
<style scoped>
.mymodal > div {
position: absolute;
top: 300px;
right: 100px;
background-color: yellow;
}
</style>
AppHome.vue
<template>
<div>
// omitted
<AppModal ref="modalRef"></AppModal>
</div>
</template>
<script>
import AppModal from './AppModal'
export default {
components: {
AppModal
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods: {
showModal: function () {
this.$refs.modalRef.showModal()
}
},
mounted () {
this.showModal()
}
}
</script>
<style scoped>
// ommitted
</style>
html source related to modal
<div id="__BVID__16___BV_modal_outer_">
<div id="__BVID__16" role="dialog" class="modal fade show d-block mymodal" style="padding-right: 15px;">
<div class="modal-dialog modal-lg">
<div tabindex="-1" role="document" aria-describedby="__BVID__16___BV_modal_body_" class="modal-content">
<!---->
<div id="__BVID__16___BV_modal_body_" class="modal-body">
// ommitted
</div>
<!---->
</div>
</div>
</div>
<div id="__BVID__16___BV_modal_backdrop_" class="modal-backdrop fade show"></div>
</div>
As you can see, mymodal class is correctly applied. But the div .modal-dialog does not have the css properties I give it.
the real css properties found in dev tools
.modal-dialog {
position: relative;
width: auto;
margin: 0.5rem;
pointer-events: none;
}
I tried adding a custom class to <b-modal> and style it. Nothing worked.
Please help.
If you want to put the modal into the specific position, below is my solutuon:
add specific class to <b-modal> by its props=modal-class
then add your styles into myclass > div
You can look into the github (line#:176), Bootstrap-vue will place one div.modal-content(including header/body/foot) into one div with class="modal-dialog" which is the direct child of root.
That is why above solution use the css selector = .myclass > div.
If you look into the dom tree: the structure of one bootstrap-vue modal will be:
one root div (myclass will be added into here) -> one div with modal-dialog -> one div with modal-content -> header/body/footer
Below is one sample: (I put different background-color for modal-dialog, modal-content.)
app = new Vue({ //not vue, it is Vue
el: "#app",
data: {
myclass: ['myclass']
},
methods: {
showModal: function(){
this.$refs.myModalRef.show()
}
}
})
.myclass > div {
position:absolute !important;
top: -10px !important;
left: -10px !important;
background-color:yellow !important;
}
.myclass > .modal-dialog > .modal-content {
background-color:red !important;
}
<!-- Add this to <head> -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css"/>
<!-- Add this after vue.js -->
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<script src="//unpkg.com/babel-polyfill#latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div id="app">
<b-button #click="showModal">
Open Modal
</b-button>
<b-modal ref="myModalRef" :modal-class="myclass" size="lg">
<h2>Test</h2>
</b-modal>
</div>
I use
<b-modal
body-class="modalcart"
ref="addToCart"
id="addToCarModal"
hide-footer
hide-header
>
<b-container class="text-center modal-product-content">
<img class="modal-image" src="~/assets/images/add-to-cart.png" alt=""/>
and:
<style lang="scss" scoped>
/deep/ .modalcart {
font-family: 'poppins-bold';
/deep/ .modal-product-content {
padding: 3rem;
margin: 0 auto !important;
/deep/ .modal-image {
height: 150px;
margin-bottom: 2rem;
}
}
...
}
</style>
and work! thanks
Keep in mind that not work without body-class and /deep/
I use node-sass, vue 3, vue-loader 15
Maybe you could try with something like margin-top: 100px.
I think it's because the #media breakpoint of Bootstrap. Then, in <style> you just override it.
#media (min-width: 576px) {
.modal-dialog {
margin: .5rem auto;
}
}
I'm struggling to get iron-list to play nice with iron-flex-layout and paper-card. What I am hoping for is for the paper-card to flex expand on both axis to cover the page (with its margin as a bumper) and then for the iron-list to expand vertically in its container to show my iron-list with all its "virtual list" magic.
Where am I going wrong?
<script src="https://cdn.rawgit.com/Download/polymer-cdn/24b44b55/lib/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="https://cdn.rawgit.com/Download/polymer-cdn/24b44b55/lib/paper-card/paper-card.html">
<link rel="import" href="https://cdn.rawgit.com/Download/polymer-cdn/24b44b55/lib/paper-progress/paper-progress.html">
<link rel="import" href="https://cdn.rawgit.com/Download/polymer-cdn/24b44b55/lib/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="https://cdn.rawgit.com/Download/polymer-cdn/24b44b55/lib/iron-list/iron-list.html">
<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
body {
margin: 0;
height: 100vh;
}
paper-card {
margin: 1em;
}
iron-list {
border-bottom: 1px solid #f00;
border-top: 1px solid #000;
}
</style>
<div class="vertical layout">
<template is="dom-bind" id="app">
<paper-card heading="My paper card" class="flex">
<div class="card-content layout vertical">
<div>[[listing.length]]</div>
<iron-list items="[[listing]]" class="flex">
<template>
<div class="layout horizontal">
<div>[[item.name]]</div>
<div>[[item.value]]</div>
</div>
</template>a
</iron-list>
</div>
</paper-card>
</template>
</div>
<script>
"use strict";
window.addEventListener('WebComponentsReady', e => {
app.listing = [];
for (var i = 0; i < 100; i++) {
app.push('listing', { name: i, value: i });
}
});
</script>
Fiddle: https://jsfiddle.net/4czLkjfj/
You have the body element set to height: 100vh.
However, this height isn't being inherited by the flex container one-level down.
One solution is to add display: flex to body. This creates a flex container which automatically applies align-items: stretch to the children.
body {
display: flex;
align-items: stretch; /* initial setting; can be omitted */
}
div.vertical.layout {
flex: 1; /* full width */
}
revised fiddle
Another solution would be to simply tell the flex container to inherit the parent's height.
div.vertical.layout {
height: 100%;
}
revised fiddle
Revised solution based on feedback in the comments: demo
I'm trying to apply a theme to my dart-polymer material-design application, everywhere I look at videos and tutorials, it is suggested that with a few lines of CSS you can change the look of the whole application.
I've even generated a theme just now using: http://www.materialpalette.com/grey/red and it gave me the following CSS:
/* Palette generated by Material Palette - materialpalette.com/grey/red */
.dark-primary-color { background: #616161; }
.default-primary-color { background: #9E9E9E; }
.light-primary-color { background: #F5F5F5; }
.text-primary-color { color: #212121; }
.accent-color { background: #FF5252; }
.primary-text-color { color: #212121; }
.secondary-text-color { color: #727272; }
.divider-color { border-color: #B6B6B6; }
... which I've included in my default stylesheet, but with no colour changes.
So if this is my custom polymer element:
<polymer-element name="main-app" class="default">
<template>
<style type="text/css">
:host {
display: block;
}
</style>
<core-toolbar class="default">
<paper-icon-button icon="menu"></paper-icon-button>
<span flex class="default">
<paper-tabs selected="0">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
</span>
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
</core-toolbar>
</template>
<script type="application/dart" src="main-app.dart"></script>
</polymer-element>
And this is my index.html using that custom main-app component:
<!DOCTYPE html>
<head>
...
<link rel="import" href="packages/falm/main-app.html">
<link rel="stylesheet" href="styles.css">
</head>
<body unresolved>
<main-app class="default"></main-app>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
</html>
... what is the proper way to use the generated theme?
Am I suppose to add those css classes in manually everywhere?
Yes, you need to add the classes somewhere.
You can use the core-style element to reuse styles or you can add the styles to the main page (index.html) and prefix them with * /deep/ (like `* /deep/ .dark-primary-color) but still need to apply the classes to the elements.
Some resources about styling polymer elements
https://www.polymer-project.org/articles/styling-elements.html
https://www.polymer-project.org/docs/polymer/styling.html
https://www.polymer-project.org/docs/polymer/layout-attrs.html