首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >在angular material design provider定义中是否可以有三种以上的色调?

在angular material design provider定义中是否可以有三种以上的色调?
EN

Stack Overflow用户
提问于 2015-10-28 07:28:46
回答 1查看 316关注 0票数 1

现在看来,我只能在提供者中定义3个色调,而不允许创建一个可以用作class="md-primary md-hue-4"的名为hue-4的新色调。我认为只允许定义色调1-3和默认色调是正确的吗?

代码语言:javascript
复制
       $mdThemingProvider.definePalette('hc', {'50':'#000000','100':'#ff0000','200':'#ffc285','300':'#ff9e3d','400':'#ff8f1f','500':'#ff8000','600':'#e07100','700':'#c26100','800':'#a35200','900':'#854300','A100':'#ffffff','A200':'#ffdebd','A400':'#ff8f1f','A700':'#c26100'});

    $mdThemingProvider.definePalette('other', {'50':'#aff8f2','100':'#ff0000','200':'#34eede','300':'#11cbba','400':'#0eaea0','500':'#0c9286','600':'#0a766c','700':'#075952','800':'#053d38','900':'#03211e','A100':'#aff8f2','A200':'#68f3e6','A400':'#0eaea0','A700':'#075952'});

    $mdThemingProvider.theme('hc-thing')

        .primaryPalette('hc',{
            'default': '100', // by default use shade 400 from the pink palette for primary
            // intentions
            'hue-1': '100', // use shade 100 for the <code>md-hue-1</code> class
            'hue-2': '600', // use shade 600 for the <code>md-hue-2</code> class
            'hue-3': '50'
        })

        .accentPalette('other');

    $mdThemingProvider.setDefaultTheme('hc-thing');
EN

回答 1

Stack Overflow用户

发布于 2016-08-23 00:02:56

简短的回答是:不。

基于angular-mateiral official document (v1.1.0):

为颜色意图指定自定义色调

您可以从调色板中指定意向组默认使用的色调,以及md-hue-1、md-hue-2、md-hue-3类的色调。

默认情况下,底纹500、300 800和A100用于主要意图和警告意图,而A200、A100、A400和A700用于重音。

所以基本上,angular-material只会在md-hue-3之前对元素应用类,如果你尝试使用md-hue-4或更大的数字,它将被忽略,因为在框架中没有定义相关的css。

请注意,如果您尝试将hue-4添加到调色板,它将抛出错误:

代码语言:javascript
复制
// Don't do this, it will break
$mdThemingProvider.theme('default')
    .primaryPalette('pink', {
      'default': '400', // by default use shade 400 from the pink palette for primary intentions
      'hue-1': '100', // use shade 100 for the <code>md-hue-1</code> class
      'hue-2': '600', // use shade 600 for the <code>md-hue-2</code> class
      'hue-3': 'A100', // use shade A100 for the <code>md-hue-3</code> class
      'hue-4': 'A400', // I know you really want this but it won't work
    })

最好的方法是添加一个自定义css类并覆盖那里的颜色。

请记住,Material Design Guidelines不建议使用过多的调色板和过多的阴影

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/33380315

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档