flowbite数据属性在Angular NX中不起作用

huangapple go评论58阅读模式
英文:

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.

huangapple
  • 本文由 发表于 2023年2月16日 18:19:23
  • 转载请务必保留本文链接:https://go.coder-hub.com/75470810.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定