I'm trying to add alignment buttons to the toolbar. I'm using the method of laying out the toolbar using html elements. What I'd like to know is if it's possible to have alignment buttons represented as discrete buttons on the toolbar instead of being in a dropdown.
All of the examples that I've seen so far use the dropdown approach. Is what I'm after even possible?
You can add a dropdown option as it's own button by adding a value attribute to it like so:
<button class="ql-align" value="center">
var quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: '#toolbar'
}
});
<link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>
<div id="toolbar">
<span class="ql-formats">
<button class="ql-align" value=""></button>
<button class="ql-align" value="center"></button>
<button class="ql-align" value="right"></button>
<button class="ql-align" value="justify"></button>
</span>
</div>
<div id="editor">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p>
</div>
I'd suggest using the shorthand in the js for the toolbar, so not using a custom html toolbar. Then by writing
toolbar: [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }]
you can define 4 discrete alignment buttons as per the answer here by #jhchen. He also has a nice example here. Otherwise I'd assume you could achieve the same though html (based solely on looking at the source code the shorthand generates):
<span class="ql-formats">
<button type="button" class="ql-align" value="">
<svg viewBox="0 0 18 18">
<line class="ql-stroke" x1="3" x2="15" y1="9" y2="9"></line>
<line class="ql-stroke" x1="3" x2="13" y1="14" y2="14"></line>
<line class="ql-stroke" x1="3" x2="9" y1="4" y2="4"></line>
</svg>
</button>
<button type="button" class="ql-align" value="center">
<svg viewBox="0 0 18 18">
<line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
<line class="ql-stroke" x1="14" x2="4" y1="14" y2="14"></line>
<line class="ql-stroke" x1="12" x2="6" y1="4" y2="4"></line>
</svg>
</button>
<button type="button" class="ql-align" value="right">
<svg viewBox="0 0 18 18">
<line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
<line class="ql-stroke" x1="15" x2="5" y1="14" y2="14"></line>
<line class="ql-stroke" x1="15" x2="9" y1="4" y2="4"></line>
</svg>
</button>
<button type="button" class="ql-align" value="justify">
<svg viewBox="0 0 18 18">
<line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
<line class="ql-stroke" x1="15" x2="3" y1="14" y2="14"></line>
<line class="ql-stroke" x1="15" x2="3" y1="4" y2="4"></line>
</svg>
</button>
</span>
However, I would honestly suggest you use the shorthand, it keeps it all nice and clean and it ensures it works. Furthermore, it still allows you to add custom buttons (check this)
You can use select tag with option for dropdown. Use select with class ql-align and its inside add each option with value attributes as "", "center", "right" and "justify" respectively.
var quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: '#toolbar'
}
});
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<div id="toolbar">
<select class="ql-align">
<option value=""></option>
<option value="center"></option>
<option value="right"></option>
<option value="justify"></option>
</select>
</div>
<div id="editor">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p>
</div>
Just add the following line to your Quill toolbar html and Quill will take care of the rest.
<select class="ql-align"></select>
Related
This code:
<PopupContent>
<label htmlFor="popup" style={{ margintop : '0px', marginbottom : '0px' }}>log out</label>
<button type="button" id="popup" onClick={this.logUserOut} />
</PopupContent>
throws these two errors:
84:9 error A form label must be associated with a control jsx-a11y/label-has-associated-control
85:9 error A control must be associated with a text label jsx-a11y/control-has-associated-label
What am I missing?
You don't typically use a element to label a button. More commonly, the text inside the button serves as its label. Try something along the lines of:
<button type="button id="popup" onClick={this.logUserOut}>log out</button>
Other options could be any one of the following:
<button type="button" id="popup" onClick={this.logUserOut} aria-label="log out"/>
or
<span id="button-label" style={{ margintop : '0px', marginbottom : '0px' }}>log out</span>
<button type="button" id="popup" onClick={this.logUserOut} aria-labelledby="button-label" />
or
<button type="button id="popup" onClick={this.logUserOut}>
<img src="icon.png" alt="log out"/>
</button>
or
<button type="button id="popup" onClick={this.logUserOut}>
<span className="off-screen">log out</span>
</button>
where the CSS class of .off-screen hides the text off-screen in an accessible way e.g. do not use display: none; or visibility: hidden;
Looks like this rule isn't fully baked: see Consider adding jsx-a11y/control-has-associated-label when it becomes more stable
How do I set a custom color on a checkbox element in MDC-Web using basic CSS/HTML/JavaScript?
Example: How to make this checkbox background lightblue?
<head>
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<style>
:root {
--mdc-theme-primary: blue;
--mdc-theme-accent: lightblue;
}
.mdc-ripple-surface.mdc-ripple-upgraded.mdc-button--primary::before,
.mdc-ripple-surface.mdc-ripple-upgraded.mdc-button--primary::after {
background-color: rgba(66, 66, 66, 0.08);
}
</style>
</head>
<body>
<div class="mdc-form-field">
<div class="mdc-checkbox">
<input type="checkbox"
id="my-checkbox"
class="mdc-checkbox__native-control"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark"
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark__path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
<label for="my-checkbox">My Checkbox Label</label>
</div>
</body>
:root {
--mdc-theme-primary: blue;
--mdc-theme-secondary: lightblue;
}
Material Components for the Web now uses the css variable mdc-theme-secondary rather than --mdc-theme-accent for secondary colours.
This was changed in version 0.18.0
How do you dynamically add an attribute directive to a pre-existing element?
I've tried the equivalent of:
<div class="container">
<svg class="canvas"> <!-- renders up to here -->
<custom-directive>
<g class="group"> <!-- directive template -->
<rect class="body"></rect>
<g class="content"></g>
</g>
</custom-directive>
</svg>
</div>
I like this technique, but as you all know, one of the great things about svg graphics is that you can re-size and re-use the same file. Is it possible to add a size variable to ng-include?
eg:
<div ng-include="'img/logo-rev.svg'" class="ng-scope" width="50">
The answer is to not specify a width or height in your SVG. Or if you do, make sure they are both set to "100%". Then as long as your SVG has a suitable viewBox attribute, it will scale to whatever size you make its parent.
.small {
width: 50px;
height: 50px;
}
.large {
width: 150px;
height: 150px;
}
<div class="small">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="green"/>
</svg>
</div>
<div class="large">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="green"/>
</svg>
</div>
Note that the two SVGs in the example above are identical.
This is an example:
<svg>
<g ng-repeat="rect in rectList">
<rect ng-attr-fill="rect.fill"
ng-attr-x="rect.x"
ng-attr-y="rect.y"
ng-attr-width="rect.width"
ng-attr-height="rect.height"></rect>
</g>
</svg>
I want to add a <md-tooltip> to each of these rects. Can I do it somehow? I am talking about the Angular Material Tooltip specifically, not any other tooltip implementation from other libraries.
Try to wrap it in a div and apply the md-tooltip
<div ng-repeat="status in statuses">
<md-tooltip md-direction="right">
{{status.description}}
</md-tooltip>
<svg >
<rect width="300" height="100" >
</rect>
</svg>
</div>
Here is the working Sample