第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何設(shè)置 ionic2-calendar 的 CSS 樣式？

如何設(shè)置 ionic2-calendar 的 CSS 樣式？

寶慕林4294392 2022-06-16 10:49:24
我正在使用 Ionic 5.0.0、Angular 8 并使用ionic2-calendar插件開發(fā)應(yīng)用程序。雖然插件演示工作正常，但我似乎無法修改日歷的樣式。該文檔列出了似乎用于每個元素的幾個類，但是將它們添加到我自己的 scss 文件中并添加 !important （或不添加）并沒有真正起作用。我嘗試將它們添加到全局 scss 以及主應(yīng)用程序之一。除此之外，我嘗試使用瀏覽器檢查器來檢查哪個 css 選擇器實(shí)際上是在為有問題的元素設(shè)置樣式，但屬性選擇器似乎是隨機(jī)的。例如當(dāng)天是：.monthview-current[_ngcontent-ljn-c3]而且重裝之后就是.monthview-current[_ngcontent-igq-c4]很明顯，該方法也不起作用...我也嘗試添加 td.monthview-current，但也沒有用...這些是我在網(wǎng)上查找此插件時發(fā)現(xiàn)的建議和示例代碼并查看插件文件。如果有人有任何想法，我將非常感激。編輯：我找到了一種改變它的方法，但只能通過插件的源文件，我必須假設(shè)這不是正確的方法......有 JSON 文件，JS 文件，我必須手動改變所有這些。
查看完整描述

4 回答

?
慕容森

TA貢獻(xiàn)1853條經(jīng)驗 獲得超18個贊

如果樣式存在于角度組件的文件中，由于視圖封裝，它將不會被應(yīng)用。您需要在全局樣式表中指定樣式，并且在大多數(shù)情況下您需要添加important到樣式中。


為了進(jìn)一步闡述，


-src

  -assets

    -calendar.css (add styles here)

  -app

    -my-calendar

      -my-calendar.page.html

      -my-calendar.page.ts

      -my-calendar.page.css (and not here)

一些常用的自定義項：（assets/calendar.css）


將樣式應(yīng)用于所選日期：


.monthview-selected{

    font-weight: bold;

    background-color: #F1F1F1 !important;

    color: #333 !important;

}

將樣式應(yīng)用于有事件的日期：


.monthview-primary-with-event, .calendar-event-inner{

    background-color: #1a92d0!important;

}

禁用日歷中的所有邊框：


td, th {

    border: 0 !important;

  }

應(yīng)用樣式后的最終日歷：

http://img1.sycdn.imooc.com//62aa9a51000104ec03820416.jpg

HTML


<calendar [eventSource]="eventSource" [calendarMode]="calendar.mode" [currentDate]="calendar.currentDate"

    (onCurrentDateChanged)="onCurrentDateChanged($event)" (onRangeChanged)="reloadSource(startTime, endTime)"

    (onEventSelected)="onEventSelected($event)" (onTitleChanged)="onViewTitleChanged($event)"

    (onTimeSelected)="onTimeSelected($event)" step="30" (showEventDetail)="true" formatDayHeader="EEEEE"

    allDayLabel="All Day" startHour="9" endHour="20">

  </calendar>


查看完整回答
反對 回復(fù) 2022-06-16
?
MMMHUHU

TA貢獻(xiàn)1834條經(jīng)驗 獲得超8個贊

我遇到了同樣的問題，并且解決方案與其他答案中所述的封裝有關(guān)。


樣式不適用于子組件


嘗試更新您的組件：


@Component({

  ...

  encapsulation: ViewEncapsulation.None // <------

})

export class xxComponent{

然后，您可以根據(jù)子類應(yīng)用樣式，例如。


.scss：


.monthview-container {

  ...;

}


查看完整回答
反對 回復(fù) 2022-06-16
?
一只斗牛犬

TA貢獻(xiàn)1784條經(jīng)驗 獲得超2個贊

盡管我不確定其原因，但在我的情況下，解決方案似乎是使用全局樣式表（括號中沒有任何屬性選擇器）而不是模塊特定的樣式表。這并不理想，但我猜它有效！



查看完整回答
反對 回復(fù) 2022-06-16
?
哈士奇WWW

TA貢獻(xiàn)1799條經(jīng)驗 獲得超6個贊

::ng-deep {

.monthview-selected {

    background-color: blue !important;

    color: white !important;

    border-radius: 50%;

}

}


查看完整回答
反對 回復(fù) 2022-06-16
  • 4 回答
  • 0 關(guān)注
  • 163 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號