mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
Added option to set text for HeaderAction(Link) component
This commit is contained in:
parent
6a5f461017
commit
7f1a769889
4 changed files with 13 additions and 13 deletions
|
@ -2,10 +2,11 @@
|
||||||
export let type = undefined;
|
export let type = undefined;
|
||||||
export let icon = undefined;
|
export let icon = undefined;
|
||||||
export let isOpen = undefined;
|
export let isOpen = undefined;
|
||||||
|
export let text = undefined;
|
||||||
|
|
||||||
let elRigthPanel = undefined;
|
let elRigthPanel = undefined;
|
||||||
|
|
||||||
import { cx } from '../../../lib';
|
import { cx, optional } from '../../../lib';
|
||||||
import Icon from '../../Icon/Icon.svelte';
|
import Icon from '../../Icon/Icon.svelte';
|
||||||
import { slide } from 'svelte/transition';
|
import { slide } from 'svelte/transition';
|
||||||
|
|
||||||
|
@ -23,12 +24,13 @@
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
aria-label={type}
|
aria-label={type}
|
||||||
class={cx('--header__action', isOpen && '--header__action--active')}
|
class={cx('--header__action', isOpen && '--header__action--active', text && '--header__action--text')}
|
||||||
type="button"
|
type="button"
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
isOpen = true;
|
isOpen = true;
|
||||||
}}>
|
}}>
|
||||||
<Icon {...icon} />
|
<Icon {...icon} />
|
||||||
|
{optional(text)}
|
||||||
</button>
|
</button>
|
||||||
{#if isOpen}
|
{#if isOpen}
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -3,18 +3,12 @@
|
||||||
export let type = undefined;
|
export let type = undefined;
|
||||||
export let icon = undefined;
|
export let icon = undefined;
|
||||||
export let linkIsActive = undefined;
|
export let linkIsActive = undefined;
|
||||||
import { cx } from '../../../lib';
|
export let text = undefined;
|
||||||
|
import { cx, optional } from '../../../lib';
|
||||||
import Icon from '../../Icon/Icon.svelte';
|
import Icon from '../../Icon/Icon.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.action-link {
|
|
||||||
text-align: center;
|
|
||||||
align-items: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
justify-content: center;
|
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
.subject-divider {
|
.subject-divider {
|
||||||
color: #525252;
|
color: #525252;
|
||||||
padding-bottom: 4px;
|
padding-bottom: 4px;
|
||||||
|
@ -25,8 +19,8 @@
|
||||||
|
|
||||||
<a
|
<a
|
||||||
aria-label={type}
|
aria-label={type}
|
||||||
class={cx('--header__action', linkIsActive && '--header__action--active')}
|
class={cx('--header__action', linkIsActive && '--header__action--active', text && '--header__action--text')}
|
||||||
class:action-link={true}
|
|
||||||
{href}>
|
{href}>
|
||||||
<Icon {...icon} />
|
<Icon {...icon} />
|
||||||
|
{optional(text)}
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
export { cx } from './cx';
|
export { cx } from './cx';
|
||||||
export { css } from './css';
|
export { css } from './css';
|
||||||
export { fillArray } from './fill-array';
|
export { fillArray } from './fill-array';
|
||||||
|
export { optional } from './optional';
|
||||||
|
|
3
src/lib/optional.js
Normal file
3
src/lib/optional.js
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
const optional = x => x || '';
|
||||||
|
|
||||||
|
export { optional };
|
Loading…
Add table
Add a link
Reference in a new issue