ウェブサイト検索

javascript - ファイルをゴミ箱に移動するアニメーションを実装するためのHTML/CSS/JS

フォルダーツリーからゴミ箱に移動するアクションを提供したいです。

ユーザーが削除ボタンをクリックしたとき、アイテムをゴミ箱に移動するアニメーションを表示したいです。

例のレイアウト。

+-------- | - dir1 | - file1 x | - file2 x | - subDir1 | - file3 x +-------- | Trash +--------

要素はそれが存在するディレクトリに対して『相対的』に配置されるのに対し、ゴミ箱は最上位に対して相対的であるため、どうやってそれを行うのかがわかりませんでした。

最小限のレイアウトを含むサンプルコード。

https://codepen.io/anon/pen/NaLEjx

xアイコンをクリックすると、ファイルは「ゴミ箱」とラベル付けされた要素に移動するはずです。

それをどうやってするか教えてください。

続きを読む →

typescript - Angular Universal は scss ファイル内の相対 URL を解決できません

私は既存の Angular アプリを Universal に移行して、より SEO フレンドリーにしようとしています。これらのガイド(angular-cli、公式 Angular サイト)に従ってすべて実施しました。コンパイルは成功し、Express サーバーも起動しますが、エラー ERROR { Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'footer-bg.png' Error: Cannot match any routes. URL Segment: 'footer-bg.png' が発生します。このエラーは私の SCSS ファイル内の背景 URL リンクに関連しています。

Angular Universalでアセットのリンクを正しく解決するにはどうすればよいですか?

続きを読む →

angular - ボタンを通じて Ionic Alert の CssClass を変更する

アラートのボタンをクリックしたときに、アラートのCssClassを変更しようとしています。

buttons: [ { text: this.languageData.BUTTONS.CANCEL, handler: data => { } }, { text: this.languageData.BUTTONS.LOGIN, handler: data => { if(data){ if(...){ this.setDeveloperData(); }else{ this.loginPrompt.setCssClass('LoginError'); return false; }

続きを読む →

javascript - Google マップの CSS が自分のスタイルを上書きしてしまいます。これを防ぐにはどうすればいいですか?

私は Typescript と一緒に Angular 7.2.2 を使用しています。

私は index.html の <script> タグを通じて "https://maps.googleapis.com/maps/api/js?key=myAPIkey" から Google マップをインポートしています

スクリプトの読み込みが完了するとすぐに、Google マップのスタイルによってアプリケーション全体で自分のスタイルの一部が上書きされているのが見えます。

これを防ぎ、Googleマップのスタイルが私がマップをレンダリングするコンポーネントにのみ適用されるようにするにはどうすればいいですか?

表示コンポーネント内からスクリプトを動的に読み込もうとしましたが、明らかにスタイルのカプセル化は「styleUrls」パラメータによって提供されるスタイルにのみ適用されます。

ありがとうございます!

回答 #1

続きを読む →

javascript - Material UI CSS-in-JS の型付け

私はReact、React Admin、Babel、TypeScript、Webpackを使ってプロジェクトを設定しています。使用しているエディタはVSCodeです。

私は新しいMaterial UIのスタイリングソリューションを使おうとしており、特にStyled ComponentsのAPIを使おうとしています。

TSLint を設定して、変数宣言に typedef を追加することが必須になるようにしています。

次のコードを書くとき:

const StyledButton = styled(Button)({ backgroundColor: 'yellow', height: 10, width: 80, });

TSLint は次のエラーを投げます: expected variable-declaration: 'StyledButton' to have a typedef (typedef)tslint(1)。渡

続きを読む →

Webpack と TypeScript で CSS モジュールを使用する

私は、Typescript と Next JS を使用しているプロジェクトに CSS モジュールを統合しようとしています。これまでの設定は次の通りです:

module.exports = withCustomBabelConfigFile( withTypeScript(withCSS({ cssModules: true, babelConfigFile: path.resolve("./babel.config.js"), webpack(config, options) { config.module.rules.push({ test: /\.css$/, include: path.join(__dirname, 'pages/index.tsx'), use: [ 'style-loader', {

続きを読む →

node.js - scss ファイル内の相対 URL パス

私は自分のscssファイルにいくつかの相対URLパスを持っています。例えば:

&.id-1 { background-image: url("./assets/images/live-sports/icon-soccer.svg"); }

そして他の要素については、このURLパスがあります

&.id-1 { -webkit-mask-image: url("./assets/images/live-sports/terminal/icon-soccer.svg"); }

そのプロジェクトの angular.json のビルドオプションは次の

続きを読む →

html - css アニメーションと Angular:Angular プロジェクトの分割ページに対して「イーズイン - イーズアウト」アニメーションをうまく実装できない

私は以下のコードに取り組んでおり、ホバー時に両側をスライドさせたいと考えています。ご確認ください。私は Angular、HTML、TypeScript、および CSS を使用して作業しています。画面の各側にマウスをホバーするとイーズアウト・イーズインするはずですが、それが機能していません。以下が HTML です。

<div class="container"> <!-- LEFT SIDE --> <div class="split left" id="upComing"> <h1 id="uce">THE UPCOMING EVENT</h1> <table id="tableTimer"> <tr id="timerValue"> <td id="days">{{timer.days}}</td> &l

続きを読む →

html - Material UI の Input API で context を使って error プロップと css をどのように使用しますか

私は {error} とその使用法のために MUI Input API のプロパティと CSS を使用する必要があります。

私のコードはこんな感じです:

const [value, setValue] = useState<string>(cell.value); const [startAdornment, setStartAdornment] = useState<adornmentTypes>(""); const [

続きを読む →

javascript - サポートパッケージをパッケージングせず、scssファイルをコンパイルせずに使えるVueコンポーネントライブラリ

私は、私のチームが取り組んでいるコンポーネントライブラリをどのように公開するかを考える任務を負っています。これらのコンポーネントは、社内のさまざまなアプリケーションによって利用されます。私には以下の制約があります。

  • ライブラリは、社内のローカルリポジトリから npm パッケージとして利用されます。(この部分は理解しています)
  • コンポーネントは、パッケージ内で TypeScript インターフェース (*.d.ts) の参照を含む JavaScript にコンパイルする必要があります。
  • サードパーティのパッケージ(Vueを含む)はバンドルされるべきではありません。むしろ、コンポーネントが追加されたときに依存するnpmパッケージがプロジェクトに追加され、npm i実行後に利用可能になることが望ましいです。
  • コンパイルされた CSS バンドルはパッケージに含めるべきですが、必要なときにプロジェクト内で別途参照する必要があります。
  • コンポーネントのスタイルを構成する生の SCS

    続きを読む →