Is it possible to use the Bootstrap dropdown.js component without using the rest of the Bootstrap library? I've tried, but not managed to get it to work.
From the docs, I can see that the dropdown.js component requires Popper, and I can find the dropdown.js src file on GitHub.
But it seems that dropdown.js has a lot of dependencies:
import * as Popper from '#popperjs/core'
import {
defineJQueryPlugin,
getElement,
getElementFromSelector,
isDisabled,
isElement,
isVisible,
isRTL,
noop,
getNextActiveElement,
typeCheckConfig
} from './util/index'
import EventHandler from './dom/event-handler'
import Manipulator from './dom/manipulator'
import SelectorEngine from './dom/selector-engine'
import BaseComponent from './base-component'
And I'm not sure what to do about these. I've tried removing them, but I just get error messages that variables later on in the file are undefined.
You can use like this. Import Dropdown module and initialise it.
import { Dropdown } from "bootstrap";
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new Dropdown(dropdownToggleEl)
})
It is not really possible. Dropdown.js is built using functions inside of popper.js and the bootstrap library.
If you are looking for something outside of bootstrap for a dropdown, I would recommend chosen.js which uses jQuery. If you download the source files you can modify the css to style it more to your liking.
Outside of that, you can also make your own vanilla javascript dropdown.
If you really love dropdown.js but need to have it standalone, you may use developer tools to reverse-engineer it and make your own.
Related
I'm a bit confused. In my web project, I'm using React and for iconography, I'm using the React Icons library.
The thing that confuses me is: Every time I want to use an icon, the IDE (in my case JetBrains WebStorm) suggests two available import locations.
Apparently, the icon exists in the parent all directory, but also in a specific directory with the same name the icon has.
import { FaStackOverflow } from "#react-icons/all"
import { FaStackOverflow } from "#react-icons/all-files/fa/FaStackOverflow"
Which one should I use?
Import icons from all, not from a subdirectory
The following hint is given in the docs:
NOTE: each Icon package has its own subfolder under react-icons you import from.
Also, after some experiments, I realized that using the icon from the all directory is the right one. I had issues when styling the icon (using a global class name provided in the <IconContext.Provider> parent element), so I changed the import location, and voilà, it worked!
Here is a demo. I'm using the following CSS to style the icon.
.icon {
outline: 1px solid hotpink;
}
This is the JSX code:
<IconContext.Provider value={{ className: 'icon' }}>
<FaStackOverflow />
</IconContext.Provider>
When importing the icon from the subdirectory, the styles are not applied correctly:
import { FaStackOverflow } from "#react-icons/all-files/fa/FaStackOverflow"
In contrast, this is the import from the correct location (directory all).
import { FaStackOverflow } from "react-icons/all"
I am using ReactJS/NextJS and
import { createUseStyles } from 'react-jss'
to generate CSS-in-JS. Is there a way to use react-jss to generate inline CSS?
I would like to add
const styles = ....
...
<Head><style>{styles}</style></Head>
to all my components.
Thank you.
EDIT:
I can see some potential here: https://cssinjs.org/react-jss?v=v10.7.1#server-side-rendering
But I am not sure how to use the SheetsRegistry with NextJs and serveless deployment. I tried adding it to the _app.js but did not work.
EDIT:
Following this: https://github.com/vercel/next.js/tree/canary/examples/with-react-jss/pages , I have been able to make progress.
The new problem is that now ALL OF THE CSS is in the HTML inline. I am using SSR, wouldn't it be possible to only add the CSS of the component involved in this page ?
I am very new to React and have recently inherited a project that was created with create-react-app. The project is partially done and I want to make the columns of a particular table adjustable (the user should drag and adjust the width). The previous developers used ant-table to create the table, which has no such feature.
I figured I could try and do this using plain js, like this fiddle: http://jsfiddle.net/thrilleratplay/epcybL4v/
However, I cannot make it work. I have included the js code as a inside index.html, have also tried calling it inside the .js file of the component.
This is my component code:
import React, {Component, PropTypes} from 'react';
import {Icon} from 'antd';
import Table from '../../components/tables/AntdTable.pg';
class SampleScreen extends Component {
render(){
return (
<Table data={this.props.availableFlavors.map(this.props.generateFruitList)}
selectRow={this.props.selectRow}
headers={this.props.tableHeaders} />
);
}
}
SampleScreen.propTypes = {
availableFlavors : PropTypes.array.isRequired,
tableHeaders: PropTypes.array.isRequired,
selectRow: PropTypes.object.isRequired,
generateFruitList: PropTypes.func.isRequired,
};
export default SampleScreen;
I am not sure if this is even possible, again, please bear with a React noob here. Any help is greatly appreciated.
Check the examples at antd website on how to create tables.
Resizable column
I can't get Quill to render toolbar correctly I read their docs and check webpack example.
Added webpack aliases,
resolve: {
alias: {
'parchment': utils.resolve('node_modules/parchment/src/parchment.ts'),
'quill$': utils.resolve('node_modules/quill/quill.js'),
}
}
then created Quill export file like so
`quill-build.js`
```js
import Quill from 'quill/core';
import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow';
import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Header from 'quill/formats/header';
Quill.register({
'modules/toolbar': Toolbar,
'themes/snow': Snow,
'formats/bold': Bold,
'formats/italic': Italic,
'formats/header': Header,
});
export default Quill;
```
Imported it in my component and when attaching it to html element here is what I get
This is what I get inside chrome devtools when inspecting this tag.
If I import quil.min.js from cdn it renders everything correctly, but that is useless if I can't customize my build and remove unnecessary elements.
Did anyone had success doing that, can someone help me with this, please?
I know that's an old issue but as it is still a problem the solution is to use: https://v4.webpack.js.org/loaders/svg-inline-loader/
instead of the html-loader from the webpack quill example
I am able to run the Aurelia app by following the steps provided in getting started tutorial. They have used bootstrap nav-bar in the skeleton application. Is it possible to use JQuery UI components in the Aurelia app. If yes, please explain me how to achieve this.
Thanks in advance.
Yes, it's possible!
I've made a jQueryUI Tabs example for you:
tabs.html
<template>
<ul>
<li repeat.for="tab of tabs">
${tab.title}
</li>
</ul>
<div repeat.for="tab of tabs" id="${$parent.id + '-' + $index}">
<p>${tab.text}</p>
</div>
</template>
As you can see, I've only copied the boilerplate HTML of the jQueryUI Tabs component, and created the bindable property tabswhich is an Array of Objects like that: [{title: "", text: ""}].
tabs.js
import {bindable, inject} from 'aurelia-framework';
import $ from 'jquery';
import {tabs} from 'jquery-ui';
#inject(Element)
export class Tab {
#bindable tabs = null;
constructor(el) {
this.id = el.id;
}
attached() {
$(`#${this.id}`).tabs();
}
}
The code is pretty readable: I've imported jquery from my config.js file, and my jquery-ui from there too (only the component tabs, so it gets lighter). Then, I've injected the DOMElement to my class, so I could get it's id. I've created my bindable property tabs. In my constructor, I get the DOMElement id and populates my id property. And, finally, on the attached event (when all the binds are finished), I've got the jQuery object from my id, and called the method tabs() to turn the template into a Tabs component. Pretty simple, uh?
In my config.js file, I've added those two lines:
"jquery": "github:components/jquery#2.1.4",
"jquery-ui": "github:components/jqueryui#1.11.4",
And then you can use the Tabs component wherever you want, by calling it in any other HTML template of your project:
That's it!
You can see the working example here: http://plnkr.co/edit/ESxZA2jTlN7f6aiq1ixG?p=preview
PS: Thanks for that plnkr, Sylvian, I've used yours to fork mine.
You can import and then use jquery on your DOM elements.
Given this templatenamed test.html:
<template>
<div ref="content">test</div>
</template>
A Test custom element can manipulate the div referenced as content like this:
import {customElement, inject} from 'aurelia-framework';
import $ from 'jquery';
#customElement('test')
export class Test{
attached(){
$(this.content).css('color', 'red');
}
}
Then you can use that custom element in any view using the <test></test> tag.
This exemple uses the css() function but you can import any plug-in and apply them to your elements.
See a working example here: http://plnkr.co/edit/SEB4NK?p=preview (be patient it takes a little while to load).