英文:
flowbite data attributes not working in angular nx
问题
以下是您要翻译的内容:
I'm using tailwind and flowbite in my NX angular projects. Everything works fine except the data attributes. For example when I copy the example code for the default speed dial, the speed dial won't open.
I think this part in my tailwind config is the issue but I don't know how to fix it:
content: [
join(__dirname, 'src//!(.stories|.spec).{ts,html}'),
...createGlobPatternsForDependencies(__dirname),
'./node_modules/flowbite//*.js',
],
package.json:
"flowbite": "^1.6.3",
project.json:
"scripts": ["node_modules/flowbite/dist/flowbite.min.js"]
Tailwind config:
const { createGlobPatternsForDependencies } = require('@nrwl/angular/tailwind');
const { join } = require('path');
// Todo Create a shared tailwind config
// https://blog.nrwl.io/set-up-tailwind-css-with-angular-in-an-nx-workspace-6f039a0f4479
module.exports = {
content: [
join(__dirname, 'src//!(.stories|.spec).{ts,html}'),
...createGlobPatternsForDependencies(__dirname),
'./node_modules/flowbite//*.js',
],
darkMode: 'class',
theme: {
container: {
center: true,
padding: '1rem',
},
extend: {
colors: {
current: 'currentColor',
transparent: 'transparent',
white: '#FFFFFF',
black: '#090E34',
dark: '#1D2144',
primary: '#4A6CF7',
yellow: '#FBB040',
},
// This is all from fuse theme
boxShadow: {
signUp: '0px 5px 10px rgba(4, 10, 34, 0.2)',
image: '0px 3px 30px rgba(9, 14, 52, 0.1)',
pricing: '0px 7px 35px rgba(180, 189, 223, 0.4)',
},
animation: {
'spin-slow': 'spin 3s linear infinite',
},
opacity: {
12: '0.12',
38: '0.38',
87: '0.87',
},
rotate: {
'-270': '270deg',
15: '15deg',
30: '30deg',
60: '60deg',
270: '270deg',
},
scale: {
'-1': '-1',
},
transitionDuration: {
400: '400ms',
},
transitionTimingFunction: {
drawer: 'cubic-bezier(0.25, 0.8, 0.25, 1)',
},
},
},
plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/line-clamp'),
require('flowbite/plugin'),
require('flowbite-typography'),
],
};
英文:
I'm using tailwind and flowbite in my NX angular projects.
Everything works fine except the data attributes.
For example when I copy the example code for the default speed dial, the speed dial won't open.
I think this part in my tailwind config is the issue but I don't know how to fix it:
content: [
join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
...createGlobPatternsForDependencies(__dirname),
'./node_modules/flowbite/**/*.js',
],
package.json:
"flowbite": "^1.6.3",
project.json:
"scripts": ["node_modules/flowbite/dist/flowbite.min.js"]
Tailwind config:
const { createGlobPatternsForDependencies } = require('@nrwl/angular/tailwind');
const { join } = require('path');
// Todo Create a shared tailwind config
// https://blog.nrwl.io/set-up-tailwind-css-with-angular-in-an-nx-workspace-6f039a0f4479
module.exports = {
content: [
join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
...createGlobPatternsForDependencies(__dirname),
'./node_modules/flowbite/**/*.js',
],
darkMode: 'class',
theme: {
container: {
center: true,
padding: '1rem',
},
extend: {
colors: {
current: 'currentColor',
transparent: 'transparent',
white: '#FFFFFF',
black: '#090E34',
dark: '#1D2144',
primary: '#4A6CF7',
yellow: '#FBB040',
},
// This is all from fuse theme
boxShadow: {
signUp: '0px 5px 10px rgba(4, 10, 34, 0.2)',
image: '0px 3px 30px rgba(9, 14, 52, 0.1)',
pricing: '0px 7px 35px rgba(180, 189, 223, 0.4)',
},
animation: {
'spin-slow': 'spin 3s linear infinite',
},
opacity: {
12: '0.12',
38: '0.38',
87: '0.87',
},
rotate: {
'-270': '270deg',
15: '15deg',
30: '30deg',
60: '60deg',
270: '270deg',
},
scale: {
'-1': '-1',
},
transitionDuration: {
400: '400ms',
},
transitionTimingFunction: {
drawer: 'cubic-bezier(0.25, 0.8, 0.25, 1)',
},
},
},
plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/line-clamp'),
require('flowbite/plugin'),
require('flowbite-typography'),
],
};
答案1
得分: 1
I think it won't work this way. Usually, when you include a script into the page and specify a list of attributes required for a lib - they are just indicators for the scripts to set up listeners upon. So, for a regular JS lib to work, you need to initialize it over a finalized DOM structure. This is sort of proven by unfinished Angular adaptation as it doesn't use any attributes and uses a Service to control the accordion's collapsed state.
In the case of Angular, you have elements that appear on the page dynamically. The lib can't track that elements are being added. You could try to manually call the methods for interaction as it's done in the docs for TypeScript.
英文:
I think it won't work this way. Usually, when you include a script into the page and specify a list of attributes required for a lib - they are just indicators for the scripts to setup listeners upon. So, for regular JS lib to work you need to initialize it over a finalized DOM structure.
This is sorts of proven by unfinished Angular adaptation as it doesn't use any attributes and uses a Service to control accordion's collapsed state.
In case of Angular you have elements that appear on the page dynamically. Lib can't track that elements are being added.
You could try to manually call the methods for interaction as it's done in the docs for TypeScript.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论